/* Osool Media Center widget */
.omc {
	--omc-ink: #1c1c1c;
	--omc-navy: #1b1d38;
	--omc-muted: #646464;
	--omc-blue: #0088d3;
	--omc-blue-dark: #0072b1;
	--omc-sky: #9ac7e5;
	--omc-line: #cdcdcd;
	--omc-surface: #f6f6f5;
	--omc-radius: 24px;
	--omc-gap: 24px;
	--omc-section: 96px;
	--omc-ease: cubic-bezier(.22, .61, .36, 1);
	color: var(--omc-ink);
}

.omc *,
.omc *::before,
.omc *::after {
	box-sizing: border-box;
}

.omc h1,
.omc h2,
.omc h3,
.omc p,
.omc ul {
	margin: 0;
}

.omc ul {
	padding: 0;
	list-style: none;
}

.omc img {
	display: block;
	max-width: 100%;
}

.omc .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.omc a:focus-visible,
.omc button:focus-visible {
	outline: 2px solid var(--omc-blue);
	outline-offset: 3px;
}

/* Shared --------------------------------------------------------------- */
.omc-section {
	margin-top: var(--omc-section);
}

.omc .omc-title {
	color: var(--omc-ink);
	font-size: 44px;
	font-weight: 500;
	line-height: 1.25;
}

.omc .omc-subtitle {
	margin-top: 12px;
	color: var(--omc-muted);
	font-size: 16px;
	line-height: 1.5;
}

.omc-section__head {
	margin-bottom: 32px;
}

.omc-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px !important;
	color: var(--omc-navy);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.omc-eyebrow__icon {
	flex: none;
}

.omc-body {
	margin-top: 20px;
	color: var(--omc-ink);
	font-size: 16px;
	line-height: 1.5;
}

.omc-body p + p {
	margin-top: 1.25em;
}

.omc-chip {
	display: inline-flex;
	align-items: center;
	min-height: 31px;
	padding: 4px 14px;
	border: 1px solid var(--omc-line);
	border-radius: 999px;
	background: #f7f7f7;
	color: var(--omc-ink);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.omc .omc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 32px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}

.omc .omc-btn:active {
	transform: scale(.98);
}

.omc .omc-btn svg {
	flex: none;
	transition: transform .25s var(--omc-ease);
}

.omc .omc-btn:hover svg {
	transform: translateY(2px);
}

.omc .omc-btn--blue {
	border-color: var(--omc-blue);
	background: var(--omc-blue);
	color: #fff;
}

.omc .omc-btn--blue:hover {
	border-color: var(--omc-blue-dark);
	background: var(--omc-blue-dark);
	color: #fff;
}

.omc .omc-btn--light {
	border-color: var(--omc-line);
	background: var(--omc-surface);
	color: var(--omc-ink);
}

.omc .omc-btn--light:hover {
	border-color: var(--omc-navy);
	background: var(--omc-navy);
	color: #fff;
}

/* Header ------------------------------------------------------------------ */
.omc-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
	margin-bottom: 48px;
	padding-bottom: 32px;
	border-bottom: 1px solid #9b9b9b;
}

.omc .omc-header__title {
	color: var(--omc-ink);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.2;
}

.omc-header__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 40px;
}

.omc .omc-header__links a {
	color: var(--omc-line);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: color .2s ease;
}

.omc .omc-header__links a:hover {
	color: var(--omc-blue);
}

/* Intro ------------------------------------------------------------------- */
.omc-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
	align-items: center;
	gap: 40px;
}

.omc .omc-intro__heading {
	color: var(--omc-ink);
	font-size: 48px;
	font-weight: 600;
	line-height: 1.3;
}

.omc-intro__body {
	margin-top: 24px;
	max-width: 640px;
	font-size: 16px;
	line-height: 1.5;
}

.omc-intro__media {
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--omc-radius);
	background: var(--omc-surface);
}

.omc .omc-intro__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Official downloads -------------------------------------------------------- */
.omc-downloads__list {
	display: grid;
	gap: var(--omc-gap);
}

.omc-download {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	grid-template-areas:
		"icon text text"
		"chip .    btn";
	align-items: center;
	gap: 28px 24px;
	padding: 32px;
	border-radius: var(--omc-radius);
	background: var(--omc-navy);
	color: #fff;
}

