/* ==========================================================================
   DMS Electronics — Site-wide retheme
   Applies the homepage design system to every other page of the site by:
     1. re-tokenising the Kadence + Elementor global colour palettes
     2. styling shared theme chrome (page hero/title, content typography,
        links, buttons, cards, forms, sidebar, pagination, 404)
     3. carrying the shared .dmse-footer styles (footer now renders site-wide)

   This is a *token + chrome* retheme, not a layout override: it never forces
   styles onto individual Elementor / block widgets, so page layouts stay
   intact and the content stays fully editable in WordPress. Loaded on every
   page; the homepage's own #dmse-home rules load afterwards and still win.
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL PALETTE  — remap the theme tokens to the homepage colours
   Kadence exposes --global-palette1..9 (+ semantic aliases); Elementor's
   "Kadence colours" map onto those, and its own system colours are remapped
   below too. Changing these cascades the new palette through every element
   that uses a global colour rather than a hard-coded one.
   ========================================================================== */

:root,
body {
	--global-palette1: #2f6fed;   /* accent / links / primary buttons        */
	--global-palette2: #1b52c9;   /* accent alt / hover / active             */
	--global-palette3: #1a2e4b;   /* strongest text — h1/h2/h3               */
	--global-palette4: #33415c;   /* strong text — h4/h5, base font colour   */
	--global-palette5: #4e5f7b;   /* medium text — body copy                 */
	--global-palette6: #7b879f;   /* subtle text — meta, captions            */
	--global-palette7: #eef2fb;   /* subtle background — tints, code, th     */
	--global-palette8: #e9edf7;   /* lighter background — page body          */
	--global-palette9: #ffffff;   /* white / content surface                 */
	--global-palette9rgb: 255, 255, 255;

	--global-palette-highlight: var(--global-palette1);
	--global-palette-highlight-alt: var(--global-palette2);
	--global-palette-btn-bg: var(--global-palette1);
	--global-palette-btn-bg-hover: var(--global-palette2);
	--global-palette-btn: var(--global-palette9);
	--global-palette-btn-hover: var(--global-palette9);
}

/* Elementor global "system" colours (kit 14). Defined by Elementor on
   .elementor-kit-14 — match that specificity with body.elementor-kit-14. */
body.elementor-kit-14,
.elementor-kit-14 {
	--e-global-color-primary: #1a2e4b;
	--e-global-color-secondary: #2f6fed;
	--e-global-color-text: #4e5f7b;
	--e-global-color-accent: #2f6fed;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
	background: var(--global-palette8);
	color: var(--global-palette5);
}

.content-bg,
body.content-style-unboxed .site,
.entry.single-entry,
.entry.loop-entry {
	background: var(--global-palette9);
}

::selection {
	background: rgba(47, 111, 237, 0.16);
}

h1, h2, h3, h4, h5, h6 {
	letter-spacing: -0.01em;
}

/* Content links (leave nav / buttons / cards alone — they set their own). */
.entry-content a:not(.button):not(.wp-block-button__link):not(.wp-element-button):not(.elementor-button):not(.kb-button),
.wp-block-post-content a:not(.button) {
	color: var(--global-palette1);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color 0.2s ease;
}

.entry-content a:hover,
.wp-block-post-content a:hover {
	color: var(--global-palette2);
}

/* ==========================================================================
   3. KADENCE PAGE / POST CHROME
   The hero title band, the boxed content card, breadcrumbs.
   (Elementor full-width pages hide all of this — these rules only touch
   classic / block pages, single posts and archives.)
   ========================================================================== */

.entry-hero-container-inner,
.entry-hero .entry-header {
	background: linear-gradient(180deg, #f4f7fb 0%, #ffffff 100%);
}

.entry-hero h1.entry-title,
.entry-hero .entry-title,
.page-title,
.archive-title {
	color: var(--global-palette3);
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.12;
}

.entry-hero .entry-meta,
.kadence-breadcrumbs,
.breadcrumbs {
	color: var(--global-palette6);
}

.kadence-breadcrumbs a,
.breadcrumbs a {
	color: var(--global-palette5);
}

.kadence-breadcrumbs a:hover,
.breadcrumbs a:hover {
	color: var(--global-palette1);
}

/* Boxed content card — match the homepage card treatment. */
.entry.single-entry,
.entry.loop-entry,
.comment-respond,
.comments-area .comment-list > li .comment-body {
	border: 1px solid rgba(20, 39, 63, 0.12);
	border-radius: 14px;
	box-shadow: 0 22px 44px -30px rgba(20, 39, 63, 0.28);
}

/* ==========================================================================
   4. CONTENT TYPOGRAPHY  (classic / block editor pages & posts)
   ========================================================================== */

.entry-content > h2,
.wp-block-post-content > h2 {
	font-size: clamp(23px, 2.4vw, 31px);
	color: var(--global-palette3);
	font-weight: 700;
	margin: 1.7em 0 0.5em;
}

.entry-content > h3,
.wp-block-post-content > h3 {
	font-size: clamp(19px, 1.9vw, 23px);
	color: var(--global-palette3);
	font-weight: 700;
	margin: 1.5em 0 0.5em;
}

.entry-content > h4 {
	color: var(--global-palette4);
}

.entry-content blockquote,
.wp-block-quote {
	border-left: 3px solid var(--global-palette1);
	background: var(--global-palette7);
	padding: 16px 22px;
	border-radius: 0 10px 10px 0;
	color: var(--global-palette4);
	font-style: normal;
}

.entry-content blockquote cite,
.wp-block-quote cite {
	color: var(--global-palette6);
}

.entry-content :where(figure, img):not(.wp-block-image *) {
	border-radius: 12px;
}

.wp-element-caption,
.wp-caption-text,
figcaption {
	color: var(--global-palette6);
	font-size: 13px;
}

.entry-content hr,
.wp-block-separator {
	border-color: rgba(20, 39, 63, 0.12);
	background-color: rgba(20, 39, 63, 0.12);
}

.entry-content table {
	border-radius: 10px;
	overflow: hidden;
}

.entry-content table th {
	background: var(--global-palette7);
	color: var(--global-palette3);
}

.entry-content table td,
.entry-content table th {
	border-color: rgba(20, 39, 63, 0.1);
}

.entry-content :not(pre) > code {
	background: var(--global-palette7);
	border-radius: 4px;
	padding: 0.15em 0.4em;
	font-size: 0.9em;
}

/* ==========================================================================
   5. BUTTONS
   WordPress core, Kadence buttons and generic .button — restyle to the
   homepage blue pill. Elementor buttons follow --e-global-color-accent
   (remapped above) unless a widget overrides it per-instance.
   ========================================================================== */

.wp-block-button__link,
.wp-element-button,
.entry-content .button,
.entry-content button:not(.dmse-search-item *),
.kb-button.button,
.kt-btn-wrap .kb-button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	background-color: var(--global-palette1);
	color: #ffffff;
	border-color: var(--global-palette1);
	border-radius: 6px;
	font-weight: 600;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.entry-content .button:hover,
.kb-button.button:hover,
.kt-btn-wrap .kb-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
	background-color: var(--global-palette2);
	color: #ffffff;
	transform: translateY(-1px);
}

/* Outline-style WP / Kadence buttons */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--global-palette1);
	border-color: currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--global-palette1);
	color: #ffffff;
}

/* ==========================================================================
   6. FORMS  (site search page, comments, WPForms, MetForm)
   Header search field keeps its own styling from style.css (.dmse-search-item).
   ========================================================================== */

.content-area input[type="text"],
.content-area input[type="email"],
.content-area input[type="url"],
.content-area input[type="tel"],
.content-area input[type="number"],
.content-area input[type="password"],
.content-area input[type="search"],
.content-area textarea,
.content-area select,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
	border-radius: 6px;
	border: 1px solid #dfe3ea;
	background: #f7f9fc;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.content-area input:focus,
.content-area textarea:focus,
.content-area select:focus,
.wpforms-field input:focus,
.wpforms-field textarea:focus {
	outline: none;
	border-color: var(--global-palette1);
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
}

/* MetForm (Contact page reuses form 336). Homepage scopes its own copy under
   #dmse-home, which wins there; this handles every other page. */
.metform-form-content .mf-input,
.metform-form-content select,
.metform-form-content textarea {
	border-radius: 6px !important;
	border: 1px solid #dfe3ea !important;
	background: #f7f9fc;
}

.metform-form-content .mf-input:focus {
	border-color: var(--global-palette1) !important;
	background: #ffffff;
}

