/*
 * Omegamatrix TrackIT — base stylesheet.
 *
 * Token values are lifted from the live site's computed styles so the rebuild
 * matches it exactly. Source of truth for the palette and type scale is
 * theme.json; the custom properties below mirror it for use outside blocks.
 *
 * Order: tokens → reset → typography → layout → header → nav → footer →
 * components → utilities → print.
 */

/* ------------------------------------------------------------------ tokens */

:root {
	/* Palette — extracted from the Ambient theme options and page styles. */
	--omtk-brand-red: #d71920;
	--omtk-accent-red: #dd3333;
	--omtk-navy: #1e3062;
	--omtk-navy-deep: #001a70;
	--omtk-nav-link: #333;   /* resting main-nav link colour, measured from live */
	--omtk-heading: #38416c;
	--omtk-body: #2d2d2d;
	--omtk-muted: #969696;
	--omtk-line: #dbdbdb;
	--omtk-surface: #f3f3f3;
	--omtk-surface-alt: #fafafa;
	--omtk-white: #fff;
	--omtk-black: #000;

	/* Typography */
	--omtk-font-heading: Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--omtk-font-body: Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--omtk-font-alt: "Titillium Web", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--omtk-fs-base: 16px;
	--omtk-lh-base: 1.7;

	/* Layout */
	--omtk-container: 1100px;
	--omtk-container-wide: 1300px;
	--omtk-gutter: 20px;

	/* Header — 100px matches the live site's menu area height. */
	--omtk-header-height: 100px;
	--omtk-header-height-sticky: 70px;
	--omtk-logo-max-height: 100px;

	--omtk-footer-bottom-height: 50px;

	/* Motion */
	--omtk-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--omtk-duration: 0.3s;

	--omtk-z-header: 100;
	--omtk-z-mobile-nav: 110;
	--omtk-z-to-top: 90;
}

/* ------------------------------------------------------------------- reset */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--omtk-white);
	color: var(--omtk-body);
	font-family: var(--omtk-font-body);
	font-size: var(--omtk-fs-base);
	line-height: var(--omtk-lh-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;

	/*
	 * No form control may exceed its container.
	 *
	 * WordPress's comment form renders `<textarea cols="45">`, which is wider
	 * than a 390px phone screen and made the page scroll sideways by 81px.
	 * Nothing in the theme had ever constrained a form control's width, so any
	 * control with an intrinsic size attribute could do the same.
	 */
	max-width: 100%;
	box-sizing: border-box;
}

textarea {
	width: 100%;
}

button {
	cursor: pointer;
}

a {
	color: var(--omtk-heading);
	text-decoration: none;
	transition: color var(--omtk-duration) var(--omtk-ease);
}

a:hover,
a:focus-visible {
	color: var(--omtk-accent-red);
}

:focus-visible {
	outline: 2px solid var(--omtk-accent-red);
	outline-offset: 2px;
}

::selection {
	background: var(--omtk-accent-red);
	color: var(--omtk-white);
}

hr {
	height: 0;
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--omtk-line);
}

/* -------------------------------------------------------------- typography */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	color: var(--omtk-heading);
	font-family: var(--omtk-font-heading);
	font-weight: 500;
	line-height: 1.25;
}

/*
 * A long unbreakable word must not push the page sideways.
 *
 * "EnTrackMRO&Prod" is one 15-character token with no break opportunity in it.
 * At 45px it measures 391px, and the content column on a phone is 300px, so
 * the page scrolled 46px sideways — a horizontal scrollbar on a product page,
 * caused by a product name. Headings get an explicit break opportunity rather
 * than the browser's default of letting the word overflow.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

h1 { font-size: 45px; line-height: 1.2; }
h2 { font-size: 35px; }
h3 { font-size: 27px; line-height: 1.3; }
h4 { font-size: 21px; line-height: 1.4; }
h5 { font-size: 18px; }

h6 {
	font-size: 16px;
	font-weight: 600;
}

p {
	margin: 0 0 1.4em;
	font-family: var(--omtk-font-heading);
	font-size: 16px;
	font-weight: 500;
}

ul,
ol {
	margin: 0 0 1.4em;
	padding-left: 1.3em;
}

blockquote {
	margin: 0 0 1.4em;
	padding-left: 24px;
	border-left: 3px solid var(--omtk-accent-red);
	font-style: italic;
}

/* ------------------------------------------------------------------ layout */

.omtk-site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.omtk-main {
	flex: 1 0 auto;
}