.omc-download__icon {
	display: inline-flex;
	grid-area: icon;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border: 1px solid rgba(232, 232, 232, .12);
	border-radius: 12px;
	background: rgba(247, 247, 247, .1);
	color: #fff;
}

.omc-download__text {
	grid-area: text;
	align-self: start;
}

.omc .omc-download__title {
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.omc .omc-download__desc {
	margin-top: 12px;
	color: rgba(255, 255, 255, .85);
	font-size: 16px;
	line-height: 1.5;
}

.omc-download__chip {
	display: inline-flex;
	grid-area: chip;
	justify-self: start;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid rgba(232, 232, 232, .12);
	border-radius: 999px;
	background: rgba(247, 247, 247, .1);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}

.omc-download__btn {
	grid-area: btn;
}

/* Logos ------------------------------------------------------------------- */
.omc-logos {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"text grid"
		"actions grid";
	grid-template-rows: auto 1fr;
	gap: 0 32px;
}

.omc-logos__text {
	grid-area: text;
	padding-top: 8px;
}

.omc-logos__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	grid-area: actions;
	margin-top: 24px;
}

.omc-logos__grid {
	display: grid;
	grid-area: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-content: start;
}

.omc-logo__card {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 301 / 179;
	padding: 20px;
	border: 1px solid var(--omc-line);
	border-radius: var(--omc-radius);
	background: var(--omc-logo-bg, var(--omc-surface));
}

.omc .omc-logo__img {
	width: 36%;
	max-height: 60%;
	object-fit: contain;
}

.omc .omc-logo__caption {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* Brand colours ------------------------------------------------------------- */
.omc-colors {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 32px;
}

.omc-colors__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 24px;
}

.omc-color {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.omc-color__swatch {
	width: 100px;
	max-width: 100%;
	aspect-ratio: 1;
	margin-bottom: 14px;
	border-end-start-radius: 100%;
	background: var(--omc-swatch);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}

.omc .omc-color__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.omc .omc-color__copy {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--omc-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.omc .omc-color__copy:hover,
.omc .omc-color__copy:focus {
	background: none;
	color: var(--omc-blue);
}

.omc-color__copied {
	position: absolute;
	bottom: calc(100% + 6px);
	inset-inline-start: 0;
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--omc-navy);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s var(--omc-ease);
	pointer-events: none;
}

.omc-color__copied:empty {
	display: none;
}

.omc-color__copy.is-copied .omc-color__copied {
	opacity: 1;
	transform: none;
}

/* Approved images ----------------------------------------------------------- */
.omc-images__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--omc-gap);
}

.omc-image {
	padding: 24px;
	border: 1px solid var(--omc-line);
	border-radius: var(--omc-radius);
	background: var(--omc-surface);
}

.omc-image__media {
	aspect-ratio: 580 / 280;
	overflow: hidden;
	border-radius: var(--omc-radius);
	background: #e3e5e6;
}

.omc .omc-image__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--omc-ease);
}

.omc-image:hover .omc-image__img {
	transform: scale(1.03);
}

.omc .omc-image__title {
	margin-top: 24px;
	color: var(--omc-ink);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.omc .omc-image__desc {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.5;
}

.omc .omc-image__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	color: var(--omc-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: color .2s ease;
}

.omc .omc-image__link:hover {
	color: var(--omc-blue);
}

.omc .omc-image__link svg {
	transition: transform .25s var(--omc-ease);
}

.omc .omc-image__link:hover svg {
	transform: translateY(2px);
}

/* Banner (full width) ------------------------------------------------------- */
.omc-banner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
	grid-template-areas:
		"eyebrow art"
		"title   art"
		"text    art"
		"btn     art";
	grid-template-rows: auto auto auto 1fr;
	align-items: start;
	gap: 0 48px;
	margin-top: var(--omc-section);
	padding-block: 96px;
	background: var(--omc-sky);
	/* Paint the blue edge to edge of the screen, whatever the container width. */
	box-shadow: 0 0 0 100vmax var(--omc-sky);
	clip-path: inset(0 -100vmax);
}