.metform-form-content .metform-submit-btn,
.metform-form-content button[type="submit"] {
	background: var(--global-palette1);
	border-radius: 6px !important;
	font-weight: 600;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.metform-form-content .metform-submit-btn:hover {
	background: var(--global-palette2);
	transform: translateY(-1px);
}

/* WPForms submit */
.wpforms-submit-container .wpforms-submit {
	background-color: var(--global-palette1) !important;
	border-color: var(--global-palette1) !important;
	border-radius: 6px !important;
	font-weight: 600;
}

.wpforms-submit-container .wpforms-submit:hover {
	background-color: var(--global-palette2) !important;
}

/* Content-area search form → tidy pill */
.content-area .search-form,
.error404 .search-form {
	display: flex;
	gap: 8px;
	max-width: 460px;
}

.content-area .search-form .search-field,
.error404 .search-form .search-field {
	flex: 1 1 auto;
	border-radius: 999px;
	padding-left: 18px;
}

.content-area .search-form .search-submit,
.error404 .search-form .search-submit {
	border-radius: 999px;
	padding-inline: 22px;
}

/* ==========================================================================
   7. ARCHIVES / LOOP / PAGINATION
   ========================================================================== */

.loop-entry .entry-title a {
	color: var(--global-palette3);
	transition: color 0.2s ease;
}

.loop-entry .entry-title a:hover {
	color: var(--global-palette1);
}

.loop-entry .entry-taxonomies a,
.entry-meta a {
	color: var(--global-palette6);
}

.pagination .page-numbers,
.wp-block-query-pagination .page-numbers {
	border-radius: 8px;
	color: var(--global-palette5);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pagination .page-numbers.current,
.wp-block-query-pagination .page-numbers.current {
	background: var(--global-palette1);
	color: #ffffff;
}

.pagination a.page-numbers:hover {
	background: var(--global-palette7);
	color: var(--global-palette1);
}

/* ==========================================================================
   8. SIDEBAR WIDGETS
   ========================================================================== */

.widget-area .widget-title,
.sidebar .widget-title {
	color: var(--global-palette3);
	font-weight: 700;
}

.widget-area .widget a,
.sidebar .widget a {
	color: var(--global-palette1);
}

.widget-area .widget a:hover,
.sidebar .widget a:hover {
	color: var(--global-palette2);
}

.widget_search .search-field {
	border-radius: 999px;
}

/* ==========================================================================
   9. 404
   ========================================================================== */

.error404 .content-area .page-title,
.error-404 .page-title {
	color: var(--global-palette3);
}

/* ==========================================================================
   9b. HERO SLIDER  (Prime Slider "Dragon" — the top hero on inner pages)
   Re-skins the plugin's dated default: fills exactly one screen on load, adds
   a readable left-weighted scrim, frees the text from its cramped 270px column
   and aligns it to the site container, modernises the type, turns the button
   into a homepage-style pill and adds a scroll cue. (Per-page hero copy and
   the single-slide collapse are data changes made separately in WP.)
   ========================================================================== */

.bdt-prime-slider-dragon {
	position: relative;
	background: #0b1a2e;
}

/* Height — fill exactly one screen on load: viewport minus the real header
   stack height (top bar + main bar), measured into --dmse-header-h by a small
   script in functions.php (falls back to 116px before it runs). svh avoids the
   mobile browser-chrome jump; CSS !important beats the plugin JS inline height. */
.bdt-prime-slider-dragon .bdt-slideshow-items {
	height: calc(100vh - var(--dmse-header-h, 116px)) !important;
	height: calc(100svh - var(--dmse-header-h, 116px)) !important;
	min-height: 460px !important;
}

/* Sharpen the backdrop (drop the plugin blur) and stop it scrolling as a
   fixed layer. */
.bdt-ps-blur-effect--yes .bdt-ps-dragon-bg .bdt-ps-slide-img {
	filter: none;
}

.bdt-prime-slider-dragon .bdt-ps-dragon-bg {
	position: absolute;
}

.bdt-prime-slider-dragon .bdt-ps-slide-img {
	transform: none !important;
}

/* Readable scrim: dark where the text sits on the left, clearing to the
   right, with a soft lift toward white at the very bottom so the curved
   divider below blends seamlessly into the page. */
.bdt-prime-slider-dragon .bdt-slideshow-item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(8, 16, 28, 0.86) 0%, rgba(8, 16, 28, 0.6) 38%, rgba(8, 16, 28, 0.22) 72%, rgba(8, 16, 28, 0.08) 100%),
		linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.13) 5%, rgba(8, 16, 28, 0) 14%);
}

/* Content: site-width container, real breathing room. */
.bdt-prime-slider-dragon .bdt-prime-slider-wrapper {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
	width: 100%;
}

.bdt-prime-slider-dragon .bdt-prime-slider-content {
	max-width: 640px !important;
	margin-left: 0 !important;
}

.bdt-prime-slider-dragon .bdt-sub-title-inner {
	font-size: 14.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em !important;
	line-height: 1.5 !important;
	text-transform: uppercase;
	color: #8fb4ff !important;
	padding-bottom: 16px !important;
}

.bdt-prime-slider-dragon .bdt-title-tag {
	font-size: clamp(36px, 5.2vw, 62px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.07 !important;
	text-transform: none !important;
	color: #ffffff !important;
	padding-bottom: 20px !important;
}

/* Accent the first word of the headline (the plugin wraps it in .frist-word). */
.bdt-prime-slider-dragon .bdt-title-tag .frist-word {
	color: #6ea8ff;
}

.bdt-prime-slider-dragon .bdt-slider-excerpt {
	font-size: 18.5px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	max-width: 46ch !important;
	margin-bottom: 28px !important;
}

/* Button — the plugin's <a class="bdt-ps-dragon-button"> wraps an inner
   .bdt-ps-button with an animated arrow/circle rig, and it carries a
   .reveal-muted class that scales it to 0.1 until a reveal script fires.
   Force a compact homepage-style pill: every box property is !important, the
   anchor is pinned to its content size (never stretched by the flex column it
   sits in), the rig is removed, and the reveal transform is neutralised. */
.bdt-prime-slider-dragon a.bdt-ps-dragon-button,
.elementor-widget-prime-slider-dragon a.bdt-ps-dragon-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: -moz-max-content !important;
	width: max-content !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	align-self: flex-start !important;
	flex: 0 0 auto !important;
	margin: 4px 0 0 !important;
	padding: 13px 26px !important;
	background: var(--global-palette1) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	opacity: 1 !important;
	transform: none !important;
	box-shadow: 0 10px 24px -12px rgba(47, 111, 237, 0.7) !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.bdt-prime-slider-dragon a.bdt-ps-dragon-button:hover,
.elementor-widget-prime-slider-dragon a.bdt-ps-dragon-button:hover {
	background: var(--global-palette2) !important;
	box-shadow: 0 16px 34px -12px rgba(47, 111, 237, 0.85) !important;
}

.bdt-prime-slider-dragon .bdt-ps-dragon-button .bdt-ps-button {
	display: inline-flex !important;
	align-items: center !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
}

.bdt-prime-slider-dragon .bdt-ps-dragon-button .bdt-ps-button-text {
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	margin: 0 !important;
	color: #ffffff !important;
	white-space: nowrap !important;
}

.bdt-prime-slider-dragon .bdt-ps-button-wrapper,
.bdt-prime-slider-dragon .bdt-ps-button-arrow,
.bdt-prime-slider-dragon .bdt-ps-button-border-circle,
.bdt-prime-slider-dragon .bdt-ps-button-mask,
.bdt-prime-slider-dragon .bdt-ps-button-mask-circle,
.bdt-prime-slider-dragon .bdt-ps-button-small-circle {
	display: none !important;
}

/* Vertical pager (01 / 02 / 03) — hidden when a page has a single slide. */
.bdt-prime-slider-dragon .bdt-dotnav {
	right: clamp(18px, 4vw, 64px) !important;
}

.bdt-prime-slider-dragon .bdt-dotnav li:after {
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.7);
}

.bdt-prime-slider-dragon .bdt-dotnav li.bdt-active:after {
	color: #ffffff;
}

.bdt-prime-slider-dragon .bdt-dotnav li:before {
	background: #6ea8ff !important;
	height: 2px !important;
}

.bdt-prime-slider-dragon .bdt-dotnav li.bdt-active:before {
	width: 34px !important;
}

.bdt-prime-slider-dragon .bdt-slideshow-nav:has(li:only-child) {
	display: none !important;
}

/* End of hero — a moving two-layer wave where the image meets the page, so
   the hard bottom edge dissolves and it reads as "keep going". The waves are
   white (same as the content area below), so only their crests show against
   the dark image. .bdt-prime-slider clips the 200%-wide animated layers. */
.elementor-widget-prime-slider-dragon,
.bdt-prime-slider {
	position: relative;
}

.bdt-prime-slider {
	overflow: hidden;
}

.bdt-prime-slider::before,
.bdt-prime-slider::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 200%;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23ffffff'%20d='M0%2060%20Q300%200%20600%2060%20T1200%2060%20V120%20H0%20Z'/%3E%3C/svg%3E") repeat-x bottom / 50% 100%;
	will-change: transform;
}

/* back layer — taller, softer, drifts slowly one way */
.bdt-prime-slider::before {
	z-index: 2;
	height: clamp(56px, 7vw, 92px);
	bottom: 7px;
	opacity: 0.55;
	animation: dmse-wave-b 17s linear infinite;
}

/* front layer — opaque, covers the seam, drifts faster the other way */
.bdt-prime-slider::after {
	z-index: 3;
	height: clamp(46px, 6vw, 74px);
	opacity: 1;
	animation: dmse-wave-a 11s linear infinite;
}

@keyframes dmse-wave-a {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes dmse-wave-b {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* Soft bouncing chevron just above the waterline. */
.elementor-widget-prime-slider-dragon::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: clamp(72px, 9vw, 104px);
	z-index: 4;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	border-right: 2px solid rgba(255, 255, 255, 0.8);
	border-bottom: 2px solid rgba(255, 255, 255, 0.8);
	transform: rotate(45deg);
	animation: dmse-hero-cue 1.8s ease-in-out infinite;
	pointer-events: none;
}

@keyframes dmse-hero-cue {
	0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
	50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.bdt-prime-slider::before,
	.bdt-prime-slider::after,
	.elementor-widget-prime-slider-dragon::after {
		animation: none;
	}
}

@media (max-width: 600px) {
	.bdt-prime-slider-dragon .bdt-slideshow-items {
		min-height: 420px !important;
	}
	.bdt-prime-slider-dragon .bdt-prime-slider-wrapper {
		padding: 0 20px;
	}
	.bdt-prime-slider-dragon .bdt-dotnav {
		right: 10px !important;
	}
	.elementor-widget-prime-slider-dragon::after {
		display: none;
	}
}

/* ==========================================================================
   9c. TECHNOLOGY PARTNERS PAGE (id 2408) — modernise the logo wall
   The page's ElementsKit "client logo" widgets render dated bordered boxes in
   little swiper carousels. Freeze them into one clean centred grid of white
   logo cards (matching the homepage partner chips) and restyle the heading.
   Scoped to this page only; content is untouched.
   ========================================================================== */

.elementor-page-2408 .elementor-element-5d615f8d {
	background:
		radial-gradient(720px 460px at 50% 0, rgba(47, 111, 237, 0.06), transparent 70%),
		#ffffff !important;
}

.elementor-page-2408 .elementor-element-5d615f8d {
	--padding-top: clamp(48px, 7vw, 88px) !important;
	--padding-bottom: clamp(48px, 7vw, 80px) !important;
}

/* Section heading → homepage section-title treatment + a short accent bar. */
.elementor-page-2408 .elementskit-section-title-wraper {
	position: relative;
	padding-bottom: 22px;
	margin-bottom: 10px;
}

.elementor-page-2408 .elementskit-section-title {
	font-family: 'Inter', sans-serif !important;
	font-size: clamp(28px, 3.2vw, 40px) !important;
	line-height: 1.15 !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	color: var(--global-palette3) !important;
}

.elementor-page-2408 .elementskit-section-title > span {
	color: var(--global-palette1) !important;
}

.elementor-page-2408 .elementskit-section-title-wraper.center::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 52px;
	height: 3px;
	border-radius: 3px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, var(--global-palette1), var(--global-palette2));
}

/* Freeze the swiper carousels into a static centred grid. */
.elementor-page-2408 .elementskit-clients-slider .ekit-main-swiper,
.elementor-page-2408 .elementskit-clients-slider .swiper {
	overflow: visible !important;
	height: auto !important;
}