.omtk-container {
	width: 100%;
	max-width: calc(var(--omtk-container) + (var(--omtk-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--omtk-gutter);
}

/*
 * The original's content column is not fluid: it steps down through a fixed
 * ladder — 1100, 950, 768, 600, 420, 300 — and holds each width until the next
 * breakpoint. This theme used a single 1100px maximum that then went fluid,
 * which made the content column wider than the original's at every width below
 * 1201px: 728px against 600px at tablet, 350px against 300px on a phone.
 *
 * That is not a cosmetic difference. Content width decides where every line of
 * text wraps and how large every full-width image renders, so it moves the
 * height of every page at those widths — the tablet column of the geometry
 * audit was reading against a layout the original never produces.
 *
 * The steps below were measured off the original at fifteen widths, loading
 * the page fresh at each one rather than resizing, because resizing leaves the
 * container at a stale width and reports boundaries that do not exist.
 */
@media (max-width: 1200px) {
	:root {
		--omtk-container: 950px;
	}
}

@media (max-width: 1024px) {
	:root {
		--omtk-container: 768px;
	}
}

@media (max-width: 768px) {
	:root {
		--omtk-container: 600px;
	}
}

@media (max-width: 600px) {
	:root {
		--omtk-container: 420px;
	}
}

@media (max-width: 480px) {
	:root {
		--omtk-container: 300px;
	}
}

/*
 * The same ladder, handed to WordPress's own layout engine.
 *
 * `theme.json` can only state one `contentSize`, and core writes it to
 * `--wp--style--global--content-size` on `body`, then every constrained group
 * reads that variable. Overriding the variable per breakpoint therefore moves
 * core's own layout with the ladder — which is what lets a plain
 * `core/group` reproduce the original's section wrapper with no custom block
 * behind it.
 */
body {
	--wp--style--global--content-size: var(--omtk-container);
}

/*
 * `minmax(0, 1fr)` rather than the implicit `auto` track. A grid item defaults
 * to `min-width: auto`, so an `auto` track grows to the widest item's
 * min-content and the grid then overflows its own container: the blog index and
 * the We Are Changing post rendered a 368px column inside a 300px container at
 * 390px wide and scrolled 23px sideways. The desktop rule below already did
 * this; the single-column default did not.
 */
.omtk-layout {
	display: grid;
	padding-block: 40px 70px;
	gap: 40px;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
	.omtk-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.omtk-no-sidebar .omtk-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.omtk-page__content > .alignwide {
	max-width: var(--omtk-container-wide);
	margin-inline: auto;
}

.omtk-page__content > .alignfull {
	max-width: none;
	margin-inline: 0;
}

/*
 * The banner image at the top of each product page. Full width, no crop, and
 * no fixed height — live serves a 1072x450 image scaled to the viewport.
 */
.omtk-page-banner {
	margin: 0;
}

.omtk-page-banner {
	position: relative;
}

.omtk-page-banner img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Some banners carry a single word of text over the artwork — "EVENTS" on the
 * Events page — which the original draws as a slider text layer positioned
 * over the image. Reproduced as a caption laid over the figure rather than a
 * slider, since there is one slide and it never moves.
 */
.omtk-page-banner__title {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	color: var(--omtk-white);
	font-family: var(--omtk-font-heading);
	font-size: 45px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
	text-shadow: 0 2px 12px rgb(0 0 0 / 35%);
	transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
	.omtk-page-banner__title {
		font-size: 28px;
	}
}

/*
 * Embedded media must not exceed its column.
 *
 * The EnTrackMRO&Prod video carries `width="1060"` on its iframe. With nothing
 * to constrain it the page scrolled sideways by 690px on a 390px phone and
 * 312px on a tablet — the single worst responsive fault on the site. The
 * original handled this by wrapping every embed in a `.fluidvids` div with
 * `max-width: 100%`; the same result is achieved here without the wrapper.
 *
 * The aspect-ratio is the one deliberate improvement: constraining width alone,
 * as the original does, leaves the height attribute intact, so on a narrow
 * screen the video is squashed into the wrong shape. Letting the height follow
 * the width keeps the picture correct.
 */
.omtk-page__content iframe,
.omtk-post__content iframe,
.omtk-page__content video,
.omtk-post__content video,
.omtk-page__content embed,
.omtk-post__content embed {
	max-width: 100%;
}

.omtk-page__content iframe[src*="youtube"],
.omtk-page__content iframe[src*="youtu.be"],
.omtk-page__content iframe[src*="vimeo"],
.omtk-post__content iframe[src*="youtube"],
.omtk-post__content iframe[src*="youtu.be"],
.omtk-post__content iframe[src*="vimeo"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* ------------------------------------------------------------------ header */

.omtk-header {
	position: relative;
	z-index: var(--omtk-z-header);
	background-color: var(--omtk-white);
}

.omtk-header__bar {
	border-bottom: 1px solid transparent;
	transition:
		height var(--omtk-duration) var(--omtk-ease),
		box-shadow var(--omtk-duration) var(--omtk-ease);
}

.omtk-header__inner {
	display: flex;
	height: var(--omtk-header-height);
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	transition: height var(--omtk-duration) var(--omtk-ease);
}

/* Sticky state — applied by theme.js, never by scroll-linked layout thrash. */
.omtk-header.is-stuck {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
}

.omtk-header.is-stuck .omtk-header__inner {
	height: var(--omtk-header-height-sticky);
}

.omtk-header.is-stuck .omtk-nav__link {
	color: var(--omtk-navy-deep);
	font-family: var(--omtk-font-heading);
	font-size: 13px;
}

/*
 * NOTE (Omegamatrix): the original theme intended this hover colour but the
 * value in its options was a malformed 7-digit hex ("#d719120"), so browsers
 * discarded the rule and the sticky nav had no hover state at all. Corrected
 * here to the TrackIT brand red.
 */
.omtk-header.is-stuck .omtk-nav__item:hover > .omtk-nav__link,
.omtk-header.is-stuck .omtk-nav__item.is-current > .omtk-nav__link {
	color: var(--omtk-brand-red);
}

/* Placeholder keeps the page from jumping when the header goes fixed. */
.omtk-header-spacer {
	display: block;
}

.omtk-logo {
	display: inline-flex;
	align-items: center;
}

.omtk-logo__img {
	max-height: var(--omtk-logo-max-height);
	width: auto;
	transition: max-height var(--omtk-duration) var(--omtk-ease);
}

.omtk-header.is-stuck .omtk-logo__img {
	max-height: 47px;
}

.omtk-logo__text {
	color: var(--omtk-navy);
	font-family: var(--omtk-font-heading);
	font-size: 24px;
	font-weight: 600;
}

/* -------------------------------------------------------------- navigation */

.omtk-nav {
	display: none;
}

@media (min-width: 1025px) {
	.omtk-nav {
		display: block;
	}
}

.omtk-nav__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	gap: 26px;
	list-style: none;
}

.omtk-nav__item {
	position: relative;
}

/*
 * Measured from the live site's computed styles, not from the theme options
 * dump. style_dynamic.css only declares the STICKY nav (Raleway / #001a70);
 * the resting nav inherits the theme's defaults, which are Titillium Web 13px
 * #333 with 1px tracking. Building from the options file alone gave the resting
 * state the sticky state's styling.
 */
.omtk-nav__link {
	display: inline-block;
	padding: 8px 0;
	color: var(--omtk-nav-link);
	font-family: var(--omtk-font-alt);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 24px;
	text-transform: uppercase;
}

.omtk-nav__text {
	position: relative;
	display: inline-block;
}

/* Underline sweep, matching the original menu hover. */
.omtk-nav__text::after {
	position: absolute;
	right: 0;
	bottom: -4px;
	left: 0;
	height: 2px;
	background-color: var(--omtk-accent-red);
	content: "";
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--omtk-duration) var(--omtk-ease);
}

.omtk-nav__item:hover > .omtk-nav__link .omtk-nav__text::after,
.omtk-nav__item:focus-within > .omtk-nav__link .omtk-nav__text::after,
.omtk-nav__item.is-current > .omtk-nav__link .omtk-nav__text::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.omtk-nav__item:hover > .omtk-nav__link,
.omtk-nav__item.is-current > .omtk-nav__link {
	color: var(--omtk-accent-red);
}

/* Dropdown toggle button is visually hidden on desktop — hover drives it there,
   but it stays in the DOM so keyboard users get an explicit control. */
.omtk-nav__toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	margin: -1px;
	background: none;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.omtk-nav__dropdown {
	position: absolute;
	top: 100%;
	left: -20px;
	min-width: 230px;
	padding-top: 12px;
	border-top: 2px solid var(--omtk-accent-red);
	background-color: var(--omtk-white);
	box-shadow: 0 6px 20px rgb(0 0 0 / 10%);
	opacity: 0;
	pointer-events: none;
	transform: translateY(6px);
	transition:
		opacity var(--omtk-duration) var(--omtk-ease),
		transform var(--omtk-duration) var(--omtk-ease),
		visibility var(--omtk-duration);
	visibility: hidden;
}

.omtk-nav__item--has-children:hover > .omtk-nav__dropdown,
.omtk-nav__item--has-children:focus-within > .omtk-nav__dropdown,
.omtk-nav__item--has-children.is-open > .omtk-nav__dropdown {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	visibility: visible;
}

.omtk-nav__sub {
	margin: 0;
	padding: 8px 0 14px;
	list-style: none;
}

.omtk-nav__sub .omtk-nav__link {
	display: block;
	padding: 9px 20px;
	font-size: 14px;
	text-transform: none;
}

.omtk-nav__chevron {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	margin-left: 6px;
	transform: rotate(45deg) translateY(-2px);
}

/* ------------------------------------------------------- mobile navigation */

.omtk-menu-toggle {
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
}

@media (min-width: 1025px) {
	.omtk-menu-toggle {
		display: none;
	}
}

.omtk-menu-toggle__box {
	display: block;
	width: 24px;
}

.omtk-menu-toggle__line {
	display: block;
	height: 2px;
	background-color: var(--omtk-navy-deep);
	transition:
		transform var(--omtk-duration) var(--omtk-ease),
		opacity var(--omtk-duration) var(--omtk-ease);
}

.omtk-menu-toggle__line + .omtk-menu-toggle__line {
	margin-top: 5px;
}

.omtk-menu-toggle[aria-expanded="true"] .omtk-menu-toggle__line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.omtk-menu-toggle[aria-expanded="true"] .omtk-menu-toggle__line:nth-child(2) {
	opacity: 0;
}

.omtk-menu-toggle[aria-expanded="true"] .omtk-menu-toggle__line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.omtk-mobile-nav {
	z-index: var(--omtk-z-mobile-nav);
	border-top: 1px solid var(--omtk-line);
	background-color: var(--omtk-white);
}

.omtk-mobile-nav[hidden] {
	display: none;
}

.omtk-mobile-nav__inner {
	max-height: calc(100vh - var(--omtk-header-height));
	padding: 10px var(--omtk-gutter) 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.omtk-mobile-nav__list,
.omtk-mobile-nav__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.omtk-mobile-nav .omtk-nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--omtk-line);
}

.omtk-mobile-nav .omtk-nav__link {
	flex: 1;
	padding: 14px 0;
}

.omtk-mobile-nav .omtk-nav__toggle {
	position: static;
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	margin: 0;
	clip-path: none;
	color: var(--omtk-navy-deep);
	overflow: visible;
}

.omtk-mobile-nav .omtk-nav__toggle[aria-expanded="true"] .omtk-nav__chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.omtk-mobile-nav__sub {
	width: 100%;
	padding: 0 0 10px 14px;
}

.omtk-mobile-nav__sub[hidden] {
	display: none;
}

.omtk-mobile-nav__sub .omtk-nav__item {
	border-bottom: 0;
}

.omtk-mobile-nav__sub .omtk-nav__link {
	padding: 10px 0;
	font-size: 14px;
	text-transform: none;
}

/* ------------------------------------------------------------------ footer */

.omtk-footer {
	position: relative;
	flex-shrink: 0;
	background-color: var(--omtk-navy);
	color: var(--omtk-white);
}

.omtk-footer--has-bg {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.omtk-footer--has-bg::before {
	position: absolute;
	inset: 0;
	background-color: rgb(30 48 98 / 88%);
	content: "";
}

.omtk-footer > * {
	position: relative;
}

/*
 * Every number below is measured off the original footer rather than chosen.
 * The original wraps its four widgets in a 1100px container padded 61px top and
 * bottom, breaks four columns to two at 1024px and two to one at 768px, and
 * leaves 40px between the columns once they stack.
 *
 * Measuring it was less obvious than it sounds: the footer's logo and its six
 * social icons are `loading="lazy"`, so in an off-screen measurement they never
 * load and the footer reports 260px when it actually renders 299px. Forcing
 * those seven images to load first is what produced these figures.
 */
.omtk-footer__top {
	padding-block: 61px;
}

.omtk-footer__columns {
	display: grid;
	column-gap: 30px;
	row-gap: 30px;
	grid-template-columns: 1fr;
}

@media (min-width: 769px) {
	.omtk-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.omtk-footer__columns {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Footer typography, again measured: Raleway 21px/28px for the column heading
 * with a 10px gap beneath it, and 16px/28px #969696 body copy with 10px
 * margins. The theme's own widget-title style — 16px, uppercase, 0.04em
 * tracking, 18px below — is a different design entirely and made every column
 * both shorter in the heading and taller overall than the original.
 */
.omtk-footer .omtk-widget__title {
	margin-bottom: 10px;
	font-size: 21px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 28px;
	text-transform: none;
}

.omtk-footer .omtk-widget p {
	margin-block: 10px;
	color: #969696;
	font-size: 16px;
	line-height: 28px;
}

/*
 * Social icons in the footer, laid out in a row.
 *
 * The original wrote `display: inline` and per-item padding as inline styles on
 * every `<li>`. The importer strips those — inline style attributes are not
 * something to carry into a rebuilt theme — which left six list items stacking
 * vertically and made the footer 470px tall against the original's 260px. The
 * layout belongs here, once, rather than repeated on every element.
 */
.omtk-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.omtk-footer-social li {
	margin: 0;
	padding: 0;
	line-height: 0;
}

.omtk-footer-social img {
	display: block;
	width: auto;
	height: 18px;
}

.omtk-footer a {
	color: var(--omtk-white);
}

.omtk-footer a:hover,
.omtk-footer a:focus-visible {
	color: var(--omtk-accent-red);
}

.omtk-widget__title {
	margin-bottom: 18px;
	color: var(--omtk-white);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.omtk-footer__bottom {
	border-top: 1px solid rgb(255 255 255 / 15%);
}

.omtk-footer__bottom-inner {
	display: flex;
	min-height: var(--omtk-footer-bottom-height);
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 12px;
}

.omtk-footer__copyright {
	margin: 0;
	color: var(--omtk-muted);
	font-size: 14px;
}

.omtk-footer__menu {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	gap: 20px;
	list-style: none;
	font-size: 14px;
}

/* ------------------------------------------------------------------ social */

.omtk-social {
	display: flex;
	flex-wrap: wrap;
	margin: 16px 0 0;
	padding: 0;
	gap: 14px;
	list-style: none;
}

.omtk-social__link {
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
}

.omtk-icon {
	width: 18px;
	height: 18px;
	fill: currentcolor;
}

/* -------------------------------------------------------------- components */

.omtk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 43px 17px;
	border: 2px solid var(--omtk-accent-red);
	background-color: transparent;
	font-family: var(--omtk-font-alt);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition:
		background-color var(--omtk-duration) var(--omtk-ease),
		color var(--omtk-duration) var(--omtk-ease),
		border-color var(--omtk-duration) var(--omtk-ease);
}

/*
 * The in-content button. Live uses this everywhere inside page copy - the
 * "KNOW MORE" links on Solutions, the CTA band's "BOOK A CALL" - and reserves
 * the larger .omtk-btn size for the hero. Measured from trackit.aero rather
 * than derived: 167x43 at 14px/600, 1px tracking, 19px line-height, 11px 36px
 * padding, 0.8px border.
 */
.omtk-btn--small {
	padding: 11px 36px;
	border-width: 0.8px;
	line-height: 19px;
}

.omtk-btn--solid {
	background-color: var(--omtk-accent-red);
	color: var(--omtk-white);
}

.omtk-btn--solid:hover,
.omtk-btn--solid:focus-visible {
	border-color: var(--omtk-brand-red);
	background-color: var(--omtk-brand-red);
	color: var(--omtk-white);
}

.omtk-btn--outline {
	color: var(--omtk-accent-red);
}

.omtk-btn--outline:hover,
.omtk-btn--outline:focus-visible {
	background-color: var(--omtk-accent-red);
	color: var(--omtk-white);
}

.omtk-separator {
	width: 40px;
	height: 0;
	border: 0;
	border-bottom: 2px solid var(--omtk-accent-red);
	margin: 20px 0;
}

.omtk-separator--center {
	margin-inline: auto;
}

.omtk-page-head {
	padding-block: 40px 24px;
}

.omtk-page-head__title {
	margin-bottom: 0;
}

.omtk-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 12px;
	padding: 0;
	gap: 8px;
	list-style: none;
	color: var(--omtk-muted);
	font-size: 13px;
}

.omtk-breadcrumbs__item + .omtk-breadcrumbs__item::before {
	margin-right: 8px;
	content: "/";
}

.omtk-post-list {
	display: grid;
	gap: 40px;
}

/*
 * One post per row, full column width — the original lists posts as a single
 * stack of wide cards, each 691px across inside a 733px column, not a
 * two-up grid. Halving the card width also halved the banner, which is the
 * feature of that listing, and made the page render at roughly half live's
 * height for the same three posts.
 */

.omtk-card__media {
	display: block;
	overflow: hidden;
}

.omtk-card__img {
	width: 100%;
	transition: transform 0.6s var(--omtk-ease);
}

.omtk-card:hover .omtk-card__img {
	transform: scale(1.04);
}

.omtk-card__body {
	padding-top: 18px;
}

/*
 * 30px/37px, measured off the original blog index where every card title runs
 * to two lines at 74px. At 21px ours fitted on one line, which took 48px off
 * each card and was part of why the listing measured 22% short.
 */
.omtk-card__title {
	font-size: 30px;
	line-height: 37px;
}

.omtk-post__meta {
	margin-bottom: 12px;
	color: var(--omtk-muted);
	font-size: 13px;
}

.omtk-post__cats::before {
	margin: 0 8px;
	content: "·";
}

.omtk-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 50px 0 0;
	padding: 0;
	gap: 8px;
	list-style: none;
}

.omtk-pagination .page-numbers {
	display: inline-flex;
	min-width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	padding-inline: 10px;
	border: 1px solid var(--omtk-line);
}

.omtk-pagination .page-numbers.current {
	border-color: var(--omtk-accent-red);
	background-color: var(--omtk-accent-red);
	color: var(--omtk-white);
}

.omtk-search {
	display: flex;
	max-width: 420px;
	gap: 8px;
}

/*
 * `min-width: 0` because a flex item defaults to `min-width: auto`, and an
 * `<input>`'s intrinsic width is its `size` attribute — 278px here. The field
 * therefore refused to shrink, and field + gap + button came to 368px inside
 * the 300px sidebar, scrolling the blog index and the We Are Changing post
 * 23px sideways on a phone.
 */
.omtk-search__field {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--omtk-line);
	background-color: var(--omtk-white);
}

.omtk-search__submit {
	padding: 10px 20px;
	border: 0;
	background-color: var(--omtk-accent-red);
	color: var(--omtk-white);
	font-size: 14px;
}

.omtk-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: var(--omtk-z-to-top);
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--omtk-accent-red);
	background-color: var(--omtk-accent-red);
	opacity: 0;
	transition: opacity var(--omtk-duration) var(--omtk-ease);
}