.omc .omc-banner__eyebrow {
	grid-area: eyebrow;
	margin-bottom: 16px;
	color: var(--omc-ink);
	font-size: 14px;
	font-weight: 600;
}

.omc .omc-banner__title {
	grid-area: title;
	color: var(--omc-navy);
	font-size: 44px;
	font-weight: 500;
	line-height: 1.3;
}

.omc .omc-banner__text {
	grid-area: text;
	margin-top: 20px;
	max-width: 480px;
	font-size: 16px;
	line-height: 1.5;
}

.omc-banner__btn {
	grid-area: btn;
	justify-self: start;
	margin-top: 32px;
}

.omc-banner__art {
	grid-area: art;
	align-self: center;
}

.omc .omc-banner__img {
	width: 100%;
	height: auto;
}

/* Tablet ---------------------------------------------------------------- */
@media (max-width: 1024px) {
	.omc {
		--omc-section: 72px;
	}

	.omc .omc-title,
	.omc .omc-banner__title {
		font-size: 36px;
	}

	.omc .omc-intro__heading {
		font-size: 38px;
	}

	.omc-intro {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.omc-logos {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "text" "grid" "actions";
		grid-template-rows: none;
	}

	.omc-logos__grid {
		margin-top: 32px;
	}

	.omc-colors {
		grid-template-columns: minmax(0, 1fr);
	}

	.omc-banner {
		gap: 0 32px;
	}
}

/* Phones (matches the 393px mobile design) ---------------------------------- */
@media (max-width: 767px) {
	.omc {
		--omc-section: 56px;
		--omc-radius: 16px;
		--omc-gap: 20px;
	}

	.omc-header {
		display: none; /* not in the mobile design */
	}

	.omc .omc-title,
	.omc .omc-banner__title {
		font-size: 26px;
	}

	.omc .omc-subtitle,
	.omc-body,
	.omc-intro__body {
		font-size: 14px;
	}

	.omc-intro {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.omc .omc-intro__heading {
		font-size: 28px;
	}

	.omc-intro__body {
		margin-top: 12px;
	}

	.omc-intro__media {
		aspect-ratio: 345 / 245;
	}

	.omc-section__head {
		margin-bottom: 24px;
	}

	.omc-download {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "icon" "text" "chip" "btn";
		gap: 16px;
		padding: 24px;
		border-radius: 20px;
	}

	.omc-download__icon {
		width: 48px;
		height: 48px;
		border-radius: 10px;
	}

	.omc-download__icon svg {
		width: 24px;
		height: 24px;
	}

	.omc .omc-download__desc {
		font-size: 14px;
	}

	.omc .omc-btn {
		width: 100%;
		min-height: 48px;
		font-size: 15px;
	}

	.omc-logos__grid {
		gap: 20px 16px;
		margin-top: 24px;
	}

	.omc-logo__card {
		aspect-ratio: 165 / 180;
		border-radius: 16px;
	}

	.omc .omc-logo__img {
		width: 62%;
	}

	.omc .omc-logo__caption {
		margin-top: 8px;
		font-size: 12px;
	}

	.omc-logos__actions {
		align-items: stretch;
		gap: 20px;
	}

	.omc-logos__actions .omc-chip {
		align-self: flex-start;
	}

	.omc-colors__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 24px;
	}

	.omc-color__swatch {
		width: 96px;
	}

	.omc-images__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.omc-image {
		padding: 16px;
	}

	.omc .omc-image__title {
		margin-top: 16px;
		font-size: 16px;
	}

	.omc .omc-image__desc {
		margin-top: 8px;
		font-size: 14px;
	}

	.omc-banner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "eyebrow" "art" "title" "text" "btn";
		grid-template-rows: none;
		padding-block: 40px;
	}

	.omc-banner__art {
		margin: 4px 0 24px;
	}

	.omc .omc-banner__title {
		font-size: 22px;
	}

	.omc .omc-banner__text {
		display: -webkit-box;
		margin-top: 16px;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 14px;
	}

	.omc-banner__btn {
		justify-self: stretch;
		margin-top: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.omc *,
	.omc *::before,
	.omc *::after {
		transition: none !important;
	}
}