.elementor-page-2408 .elementskit-clients-slider .swiper-wrapper {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
	gap: 16px !important;
	height: auto !important;
	padding: 6px 0 !important;
	transform: none !important;
}

.elementor-page-2408 .elementskit-clients-slider .swiper-slide,
.elementor-page-2408 .elementskit-client-slider-item {
	flex: 0 0 auto !important;
	width: clamp(150px, 17vw, 210px) !important;
	max-width: calc(50% - 8px) !important;
	height: auto !important;
	margin: 0 !important;
}

.elementor-page-2408 .elementskit-clients-slider .swiper-slide-inner {
	height: 100%;
}

/* Logo card — clean white chip like the homepage partner marquee. */
.elementor-page-2408 .single-client {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 100%;
	min-height: 128px;
	margin: 0 !important;
	padding: 20px 22px !important;
	background: #ffffff !important;
	border: 1px solid rgba(20, 39, 63, 0.12) !important;
	border-radius: 10px !important;
	box-shadow: 0 1px 3px rgba(20, 39, 63, 0.06) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.elementor-page-2408 .single-client:hover {
	transform: translateY(-4px) !important;
	border-color: rgba(47, 111, 237, 0.4) !important;
	box-shadow: 0 18px 34px -18px rgba(20, 39, 63, 0.28) !important;
}

.elementor-page-2408 .single-client .content-image,
.elementor-page-2408 .single-client .image-switcher,
.elementor-page-2408 .single-client a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.elementor-page-2408 .single-client img {
	width: auto !important;
	max-width: 100% !important;
	max-height: 74px !important;
	height: auto !important;
	object-fit: contain !important;
}

@media (max-width: 640px) {
	.elementor-page-2408 .elementskit-clients-slider .swiper-slide,
	.elementor-page-2408 .elementskit-client-slider-item {
		width: calc(50% - 8px) !important;
	}
	.elementor-page-2408 .single-client {
		min-height: 104px;
		padding: 14px 16px !important;
	}
	.elementor-page-2408 .single-client img {
		max-height: 60px !important;
	}
}

/* ==========================================================================
   9d. ABOUT PAGE (id 21) — "Who we are" as a highlighted two-column section
   Mirrors the homepage .dmse-about block: heading anchored in a narrow left
   column with an accent bar, body copy in a wider right column, on a light
   highlight band. The heading text + left alignment are set in the widget;
   this handles the layout / emphasis. Scoped to this page.
   ========================================================================== */

.elementor-page-21 .elementor-element-8cf63bc {
	--min-height: 0 !important;
	--padding-top: clamp(56px, 7vw, 100px) !important;
	--padding-bottom: clamp(56px, 7vw, 100px) !important;
	margin-top: -1px !important;
	background: var(--global-palette8) !important;   /* #e9edf7 — same band as the homepage stats strip */
}

/* Seamless hand-off from the hero into the band — exactly the homepage method:
   the hero's bottom scrim fade and the wave divider are recoloured to the
   band's colour (#e9edf7), and the wrapper gap is removed. */
.elementor-page-21 .elementor-element-ac7500a,
.elementor-page-21 .elementor-element-9f553ee {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.elementor-page-21 .bdt-prime-slider-dragon .bdt-slideshow-item::after {
	background:
		linear-gradient(90deg, rgba(8, 16, 28, 0.86) 0%, rgba(8, 16, 28, 0.6) 38%, rgba(8, 16, 28, 0.22) 72%, rgba(8, 16, 28, 0.08) 100%),
		linear-gradient(0deg, #e9edf7 0%, rgba(233, 237, 247, 0.35) 6%, rgba(8, 16, 28, 0) 16%);
}

.elementor-page-21 .bdt-prime-slider::before,
.elementor-page-21 .bdt-prime-slider::after {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23e9edf7'%20d='M0%2060%20Q300%200%20600%2060%20T1200%2060%20V120%20H0%20Z'/%3E%3C/svg%3E");
}

.elementor-page-21 .elementor-element-89b3a41 {
	display: grid !important;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}

@media (max-width: 900px) {
	.elementor-page-21 .elementor-element-89b3a41 {
		align-items: start;
	}
}

.elementor-page-21 .elementor-element-44b9dae {
	position: relative;
	padding-bottom: 18px;
}

.elementor-page-21 .elementor-element-44b9dae .elementor-heading-title {
	font-size: clamp(30px, 3.8vw, 46px) !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.02em !important;
	color: var(--global-palette3) !important;
}

.elementor-page-21 .elementor-element-44b9dae::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--global-palette1), var(--global-palette2));
}

.elementor-page-21 .elementor-element-2984edf {
	color: var(--global-palette5) !important;
	font-size: 16.5px;
	line-height: 1.75;
	max-width: 62ch;
}

.elementor-page-21 .elementor-element-2984edf p {
	margin-bottom: 1.1em;
}

.elementor-page-21 .elementor-element-2984edf p:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.elementor-page-21 .elementor-element-89b3a41 {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.elementor-page-21 .elementor-element-44b9dae {
		padding-bottom: 14px;
	}
}

/* ==========================================================================
   9e. NEWS & EVENTS PAGE (id 820) — no entrance animations
   Elementor + its add-ons fade / slide / zoom content "in" on scroll via the
   .elementor-invisible + Animate.css classes. Neutralise them so everything
   is simply present on load. Hover transitions are left intact.
   ========================================================================== */
body.page-id-820 .elementor-invisible,
body.page-id-23 .elementor-invisible {
	visibility: visible !important;
	opacity: 1 !important;
}

body.page-id-820 .animated,
body.page-id-820 [data-settings*="animation"],
body.page-id-820 [class*="fadeIn"],
body.page-id-820 [class*="slideIn"],
body.page-id-820 [class*="zoomIn"],
body.page-id-820 [class*="bounceIn"],
body.page-id-820 [class*="rotateIn"],
body.page-id-820 [class*="flipIn"],
body.page-id-820 [class*="lightSpeedIn"],
body.page-id-820 [data-reveal],
body.page-id-820 .reveal-muted,
body.page-id-23 .animated,
body.page-id-23 [data-settings*="animation"],
body.page-id-23 [class*="fadeIn"],
body.page-id-23 [class*="slideIn"],
body.page-id-23 [class*="zoomIn"],
body.page-id-23 [data-reveal],
body.page-id-23 .reveal-muted {
	animation: none !important;
	animation-name: none !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

/* ---- Intro section (#709115f1): Elementor gives it a top-to-bottom
        #EDF2F7 -> #fff gradient, which reads as a distinct pale band sitting
        on top of the page. Drop it so the section shares the normal page
        background and the top of the page looks seamless. ---- */
.elementor-page-820 .elementor-element-709115f1,
.elementor-page-820 .elementor-element-709115f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: transparent !important;
	background-image: none !important;
}

/* ---- Hero waterline: the two wave layers are white so they blend into a
        white content area. This page's content sits on the light-grey page
        background (--global-palette8), so recolour the waves to match and
        the hero flows straight into the section below with no white band.
        Scoped to this page; every other hero keeps its white wave. ---- */
body.page-id-820 .bdt-prime-slider::before,
body.page-id-820 .bdt-prime-slider::after {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23e9edf7'%20d='M0%2060%20Q300%200%20600%2060%20T1200%2060%20V120%20H0%20Z'/%3E%3C/svg%3E");
}

/* ---- The Post Grid (widget #cb64677): re-lay the 3-up card grid as a clean
        vertical list of wide horizontal cards (image left, story right).
        With only a handful of posts this reads far better than a thin row of
        small cards. Scoped to this page; content untouched. ---- */
.elementor-page-820 .elementor-element-17d1ffc {
	--padding-top: clamp(40px, 6vw, 72px) !important;
	--padding-bottom: clamp(48px, 7vw, 84px) !important;
}

.elementor-page-820 .rt-tpg-container {
	max-width: 980px;
	margin-inline: auto;
}

/* Section heading — left aligned, ink, with an accent bar; drop the
   decorative flanking lines. */
.elementor-page-820 .tpg-widget-heading-wrapper {
	text-align: left !important;
	position: relative;
	padding-bottom: 18px;
	margin-bottom: clamp(24px, 4vw, 40px) !important;
}

.elementor-page-820 .tpg-widget-heading-line {
	display: none !important;
}

.elementor-page-820 .tpg-widget-heading-title {
	font-family: 'Inter', sans-serif !important;
	font-size: clamp(28px, 3.4vw, 42px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	color: var(--global-palette3) !important;
}

.elementor-page-820 .tpg-widget-heading-wrapper::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 44px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--global-palette1), var(--global-palette2));
}

/* List instead of a bootstrap grid row */
.elementor-page-820 .rt-row.grid-layout1 {
	display: flex !important;
	flex-direction: column !important;
	gap: clamp(18px, 3vw, 28px) !important;
	margin: 0 !important;
}