.omtk-to-top[hidden] {
	display: none;
}

.omtk-to-top.is-visible {
	opacity: 1;
}

.omtk-to-top__arrow {
	display: block;
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--omtk-white);
	border-left: 2px solid var(--omtk-white);
	transform: rotate(45deg) translate(2px, 2px);
}

.omtk-empty {
	padding-block: 40px;
}

/* ------------------------------------------------------ scroll reveal (JS) */

/*
 * Nothing is hidden until the script that reveals it is running.
 *
 * `.omtk-reveal-ready` is added to <html> by initReveal() itself, so if
 * theme.js fails to load or throws before that point, 61 animated blocks stay
 * visible instead of staying blank. The original relies on a `<noscript>`
 * override, which covers JavaScript being switched off but not JavaScript
 * being broken.
 */
.omtk-reveal {
	transition:
		opacity 0.7s var(--omtk-ease),
		transform 0.7s var(--omtk-ease);
	will-change: opacity, transform;
}

.omtk-reveal-ready .omtk-reveal {
	opacity: 0;
	transform: translateY(24px);
}

.omtk-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/*
 * The two variants the original actually uses, measured from its own keyframes
 * rather than chosen: `fadeInDown` runs `opacity 0 -> 1` with
 * `translate3d(0, -100%, 0) -> none`, `fadeIn` is opacity alone, and both run
 * for 1s. 61 blocks across the site are animated this way — 36 down, 25 plain —
 * and none of them was being tagged, so every page appeared statically where
 * the original scrolls into view.
 *
 * -100% is the element's own height, which is what animate.css does and what
 * gives the original its noticeable drop.
 */