.elementor-page-820 .rt-grid-item {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* The card — sets the fixed image box size for the whole list via two vars. */
.elementor-page-820 .rt-holder {
	--tpg-img-w: clamp(160px, 26vw, 290px);
	--tpg-img-h: clamp(180px, 19vw, 224px);
	background: var(--global-palette9) !important;
	border: 1px solid rgba(20, 39, 63, 0.12) !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 1px 3px rgba(20, 39, 63, 0.06) !important;
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.elementor-page-820 .rt-holder:hover {
	transform: translateY(-4px) !important;
	border-color: rgba(47, 111, 237, 0.4) !important;
	box-shadow: 0 26px 48px -26px rgba(20, 39, 63, 0.3) !important;
}

/* Horizontal card: fixed-size image pinned to the left, text flows past it.
   Extra-specific (.rt-tpg-container .rt-holder …) to beat the plugin's
   `.rt-el-content-wrapper{display:flex}` rule. */
.elementor-page-820 .rt-tpg-container .rt-holder .rt-detail {
	position: relative !important;
	display: block !important;
	overflow: visible !important;
	min-height: var(--tpg-img-h) !important;
	padding: 0 clamp(22px, 3vw, 34px) 0
		calc(var(--tpg-img-w) + clamp(22px, 3vw, 36px)) !important;
}

.elementor-page-820 .rt-tpg-container .rt-holder .rt-img-holder {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: var(--tpg-img-w) !important;
	height: var(--tpg-img-h) !important;
	margin: 0 !important;
	border-radius: 0 !important;
	overflow: hidden !important;
}

.elementor-page-820 .rt-img-holder a,
.elementor-page-820 .rt-img-holder img {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	max-width: none !important;
}

.elementor-page-820 .rt-img-holder img {
	object-fit: cover !important;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.elementor-page-820 .rt-holder:hover .rt-img-holder img {
	transform: scale(1.04) !important;
}

.elementor-page-820 .rt-img-holder .overlay {
	display: none !important;
}

.elementor-page-820 .rt-tpg-container .rt-holder .entry-title-wrapper {
	margin: 0 !important;
	padding: clamp(18px, 3vw, 26px) 0 0 !important;
}

.elementor-page-820 .entry-title-wrapper .entry-title,
.elementor-page-820 .entry-title-wrapper .entry-title a {
	font-family: 'Inter', sans-serif !important;
	font-size: clamp(17px, 1.8vw, 22px) !important;
	font-weight: 700 !important;
	line-height: 1.32 !important;
	letter-spacing: -0.01em !important;
	color: var(--global-palette3) !important;
	transition: color 0.2s ease !important;
}

.elementor-page-820 .entry-title-wrapper .entry-title {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.elementor-page-820 .rt-holder:hover .entry-title a {
	color: var(--global-palette1) !important;
}

/* Meta line (date/author/category) is turned off in the widget — hide the
   empty container so it leaves no gap between title and excerpt. */
.elementor-page-820 .post-meta-tags {
	display: none !important;
}

.elementor-page-820 .rt-tpg-container .rt-holder .tpg-excerpt {
	margin: 0 !important;
	padding: 8px 0 clamp(18px, 3vw, 26px) !important;
}

.elementor-page-820 .tpg-excerpt-inner {
	color: var(--global-palette5) !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.elementor-page-820 .post-footer {
	margin-top: 14px !important;
	padding: 0 !important;
}

.elementor-page-820 .read-more a {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--global-palette1) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	transition: gap 0.2s ease, color 0.2s ease !important;
}

.elementor-page-820 .read-more a::after {
	content: "\2192";
	font-size: 15px;
}

.elementor-page-820 .read-more a:hover {
	color: var(--global-palette2) !important;
	gap: 10px;
}

/* Stack on small screens: image on top, full width, fixed ratio. */
@media (max-width: 680px) {
	.elementor-page-820 .rt-tpg-container .rt-holder .rt-detail {
		padding: 0 0 clamp(16px, 5vw, 20px) !important;
		min-height: 0 !important;
	}
	.elementor-page-820 .rt-tpg-container .rt-holder .rt-img-holder {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 9;
	}
	.elementor-page-820 .rt-tpg-container .rt-holder .entry-title-wrapper {
		padding: clamp(16px, 5vw, 20px) clamp(16px, 5vw, 20px) 0 !important;
	}
	.elementor-page-820 .rt-tpg-container .rt-holder .tpg-excerpt {
		padding: 8px clamp(16px, 5vw, 20px) clamp(16px, 5vw, 20px) !important;
	}
}

/* ==========================================================================
   9e-2. SINGLE NEWS / EVENT ARTICLE  (body.single-post)
   The page reached from a "Read More" on News & Events. Kadence's stock
   single-post layout (boxed card + right sidebar + grey hero band) reads
   dated, so this restyles it into a clean, single-column editorial article:
   no sidebar, a centred reading column on a white sheet, a modern header,
   photo galleries as a tidy grid, and card-style post navigation / author /
   related / comments. Chrome only — scoped to single posts, content untouched.
   ========================================================================== */

/* --- Single column: drop the sidebar, let the article fill the width. --- */
body.single-post .content-container {
	display: block !important;
}

body.single-post .primary-sidebar.widget-area {
	display: none !important;
}

body.single-post #primary {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	flex: none !important;
}

/* --- Header band: kill Kadence's flat grey hero fill; the title + meta sit
       straight on the page background, centred, above the white sheet. --- */
body.single-post .entry-hero-container-inner,
body.single-post .post-hero-section .entry-hero-container-inner,
body.single-post .entry-hero .entry-header {
	background: transparent !important;
}

body.single-post .entry-hero-container-inner {
	padding-top: clamp(28px, 5vw, 56px) !important;
	padding-bottom: clamp(20px, 3vw, 32px) !important;
}

body.single-post .entry-hero .entry-header,
body.single-post .single-entry .entry-header {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}

/* Kicker above the title — these posts are all News & Events. */
body.single-post .entry-header .entry-title::before {
	content: "News & Events";
	display: block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--global-palette1);
}

body.single-post .entry-header .entry-title {
	font-size: clamp(30px, 4.4vw, 48px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--global-palette3);
}

/* Meta row — one tidy, muted line. */
body.single-post .entry-hero .entry-meta,
body.single-post .single-entry .entry-header .entry-meta {
	justify-content: center;
	margin-top: 16px;
	font-size: 14px;
	color: var(--global-palette6);
}

body.single-post .entry-meta a {
	color: var(--global-palette5);
}

body.single-post .entry-meta a:hover {
	color: var(--global-palette1);
}

/* --- The white sheet — one modern card holding the whole article. --- */
body.single-post .entry.single-entry {
	--sheet-pad: clamp(22px, 5vw, 72px);
	max-width: 880px;
	margin-inline: auto;
	background: var(--global-palette9);
	border: 1px solid rgba(20, 39, 63, 0.1);
	border-radius: 22px;
	box-shadow: 0 30px 60px -38px rgba(20, 39, 63, 0.32);
	overflow: hidden;
}

body.single-post .single-entry .entry-content-wrap {
	padding: var(--sheet-pad) !important;
}

/* When the title sits inside the sheet (in-content layout), give it room. */
body.single-post .single-entry .entry-header {
	margin-bottom: clamp(20px, 3vw, 32px);
}

/* --- Featured image — a calm banner, never taller than a screenful. --- */
body.single-post .post-thumbnail.article-post-thumbnail {
	max-width: 880px;
	margin: clamp(18px, 3vw, 28px) auto 0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 30px 60px -40px rgba(20, 39, 63, 0.3);
}

body.single-post .post-thumbnail.article-post-thumbnail .post-thumbnail-inner img {
	display: block;
	width: 100%;
	max-height: 520px;
	object-fit: cover;
}

/* --- Reading column typography. --- */
body.single-post .entry-content.single-content {
	font-size: 17px;
	line-height: 1.78;
	color: var(--global-palette5);
}

body.single-post .single-content > p {
	margin: 0 0 1.35em;
}

/* Lead-in paragraph. */
body.single-post .single-content > p:first-of-type {
	font-size: 19px;
	line-height: 1.7;
	color: var(--global-palette4);
}

body.single-post .single-content > h2 {
	margin-top: 1.6em;
}

/* --- Photo galleries → edge-to-edge grid inside the sheet. --- */
body.single-post .single-content .wp-block-gallery,
body.single-post .single-content > figure.wp-block-image,
body.single-post .single-content > .wp-block-image {
	margin-inline: calc(-1 * var(--sheet-pad));
	width: calc(100% + 2 * var(--sheet-pad));
	max-width: none;
}

body.single-post .single-content .wp-block-gallery {
	gap: 10px;
	border-radius: 0;
}

body.single-post .single-content .wp-block-gallery .wp-block-image {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
}

body.single-post .single-content .wp-block-gallery .wp-block-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

body.single-post .single-content .wp-block-gallery .wp-block-image:hover img {
	transform: scale(1.04);
}

/* Standalone in-content images. */
body.single-post .single-content figure.wp-block-image img {
	border-radius: 12px;
}

/* --- Tag chips. --- */
body.single-post .entry-tags {
	margin-top: clamp(24px, 4vw, 36px);
	padding-top: 22px;
	border-top: 1px solid rgba(20, 39, 63, 0.1);
}

body.single-post .entry-tags .tag-link {
	display: inline-block;
	margin: 4px 6px 4px 0;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--global-palette7);
	color: var(--global-palette5);
	font-size: 13px;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.single-post .entry-tags .tag-link:hover {
	background: var(--global-palette1);
	color: #ffffff;
}

body.single-post .entry-tags .tag-hash {
	opacity: 0.5;
}

/* --- Previous / Next → two hoverable cards. --- */
body.single-post .post-navigation {
	max-width: 880px;
	margin: clamp(28px, 5vw, 48px) auto 0;
}

body.single-post .post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

body.single-post .post-navigation .nav-links > div {
	margin: 0;
	padding: 20px 22px;
	background: var(--global-palette9);
	border: 1px solid rgba(20, 39, 63, 0.12);
	border-radius: 14px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body.single-post .post-navigation .nav-links > div:hover {
	transform: translateY(-3px);
	border-color: rgba(47, 111, 237, 0.4);
	box-shadow: 0 24px 44px -28px rgba(20, 39, 63, 0.3);
}

body.single-post .post-navigation .nav-next {
	text-align: right;
}

body.single-post .post-navigation-sub small {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--global-palette6);
}

body.single-post .post-navigation .nav-links a {
	color: var(--global-palette3);
	font-weight: 700;
	line-height: 1.4;
}

body.single-post .post-navigation .nav-links a:hover {
	color: var(--global-palette1);
}

/* --- Author box. --- */
body.single-post .entry-author {
	max-width: 880px;
	margin: clamp(28px, 5vw, 48px) auto 0;
	padding: clamp(24px, 4vw, 36px);
	background: var(--global-palette9);
	border: 1px solid rgba(20, 39, 63, 0.12);
	border-radius: 18px;
}

body.single-post .entry-author-avatar img {
	border-radius: 50%;
}

body.single-post .entry-author-name {
	color: var(--global-palette3);
}

/* --- Related posts strip. --- */
body.single-post .entry-related {
	margin-top: clamp(40px, 7vw, 72px);
	padding: clamp(36px, 6vw, 60px) 0;
	background: var(--global-palette8);
	border-top: 1px solid rgba(20, 39, 63, 0.1);
}

body.single-post .entry-related-title {
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--global-palette3);
	margin-bottom: clamp(18px, 3vw, 28px);
}

/* --- Comments. --- */
body.single-post .comments-area {
	max-width: 880px;
	margin: clamp(28px, 5vw, 48px) auto 0;
}

body.single-post .comments-title,
body.single-post .comment-reply-title {
	color: var(--global-palette3);
	font-weight: 700;
}

body.single-post .comment-respond {
	padding: clamp(22px, 4vw, 32px);
	border-radius: 16px;
}

body.single-post .comment-form input[type="text"],
body.single-post .comment-form input[type="email"],
body.single-post .comment-form input[type="url"],
body.single-post .comment-form textarea {
	border-radius: 10px;
}

/* --- Small screens: sheet goes full-bleed, galleries stay aligned. --- */
@media (max-width: 600px) {
	body.single-post .entry.single-entry {
		border-radius: 0;
		border-inline: 0;
	}
	body.single-post .post-navigation .nav-links {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   9f. INNER-PAGE SECTION TITLES — short blue accent bar BELOW the page title.
   Alignment is left untouched — the bar follows whatever alignment the title
   already has. Home and the About / Company page keep their own. Targeted by
   the heading widget's Elementor element id.
   ========================================================================== */

/* --- The 12 service / product pages (Elementor heading widget, left-aligned) */
.elementor-element-7a98aaf .elementor-heading-title::after,
.elementor-element-6dc452e5 .elementor-heading-title::after,
.elementor-element-3a86c414 .elementor-heading-title::after,
.elementor-element-3a1487fd .elementor-heading-title::after,
.elementor-element-6e5428ff .elementor-heading-title::after,
.elementor-element-55124312 .elementor-heading-title::after,
.elementor-element-79cb500c .elementor-heading-title::after,
.elementor-element-7ebf2a10 .elementor-heading-title::after,
.elementor-element-2562805e .elementor-heading-title::after,
.elementor-element-1d4eeaa3 .elementor-heading-title::after,
.elementor-element-1ebe2586 .elementor-heading-title::after,
.elementor-element-7534f1dc .elementor-heading-title::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin: 14px 0 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--global-palette1), var(--global-palette2));
}

.elementor-element-7a98aaf .elementor-heading-title,
.elementor-element-6dc452e5 .elementor-heading-title,
.elementor-element-3a86c414 .elementor-heading-title,
.elementor-element-3a1487fd .elementor-heading-title,
.elementor-element-6e5428ff .elementor-heading-title,
.elementor-element-55124312 .elementor-heading-title,
.elementor-element-79cb500c .elementor-heading-title,
.elementor-element-7ebf2a10 .elementor-heading-title,
.elementor-element-2562805e .elementor-heading-title,
.elementor-element-1d4eeaa3 .elementor-heading-title,
.elementor-element-1ebe2586 .elementor-heading-title,
.elementor-element-7534f1dc .elementor-heading-title {
	font-family: 'Inter', sans-serif !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	color: var(--global-palette3) !important;
	-webkit-text-stroke: 0 !important;
}

/* --- Technology Partners: bar sits below the title (section 9c already
       places it there — nothing extra needed here). --- */

/* --- Global Presence ("Our Global Presence", centred) — bar below --- */
.elementor-element-4324db0 .elementskit-section-title-wraper {
	position: relative !important;
	padding-bottom: 22px !important;
}

.elementor-element-4324db0 .elementskit-section-title-wraper::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 44px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--global-palette1), var(--global-palette2));
}

.elementor-element-4324db0 .elementskit-section-title {
	font-family: 'Inter', sans-serif !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	color: var(--global-palette3) !important;
}

/* ==========================================================================
   9g. SERVICE / PRODUCT DETAIL PAGES  (the 12 pages the "Our Services" cards
   link to). All share one structure: hero, then a content section with a
   [text + bullet list] column and a [partner logos] column. Kill every
   entrance animation, set the text to a clean readable column, and turn the
   floating logos into a tidy "In partnership with" card.
   Targeted by Elementor element id (unique) + page id for the animation kill.
   ========================================================================== */

/* --- No entrance animations anywhere on these pages --- */
:is(
	body.page-id-1358, body.page-id-1376, body.page-id-1384, body.page-id-1389,
	body.page-id-1394, body.page-id-1399, body.page-id-1412, body.page-id-1417,
	body.page-id-3035, body.page-id-1404, body.page-id-3024, body.page-id-1890
) :is(
	.elementor-invisible, .animated, [data-reveal], .reveal-muted,
	[class*="fadeIn"], [class*="slideIn"], [class*="zoomIn"],
	[class*="rotateIn"], [class*="bounceIn"], [class*="flipIn"], [class*="lightSpeedIn"]
) {
	animation: none !important;
	animation-name: none !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

/* --- Content section → text column + partner-logo column --- */
:is(
	.elementor-element-6da88a6, .elementor-element-50984b11, .elementor-element-7420ff1,
	.elementor-element-37f0945c, .elementor-element-7ec58563, .elementor-element-680cd848,
	.elementor-element-126e97c9, .elementor-element-2f7219a7, .elementor-element-4e5557ed,
	.elementor-element-456c8673, .elementor-element-20f204f1, .elementor-element-38b6c137
) {
	--padding-top: clamp(44px, 6vw, 82px) !important;
	--padding-bottom: clamp(48px, 7vw, 88px) !important;
	--padding-left: clamp(20px, 4vw, 40px) !important;
	--padding-right: clamp(20px, 4vw, 40px) !important;
	--min-height: 0 !important;
}

:is(
	.elementor-element-6da88a6, .elementor-element-50984b11, .elementor-element-7420ff1,
	.elementor-element-37f0945c, .elementor-element-7ec58563, .elementor-element-680cd848,
	.elementor-element-126e97c9, .elementor-element-2f7219a7, .elementor-element-4e5557ed,
	.elementor-element-456c8673, .elementor-element-20f204f1, .elementor-element-38b6c137
) > .e-con-inner {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: clamp(28px, 4vw, 60px) !important;
	max-width: 1180px !important;
	margin-inline: auto !important;
}

/* text column */
:is(
	.elementor-element-b946515, .elementor-element-36a1d97b, .elementor-element-3bbe3cb8,
	.elementor-element-8b12e67, .elementor-element-27a94129, .elementor-element-2d501409,
	.elementor-element-e37215e, .elementor-element-e531e9d, .elementor-element-63d90510,
	.elementor-element-5f5fa691, .elementor-element-3cdf67fd, .elementor-element-48c200a9
) {
	flex: 1 1 400px !important;
	min-width: 0 !important;
	max-width: 760px !important;
	--width: auto !important;
	--padding-left: 0 !important;
	--padding-right: 0 !important;
}

/* partner-logo column → a tidy card */
:is(
	.elementor-element-da734a1, .elementor-element-1b78b7e3, .elementor-element-7acf003e,
	.elementor-element-5024fde1, .elementor-element-7a0e32d2, .elementor-element-364989d0,
	.elementor-element-5625dbaa, .elementor-element-2a22bfcd, .elementor-element-261e5b65,
	.elementor-element-7d9a48f2, .elementor-element-26103c7e, .elementor-element-3ad3d1c
) {
	flex: 0 0 auto !important;
	width: clamp(210px, 30%, 300px) !important;
	--width: auto !important;
	align-self: flex-start !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 18px !important;
	--padding-top: clamp(20px, 2.4vw, 26px) !important;
	--padding-bottom: clamp(20px, 2.4vw, 26px) !important;
	--padding-left: clamp(20px, 2.4vw, 26px) !important;
	--padding-right: clamp(20px, 2.4vw, 26px) !important;
	background: var(--global-palette7) !important;
	border: 1px solid rgba(20, 39, 63, 0.1) !important;
	border-radius: 14px !important;
}

:is(
	.elementor-element-da734a1, .elementor-element-1b78b7e3, .elementor-element-7acf003e,
	.elementor-element-5024fde1, .elementor-element-7a0e32d2, .elementor-element-364989d0,
	.elementor-element-5625dbaa, .elementor-element-2a22bfcd, .elementor-element-261e5b65,
	.elementor-element-7d9a48f2, .elementor-element-26103c7e, .elementor-element-3ad3d1c
)::before {
	content: "In partnership with";
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--global-palette6);
}

:is(
	.elementor-element-da734a1, .elementor-element-1b78b7e3, .elementor-element-7acf003e,
	.elementor-element-5024fde1, .elementor-element-7a0e32d2, .elementor-element-364989d0,
	.elementor-element-5625dbaa, .elementor-element-2a22bfcd, .elementor-element-261e5b65,
	.elementor-element-7d9a48f2, .elementor-element-26103c7e, .elementor-element-3ad3d1c
) .elementor-widget-image {
	width: 100% !important;
	--width: 100% !important;
	margin: 0 !important;
}

:is(
	.elementor-element-da734a1, .elementor-element-1b78b7e3, .elementor-element-7acf003e,
	.elementor-element-5024fde1, .elementor-element-7a0e32d2, .elementor-element-364989d0,
	.elementor-element-5625dbaa, .elementor-element-2a22bfcd, .elementor-element-261e5b65,
	.elementor-element-7d9a48f2, .elementor-element-26103c7e, .elementor-element-3ad3d1c
) .elementor-widget-image img {
	width: auto !important;
	max-width: 100% !important;
	max-height: 42px !important;
	height: auto !important;
	object-fit: contain !important;
}

/* body copy + bullet list */
:is(
	.elementor-element-b946515, .elementor-element-36a1d97b, .elementor-element-3bbe3cb8,
	.elementor-element-8b12e67, .elementor-element-27a94129, .elementor-element-2d501409,
	.elementor-element-e37215e, .elementor-element-e531e9d, .elementor-element-63d90510,
	.elementor-element-5f5fa691, .elementor-element-3cdf67fd, .elementor-element-48c200a9
) .elementor-widget-text-editor {
	text-align: left !important;
	color: var(--global-palette5) !important;
	font-size: 16px !important;
	line-height: 1.75 !important;
}

:is(
	.elementor-element-b946515, .elementor-element-36a1d97b, .elementor-element-3bbe3cb8,
	.elementor-element-8b12e67, .elementor-element-27a94129, .elementor-element-2d501409,
	.elementor-element-e37215e, .elementor-element-e531e9d, .elementor-element-63d90510,
	.elementor-element-5f5fa691, .elementor-element-3cdf67fd, .elementor-element-48c200a9
) .elementor-widget-text-editor p {
	margin-bottom: 1.05em !important;
}

:is(
	.elementor-element-b946515, .elementor-element-36a1d97b, .elementor-element-3bbe3cb8,
	.elementor-element-8b12e67, .elementor-element-27a94129, .elementor-element-2d501409,
	.elementor-element-e37215e, .elementor-element-e531e9d, .elementor-element-63d90510,
	.elementor-element-5f5fa691, .elementor-element-3cdf67fd, .elementor-element-48c200a9
) .elementor-widget-text-editor ul {
	list-style: none !important;
	margin: 0 0 1.2em !important;
	padding: 0 !important;
}