.omtk-reveal--down,
.omtk-reveal--fade {
	transition-duration: 1s;
}

.omtk-reveal-ready .omtk-reveal--down {
	transform: translateY(-100%);
}

.omtk-reveal-ready .omtk-reveal--fade {
	transform: none;
}

.omtk-reveal--down.is-revealed,
.omtk-reveal--fade.is-revealed {
	transform: none;
}

/* No JS, or reduced motion: content must never stay invisible. */
.no-js .omtk-reveal {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------- utilities */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	margin: -1px;
	clip-path: inset(50%);
	overflow: hidden;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	z-index: 200;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 12px 20px;
	background-color: var(--omtk-white);
	clip-path: none;
	color: var(--omtk-heading);
}

.omtk-skip-link:focus {
	position: fixed;
}

.alignleft {
	float: left;
	margin: 0 24px 20px 0;
}

.alignright {
	float: right;
	margin: 0 0 20px 24px;
}

.aligncenter {
	margin-inline: auto;
}

/* ------------------------------------------------------ motion preferences */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.omtk-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------- print */

@media print {
	.omtk-header,
	.omtk-footer,
	.omtk-to-top,
	.omtk-layout__sidebar {
		display: none;
	}

	body {
		color: #000;
	}
}

/* ------------------------------------------------------------ event meta */