:is(
	.elementor-element-b946515, .elementor-element-36a1d97b, .elementor-element-3bbe3cb8,
	.elementor-element-8b12e67, .elementor-element-27a94129, .elementor-element-2d501409,
	.elementor-element-e37215e, .elementor-element-e531e9d, .elementor-element-63d90510,
	.elementor-element-5f5fa691, .elementor-element-3cdf67fd, .elementor-element-48c200a9
) .elementor-widget-text-editor li {
	position: relative !important;
	padding-left: 1.5em !important;
	margin-bottom: 0.55em !important;
	list-style: none !important;
}

:is(
	.elementor-element-b946515, .elementor-element-36a1d97b, .elementor-element-3bbe3cb8,
	.elementor-element-8b12e67, .elementor-element-27a94129, .elementor-element-2d501409,
	.elementor-element-e37215e, .elementor-element-e531e9d, .elementor-element-63d90510,
	.elementor-element-5f5fa691, .elementor-element-3cdf67fd, .elementor-element-48c200a9
) .elementor-widget-text-editor li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--global-palette1);
}

@media (max-width: 820px) {
	:is(
		.elementor-element-6da88a6, .elementor-element-50984b11, .elementor-element-7420ff1,
		.elementor-element-37f0945c, .elementor-element-7ec58563, .elementor-element-680cd848,
		.elementor-element-126e97c9, .elementor-element-2f7219a7, .elementor-element-4e5557ed,
		.elementor-element-456c8673, .elementor-element-20f204f1, .elementor-element-38b6c137
	) > .e-con-inner {
		flex-direction: column !important;
	}
	:is(
		.elementor-element-da734a1, .elementor-element-1b78b7e3, .elementor-element-7acf003e,
		.elementor-element-5024fde1, .elementor-element-7a0e32d2, .elementor-element-364989d0,
		.elementor-element-5625dbaa, .elementor-element-2a22bfcd, .elementor-element-261e5b65,
		.elementor-element-7d9a48f2, .elementor-element-26103c7e, .elementor-element-3ad3d1c
	) {
		width: 100% !important;
		max-width: 360px !important;
	}
}

/* Repair & Service (1890), Printing Solutions (3024), Application Development
   (1417) and Managed Services (1399): the right column holds photos, not
   partner logos, so the "In partnership with" card doesn't apply — drop it and
   let the text run wide. */
.elementor-element-3ad3d1c,
.elementor-element-26103c7e,
.elementor-element-2a22bfcd,
.elementor-element-364989d0 {
	display: none !important;
}

.elementor-element-48c200a9,
.elementor-element-3cdf67fd,
.elementor-element-e531e9d,
.elementor-element-2d501409 {
	max-width: 920px !important;
	flex-basis: 100% !important;
}

/* Transaction Technology (3035) + Customer Experience (1412): larger partner
   logos, and a slightly wider card to fit them. */
.elementor-element-261e5b65,
.elementor-element-5625dbaa {
	width: clamp(230px, 34%, 340px) !important;
}

.elementor-element-261e5b65 .elementor-widget-image img,
.elementor-element-5625dbaa .elementor-widget-image img {
	max-height: 66px !important;
}

/* Networking & Security (1376): the Fortinet and Sophos marks sit small inside
   large square/whitespace canvases — give those two more height. The element
   id IS the image widget, so target it as .elementor-widget-image.<id> with a
   container prefix to outrank the shared logo-image rule in section 9g. */
.elementor-element-1b78b7e3 .elementor-widget-image.elementor-element-568ef06 img,
.elementor-element-1b78b7e3 .elementor-widget-image.elementor-element-6cb8b2a1 img {
	max-height: 104px !important;
}

/* Compute & Storage (1358): larger HPE Pointnext Services logo. */
.elementor-element-da734a1 .elementor-widget-image.elementor-element-37a830c img {
	max-height: 110px !important;
}

/* ==========================================================================
   9h. SEARCH RESULTS  (Kadence search archive — the /?s= page the navbar
   search leads to). Tidy the header, drop the noisy author / date meta, and
   give each result a clean modern card.
   ========================================================================== */

body.search .entry-hero.search-archive-hero-section .entry-hero-container-inner {
	padding-top: clamp(28px, 5vw, 56px) !important;
	padding-bottom: clamp(18px, 3vw, 30px) !important;
	background: linear-gradient(180deg, #f4f7fb 0%, #ffffff 100%);
}

body.search .search-archive-title {
	text-align: left !important;
}

body.search .search-archive-title h1,
body.search .page-title.search-title {
	color: var(--global-palette3) !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	font-size: clamp(25px, 3.1vw, 37px) !important;
	line-height: 1.15 !important;
}

body.search .content-area {
	margin-top: clamp(22px, 4vw, 44px) !important;
	margin-bottom: clamp(32px, 5vw, 60px) !important;
}

body.search .content-wrap.grid-cols.search-archive {
	gap: clamp(16px, 2vw, 24px) !important;
}

/* --- Result card --- */
body.search .entry.loop-entry {
	background: var(--global-palette9) !important;
	border: 1px solid rgba(20, 39, 63, 0.12) !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 3px rgba(20, 39, 63, 0.06) !important;
	overflow: hidden !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

body.search .entry.loop-entry:hover {
	transform: translateY(-3px) !important;
	border-color: rgba(47, 111, 237, 0.4) !important;
	box-shadow: 0 22px 40px -24px rgba(20, 39, 63, 0.28) !important;
}

body.search .loop-entry .post-thumbnail,
body.search .loop-entry .entry-image {
	margin: 0 !important;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

body.search .loop-entry .post-thumbnail img,
body.search .loop-entry .entry-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}

body.search .loop-entry .entry-content-wrap {
	padding: clamp(20px, 2.4vw, 28px) !important;
}

body.search .loop-entry .entry-title {
	margin: 0 0 8px !important;
	font-size: clamp(17px, 1.9vw, 21px) !important;
	line-height: 1.32 !important;
}

body.search .loop-entry .entry-title a {
	color: var(--global-palette3) !important;
	font-weight: 700 !important;
	transition: color 0.2s ease !important;
}

body.search .loop-entry:hover .entry-title a {
	color: var(--global-palette1) !important;
}

/* Drop the noisy "By admin · date date" meta line */
body.search .loop-entry .entry-meta {
	display: none !important;
}

body.search .loop-entry .entry-summary {
	margin: 0 0 14px !important;
}

body.search .loop-entry .entry-summary p {
	margin: 0 !important;
	color: var(--global-palette5) !important;
	font-size: 14.5px !important;
	line-height: 1.6 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Read More → clean blue text link */
body.search .loop-entry .entry-footer,
body.search .loop-entry .entry-actions,
body.search .loop-entry .more-link-wrap {
	margin: 0 !important;
	padding: 0 !important;
}

body.search .loop-entry .post-more-link {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	color: var(--global-palette1) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	border: 0 !important;
	background: none !important;
	padding: 0 !important;
	transition: gap 0.2s ease, color 0.2s ease !important;
}

body.search .loop-entry .post-more-link:hover {
	color: var(--global-palette2) !important;
	gap: 9px;
}

body.search .loop-entry .post-more-link svg {
	width: 15px;
	height: 15px;
}

/* No-results state */
body.search-no-results .page-content {
	background: var(--global-palette9) !important;
	border: 1px solid rgba(20, 39, 63, 0.12) !important;
	border-radius: 14px !important;
	padding: clamp(28px, 4vw, 44px) !important;
	box-shadow: 0 1px 3px rgba(20, 39, 63, 0.06) !important;
}

/* ==========================================================================
   10. SHARED FOOTER  (.dmse-footer renders on every page — see functions.php)
   Moved here verbatim from homepage.css so it is available site-wide.
   ========================================================================== */

.dmse-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dmse-footer .dmse-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}

.dmse-footer {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background: #e9edf7;
	color: #4e5f7b;
	padding: 44px 0 24px;
	position: relative;
	z-index: 1;
}

.dmse-footer__top {
	display: grid;
	grid-template-columns: 1.3fr 0.8fr 1.4fr;
	align-items: start;
	gap: 40px;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(20, 39, 63, 0.14);
}

.dmse-footer__blurb {
	font-size: 14.5px;
	line-height: 1.7;
	color: #4e5f7b;
	max-width: 42ch;
	margin: 0 0 24px;
}

.dmse-footer__social {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.dmse-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid rgba(20, 39, 63, 0.12);
	box-shadow: 0 1px 3px rgba(20, 39, 63, 0.08);
	transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dmse-footer__social-link svg {
	width: 20px;
	height: 20px;
	display: block;
}

.dmse-footer__social-link:hover,
.dmse-footer__social-link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(20, 39, 63, 0.16);
	border-color: rgba(20, 39, 63, 0.22);
}

.dmse-footer__heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #14273f;
	margin: 0 0 20px;
}

.dmse-footer__links ul,
.dmse-footer__offices ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dmse-footer__links li {
	margin-bottom: 12px;
}

.dmse-footer__links a {
	color: #4e5f7b;
	font-size: 14.5px;
	text-decoration: none;
	transition: color 0.25s ease;
}

.dmse-footer__links a:hover,
.dmse-footer__links a:focus-visible {
	color: #2f6fed;
}

.dmse-footer__offices ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 28px;
}

.dmse-footer__offices li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13.5px;
	color: #4e5f7b;
	line-height: 1.5;
}

.dmse-footer__office-label {
	color: #14273f;
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 2px;
}

.dmse-footer__offices a {
	color: #4e5f7b;
	text-decoration: none;
	width: fit-content;
}

.dmse-footer__offices a:hover,
.dmse-footer__offices a:focus-visible {
	color: #2f6fed;
}

.dmse-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	padding: 24px 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: #737d8c;
}

.dmse-footer__bottom p {
	margin: 0;
}

.dmse-footer__bottom a {
	color: #4e5f7b;
	text-decoration: none;
}

.dmse-footer__bottom a:hover,
.dmse-footer__bottom a:focus-visible {
	color: #14273f;
}

@media (max-width: 900px) {
	.dmse-footer__top {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 600px) {
	.dmse-footer .dmse-container {
		padding: 0 20px;
	}
}

@media (max-width: 560px) {
	.dmse-footer__offices ul {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   11. ABOUT / COMPANY PAGE  (post 21)
   The page is an Elementor + ElementsKit build with a lot of dated widget
   chrome — heavy drop-shadows, sharp corners, edge-to-edge text, a blue→navy
   gradient section and a second hand-built "footer" duplicating the real
   site footer. This section reskins each block to the homepage design
   language. Scoped to the specific Elementor element ids so nothing leaks
   onto other pages; !important overrides the per-widget generated CSS.
   (The hero slider is handled in section 9b; "Who we are" / "Our Values"
   live in style.css.)
   ========================================================================== */

/* ---- No entrance animations / transitions on this page ----
   Elementor + ElementsKit apply Animate.css entrance effects (fade / slide /
   zoom "in" from top / left / right / bottom) via the .elementor-invisible +
   .animated + <effect-name> classes and a scroll observer. Neutralise every
   one of them so content is simply present on load, and drop CSS transitions
   so nothing eases in either. Scoped to the About page (post 21). */
body.page-id-21 .elementor-invisible {
	visibility: visible !important;
	opacity: 1 !important;
}

body.page-id-21 .animated,
body.page-id-21 [data-settings*="animation"],
body.page-id-21 .fadeIn,
body.page-id-21 .fadeInUp,
body.page-id-21 .fadeInDown,
body.page-id-21 .fadeInLeft,
body.page-id-21 .fadeInRight,
body.page-id-21 .slideInUp,
body.page-id-21 .slideInDown,
body.page-id-21 .slideInLeft,
body.page-id-21 .slideInRight,
body.page-id-21 .zoomIn,
body.page-id-21 .bounceIn,
body.page-id-21 .rotateIn,
body.page-id-21 .lightSpeedIn,
body.page-id-21 .flipInX,
body.page-id-21 .flipInY {
	animation: none !important;
	animation-name: none !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

body.page-id-21 *,
body.page-id-21 *::before,
body.page-id-21 *::after {
	transition: none !important;
	transition-duration: 0s !important;
	transition-delay: 0s !important;
}

/* ---- "Our Leadership": one light #e9edf7 band across the heading section
        and the team grid (the two are stacked Elementor sections). Same tint
        the homepage uses for its alternating bands. ---- */
.elementor-element-49a6f389,
body.page-id-21 .elementor-element-49a6f389,
.elementor-element-38bda81,
body.page-id-21 .elementor-element-38bda81 {
	background-color: #e9edf7 !important;
	background-image: none !important;
}

/* ---- "Our Leadership" heading (section #xs_team_3) ---- */
.elementor-element-49a6f389 {
	padding: clamp(30px, 3.6vw, 50px) 0 clamp(14px, 2vw, 22px) !important;
}

.elementor-element-68bfccbc .elementskit-section-title-wraper .elementskit-section-title,
.elementor-element-68bfccbc .ekit-heading--title {
	color: var(--global-palette3) !important;
	font-weight: 700 !important;
	font-size: clamp(26px, 3vw, 36px) !important;
	letter-spacing: -0.01em;
}

.elementor-element-68bfccbc .elementskit-section-subtitle,
.elementor-element-68bfccbc .ekit-heading--subtitle {
	color: var(--global-palette1) !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---- Leadership team grid (section #xs_team_9) ---- */
.elementor-element-38bda81 {
	padding: clamp(14px, 2vw, 22px) 0 clamp(30px, 4vw, 52px) !important;
}

/* space between the two rows of three */
.elementor-element-38bda81 .elementor-element-7b1f7636 {
	margin-bottom: clamp(12px, 2vw, 22px);
}

/* the card */
.elementor-element-38bda81 .profile-square-v,
.elementor-element-38bda81 .profile-square-v .profile-card {
	margin: 0 !important;
	height: 100%;
}

.elementor-element-38bda81 .profile-square-v .profile-card {
	display: flex !important;
	flex-direction: column;
	padding: 0 !important;
	background: #ffffff !important;
	border: 1px solid rgba(20, 39, 63, 0.10) !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 1px 3px rgba(20, 39, 63, 0.06) !important;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.elementor-element-38bda81 .profile-square-v .profile-card:hover {
	transform: translateY(-6px);
	border-color: rgba(47, 111, 237, 0.30) !important;
	box-shadow: 0 24px 44px -24px rgba(20, 39, 63, 0.30) !important;
}

/* kill the plugin's navy hover wash + recolour the bottom accent bar */
.elementor-element-38bda81 .profile-square-v .profile-card::before {
	display: none !important;
}

.elementor-element-38bda81 .profile-square-v.square-v6 .profile-card::after {
	height: 3px !important;
	background-color: var(--global-palette1) !important;
	opacity: 0.25 !important;
}

.elementor-element-38bda81 .profile-square-v.square-v6 .profile-card:hover::after {
	opacity: 1 !important;
}

/* photo — a contained, centred headshot rather than a full-bleed panel */
.elementor-element-38bda81 .profile-card .profile-header.ekit-team-img {
	display: block !important;
	width: 100% !important;
	max-width: 190px !important;
	height: auto !important;
	margin: 28px auto 0 !important;
	border-radius: 14px !important;
	aspect-ratio: 1 / 1;
	overflow: hidden !important;
	background: var(--global-palette7);
}

.elementor-element-38bda81 .profile-card .profile-header.ekit-team-img > img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: top center !important;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.elementor-element-38bda81 .profile-card:hover .profile-header.ekit-team-img > img {
	transform: scale(1.04) !important;
}

/* name + role */
.elementor-element-38bda81 .profile-card .profile-body {
	padding: 14px 20px 22px !important;
	text-align: center;
}

.elementor-element-38bda81 .profile-card .profile-body .profile-title,
.elementor-element-38bda81 .profile-card .profile-body .profile-title > a {
	font-size: 17.5px !important;
	font-weight: 700 !important;
	color: var(--global-palette3) !important;
	line-height: 1.3;
	margin: 0 0 4px !important;
}

.elementor-element-38bda81 .profile-card:hover .profile-body .profile-title,
.elementor-element-38bda81 .profile-card:hover .profile-body .profile-title > a {
	color: var(--global-palette1) !important;
}

.elementor-element-38bda81 .profile-card .profile-body .profile-designation {
	font-size: 11.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--global-palette1) !important;
	margin: 0 !important;
}

/* Drop the "Click Image for Profile" buttons — the photo itself opens the
   bio, so the button is redundant clutter. The whole card is a cursor
   pointer to make the affordance obvious. */
.elementor-element-38bda81 .elementor-widget-button {
	display: none !important;
}

.elementor-element-38bda81 .profile-card {
	cursor: pointer;
}

/* ---- Team profile modal (opens on click) ---- */
.elementskit-team-popup .modal-content {
	border-radius: 16px !important;
	border: 0 !important;
	box-shadow: 0 40px 80px -30px rgba(20, 39, 63, 0.5) !important;
}

.elementskit-team-popup .ekit-team-modal-title {
	color: var(--global-palette3) !important;
	font-weight: 700 !important;
}

.elementskit-team-popup .ekit-team-modal-position {
	color: var(--global-palette1) !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px !important;
}

.elementskit-team-popup .ekit-team-modal-content,
.elementskit-team-popup .ekit-team-modal-content p {
	color: var(--global-palette5) !important;
	line-height: 1.75 !important;
}

/* ==========================================================================
   Company history — zigzag  (Our Beginnings / Strategic Partnerships /
   Diversification & Growth / Customer-Centric Focus)

   Structure (Elementor): each block is one container holding, IN SOURCE
   ORDER,  text-col · image-col · image-col · text-col.  We lay those four
   out on a 2-column grid:

       row 1 :  text   |  image        (Our Beginnings / Diversification)
       row 2 :  image  |  text         (Strategic Partnerships / Customer-Centric)

   Because "Boxed" Elementor containers wrap their children in .e-con-inner
   and "Full" ones don't, the grid is applied to whichever is the real
   child-wrapper (:has() picks the right one). A marketer keeps editing the
   heading text, the paragraph and the image straight in Elementor — this is
   layout-only CSS and doesn't touch content. To add another pair later,
   duplicate the text-col + image-col in the same order.
   ========================================================================== */

/* outer block: vertical breathing room between the two blocks + page gutter */
.elementor-element-ff4cb45,
.elementor-element-071833e {
	padding: clamp(44px, 7vw, 84px) 20px !important;
}

/* the grid itself (the real children wrapper) */
.elementor-element-ff4cb45 > .e-con-inner,
.elementor-element-ff4cb45:not(:has(> .e-con-inner)),
.elementor-element-4a681bf > .e-con-inner,
.elementor-element-4a681bf:not(:has(> .e-con-inner)) {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	align-items: center !important;
	column-gap: clamp(36px, 5vw, 72px) !important;
	row-gap: clamp(56px, 9vw, 104px) !important;
	max-width: 1140px !important;
	margin-inline: auto !important;
	padding: 0 !important;
}

/* each of the four cells fills its track — drop the Elementor column
   widths / flex-basis / breakout margins that fought the layout */
.elementor-element-ff4cb45 .e-con-inner > .elementor-element,
.elementor-element-ff4cb45 > .elementor-element,
.elementor-element-4a681bf > .e-con-inner > .elementor-element,
.elementor-element-4a681bf > .elementor-element {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	flex: 0 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	align-self: center !important;
}

/* ---- heading: small brand rule above the title ---- */
.elementor-element-ff4cb45 .elementor-widget-heading .elementor-widget-container,
.elementor-element-071833e .elementor-widget-heading .elementor-widget-container {
	position: relative;
	padding-top: 20px;
}

.elementor-element-ff4cb45 .elementor-widget-heading .elementor-widget-container::before,
.elementor-element-071833e .elementor-widget-heading .elementor-widget-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: var(--global-palette1);
}

.elementor-element-ff4cb45 .elementor-widget-heading .elementor-heading-title,
.elementor-element-071833e .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(23px, 2.4vw, 31px) !important;
	font-weight: 700 !important;
	color: var(--global-palette3) !important;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: left !important;
	margin: 0 0 16px !important;
}

/* ---- body copy: left-aligned (was justified → ugly gaps), sane measure ---- */
.elementor-element-ff4cb45 .elementor-widget-text-editor,
.elementor-element-ff4cb45 .elementor-widget-text-editor *,
.elementor-element-071833e .elementor-widget-text-editor,
.elementor-element-071833e .elementor-widget-text-editor * {
	text-align: left !important;
}

.elementor-element-ff4cb45 .elementor-widget-text-editor,
.elementor-element-071833e .elementor-widget-text-editor {
	font-size: 15.5px !important;
	line-height: 1.75 !important;
	color: var(--global-palette5) !important;
	max-width: 46ch;
}

.elementor-element-ff4cb45 .elementor-widget-text-editor p,
.elementor-element-071833e .elementor-widget-text-editor p {
	margin: 0 0 1em;
}

.elementor-element-ff4cb45 .elementor-widget-text-editor p:last-child,
.elementor-element-071833e .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* ---- image: one clean rounded frame, no blob radius / stray shadows ---- */
.elementor-element-ff4cb45 .elementor-widget-image,
.elementor-element-ff4cb45 .elementor-widget-image .elementor-widget-container,
.elementor-element-071833e .elementor-widget-image,
.elementor-element-071833e .elementor-widget-image .elementor-widget-container {
	overflow: visible;
	filter: none !important;
	transform: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.elementor-element-ff4cb45 .elementor-widget-image img,
.elementor-element-071833e .elementor-widget-image img {
	display: block;
	width: 100% !important;
	max-width: 500px;
	height: auto !important;
	border-radius: 14px !important;
	filter: none !important;
	transform: none !important;
	box-shadow: 0 24px 48px -28px rgba(20, 39, 63, 0.40) !important;
}

/* image hugs the outer edge of its cell, tightening the zigzag */
.elementor-element-5ab10fd .elementor-widget-image img,
.elementor-element-0dfdf68 .elementor-widget-image img {
	margin-left: auto;
}

.elementor-element-e2afade .elementor-widget-image img,
.elementor-element-07dd867 .elementor-widget-image img {
	margin-right: auto;
}

/* ---- stack on narrow screens: image, then its text, for each pair ---- */
@media (max-width: 900px) {
	.elementor-element-ff4cb45 > .e-con-inner,
	.elementor-element-ff4cb45:not(:has(> .e-con-inner)),
	.elementor-element-4a681bf > .e-con-inner,
	.elementor-element-4a681bf:not(:has(> .e-con-inner)) {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: clamp(36px, 10vw, 60px) !important;
		max-width: 34rem !important;
	}
	.elementor-element-ff4cb45 .elementor-widget-image img,
	.elementor-element-071833e .elementor-widget-image img {
		max-width: 100%;
		margin-inline: auto;
	}
	.elementor-element-5ab10fd { order: 1; }
	.elementor-element-4a41c01 { order: 2; }
	.elementor-element-e2afade { order: 3; }
	.elementor-element-4170c3f { order: 4; }
	.elementor-element-0dfdf68 { order: 1; }
	.elementor-element-171f85d { order: 2; }
	.elementor-element-07dd867 { order: 3; }
	.elementor-element-0029cd1 { order: 4; }
}

/* ---- Hide the hand-built Elementor footer — the real .dmse-footer already
        renders site-wide via the kadence_footer hook (see functions.php). ---- */
.elementor-element-c375571,
.elementor-element-3853a1dc {
	display: none !important;
}

@media (max-width: 1024px) {
	.elementor-element-38bda81 .profile-card .profile-header.ekit-team-img {
		aspect-ratio: 1 / 1;
	}
}

/* ==========================================================================
   12. RESOURCES PAGE  (post 25) — CatFolders "document gallery"
   The page is title-less / full-width / unboxed (Kadence page settings) and
   holds a single CatFolders document-gallery block. The plugin ships a
   DataTables build painted in WP-admin blue (#2271b1), with pure-black body
   text, pale hairlines, viewport-scaled font sizing and boxy pagination.
   Retheme it to the site design language: re-token the palette, frame the
   gallery in the site container, promote the library title to the page hero
   (this page has no Kadence title band), and restyle the toolbar / table /
   grid cards / pagination to match. Scoped to this page; content untouched.
   ========================================================================== */

.page-id-25 #cf-app {
	font-size: 16px;
	line-height: 1.6;
	color: var(--global-palette5);
}

.page-id-25 #cf-app .cf-main {
	max-width: 1160px;
	margin-inline: auto;
	padding: clamp(32px, 5vw, 64px) 20px clamp(48px, 7vw, 88px);
}

.page-id-25 #cf-app .cf-container {
	padding-inline: 0;
	color: inherit;
}

.page-id-25 #cf-app p {
	color: inherit;
}

/* ---- Library title → page hero (icon dropped, accent bar below) ---- */
.page-id-25 #cf-app .cf-title {
	display: block;
	margin: 0 0 clamp(24px, 4vw, 36px);
	font-family: 'Inter', sans-serif;
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--global-palette3);
}