.omtk-event-meta {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 24px;
	padding: 0;
	gap: 10px 28px;
	list-style: none;
	color: var(--omtk-accent-red);
	font-family: var(--omtk-font-alt);
	font-size: 16px;
	font-weight: 600;
}

.omtk-event-actions {
	display: flex;
	flex-wrap: wrap;
	margin-top: 32px;
	gap: 14px;
}


/* ---------------------------------------------------------------- sections */

/*
 * A page section — what `omegamatrix/section` used to render, as a plain
 * `core/group` plus classes.
 *
 * The original's rows are a full-bleed band (background colour or image edge
 * to edge) with their content re-constrained to the grid. That is exactly what
 * an `alignfull` group with a constrained layout already does in core, so all
 * that is left here is the overlay and the text alignment. 147 sections across
 * the site, and none of them needs a block type.
 */
.omtk-section {
	position: relative;
}

.omtk-section > * {
	position: relative;
	z-index: 1;
}

/*
 * Background-image sections darken behind their text. The old block rendered a
 * dedicated overlay div for this; a pseudo-element costs no markup and cannot
 * be edited away by accident.
 */
.omtk-section--overlay::before {
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: var(--omtk-overlay, 0);
	content: "";
	pointer-events: none;
}

.omtk-section--align-center {
	text-align: center;
}

.omtk-section--align-right {
	text-align: right;
}