.page-id-25 #cf-app .cf-title img {
	display: none !important;
}

.page-id-25 #cf-app .cf-title span {
	display: inline !important;
}

.page-id-25 #cf-app .cf-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 18px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--global-palette1), var(--global-palette2));
}

/* ---- Toolbar: search field, layout toggle, length select ---- */
.page-id-25 #cf-app .cf-table__top {
	margin-bottom: clamp(18px, 3vw, 28px);
}

.page-id-25 #cf-app .cf-table__top .dataTables_filter input,
.page-id-25 #cf-app .cf-table__bottom .dataTables_filter input {
	height: 46px;
	border: 1px solid #dfe3ea;
	border-radius: 8px;
	background-color: #f7f9fc;
	color: var(--global-palette3);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.page-id-25 #cf-app .cf-table__top .dataTables_filter input:focus,
.page-id-25 #cf-app .cf-table__bottom .dataTables_filter input:focus {
	border-color: var(--global-palette1);
	background-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
}

.page-id-25 #cf-app .cf-table__top .dataTables_filter label::before,
.page-id-25 #cf-app .cf-table__bottom .dataTables_filter label::before {
	left: 16px;
	top: 14px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%237b879f'%20stroke-width='2.2'%20stroke-linecap='round'%3E%3Ccircle%20cx='10.5'%20cy='10.5'%20r='7'/%3E%3Cline%20x1='20'%20y1='20'%20x2='16'%20y2='16'/%3E%3C/svg%3E");
}

.page-id-25 #cf-app .cf-options {
	column-gap: 0.5rem;
	color: var(--global-palette6);
}

.page-id-25 #cf-app .cf-options__grid,
.page-id-25 #cf-app .cf-options__list {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	color: var(--global-palette6);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.page-id-25 #cf-app .cf-options__grid.active,
.page-id-25 #cf-app .cf-options__list.active {
	color: var(--global-palette1);
	background: var(--global-palette7);
}

.page-id-25 #cf-app .dataTables_length select {
	border-radius: 8px;
	border: 1px solid #dfe3ea;
	background-color: #f7f9fc;
	color: var(--global-palette4);
}

/* ---- Table ---- */
.page-id-25 #cf-app table.cf-table thead th {
	padding: 10px 14px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--global-palette6);
	background-color: transparent;
	border-bottom: 1px solid rgba(20, 39, 63, 0.1) !important;
}

.page-id-25 #cf-app table.cf-table thead th span {
	font-weight: 700;
}

.page-id-25 #cf-app table.cf-table tbody td {
	padding: 14px;
	font-size: 14.5px;
	color: var(--global-palette5);
	border-bottom: 1px solid rgba(20, 39, 63, 0.08);
}

.page-id-25 #cf-app table.cf-table tbody tr:first-child td {
	border-top: 1px solid rgba(20, 39, 63, 0.08);
}

.page-id-25 #cf-app table.cf-table tbody tr:hover td {
	background-color: rgba(47, 111, 237, 0.04) !important;
}

.page-id-25 #cf-app .cf-table a.cf-icon {
	color: var(--global-palette3);
	font-weight: 600;
}

.page-id-25 #cf-app .cf-table .cf-icon:hover {
	color: var(--global-palette1);
}

.page-id-25 #cf-app .cf-column-size,
.page-id-25 #cf-app .cf-column-modified,
.page-id-25 #cf-app .cf-download-count {
	color: var(--global-palette6);
	font-size: 13.5px;
}

/* file extension → small brand pill (list view only; hidden in grid) */
.page-id-25 #cf-app .cf-column-type {
	display: inline-block;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--global-palette1);
	background: var(--global-palette7);
	border-radius: 999px;
}

/* ---- Download button ---- */
.page-id-25 #cf-app .btn-download {
	border: 1px solid #dfe3ea;
	border-radius: 8px;
	font-weight: 600;
	color: var(--global-palette4);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.page-id-25 #cf-app .btn-download svg {
	color: var(--global-palette1);
}

.page-id-25 #cf-app .btn-download:hover {
	border-color: var(--global-palette1);
	background: var(--global-palette1);
	color: #ffffff;
	transform: translateY(-1px);
}

.page-id-25 #cf-app .btn-download:hover svg {
	color: #ffffff;
}

/* ---- Grid view → site card treatment ---- */
.page-id-25 #cf-app .cf-table-grid tbody {
	gap: 20px;
}

.page-id-25 #cf-app .cf-table-grid tbody tr {
	padding: 28px 22px 22px;
	background: #ffffff;
	border: 1px solid rgba(20, 39, 63, 0.1);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(20, 39, 63, 0.06);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.page-id-25 #cf-app .cf-table-grid tbody tr:hover {
	transform: translateY(-4px);
	background: #ffffff;
	border-color: rgba(47, 111, 237, 0.3);
	box-shadow: 0 20px 38px -22px rgba(20, 39, 63, 0.3);
}

.page-id-25 #cf-app table.cf-table-grid .cf-column-last {
	border-top-color: rgba(20, 39, 63, 0.08);
}

/* ---- Pagination (only the prev / next arrows are shown) ---- */
.page-id-25 #cf-app .cf-pagination,
.page-id-25 #cf-app .cf-options_info,
.page-id-25 #cf-app .dataTables_info {
	color: var(--global-palette6);
}

.page-id-25 #cf-app .cf-pagination .dataTables_paginate .paginate_button {
	width: 38px;
	height: 38px;
	color: var(--global-palette5);
	border: 1px solid rgba(20, 39, 63, 0.14);
	border-radius: 8px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.page-id-25 #cf-app .cf-pagination .dataTables_paginate .paginate_button.previous {
	border-radius: 8px 0 0 8px;
}

.page-id-25 #cf-app .cf-pagination .dataTables_paginate .paginate_button.next {
	border-left: 0;
	border-radius: 0 8px 8px 0;
}

.page-id-25 #cf-app .cf-pagination .dataTables_paginate .paginate_button:hover {
	background: var(--global-palette1);
	border-color: var(--global-palette1);
	color: #ffffff !important;
}

.page-id-25 #cf-app .cf-pagination .dataTables_paginate .paginate_button:hover svg {
	color: #ffffff;
}

.page-id-25 #cf-app .cf-pagination .dataTables_paginate .paginate_button.disabled:hover {
	background: transparent;
	border-color: rgba(20, 39, 63, 0.14);
	color: var(--global-palette5) !important;
}

/* ---- Empty state ---- */
.page-id-25 #cf-app .cf-empty-data.cf-table tr td {
	padding: 40px 0;
	color: var(--global-palette6);
	border-color: rgba(20, 39, 63, 0.08) !important;
}