.omtk-section--bg {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*
 * The call-to-action band — "Have Questions About Our EnTrack Aviation Suite?"
 * with its BOOK A CALL button — repeated on nearly every page.
 */
.omtk-cta-band {
	padding-block: 32px;
	background-color: var(--omtk-navy);
	color: var(--omtk-white);
}

.omtk-cta-band :where(h1, h2, h3, h4, h5, h6, p) {
	color: var(--omtk-white);
	margin-block: 0;
}


/* ============================================ behaviours (was: blocks) */

/*
 * The behaviour styles below were written against the blocks plugin's own
 * token names. They are carried over unedited — transcribing 91 token
 * references by hand is exactly how a colour ends up one shade off — so the
 * names are aliased here instead, once.
 */
:root {
	--om-red: var(--omtk-accent-red);
	--om-red-dark: var(--omtk-brand-red);
	--om-navy: var(--omtk-navy);
	--om-heading: var(--omtk-heading);
	--om-body: var(--omtk-body);
	--om-muted: var(--omtk-muted);
	--om-line: var(--omtk-line);
	--om-surface: var(--omtk-surface);
	--om-white: var(--omtk-white);
	--om-container: var(--omtk-container);
	--om-gutter: var(--omtk-gutter);
	--om-font-heading: var(--omtk-font-heading);
	--om-font-body: var(--omtk-font-body);
	--om-ease: var(--omtk-ease);
	--om-duration: var(--omtk-duration);
}

/*
 * Styles for the four interactions the theme now owns outright. Carried
 * over from omegamatrix-blocks unchanged; every selector was already a
 * class, never a block.
 */
/* -------------------------------------------------------- testimonial-slider */

.om-block-testimonial-slider {
	position: relative;
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

.om-block-testimonial-slider__title {
	margin-bottom: 24px;
	color: inherit;
	font-family: var(--om-font-heading);
	font-size: 27px;
	font-weight: 500;
}

.om-block-testimonial-slider__track {
	position: relative;
	display: grid;
}

.om-block-testimonial-slider__slide {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--om-duration) var(--om-ease);
}

.om-block-testimonial-slider__slide.is-active {
	visibility: visible;
	opacity: 1;
}

.om-block-testimonial-slider__quote {
	margin: 0 0 20px;
	font-size: 18px;
	font-style: normal;
	line-height: 1.7;
}

.om-block-testimonial-slider__quote p {
	margin: 0;
}

.om-block-testimonial-slider__author {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.om-block-testimonial-slider__name {
	font-family: var(--om-font-heading);
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
}

.om-block-testimonial-slider__position {
	font-size: 13px;
	opacity: 0.75;
}

.om-block-testimonial-slider__arrow {
	position: absolute;
	top: 40%;
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border: 1px solid currentcolor;
	border-radius: 50%;
	background: none;
	color: inherit;
	font-size: 20px;
	opacity: 0.7;
}

.om-block-testimonial-slider__arrow:hover,
.om-block-testimonial-slider__arrow:focus-visible {
	opacity: 1;
}

.om-block-testimonial-slider__arrow--prev {
	left: -50px;
}

.om-block-testimonial-slider__arrow--next {
	right: -50px;
}

.om-block-testimonial-slider__dots {
	display: flex;
	justify-content: center;
	margin-top: 24px;
	gap: 10px;
}

.om-block-testimonial-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid currentcolor;
	border-radius: 50%;
	background: none;
	opacity: 0.5;
}

.om-block-testimonial-slider__dot.is-active {
	background-color: currentcolor;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.om-block-testimonial-slider__slide {
		transition: none;
	}
}

/* ------------------------------------------------------------- post-grid */

.om-block-post-grid {
	--om-block-post-grid-columns: 2;

	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.om-block-post-grid {
		grid-template-columns: repeat(var(--om-block-post-grid-columns), minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------ product-grid */

.om-block-product-grid {
	--om-block-product-grid-columns: 3;

	display: grid;
	gap: 40px 30px;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.om-block-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.om-block-product-grid {
		grid-template-columns: repeat(var(--om-block-product-grid-columns), minmax(0, 1fr));
	}
}

.om-block-product-grid__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.om-block-product-grid__media {
	display: block;
	width: 100%;
	margin-bottom: 17px;
	overflow: hidden;
}

.om-block-product-grid__img {
	width: 100%;
	transition: transform 0.6s var(--om-ease);
}

.om-block-product-grid__media:hover .om-block-product-grid__img,
.om-block-product-grid__media:focus-visible .om-block-product-grid__img {
	transform: scale(1.04);
}

.om-block-product-grid__title {
	margin: 0 0 8px;
	color: var(--om-heading);
	font-family: var(--om-font-heading);
	font-size: 21px;
	font-weight: 500;
}

.om-block-product-grid__title a {
	color: inherit;
}

.om-block-product-grid__excerpt {
	margin-bottom: 16px;
	font-size: 15px;
	line-height: 1.7;
}

.om-block-product-grid__excerpt p {
	margin: 0 0 0.6em;
}

.om-block-product-grid__button {
	margin-top: auto;
}

/* -------------------------------------------------------------- event-list */

.om-block-event-list__group {
	margin-bottom: 48px;
}

.om-block-event-list__group:last-child {
	margin-bottom: 0;
}

.om-block-event-list__group-title {
	margin-bottom: 24px;
	color: var(--om-heading);
	font-family: var(--om-font-heading);
	font-size: 27px;
	font-weight: 500;
}

.om-block-event-list__items {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.om-block-event-list__item {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding: 20px 0;
	border-bottom: 1px solid var(--om-line);
}

.om-block-event-list__item--past {
	opacity: 0.7;
}

.om-block-event-list__date {
	flex-shrink: 0;
	width: 160px;
	color: var(--om-red);
	font-family: var(--om-font-heading);
	font-size: 14px;
	font-weight: 600;
}

.om-block-event-list__body {
	flex: 1;
	min-width: 200px;
}

.om-block-event-list__title {
	margin: 0 0 4px;
	color: var(--om-heading);
	font-family: var(--om-font-heading);
	font-size: 18px;
	font-weight: 500;
}

.om-block-event-list__title a {
	color: inherit;
}

.om-block-event-list__location {
	margin: 0;
	color: var(--om-muted);
	font-size: 14px;
}

/* --------------------------------------------------------------- separator */

.om-block-separator--right {
	margin-inline-start: auto;
	margin-inline-end: 0;
}

/* ------------------------------------------------------------------ button */

.om-block-button--align-center {
	text-align: center;
}

.om-block-button--align-right {
	text-align: right;
}

/* --------------------------------------------------------- editor helpers */

.om-block-placeholder {
	padding: 24px;
	border: 1px dashed var(--om-line, #dbdbdb);
	background-color: var(--om-surface, #f3f3f3);
	color: var(--om-muted, #969696);
	font-size: 14px;
	text-align: center;
}

.om-block-editor-preview {
	position: relative;
}

.om-block-editor-preview--compact {
	max-width: 320px;
}

.om-block-media-control {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.om-block-section-editor-canvas,
.om-block-parallax-editor-canvas {
	min-height: 120px;
	padding: 24px var(--om-gutter, 20px);
}

/*
 * Full-bleed section content.
 *
 * `.om-block-section__inner` normally re-constrains content to the grid so a
 * full-width band keeps its copy aligned with the rest of the page. Rows that
 * were inside the original theme's `.eltdf-full-width` wrapper — the homepage
 * hero being the one that matters — run edge to edge for their content too.
 */
.om-block-section__inner--bleed {
	max-width: none;
	padding-inline: 0;
}

/* --------------------------------------------------------- parallax section */

.om-block-parallax {
	position: relative;
	overflow: hidden;
	background-color: var(--om-navy);
}

.om-block-parallax__bg {
	position: absolute;
	inset: -15% 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	will-change: transform;
}

.om-block-parallax__overlay {
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / 100%);
	opacity: var(--om-block-overlay, 0);
	pointer-events: none;
}

.om-block-parallax__inner {
	position: relative;
	z-index: 1;
	max-width: calc(var(--om-container) + (var(--om-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--om-gutter);
}

@media (prefers-reduced-motion: reduce) {
	.om-block-parallax__bg {
		transform: none !important;
	}
}

/* ---------------------------------------------------------------- cta-band */

.om-block-cta-band {
	padding-block: 32px;
}

.om-block-cta-band__inner {
	display: flex;
	max-width: calc(var(--om-container) + (var(--om-gutter) * 2));
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	margin-inline: auto;
	padding-inline: var(--om-gutter);
}

.om-block-cta-band__text {
	margin: 0;
	font-family: var(--om-font-heading);
	font-size: 16px;
	font-weight: 500;
}

.om-block-cta-band__button {
	flex-shrink: 0;
}

/* ------------------------------------------------------------- banner-card */

.om-block-banner-card {
	--om-block-banner-height: 315px;
	--om-block-banner-overlay-opacity: 0.7;
}

.om-block-banner-card__link {
	position: relative;
	display: block;
	overflow: hidden;
	color: inherit;
}

.om-block-banner-card__media {
	display: block;
	height: var(--om-block-banner-height);
	overflow: hidden;
}

.om-block-banner-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--om-ease);
}

.om-block-banner-card__link:hover .om-block-banner-card__img,
.om-block-banner-card__link:focus-visible .om-block-banner-card__img {
	transform: scale(1.06);
}

.om-block-banner-card__overlay {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--om-duration) var(--om-ease);
}

.om-block-banner-card__link:hover .om-block-banner-card__overlay,
.om-block-banner-card__link:focus-visible .om-block-banner-card__overlay {
	opacity: var(--om-block-banner-overlay-opacity);
}

.om-block-banner-card__text {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	color: var(--om-white);
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--om-duration) var(--om-ease),
		transform var(--om-duration) var(--om-ease);
}

.om-block-banner-card__link:hover .om-block-banner-card__text,
.om-block-banner-card__link:focus-visible .om-block-banner-card__text {
	opacity: 1;
	transform: none;
}

.om-block-banner-card__title {
	font-family: var(--om-font-heading);
	font-size: 21px;
	font-weight: 500;
}

.om-block-banner-card__subtitle {
	font-size: 14px;
	opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
	.om-block-banner-card__img,
	.om-block-banner-card__overlay,
	.om-block-banner-card__text {
		transition: none;
	}
}

/* ------------------------------------------------------------- content-box */

.om-block-content-box {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.om-block-content-box--align-center {
	align-items: center;
	text-align: center;
}

.om-block-content-box--align-right {
	align-items: flex-end;
	text-align: right;
}

.om-block-content-box__media {
	display: inline-flex;
	width: 56px;
	height: 56px;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
	border-radius: 50%;
	background-color: var(--om-surface);
	color: var(--om-red);
}

.om-block-content-box__media--icon .dashicons {
	width: 28px;
	height: 28px;
	font-size: 28px;
}

.om-block-content-box__media--image {
	width: auto;
	height: auto;
	border-radius: 0;
	background-color: transparent;
}

.om-block-content-box__media--image img {
	max-width: 64px;
}

/*
 * Image-swap tiles.
 *
 * The original site's GSE and Bag feature tiles are a pair of images with the
 * wording baked into the artwork, cross-fading on hover — 250x260 on live, not
 * the 64px icon the rule above assumes. They are stacked rather than toggled
 * with script so the effect needs no JavaScript and cannot flash while the
 * second file loads.
 */
.om-block-content-box__media--has-hover {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.om-block-content-box__media--has-hover img {
	max-width: 100%;
}

.om-block-content-box__media--has-hover .om-block-content-box__img--hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity var(--om-duration, 0.3s) ease;
}

.om-block-content-box:hover .om-block-content-box__img--hover,
.om-block-content-box:focus-within .om-block-content-box__img--hover {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.om-block-content-box__media--has-hover .om-block-content-box__img--hover {
		transition: none;
	}
}

.om-block-content-box__heading {
	margin: 0;
	color: var(--om-heading);
	font-family: var(--om-font-heading);
	font-size: 21px;
	font-weight: 500;
}

.om-block-content-box__text {
	margin: 0;
	color: var(--om-body);
	font-size: 15px;
	line-height: 1.7;
}

.om-block-content-box__text p:last-child {
	margin-bottom: 0;
}

.om-block-content-box__link {
	display: inline-block;
	margin-top: 4px;
	color: var(--om-red);
	font-family: var(--om-font-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.om-block-content-box__link:hover,
.om-block-content-box__link:focus-visible {
	color: var(--om-red-dark);
}

/* ------------------------------------------------------------- carousel */

/*
 * `omegamatrix/image-carousel` — the benefits carousel on the four EnTrack
 * product pages.
 *
 * The items-per-view ladder is measured off the original, not chosen: 1 below
 * 600px, 2 from 600px, 3 from 768px, and the block's own `perView` (4 in every
 * current instance) from 1024px. Reproducing it matters because the previous
 * `core/columns` rendering stacked at 782px, which is what made those pages
 * 18-37% too tall at tablet width.
 *
 * With JavaScript off the viewport stays scrollable, so every item is still
 * reachable and nothing is hidden behind arrows that cannot work.
 */
.om-block-image-carousel {
	--om-carousel-visible: 1;

	position: relative;
}

.om-block-image-carousel__viewport {
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.om-block-image-carousel__viewport::-webkit-scrollbar {
	display: none;
}

/* Script took over: it drives the track with transforms instead. */
.om-block-image-carousel--ready .om-block-image-carousel__viewport {
	overflow: hidden;
}

.om-block-image-carousel__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.om-block-image-carousel--ready .om-block-image-carousel__track {
	transition: transform var(--om-carousel-speed, 650ms) ease;
	will-change: transform;
}

.om-block-image-carousel__item {
	position: relative;
	flex: 0 0 calc(100% / var(--om-carousel-visible));
	max-width: calc(100% / var(--om-carousel-visible));
	margin: 0;
	padding: 0;
	line-height: 0;
}

.om-block-image-carousel__image {
	display: block;
	width: 100%;
	height: auto;
}

.om-block-image-carousel__image--hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity var(--om-duration, 0.3s) ease;
}

.om-block-image-carousel__item--has-hover:hover .om-block-image-carousel__image--hover,
.om-block-image-carousel__item--has-hover:focus-within .om-block-image-carousel__image--hover {
	opacity: 1;
}

.om-block-image-carousel__nav {
	position: absolute;
	top: 50%;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	background: rgb(0 0 0 / 35%);
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s ease;
}

.om-block-image-carousel__nav:hover,
.om-block-image-carousel__nav:focus-visible {
	background: rgb(0 0 0 / 60%);
}

.om-block-image-carousel__nav[disabled] {
	opacity: 0.3;
	cursor: default;
}

.om-block-image-carousel__nav--prev {
	left: 0;
}

.om-block-image-carousel__nav--next {
	right: 0;
}

.om-block-image-carousel__nav::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
}

.om-block-image-carousel__nav--next::before {
	transform: translate(-65%, -50%) rotate(45deg);
}

.om-block-image-carousel__nav--prev::before {
	transform: translate(-35%, -50%) rotate(-135deg);
}

@media (min-width: 600px) {
	.om-block-image-carousel {
		--om-carousel-visible: min(2, var(--om-carousel-per-view, 4));
	}
}

@media (min-width: 768px) {
	.om-block-image-carousel {
		--om-carousel-visible: min(3, var(--om-carousel-per-view, 4));
	}
}

@media (min-width: 1024px) {
	.om-block-image-carousel {
		--om-carousel-visible: var(--om-carousel-per-view, 4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.om-block-image-carousel--ready .om-block-image-carousel__track,
	.om-block-image-carousel__image--hover {
		transition: none;
	}
}


/* --------------------------------------------------------- hero slider */
.om-slider {
	--om-slider-height: 600px;
	--om-slider-overlay-opacity: 0.4;
	--om-slider-duration: 0.6s;
	--om-slider-ease: var(--omtk-ease, cubic-bezier(0.4, 0, 0.2, 1));
	--om-slider-accent: var(--omtk-accent-red, #dd3333);
	--om-slider-brand: var(--omtk-brand-red, #d71920);
	--om-slider-white: var(--omtk-white, #fff);
	--om-slider-navy: var(--omtk-navy, #1e3062);
	--om-slider-body: var(--omtk-body, #2d2d2d);
	--om-slider-font-heading: var(--omtk-font-heading, Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif);
	--om-slider-font-body: var(--omtk-font-body, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif);
}

/* ------------------------------------------------------------------ layout */

.om-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	outline: none;
}

.om-slider--fixed {
	height: var(--om-slider-height);
}

.om-slider--full {
	height: 100vh;
	min-height: 480px;
}

.om-slider:focus-visible {
	outline: 3px solid var(--om-slider-accent);
	outline-offset: -3px;
}

.om-slider-track {
	position: relative;
	height: 100%;
	touch-action: pan-y;
}

.om-slider--slide .om-slider-track {
	display: flex;
	height: 100%;
	transition: transform var(--om-slider-duration) var(--om-slider-ease);
}

.om-slider-slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.om-slider--fade .om-slider-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--om-slider-duration) var(--om-slider-ease),
		visibility 0s var(--om-slider-duration);
	z-index: 1;
}

.om-slider--fade .om-slider-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--om-slider-duration) var(--om-slider-ease),
		visibility 0s 0s;
	z-index: 2;
}

/* ------------------------------------------------------------------- media */

.om-slider-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.om-slider-picture,
.om-slider-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.om-slider-img {
	object-fit: cover;
	object-position: center center;
}

/* ---------------------------------------------------------------- overlay */

.om-slider-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: #000;
	opacity: var(--om-slider-overlay-opacity);
	pointer-events: none;
}

/* ---------------------------------------------------------------- content */

.om-slider-content {
	position: relative;
	z-index: 2;
	display: flex;
	height: 100%;
	max-width: 720px;
	flex-direction: column;
	justify-content: center;
	padding: 40px clamp(20px, 6vw, 80px);
	gap: 0.6em;
}

.om-slider-content--align-left {
	margin-inline-end: auto;
	text-align: left;
	align-items: flex-start;
}

.om-slider-content--align-center {
	margin-inline: auto;
	text-align: center;
	align-items: center;
}

.om-slider-content--align-right {
	margin-inline-start: auto;
	text-align: right;
	align-items: flex-end;
}

.om-slider-content--light {
	color: var(--om-slider-white);
}

.om-slider-content--dark {
	color: var(--om-slider-body);
}

.om-slider-headline {
	margin: 0;
	color: inherit;
	font-family: var(--om-slider-font-heading);
	font-size: clamp(24px, 4vw, 45px);
	font-weight: 500;
	line-height: 1.2;
}

.om-slider-subheadline {
	margin: 0;
	color: inherit;
	font-family: var(--om-slider-font-body);
	font-size: clamp(15px, 2vw, 18px);
	font-weight: 400;
	opacity: 0.92;
}

.om-slider-body {
	margin: 0;
	color: inherit;
	font-family: var(--om-slider-font-body);
	font-size: 16px;
	opacity: 0.92;
}

.om-slider-body p:last-child {
	margin-bottom: 0;
}

.om-slider-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.4em;
	padding: 12px 28px;
	border: 2px solid var(--om-slider-accent);
	background-color: transparent;
	color: inherit;
	font-family: var(--om-slider-font-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background-color var(--omtk-duration, 0.3s) var(--om-slider-ease),
		color var(--omtk-duration, 0.3s) var(--om-slider-ease),
		border-color var(--omtk-duration, 0.3s) var(--om-slider-ease);
}

.om-slider-button--solid {
	background-color: var(--om-slider-accent);
	color: var(--om-slider-white);
}

.om-slider-button--solid:hover,
.om-slider-button--solid:focus-visible {
	border-color: var(--om-slider-brand);
	background-color: var(--om-slider-brand);
	color: var(--om-slider-white);
}

.om-slider-button--outline:hover,
.om-slider-button--outline:focus-visible {
	background-color: var(--om-slider-accent);
	color: var(--om-slider-white);
}

.om-slider-button:focus-visible {
	outline: 3px solid var(--om-slider-white);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- controls */

.om-slider-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 2px solid rgb(255 255 255 / 60%);
	background-color: rgb(0 0 0 / 25%);
	transform: translateY(-50%);
	transition:
		background-color var(--omtk-duration, 0.3s) var(--om-slider-ease),
		border-color var(--omtk-duration, 0.3s) var(--om-slider-ease);
}

.om-slider-arrow:hover,
.om-slider-arrow:focus-visible {
	border-color: var(--om-slider-accent);
	background-color: var(--om-slider-accent);
}

.om-slider-arrow:focus-visible {
	outline: 3px solid var(--om-slider-white);
	outline-offset: 2px;
}

.om-slider-arrow--prev {
	left: 20px;
}

.om-slider-arrow--next {
	right: 20px;
}

.om-slider-arrow__icon {
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--om-slider-white);
	border-right: 2px solid var(--om-slider-white);
}

.om-slider-arrow--prev .om-slider-arrow__icon {
	transform: rotate(-135deg) translate(-1px, -1px);
}

.om-slider-arrow--next .om-slider-arrow__icon {
	transform: rotate(45deg) translate(-1px, -1px);
}

/* ------------------------------------------------------------------- dots */

.om-slider-dots {
	position: absolute;
	right: 0;
	bottom: 20px;
	left: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.om-slider-dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 2px solid var(--om-slider-white);
	border-radius: 50%;
	background-color: transparent;
	transition: background-color var(--omtk-duration, 0.3s) var(--om-slider-ease);
}

.om-slider-dot.is-active {
	background-color: var(--om-slider-white);
}

.om-slider-dot:hover,
.om-slider-dot:focus-visible {
	border-color: var(--om-slider-accent);
}

.om-slider-dot.is-active:hover,
.om-slider-dot.is-active:focus-visible {
	background-color: var(--om-slider-accent);
}

.om-slider-dot:focus-visible {
	outline: 3px solid var(--om-slider-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- live region */

.om-slider-live {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	margin: -1px;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* Fallback if the theme's .screen-reader-text is unavailable for any reason. */
.om-slider .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	margin: -1px;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* ---------------------------------------------------------- empty notice */

.om-slider-empty-notice {
	padding: 40px 20px;
	background-color: var(--omtk-surface, #f3f3f3);
	color: var(--om-slider-body);
	font-family: var(--om-slider-font-body);
	text-align: center;
}

/* ------------------------------------------------------ motion preferences */

@media (prefers-reduced-motion: reduce) {
	.om-slider-track,
	.om-slider--fade .om-slider-slide,
	.om-slider--fade .om-slider-slide.is-active,
	.om-slider-arrow,
	.om-slider-dot,
	.om-slider-button {
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------- tablet */

@media (max-width: 991px) {
	.om-slider--fixed {
		--om-slider-height: 480px;
	}
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 600px) {
	.om-slider--fixed {
		--om-slider-height: 420px;
	}

	.om-slider-content {
		max-width: none;
		padding: 24px 20px;
	}

	.om-slider-arrow {
		width: 36px;
		height: 36px;
	}

	.om-slider-arrow--prev {
		left: 10px;
	}

	.om-slider-arrow--next {
		right: 10px;
	}
}

/* ------------------------------------------------------------------- print */

@media print {
	.om-slider-arrow,
	.om-slider-dots {
		display: none;
	}
}


/* -------------------------------------------------------------- client-grid */

.om-block-client-grid {
	--om-block-client-columns: 4;
}

/*
 * One column, then two, then the block's own column count — 1 / 2 / 4 in every
 * current instance. Measured off the original's Clients page at 390, 600, 768
 * and 1344px rather than chosen: it runs four logos to a row on a desktop, two
 * from 481px up, and one below that. This grid previously went two-up at any
 * width and four-up from 700px, which put four logos in a 600px column at
 * tablet where the original fits two.
 */
.om-block-client-grid__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 481px) {
	.om-block-client-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.om-block-client-grid__list {
		grid-template-columns: repeat(var(--om-block-client-columns), minmax(0, 1fr));
	}
}

.om-block-client-grid__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

/*
 * On a phone the original does not let a logo fill the column: it renders each
 * one at 207px inside the 300px content width, on a 255px vertical pitch. Left
 * to fill, our logos came out 268px and the page ran 21% long — 21 rows, so a
 * 60px-per-row difference compounds.
 */
@media (max-width: 480px) {
	.om-block-client-grid__item {
		padding: 8px 46px;
	}
}

.om-block-client-grid__link {
	display: block;
	width: 100%;
}

.om-block-client-grid__logo {
	width: 100%;
	height: auto;
	object-fit: contain;
	transition: filter var(--om-duration) var(--om-ease), opacity var(--om-duration) var(--om-ease);
}

.om-block-client-grid__logo--placeholder {
	display: block;
	height: 60px;
	background-color: var(--om-surface);
}

.om-block-client-grid--greyscale .om-block-client-grid__logo {
	filter: grayscale(100%);
	opacity: 0.7;
}

.om-block-client-grid--greyscale .om-block-client-grid__link:hover .om-block-client-grid__logo,
.om-block-client-grid--greyscale .om-block-client-grid__link:focus-visible .om-block-client-grid__logo {
	filter: grayscale(0%);
	opacity: 1;
}