/**
 * CSAT Design System
 * ------------------
 * Clean, reusable component CSS implementing STYLE-GUIDE.md. Used by pages that
 * have been *redesigned* off Elementor (as opposed to exact snapshots). All
 * rules are scoped under `.csat-page` so they never collide with the shared
 * ElementsKit header/footer chrome.
 */

.csat-page {
	/* Tokens (from the Elementor Default Kit / style guide) */
	--csat-blue: #279BD7;
	--csat-navy: #022047;
	--csat-navy-2: #092357;
	--csat-secondary: #404040;
	--csat-text: #7A7A7A;
	--csat-muted: #858585;
	--csat-border: #E7E7E7;
	--csat-surface: #F8F8F9;
	--csat-surface-2: #F3F6F9;
	--csat-white: #ffffff;

	--csat-font: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--csat-container: 1440px;
	--csat-gutter: clamp(20px, 5vw, 60px);
	--csat-radius-card: 15px;
	--csat-radius-btn: 10px;
	/* Drop shadows are off site-wide. The tokens are kept (rather than removed
	   along with their ~21 `box-shadow: var(--csat-shadow)` call sites) so the
	   flat look stays a one-line decision instead of scattered edits. */
	--csat-shadow: none;
	--csat-shadow-hover: none;

	font-family: var(--csat-font);
	color: var(--csat-text);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip; /* guard against any child overflow on small screens */
	/* Lining figures everywhere so numbers share one baseline (Raleway defaults to
	   oldstyle). Stats keep their more-specific tabular rule for column alignment. */
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}
.csat-page h1,
.csat-page h2,
.csat-page h3,
.csat-page p { overflow-wrap: break-word; }

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

/* ---- Layout ---------------------------------------------------------- */
.csat-container {
	width: 100%;
	max-width: var(--csat-container);
	margin-inline: auto;
	padding-inline: var(--csat-gutter);
}

.csat-section {
	padding-block: clamp(48px, 7vw, 100px);
}
.csat-section--tight { padding-block: clamp(36px, 5vw, 72px); }
.csat-section--surface { background: var(--csat-surface); }
.csat-section--surface-2 { background: var(--csat-surface-2); }

/* ---- Typography ------------------------------------------------------ */
.csat-eyebrow {
	font-family: var(--csat-font);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 5px;
	color: var(--csat-blue);
	margin: 0 0 16px;
	display: block;
}
/* Scoped under .csat-page so they beat the Elementor kit's element rules
   (e.g. `.elementor-kit-6 h1{font-size:64px}`) that the header/footer chrome brings in. */
.csat-page .csat-h1 {
	font-family: var(--csat-font);
	font-size: clamp(1.55rem, 5.4vw, 3.6rem);
	font-weight: 900;
	line-height: 1.14;
	letter-spacing: 0;
	text-transform: uppercase;
	margin: 0 0 20px;
	color: var(--csat-navy);
}
/* Title-case hero H1 on selected pages (Services, Industries, About, Contact):
   keep the natural casing from the markup instead of the global uppercasing. */
.csat-page.csat-page--titlecase-h1 .csat-h1 { text-transform: none; }
.csat-page .csat-h2 {
	font-family: var(--csat-font);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 16px;
	color: var(--csat-navy);
}
.csat-page .csat-h3 {
	font-family: var(--csat-font);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	color: var(--csat-navy);
}
.csat-lead {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--csat-text);
	margin: 0 0 28px;
	max-width: 70ch;
}
.csat-measure { max-width: 60ch; }
.csat-center { text-align: center; }
.csat-center .csat-lead,
.csat-center .csat-eyebrow { margin-inline: auto; }

/* ---- Buttons --------------------------------------------------------- */
.csat-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--csat-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1;
	padding: 15px 28px;
	border-radius: var(--csat-radius-btn);
	border: 2px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.csat-btn--primary {
	background: var(--csat-navy);
	color: #fff;
}
.csat-btn--primary:hover {
	background: var(--csat-blue);
	transform: translateY(-2px);
}
.csat-btn--outline {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.7);
}
.csat-btn--outline:hover {
	background: #fff;
	color: var(--csat-navy);
	transform: translateY(-2px);
}
/* Secondary button for LIGHT backgrounds (navy outline). */
.csat-btn--secondary {
	background: transparent;
	color: var(--csat-navy);
	border-color: var(--csat-navy);
}
.csat-btn--secondary:hover {
	background: var(--csat-navy);
	color: #fff;
	transform: translateY(-2px);
}
.csat-btn--link {
	padding: 0;
	background: none;
	border: none;
	color: var(--csat-blue);
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 12px;
	font-weight: 800;
}
.csat-btn--link .csat-arrow { transition: transform .2s ease; }
.csat-btn--link:hover .csat-arrow { transform: translateX(6px); }

/* ---- Hero ------------------------------------------------------------ */
.csat-hero {
	/* Flat navy gradient — the blue radial glow layer was removed. */
	background: linear-gradient(135deg, var(--csat-navy) 0%, var(--csat-navy-2) 100%);
	color: #fff;
	padding-block: clamp(72px, 11vw, 150px);
	position: relative;
	overflow: hidden;
}
.csat-hero .csat-eyebrow { color: #7fd0f5; }
.csat-hero .csat-h1 { color: #fff; }
.csat-hero__inner { max-width: 820px; }
/* Primary CTA needs contrast against the navy hero. */
.csat-hero .csat-btn--primary { background: var(--csat-blue); }
.csat-hero .csat-btn--primary:hover { background: #fff; color: var(--csat-navy); }
.csat-hero__lead {
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 32px;
}
.csat-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.csat-hero__actions--center { justify-content: center; margin-top: 32px; }

/* ---- Split media hero (Industries style: light bg, text left, image right) ---- */
.csat-hero--split {
	background: #fff;
	color: var(--csat-text);
	padding-block: clamp(48px, 8vw, 110px);
}
/* Full-screen hero (home): fills the viewport below the sticky header + ribbon. */
.csat-hero--split.csat-hero--fullscreen {
	display: flex;
	align-items: center;
	min-height: calc(100vh - 110px);
	min-height: calc(100svh - 110px);
	padding-block: clamp(32px, 5vh, 64px);
}
.csat-hero--fullscreen > .csat-container { width: 100%; }
/* Home hero headline treatment (per brief). Compound selector so it beats the
   base .csat-page .csat-hero--split .csat-h1 rule regardless of source order. */
.csat-page .csat-hero--split.csat-hero--fullscreen .csat-h1 {
	font-family: "Raleway", Sans-serif;
	font-size: 3.6rem;
	font-weight: 900;
	text-transform: none;
	line-height: 1.1666em;
}
@media (max-width: 600px) {
	.csat-page .csat-hero--split.csat-hero--fullscreen .csat-h1 { font-size: 2.4rem; }
}
.csat-hero--split .csat-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.csat-hero--split .csat-hero__content { max-width: 620px; }
/* Left-column text matches the Managed Device Lifecycle Management hero. */
.csat-hero--split .csat-eyebrow {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: none;
	color: var(--csat-blue);
	margin-bottom: 20px;
}
.csat-page .csat-hero--split .csat-h1 {
	color: var(--csat-navy-2);      /* #092357 — same deep navy as MDLM hero */
	text-transform: none;           /* sentence/title case, not uppercase */
	font-weight: 800;
	font-size: clamp(2rem, 4.2vw, 2.8rem);   /* ~2.8em, matching MDLM */
	line-height: 1.15;
}
.csat-hero--split .csat-hero__lead {
	color: #333;          /* matches the MDLM hero paragraph */
	font-size: 16px;      /* fixed 16px (no growth on wide screens) */
	line-height: 1.5;
	font-weight: 400;
	margin: 0 0 28px;
}
.csat-hero--split .csat-hero__lead + .csat-hero__lead { margin-top: -12px; }
.csat-hero--split .csat-hero__tagline {
	font-family: var(--csat-font);
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.35;
	color: var(--csat-navy-2);
	margin: 4px 0 26px;
}
.csat-hero--split .csat-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.csat-hero__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--csat-radius-card);
	box-shadow: var(--csat-shadow);
}
/* Hero image crossfade carousel: the slides are absolutely positioned, so the
   media box needs its own height (via aspect-ratio) and carries the radius/shadow. */
.csat-hero__media--carousel {
	aspect-ratio: 1663 / 1247;
	border-radius: var(--csat-radius-card);
	box-shadow: var(--csat-shadow);
	overflow: hidden;
}
.csat-hero__media--carousel .csat-carousel__slide {
	height: 100%;      /* beat .csat-hero__media img { height: auto } */
	border-radius: 0;  /* radius lives on the container now */
	box-shadow: none;
}
/* Hero video-background panel (home): YouTube background with live counters over it.
   initBackgroundVideos() injects the iframe into .elementor-background-video-embed. */
.csat-hero__media--video {
	position: relative;
	aspect-ratio: 1 / 1;   /* square: equal height and width */
	border-radius: var(--csat-radius-card);
	overflow: hidden;
	box-shadow: var(--csat-shadow);
	background: #14171c;   /* neutral dark fallback before the video paints (not navy) */
}
/* Cover the square panel with the 16:9 video: full height, width overflows and is
   cropped left/right by overflow:hidden. No black bars behind the counters. */
.csat-hero__media--video .csat-hero__video {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	height: 100%;
	width: 177.78%;   /* 16:9 at full square height */
	max-width: none;
	border: 0;
	display: block;
	pointer-events: none;
}
.csat-hero__video-overlay {
	position: absolute; inset: 0; z-index: 2;
	display: grid; grid-template-columns: 1fr 1fr; align-content: end;
	gap: 16px clamp(16px, 2.5vw, 32px);
	padding: clamp(20px, 3vw, 34px);
	/* Translucent navy rising from the bottom: light enough that the video shows
	   through and it reads as blue (not near-black), fading to transparent up top. */
	background: linear-gradient(180deg, rgba(2, 32, 71, 0) 30%, rgba(2, 32, 71, 0.62) 100%);
	pointer-events: none;
}
.csat-hero__metric { line-height: 1.1; }
.weekly-counter, .annual-counter, .csat-hero__metric-value {
	display: block; font-family: var(--csat-font); font-weight: 800;
	font-size: clamp(1.5rem, 2.7vw, 2.15rem); line-height: 1; color: #fff;
	font-variant-numeric: lining-nums tabular-nums;
}
.csat-hero__metric-value sup {
	font-size: 1.1em; font-weight: 700; top: -0.3em; margin-left: 2px;
	color: var(--csat-accent-sky, #7FD0F5);
}
.csat-hero__metric-label {
	display: block; margin-top: 6px; font-size: 0.82rem; font-weight: 600;
	letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 900px) {
	.csat-hero--split .csat-hero__grid { grid-template-columns: 1fr; }
	.csat-hero--split .csat-hero__content { max-width: none; }
}

/* ---- "Trusted by" client-logo strip (home, on the navy band) --------
   The logo PNGs have opaque white backgrounds, so on navy each logo sits inside a
   uniform white rounded chip. Kill the slider's own dividers/borders first. */
.csat-page .elementskit-clients-slider,
.csat-page .elementskit-client-slider-item,
.csat-page .elementskit-clients-slider .swiper-slide,
.csat-page .elementskit-clients-slider .content-image {
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
.csat-page .elementskit-clients-slider .single-client {
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: #fff !important;
	border: 0 !important;
	border-radius: 12px;
	padding: 16px 18px !important;
	margin: 0;
	min-height: 156px;
}
.csat-page .elementskit-clients-slider .content-image {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	width: 100%;
}
.csat-page .elementskit-clients-slider img {
	width: auto !important;
	height: auto !important;
	max-height: 120px;
	max-width: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.9;
	transition: opacity .3s ease, filter .3s ease;
}
.csat-page .elementskit-clients-slider .swiper-slide:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* ---- Section intro --------------------------------------------------- */
.csat-intro { max-width: 860px; }
.csat-intro--center { margin-inline: auto; text-align: center; }
.csat-intro--center .csat-lead { margin-inline: auto; }
.csat-intro--center .csat-btn { margin-top: 8px; }

/* ---- Full-width dark band (navy feature section) --------------------- */
.csat-band--dark {
	background: linear-gradient(135deg, var(--csat-navy) 0%, var(--csat-navy-2) 100%);
	color: #fff;
}
.csat-band--dark .csat-eyebrow { color: #7fd0f5; }
.csat-page .csat-band--dark .csat-h2 { color: #fff; }
.csat-band--dark .csat-lead { color: rgba(255, 255, 255, 0.85); }
/* Solid navy fill (matches the MDLM stats band) — pair with .csat-band--dark. */
.csat-band--solid { background: var(--csat-navy); }

/* ---- Card grid ------------------------------------------------------- */
.csat-grid {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 48px;
}
@media (max-width: 1024px) { .csat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .csat-grid { grid-template-columns: 1fr; } }
/* 3-up variant (e.g. a row of three related-service cards). */
.csat-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .csat-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .csat-grid--3 { grid-template-columns: 1fr; } }

.csat-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--csat-border);
	border-radius: var(--csat-radius-card);
	overflow: hidden;
	box-shadow: var(--csat-shadow);
	transition: transform .25s ease, box-shadow .25s ease;
}
.csat-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--csat-shadow-hover);
}
.csat-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--csat-surface-2);
}
.csat-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.csat-card:hover .csat-card__media img { transform: scale(1.05); }
.csat-card__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	flex: 1;
}
.csat-card__title { margin: 0; }
.csat-card__link { margin-top: auto; }

/* ---- AI Server Repair feature card (home) ---------------------------
   A bold navy card that lifts the newest program off the light section around
   it, anchored by the technician photograph, with the two proof numbers pulled
   out in accent sky. */
.csat-aifeature {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	background: linear-gradient(135deg, var(--csat-navy) 0%, var(--csat-navy-2) 100%);
	border-radius: var(--csat-radius-card);
	overflow: hidden;
	box-shadow: var(--csat-shadow-hover);
	color: #fff;
}
.csat-aifeature__media { position: relative; min-height: 480px; }
.csat-aifeature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* faint navy edge so the photo marries into the card rather than butting a hard seam */
.csat-aifeature__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(2,32,71,0) 78%, rgba(2,32,71,0.35) 100%);
}
.csat-aifeature__body {
	display: flex; flex-direction: column; justify-content: center;
	gap: 20px;
	padding: clamp(32px, 4.5vw, 68px);
}
.csat-aifeature .csat-eyebrow { color: #7FD0F5; }
.csat-page .csat-aifeature .csat-h2 { color: #fff; }
.csat-aifeature__lead { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 1rem; line-height: 1.65; }
.csat-aifeature__stats { display: flex; flex-wrap: wrap; gap: clamp(22px, 3.5vw, 44px); margin: 4px 0 2px; }
.csat-aifeature__stat { max-width: 220px; }
.csat-aifeature__num {
	display: block; font-family: var(--csat-font); font-weight: 800;
	font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; color: #7FD0F5;
	font-variant-numeric: lining-nums tabular-nums;
}
.csat-aifeature__lbl { display: block; margin-top: 8px; font-size: 0.82rem; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }
.csat-aifeature__body .csat-btn { align-self: flex-start; margin-top: 6px; }
.csat-aifeature .csat-btn--primary { background: var(--csat-blue); color: #fff; }
.csat-aifeature .csat-btn--primary:hover,
.csat-aifeature .csat-btn--primary:focus-visible { background: var(--csat-blue); filter: brightness(1.1); }
@media (max-width: 860px) {
	.csat-aifeature { grid-template-columns: 1fr; }
	.csat-aifeature__media { min-height: 300px; order: -1; }
	.csat-aifeature__media::after { display: none; }
}

/* ---- Dark CTA band --------------------------------------------------- */
.csat-cta {
	background: linear-gradient(135deg, var(--csat-navy) 0%, var(--csat-navy-2) 100%);
	color: #fff;
	border-radius: var(--csat-radius-card);
	padding: clamp(36px, 5vw, 64px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}
.csat-cta__text { max-width: 640px; }
.csat-page .csat-cta__text h2 { color: #fff; margin: 0 0 10px; }
.csat-cta__text p { color: rgba(255, 255, 255, 0.85); margin: 0; }

/* ---- Stat / metric row ----------------------------------------------- */
.csat-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.csat-stat { text-align: center; padding: 12px; }
.csat-stat__num {
	font-family: var(--csat-font);
	font-size: clamp(2rem, 3.4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	color: var(--csat-blue);
}
.csat-stat__label {
	font-size: 14px;
	line-height: 1.4;
	color: var(--csat-text);
	margin-top: 10px;
}
.csat-band--dark .csat-stat__num { color: #7fd0f5; }
.csat-band--dark .csat-stat__label { color: rgba(255, 255, 255, 0.85); }
@media (max-width: 700px) { .csat-stats { grid-template-columns: repeat(2, 1fr); } }

/* stats, prices, dates — anywhere numbers must align */
.csat-stat, .csat-servicelist {
	font-variant-numeric: lining-nums tabular-nums;
	/* older-browser fallback: */
	font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ---- Two-column media feature (image + text) ------------------------- */
.csat-media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.csat-media__figure img {
	width: 100%;
	height: 100%;
	max-height: 460px;
	object-fit: cover;
	display: block;
	border-radius: var(--csat-radius-card);
	box-shadow: var(--csat-shadow);
}
.csat-media__body { max-width: 620px; }
@media (max-width: 900px) {
	.csat-media { grid-template-columns: 1fr; }
	.csat-media--reverse .csat-media__figure { order: -1; } /* image on top when stacked */
}
@media (min-width: 901px) {
	.csat-media--reverse .csat-media__figure { order: 2; }  /* image on the right */
}

/* ---- Checklist ------------------------------------------------------- */
.csat-checklist {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
.csat-checklist li {
	position: relative;
	padding-left: 36px;
	font-size: 1rem;
	line-height: 1.5;
	color: inherit;
}
.csat-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--csat-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ---- Process steps (dynamic flow) ----------------------------------- */
.csat-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
	margin-top: 52px;
	counter-reset: step;
}
.csat-step { text-align: center; position: relative; }

/* Connecting track from each node to the next, with an animated blue sweep
   that flows in the reading direction to signal a sequential process. */
.csat-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 28px;                     /* vertical centre of the node */
	left: 50%;
	width: calc(100% + 24px);      /* reach the next node's centre (grid gap = 24px) */
	height: 3px;
	transform: translateY(-50%);
	border-radius: 3px;
	z-index: 0;
	background-image:
		linear-gradient(90deg, rgba(39, 155, 215, 0) 0%, var(--csat-blue) 50%, rgba(39, 155, 215, 0) 100%),
		linear-gradient(#e2e8f0, #e2e8f0);
	background-repeat: no-repeat, no-repeat;
	background-size: 45% 100%, 100% 100%;
	background-position: -60% 0, 0 0;
	animation: csat-flow 2.4s linear infinite;
}
@keyframes csat-flow {
	from { background-position: -60% 0, 0 0; }
	to   { background-position: 160% 0, 0 0; }
}
/* Stagger each segment so the blue pulse travels across the chain (a wave). */
.csat-step:nth-child(2)::after { animation-delay: .3s; }
.csat-step:nth-child(3)::after { animation-delay: .6s; }
.csat-step:nth-child(4)::after { animation-delay: .9s; }
.csat-step:nth-child(5)::after { animation-delay: 1.2s; }
.csat-step__num {
	counter-increment: step;
	position: relative;
	z-index: 2;
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--csat-navy) 0%, var(--csat-navy-2) 100%);
	color: #fff;
	font-weight: 800;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* white ring masks the track where it meets the node (structural, not a
	   shadow — the drop shadow that used to sit alongside it is gone) */
	box-shadow: 0 0 0 6px #fff;
	transition: transform .25s ease;
}
.csat-step__num::before { content: counter(step); }
.csat-step:hover .csat-step__num {
	transform: translateY(-3px) scale(1.06);
}
.csat-step__title { font-weight: 700; color: var(--csat-navy); margin: 0 0 6px; }
.csat-step p { font-size: 14px; margin: 0; }
@media (max-width: 900px) {
	.csat-steps { grid-template-columns: repeat(2, 1fr); }
	.csat-step:not(:last-child)::after { display: none; }
}
@media (max-width: 480px) { .csat-steps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
	.csat-step:not(:last-child)::after { animation: none; background-position: 50% 0, 0 0; }
}

/* ---- Icon feature grid ----------------------------------------------- */
.csat-features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	margin-top: 48px;
}
.csat-feature {
	position: relative;
	background: #fff;
	border: 1px solid var(--csat-border);
	border-radius: var(--csat-radius-card);
	padding: 32px 26px 28px;
	box-shadow: var(--csat-shadow);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.csat-feature:hover {
	transform: translateY(-5px);
	border-color: rgba(39, 155, 215, 0.5);
}
/* Clean line-icon in the brand blue — no badge/background. Sized up so it
   still reads as a deliberate focal point. */
.csat-feature__icon {
	color: #b8c0ca;
	margin-bottom: 16px;
	line-height: 0;
	transform-origin: left center;
	transition: transform .25s ease;
}
.csat-feature:hover .csat-feature__icon { transform: scale(1.1); }
.csat-feature__icon svg { width: 38px; height: 38px; stroke-width: 1.75; }
.csat-feature__title { font-weight: 700; color: var(--csat-navy); margin: 0 0 8px; font-size: 1.08rem; }
.csat-feature p { margin: 0; font-size: 0.95rem; }
@media (max-width: 1024px) { .csat-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .csat-features { grid-template-columns: 1fr; } }
/* 3-up variant (e.g. a 6-item grid reads as 2 balanced rows). */
.csat-features--3up { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .csat-features--3up { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .csat-features--3up { grid-template-columns: 1fr; } }
/* Certification badge sits as the card's label above the discipline title. */
.csat-feature__badge { display: block; margin: 0 0 10px; color: var(--csat-blue); font-size: 1.35rem; font-weight: 800; letter-spacing: 0.5px; }
.csat-feature .csat-feature__badge + .csat-feature__title { font-size: 1.02rem; color: var(--csat-navy-2); }

/* Video testimonial grid (Careers "Our Stories"). */
.csat-video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 48px; }
.csat-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--csat-radius-card); overflow: hidden; box-shadow: var(--csat-shadow); background: #14171c; }
.csat-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 760px) { .csat-video-grid { grid-template-columns: 1fr; } }

/* ClearCompany / HRMDirect job-board embed (Careers "Open Roles"). */
.csat-jobboard { margin-top: 40px; }
.csat-jobboard #iframeHeightDiv { width: 100%; }
.csat-jobboard iframe { width: 100%; border: 0; display: block; }

/* Feature cards on a dark band (e.g. Industries "across all industries"):
   translucent card, light text, no icon needed. */
.csat-band--dark .csat-feature {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: none;
}
.csat-band--dark .csat-feature:hover {
	border-color: rgba(127, 208, 245, 0.6);
}
.csat-band--dark .csat-feature__title { color: #fff; }
.csat-band--dark .csat-feature p { color: rgba(255, 255, 255, 0.82); }

/* ESG pillars — boxless columns on the dark band, split by hairline rules,
   each led by a bold circular icon. */
.csat-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin-top: 52px;
}
.csat-pillars--4 { grid-template-columns: repeat(4, 1fr); }
.csat-pillar {
	padding: 6px clamp(24px, 3vw, 46px);
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.csat-pillar:first-child { padding-left: 0; border-left: 0; }
.csat-pillar:last-child { padding-right: 0; }
.csat-pillar__icon {
	width: 64px; height: 64px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 24px;
	background: linear-gradient(135deg, #279BD7 0%, #56b4e6 100%);
	color: #fff;
}
.csat-pillar__icon svg { width: 30px; height: 30px; }
.csat-pillar__title { color: #fff; font-weight: 700; font-size: 1.2rem; margin: 0 0 12px; }
.csat-pillar p { color: rgba(255, 255, 255, 0.82); margin: 0; font-size: 0.98rem; line-height: 1.65; }
@media (max-width: 1024px) {
	/* Four-up pillars go boxless 2x2 before collapsing, so the dividers never
	   land mid-row. */
	.csat-pillars--4 { grid-template-columns: repeat(2, 1fr); gap: 44px 48px; }
	.csat-pillars--4 .csat-pillar { padding: 0; border-left: 0; }
}
@media (max-width: 860px) {
	.csat-pillars { grid-template-columns: 1fr; gap: 40px; }
	.csat-pillar { padding: 0; border-left: 0; }
}
@media (max-width: 560px) {
	.csat-pillars--4 { grid-template-columns: 1fr; }
}

/* ---- Team grid + bio modal (About) ---------------------------------- */
.csat-team {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 48px;
}
.csat-team__member {
	appearance: none;
	font: inherit;
	background: #fff;
	border: 1px solid var(--csat-border);
	border-radius: var(--csat-radius-card);
	box-shadow: var(--csat-shadow);
	padding: 30px 20px 26px;
	text-align: center;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Keep the card white in every interactive state — the hello-elementor reset
   pinks button :hover/:focus/:active (#c36); neutralize all of them. */
.csat-team__member:hover,
.csat-team__member:focus,
.csat-team__member:focus-visible,
.csat-team__member:active {
	background: #fff;
	color: inherit;
}
.csat-team__member:hover,
.csat-team__member:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--csat-shadow-hover);
	border-color: rgba(39, 155, 215, 0.5);
	outline: none;
}
.csat-team__photo {
	width: 122px;
	height: 122px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin: 0 auto 18px;
}
.csat-team__name { display: block; font-weight: 700; color: var(--csat-navy); font-size: 1.1rem; margin: 0 0 4px; }
.csat-team__role { display: block; color: var(--csat-blue); font-weight: 600; font-size: 0.9rem; margin: 0 0 12px; }
.csat-team__more {
	display: block;
	font-size: 0.72rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
	color: var(--csat-muted);
}
.csat-team__member:hover .csat-team__more,
.csat-team__member:focus-visible .csat-team__more { color: var(--csat-blue); }
@media (max-width: 1024px) { .csat-team { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .csat-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .csat-team { grid-template-columns: 1fr; } }

/* Bio modal */
body.csat-modal-open { overflow: hidden; }
.csat-modal { position: fixed; inset: 0; z-index: 2000; display: none; }
.csat-modal.is-open { display: block; }
.csat-modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(2, 32, 71, 0.62);
	-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.csat-modal__dialog {
	position: relative;
	max-width: 620px; width: calc(100% - 40px);
	max-height: calc(100vh - 80px); overflow-y: auto;
	margin: 40px auto;
	background: #fff; border-radius: 16px;
	padding: clamp(28px, 4vw, 44px);
	animation: csat-modal-in .25s ease;
}
@keyframes csat-modal-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.csat-modal__close {
	position: absolute; top: 16px; right: 16px;
	width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: #f0f3f7; color: var(--csat-navy);
	font-size: 20px; line-height: 1; cursor: pointer;
	transition: background .2s ease;
}
.csat-modal__close:hover,
.csat-modal__close:focus,
.csat-modal__close:focus-visible,
.csat-modal__close:active { background: #e2e8f0; color: var(--csat-navy); }
.csat-modal__head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; padding-right: 36px; }
.csat-modal__photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: none; }
.csat-modal__name { font-weight: 800; color: var(--csat-navy); font-size: 1.4rem; margin: 0; line-height: 1.2; }
.csat-modal__role { color: var(--csat-blue); font-weight: 600; margin: 4px 0 0; }
.csat-modal__bio { color: var(--csat-text); line-height: 1.65; margin: 0; }
@media (prefers-reduced-motion: reduce) { .csat-modal__dialog { animation: none; } }

/* ---- FAQ accordion (native details/summary, works without JS) -------- */
.csat-faq { max-width: 840px; margin: 44px auto 0; }
.csat-faq details {
	border: 1px solid var(--csat-border);
	border-radius: 12px; background: #fff; margin-bottom: 14px;
}
.csat-faq summary {
	list-style: none; cursor: pointer;
	padding: 20px 24px; font-weight: 700; color: var(--csat-navy);
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.csat-faq summary::-webkit-details-marker { display: none; }
.csat-faq summary::after { content: "+"; color: var(--csat-blue); font-size: 26px; font-weight: 400; line-height: 1; flex: none; }
.csat-faq details[open] summary::after { content: "\2212"; }
.csat-faq__answer { padding: 0 24px 22px; margin: 0; color: var(--csat-text); line-height: 1.65; }

/* ---- Contact page: layout ------------------------------------------- */
/* Form is the focal panel (wider), direct channels sit alongside. */
.csat-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
@media (max-width: 960px) {
	.csat-contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* The form lives in a white card so it lifts off the surface band. */
.csat-contact-form-panel {
	background: #fff;
	border: 1px solid var(--csat-border);
	border-radius: var(--csat-radius-card);
	box-shadow: var(--csat-shadow);
	padding: clamp(24px, 4vw, 44px);
}
.csat-contact-form-panel .csat-lead { margin-bottom: 24px; font-size: 1rem; }
.csat-contact-info { padding-top: 6px; }

/* Direct-contact channel cards. */
.csat-channels { display: grid; gap: 14px; margin-top: 26px; }
.csat-channel {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--csat-border);
	border-radius: var(--csat-radius-card);
	box-shadow: var(--csat-shadow);
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.csat-channel:hover,
.csat-channel:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--csat-shadow-hover);
	border-color: rgba(39, 155, 215, 0.5);
	outline: none;
}
.csat-channel__icon { flex: none; color: var(--csat-blue); line-height: 0; transition: transform .25s ease; }
.csat-channel__icon svg { width: 26px; height: 26px; }
.csat-channel:hover .csat-channel__icon { transform: scale(1.1); }
.csat-channel__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.csat-channel__label {
	font-size: 0.72rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
	color: var(--csat-muted);
}
.csat-channel__value { font-weight: 700; color: var(--csat-navy); font-size: 1.02rem; overflow-wrap: anywhere; }
.csat-channel__sub { font-size: 0.85rem; color: var(--csat-text); }

/* "What happens next" — compact numbered sequence. */
.csat-next {
	margin-top: 30px;
	padding-top: 28px;
	border-top: 1px solid var(--csat-border);
}
.csat-next__title { font-size: 0.72rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--csat-muted); margin: 0 0 18px; }
.csat-next__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: nextstep; }
.csat-next__list li { display: flex; gap: 14px; align-items: flex-start; font-size: 0.95rem; line-height: 1.55; color: var(--csat-text); }
.csat-next__num {
	flex: none;
	width: 28px; height: 28px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--csat-navy) 0%, var(--csat-navy-2) 100%);
	color: #fff; font-size: 0.82rem; font-weight: 800;
}

/* ---- Contact page: facility + map ----------------------------------- */
.csat-map-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(28px, 4vw, 60px);
	align-items: center;
}
@media (max-width: 900px) {
	.csat-map-block { grid-template-columns: 1fr; }
}
.csat-address { font-style: normal; display: grid; gap: 6px; margin: 22px 0 26px; }
.csat-address__line { font-weight: 700; color: var(--csat-navy); font-size: 1.05rem; }
.csat-address__link { color: var(--csat-text); text-decoration: none; transition: color .2s ease; width: max-content; }
.csat-address__link:hover { color: var(--csat-blue); }
.csat-map {
	border-radius: var(--csat-radius-card);
	overflow: hidden;
	box-shadow: var(--csat-shadow);
	border: 1px solid var(--csat-border);
	background: var(--csat-surface-2);
}
.csat-map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	border: 0;
	filter: grayscale(0.15);
}

/* ---- Contact page: dark-band close ---------------------------------- */
.csat-contact-close { text-align: center; margin-top: clamp(36px, 5vw, 56px); }
.csat-contact-close p { color: rgba(255, 255, 255, 0.85); font-size: 1.1rem; margin: 0 0 20px; }
.csat-contact-close__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
/* Primary CTA needs contrast against the navy band (matches the hero rule). */
.csat-band--dark .csat-contact-close__actions .csat-btn--primary { background: var(--csat-blue); }
.csat-band--dark .csat-contact-close__actions .csat-btn--primary:hover { background: #fff; color: var(--csat-navy); }

/* ---- Contact form (FluentForm restyle) ------------------------------
   Scoped through .csat-contact-form so these rules out-specify FluentForm's
   own footer <style> (e.g. `form.fluent_form_1 .ff-btn-submit` at 0,3,1);
   .csat-page .csat-contact-form .frm-fluent-form … is 0,4,0 and wins without
   !important. Only the fields this form actually uses are styled. */
.csat-page .csat-contact-form .frm-fluent-form { margin: 0; }
.csat-page .csat-contact-form .frm-fluent-form fieldset { border: 0; margin: 0; padding: 0; }

/* Field groups + the two-up name row */
.csat-page .csat-contact-form .frm-fluent-form .ff-el-group { margin: 0 0 20px; }
.csat-page .csat-contact-form .frm-fluent-form .ff-t-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 0 0 20px;
}
.csat-page .csat-contact-form .frm-fluent-form .ff-t-cell { padding: 0; }
.csat-page .csat-contact-form .frm-fluent-form .ff-t-cell .ff-el-group { margin: 0; }
@media (max-width: 480px) {
	.csat-page .csat-contact-form .frm-fluent-form .ff-t-container { grid-template-columns: 1fr; }
}

/* Labels */
.csat-page .csat-contact-form .frm-fluent-form .ff-el-input--label { margin: 0 0 8px; }
.csat-page .csat-contact-form .frm-fluent-form .ff-el-input--label label {
	font-family: var(--csat-font);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--csat-navy);
	line-height: 1.3;
}
.csat-page .csat-contact-form .frm-fluent-form .ff-el-is-required label:after {
	content: " *";
	color: var(--csat-blue);
}

/* Inputs + textarea */
.csat-page .csat-contact-form .frm-fluent-form .ff-el-form-control {
	width: 100%;
	font-family: var(--csat-font);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--csat-secondary);
	background: #fff;
	border: 1px solid var(--csat-border);
	border-radius: var(--csat-radius-btn);
	padding: 13px 16px;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.csat-page .csat-contact-form .frm-fluent-form textarea.ff-el-form-control {
	min-height: 148px;
	resize: vertical;
}
.csat-page .csat-contact-form .frm-fluent-form .ff-el-form-control::placeholder {
	color: #6f6f6f; /* ≥4.5:1 on white */
	opacity: 1;
}
.csat-page .csat-contact-form .frm-fluent-form .ff-el-form-control:focus {
	border-color: var(--csat-blue);
	box-shadow: 0 0 0 3px rgba(39, 155, 215, 0.18);
	outline: none;
}
.csat-page .csat-contact-form .frm-fluent-form .ff-el-form-control[aria-invalid="true"] {
	border-color: #d64545;
}
.csat-page .csat-contact-form .frm-fluent-form .ff-el-form-control[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.16);
}

/* Validation messages */
.csat-page .csat-contact-form .frm-fluent-form .error,
.csat-page .csat-contact-form .frm-fluent-form .text-danger {
	color: #c53030;
	font-size: 0.85rem;
	line-height: 1.4;
	margin-top: 6px;
}

/* Submit button — mirror .csat-btn--primary (navy → blue on hover). */
.csat-page .csat-contact-form .frm-fluent-form .ff-el-group.ff_submit_btn_wrapper { margin: 4px 0 0; }
.csat-page .csat-contact-form .frm-fluent-form .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--csat-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1;
	min-height: 0;
	padding: 16px 34px;
	border: 2px solid transparent;
	border-radius: var(--csat-radius-btn);
	background: var(--csat-navy);
	color: #fff;
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.csat-page .csat-contact-form .frm-fluent-form .ff-btn-submit:hover {
	background: var(--csat-blue);
	color: #fff;
	transform: translateY(-2px);
}
.csat-page .csat-contact-form .frm-fluent-form .ff-btn-submit:focus-visible {
	outline: 3px solid rgba(39, 155, 215, 0.5);
	outline-offset: 2px;
}
/* FluentForm adds this while the AJAX submit is in flight. */
.csat-page .csat-contact-form .frm-fluent-form.ff-form-loading .ff-btn-submit { opacity: 0.75; cursor: progress; }

/* Post-submit success confirmation — on-brand (navy/blue), not a stock green. */
.csat-page .csat-contact-form .ff-message-success,
.csat-page .csat-contact-form .frm-fluent-form + .ff-message-success {
	background: var(--csat-surface-2);
	border: 1px solid rgba(39, 155, 215, 0.4);
	border-radius: var(--csat-radius-card);
	padding: 22px 24px;
	color: var(--csat-navy);
	font-size: 1.02rem;
	line-height: 1.6;
}

/* ---- Service list (boxless, hairline-divided capability index) -------
   A non-card alternative to the feature grid: full-width rows split by
   hairline rules, with a blue line-icon + title on a left rail and the
   description on the right. Reads as an intentional index, not boxes. */
.csat-servicelist {
	margin-top: 48px;
	border-top: 2px solid var(--csat-navy);
}
.csat-servicerow {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
	gap: clamp(18px, 4vw, 56px);
	align-items: start;
	padding: clamp(24px, 3.2vw, 36px) 6px;
	border-bottom: 1px solid var(--csat-border);
	transition: background-color .25s ease;
}
.csat-servicerow:hover { background: var(--csat-surface); }
.csat-servicerow__head { display: flex; align-items: center; gap: 16px; transition: transform .25s ease; }
.csat-servicerow:hover .csat-servicerow__head { transform: translateX(8px); }
.csat-servicerow__icon { flex: none; color: var(--csat-blue); line-height: 0; transition: transform .25s ease; }
.csat-servicerow__icon svg { width: 30px; height: 30px; stroke-width: 1.75; }
.csat-servicerow:hover .csat-servicerow__icon { transform: scale(1.12); }
.csat-page .csat-servicerow__title {
	font-family: var(--csat-font);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--csat-navy);
	margin: 0;
}
.csat-servicerow__desc { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--csat-text); }
/* "Complete Coverage" list (device-repair hub): a soft white bubble behind each
   title so it reads distinctly from the description opposite. No hard border,
   so it stays subtle. ID scope keeps it to this section. */
#coverage .csat-servicerow__title {
	display: inline-block;
	background: #fff;
	padding: 10px 18px;
	border-radius: 12px;
	border: 1px solid var(--csat-border);
}
@media (max-width: 760px) {
	.csat-servicerow { grid-template-columns: 1fr; gap: 10px; padding-block: 26px; }
	.csat-servicerow:hover .csat-servicerow__head { transform: none; } /* no shift on stacked mobile */
}
@media (prefers-reduced-motion: reduce) {
	.csat-servicerow__icon,
	.csat-servicerow__head,
	.csat-servicerow:hover .csat-servicerow__head { transition: none; transform: none; }
}

/* ---- Device Repair hub: two-column service block + compact cap list -- */
.csat-hub-service {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: clamp(28px, 4.5vw, 68px);
	align-items: start;
}
.csat-hub-service__body { max-width: 620px; }
.csat-hub-service__body .csat-lead { margin-bottom: 18px; }
.csat-hub-service--reverse .csat-hub-service__body { order: 2; }
@media (max-width: 900px) {
	.csat-hub-service { grid-template-columns: 1fr; gap: 22px; }
	.csat-hub-service--reverse .csat-hub-service__body { order: 0; }
}

/* Compact capability list — the boxless index without the description column. */
.csat-servicelist--compact { margin-top: 0; border-top: 1px solid var(--csat-border); }
.csat-servicelist--compact .csat-servicerow { grid-template-columns: 1fr; padding: 15px 4px; gap: 0; }
.csat-servicelist--compact .csat-servicerow:hover { background: transparent; }
.csat-servicelist--compact .csat-servicerow:hover .csat-servicerow__head { transform: none; }
.csat-servicelist--compact .csat-servicerow__icon svg { width: 20px; height: 20px; }
.csat-page .csat-servicelist--compact .csat-servicerow__title { font-size: 1rem; font-weight: 600; }

/* ---- Opt-in modifier: one eyebrow style per page, hero-style ----------
   Add `csat-page--hero-eyebrows` alongside `csat-page` on <main> to give a
   page ONE eyebrow treatment -- the split-hero one -- instead of the two it
   otherwise carries: the 12px/800/uppercase/5px-tracking section eyebrow
   from the base rule, plus the 14px/700/title-case hero eyebrow. Those two
   sit only 2px and one weight step apart once case and tracking match,
   which reads as a mistake rather than a distinction.

   Opt-in rather than the base rule, so pages not listed here keep the
   uppercase section eyebrow documented in STYLE-GUIDE.md 2.2.
   Currently opted in: /warehousing-logistics/, /device-repairs/, /services/,
   /ai-server-repair/ (the Services megamenu cluster), plus /about-us/ and
   /contact-us/.

   5px tracking was tuned for all-caps and reads loose on mixed case, hence
   1.4px. Eyebrow markup across the redesigned pages is already written in
   title case, so opting a page in needs no copy changes.

   This intentionally covers the hero eyebrow too (it is inside the
   modifier): same specificity as .csat-hero--split .csat-eyebrow but later
   in source, so it wins -- with identical values, leaving the hero
   unchanged. Only margin-bottom is set (not the `margin` shorthand) so the
   base rule's `margin: 0 0 16px` keeps supplying top margin 0. */
.csat-page--hero-eyebrows .csat-eyebrow {
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 1.4px;
	margin-bottom: 20px;
}
/* Group labels inside a coverage index follow the same case and tracking, so
   an opted-in page has no all-caps labels left. Deliberately NOT made
   identical to the eyebrow above: these stay smaller and muted gray, because
   a group divider sits BELOW the section eyebrow in the hierarchy and making
   them match exactly would flatten the two into one level. Scoped to the
   modifier because .csat-hub-group__label is shared with the AI Server Repair
   page, which still uses uppercase section eyebrows. */
.csat-page--hero-eyebrows .csat-hub-group__label {
	text-transform: none;
	letter-spacing: 1.4px;
}
/* Small caps-y labels elsewhere on an opted-in page follow the same case:
   the team-card "View Bio" affordance, and the Contact page's channel labels
   and "What Happens Next" heading. Tracking stays at their own 1.2px, which is
   already tight enough for mixed case, and they keep their own smaller scale
   so they stay subordinate to the section eyebrow. */
.csat-page--hero-eyebrows .csat-team__more,
.csat-page--hero-eyebrows .csat-channel__label,
.csat-page--hero-eyebrows .csat-next__title {
	text-transform: none;
}

/* ---- Warehousing & Logistics: forward/reverse two-column + cross-links */
.csat-wl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 10px; }
.csat-wl-cols .csat-checklist { margin-top: 12px; }
@media (max-width: 600px) { .csat-wl-cols { grid-template-columns: 1fr; gap: 22px; } }

.csat-crosslinks { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .csat-crosslinks { grid-template-columns: 1fr; } }
.csat-crosslink {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(24px, 3vw, 36px);
	background: #fff;
	border: 1px solid var(--csat-border);
	border-radius: var(--csat-radius-card);
	box-shadow: var(--csat-shadow);
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.csat-crosslink:hover { transform: translateY(-4px); box-shadow: var(--csat-shadow-hover); border-color: rgba(39, 155, 215, 0.5); }
.csat-page .csat-crosslink__title { font-family: var(--csat-font); font-size: 1.35rem; font-weight: 800; line-height: 1.2; color: var(--csat-navy); margin: 0; }
.csat-crosslink__text { font-size: 0.98rem; line-height: 1.6; color: var(--csat-text); margin: 0; }
.csat-crosslink .csat-btn--link { margin-top: 6px; }
.csat-crosslink:hover .csat-arrow { transform: translateX(6px); }

/* ---- Device Repair hub: grouped coverage index (linked service rows) - */
.csat-hub-group { margin-top: 28px; }
.csat-hub-group__label {
	font-family: var(--csat-font);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--csat-muted);
	margin-bottom: 2px;
}
.csat-hub-group .csat-servicelist { margin-top: 4px; border-top: 1px solid var(--csat-border); }
/* Tighter rows inside grouped coverage (long lists scroll less). */
.csat-hub-group .csat-servicerow { padding-top: clamp(13px, 1.6vw, 18px); padding-bottom: clamp(13px, 1.6vw, 18px); }
.csat-servicelist--linked .csat-servicerow { text-decoration: none; }
/* On a surface band the default surface-tint hover is invisible; lift to white. */
.csat-servicelist--linked .csat-servicerow:hover,
.csat-servicelist--linked .csat-servicerow:focus-visible { background: #fff; outline: none; }
.csat-servicelist--linked .csat-servicerow:hover .csat-servicerow__title,
.csat-servicelist--linked .csat-servicerow:focus-visible .csat-servicerow__title { color: var(--csat-blue); }
.csat-servicerow__more {
	display: inline-block;
	margin-left: 4px;
	white-space: nowrap;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--csat-blue);
}
.csat-servicerow__more span { display: inline-block; transition: transform .2s ease; }
.csat-servicelist--linked .csat-servicerow:hover .csat-servicerow__more span,
.csat-servicelist--linked .csat-servicerow:focus-visible .csat-servicerow__more span { transform: translateX(4px); }

/* ---- Boxless columns (card-free alternative for 2/3/4-up content) ------
   Hairline-divided columns, no boxes. Works on light or dark bands. */
/* grid-auto-rows:1fr keeps every row the same height. Without it rows size to their
   own content, so a short second row draws visibly shorter hairlines than the first. */
.csat-cols { display: grid; gap: 0; margin-top: 48px; grid-auto-rows: 1fr; }
.csat-cols--2 { grid-template-columns: repeat(2, 1fr); }
.csat-cols--3 { grid-template-columns: repeat(3, 1fr); }
.csat-cols--4 { grid-template-columns: repeat(4, 1fr); }
.csat-col { padding: 4px clamp(22px, 2.6vw, 40px); border-left: 1px solid var(--csat-border); }
.csat-col:first-child { padding-left: 0; border-left: 0; }
.csat-col:last-child { padding-right: 0; }
/* Exempt the first/last column of EVERY row, not just the first/last item overall --
   otherwise a second row starts with a stray hairline against the container edge. */
.csat-cols--2 > .csat-col:nth-child(2n+1) { padding-left: 0; border-left: 0; }
.csat-cols--2 > .csat-col:nth-child(2n) { padding-right: 0; }
.csat-cols--3 > .csat-col:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.csat-cols--3 > .csat-col:nth-child(3n) { padding-right: 0; }
.csat-cols--4 > .csat-col:nth-child(4n+1) { padding-left: 0; border-left: 0; }
.csat-cols--4 > .csat-col:nth-child(4n) { padding-right: 0; }
.csat-page .csat-col__title { font-family: var(--csat-font); font-size: 1.15rem; font-weight: 700; line-height: 1.25; color: var(--csat-navy); margin: 0 0 10px; }
.csat-col p { margin: 0; font-size: 0.98rem; line-height: 1.65; }
.csat-band--dark .csat-col { border-left-color: rgba(255, 255, 255, 0.14); }
.csat-page .csat-band--dark .csat-col__title { color: #fff; }
.csat-band--dark .csat-col p { color: rgba(255, 255, 255, 0.82); }
@media (max-width: 860px) {
	.csat-cols--2, .csat-cols--3, .csat-cols--4 { grid-template-columns: 1fr; }
	/* Back to content height: stacked, equal rows would pad every short item out
	   to match the tallest one. */
	.csat-cols { grid-auto-rows: auto; }
	.csat-col { padding: 20px 0; border-left: 0; border-top: 1px solid var(--csat-border); }
	.csat-col:first-child { border-top: 0; padding-top: 4px; }
	.csat-band--dark .csat-col { border-top-color: rgba(255, 255, 255, 0.14); }
}

/* ---- AI page: 3-up stats + ISO caption ------------------------------- */
.csat-stats--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .csat-stats--3 { grid-template-columns: 1fr; } }
.csat-stats-note { text-align: center; margin: 22px 0 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.82); }

/* ---- AI page: "already underway" timeline (dark band) ---------------- */
.csat-timeline__heading { text-align: center; font-family: var(--csat-font); font-weight: 800; font-size: 1.05rem; color: var(--csat-navy); margin: 56px 0 0; }
.csat-band--dark .csat-timeline__heading { color: #fff; }
.csat-timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 24px;
	position: relative;
}
.csat-timeline::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 12%;
	right: 12%;
	height: 2px;
	background: rgba(255, 255, 255, 0.18);
}
.csat-timeline__node { position: relative; text-align: center; padding-top: 28px; }
.csat-timeline__dot {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--csat-blue);
	box-shadow: 0 0 0 4px #022047;
}
.csat-timeline__node.is-now .csat-timeline__dot { background: #7fd0f5; box-shadow: 0 0 0 4px #022047; }
.csat-timeline__date { display: block; font-weight: 800; font-size: 0.92rem; color: #7fd0f5; }
.csat-timeline__flag { display: inline-block; margin-left: 6px; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: #022047; background: #7fd0f5; border-radius: 4px; padding: 1px 6px; vertical-align: middle; }
.csat-timeline__label { display: block; font-size: 0.82rem; line-height: 1.45; color: rgba(255, 255, 255, 0.82); margin-top: 6px; }
@media (max-width: 700px) {
	.csat-timeline { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
	.csat-timeline::before { display: none; }
}

/* ---- AI page: slim inline conversion band + scope note --------------- */
.csat-inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.csat-inline-cta__text { margin: 0; font-size: 1.08rem; font-weight: 600; color: var(--csat-navy); }
.csat-scope-note { max-width: 72ch; margin: 40px auto 0; text-align: center; font-size: 0.96rem; line-height: 1.6; color: var(--csat-text); }

/* ---- Anchor offset (so #scope clears the header) --------------------- */
.csat-page [id] { scroll-margin-top: 96px; }

/* ---- Unified in-page photo treatment (subtle navy veil) -------------- */
.csat-media__figure, .csat-hero__media { position: relative; }
.csat-media__figure::after, .csat-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--csat-radius-card);
	background: linear-gradient(180deg, rgba(2, 32, 71, 0.02) 0%, rgba(2, 32, 71, 0.11) 100%);
	pointer-events: none;
}

/* ---- Process step cards --------------------------------------------- */
.csat-stepcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.csat-stepcard {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--csat-border);
	border-radius: var(--csat-radius-card);
	box-shadow: var(--csat-shadow);
	padding: 26px 22px 24px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.csat-stepcard:hover { transform: translateY(-5px); box-shadow: var(--csat-shadow-hover); border-color: rgba(39, 155, 215, 0.5); }
.csat-stepcard__num {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--csat-navy) 0%, var(--csat-navy-2) 100%);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
}
.csat-page .csat-stepcard__title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--csat-navy); margin: 0; }
.csat-stepcard p { margin: 0; font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 900px) { .csat-stepcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .csat-stepcards { grid-template-columns: 1fr; } }

/* ---- Reveal-on-scroll (progressive enhancement) ----------------------
   Only hidden once JS marks the document (html.csat-js); without JS the
   content is fully visible, so a script failure never hides content. */
html.csat-js .csat-page .csat-reveal { opacity: 0; transform: translateY(24px); }
html.csat-js .csat-page .csat-reveal.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity .6s ease, transform .6s ease;
}
@media (prefers-reduced-motion: reduce) {
	html.csat-js .csat-page .csat-reveal { opacity: 1; transform: none; }
}

/* ---- Full-bleed 50/50 split with rotating image (About "What We Do") ---- */
.csat-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: var(--csat-surface);
}
.csat-split__media { position: relative; overflow: hidden; min-height: 460px; }
.csat-split__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.csat-split__body {
	display: flex;
	align-items: center;
	padding: clamp(44px, 6vw, 100px) clamp(28px, 5vw, 84px);
}
.csat-split__inner { max-width: 600px; }
/* Compact stat grid for use inside a split body on a light background (the
   .csat-stat component is tuned for dark bands, so numbers get their own navy). */
.csat-split-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; margin: 30px 0 8px; }
.csat-split-stats__num { display: block; font-family: var(--csat-font); font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1; color: var(--csat-navy); font-variant-numeric: lining-nums tabular-nums; }
.csat-split-stats__label { display: block; margin-top: 7px; font-size: 0.85rem; line-height: 1.4; color: var(--csat-text); }
/* Linked boxless column (home service areas): whole column is a clickable card. */
.csat-col--link { display: block; text-decoration: none; }
.csat-col--link .csat-btn--link { margin-top: 12px; }
.csat-col--link:hover .csat-col__title,
.csat-col--link:focus-visible .csat-col__title { color: var(--csat-blue); }
.csat-col--link:hover .csat-arrow { transform: translateX(4px); }
@media (min-width: 861px) {
	.csat-split--reverse .csat-split__media { order: 2; } /* image on the right */
}
.csat-carousel { position: absolute; inset: 0; }
.csat-carousel__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.7s ease;
}
.csat-carousel__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.csat-carousel__slide { transition: none; }
}
@media (max-width: 860px) {
	.csat-split { grid-template-columns: 1fr; }
	.csat-split__media { order: -1; min-height: 300px; }
}

/* ---- 404 screen ---------------------------------------------------------- */
.csat-page .csat-404__code {
	font-family: var(--csat-font);
	font-weight: 900;
	line-height: 0.9;
	font-size: clamp(5rem, 18vw, 11rem);
	letter-spacing: -0.02em;
	margin: 0 0 8px;
	color: var(--csat-navy);
}
.csat-page .csat-404__links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 40px; }

/* ---- Legal / long-form prose (Privacy, Terms) ---------------------------
   A single readable measure for policy pages, scoped to .csat-page. */
.csat-page .csat-prose { max-width: 760px; margin: 0 auto; }
.csat-page .csat-prose > * + * { margin-top: 20px; }
.csat-page .csat-prose h2 {
	font-family: var(--csat-font); font-weight: 800; color: var(--csat-navy);
	font-size: 1.5rem; line-height: 1.25; margin-top: 48px; margin-bottom: 0;
	scroll-margin-top: 120px;
}
.csat-page .csat-prose h2:first-child { margin-top: 0; }
.csat-page .csat-prose h3 {
	font-family: var(--csat-font); font-weight: 700; color: var(--csat-navy-2);
	font-size: 1.12rem; line-height: 1.3; margin-top: 28px; margin-bottom: 0;
}
.csat-page .csat-prose p { color: var(--csat-text); font-size: 1rem; line-height: 1.75; }
.csat-page .csat-prose a { color: var(--csat-blue); text-decoration: underline; text-underline-offset: 2px; }
.csat-page .csat-prose a:hover { text-decoration: none; }
.csat-page .csat-prose ul { margin-left: 0; padding-left: 22px; list-style: disc; }
.csat-page .csat-prose li { margin-top: 8px; color: var(--csat-text); line-height: 1.7; }
.csat-page .csat-prose li::marker { color: var(--csat-blue); }
.csat-page .csat-prose strong { color: var(--csat-navy-2); font-weight: 700; }
.csat-page .csat-prose__updated {
	display: inline-block; margin-top: 8px; font-size: 0.85rem; font-weight: 600;
	letter-spacing: 0.02em; color: var(--csat-muted);
}

/* ---- Cookie notice -------------------------------------------------------
   Fixed bottom card injected on every de-Elementored page (csat_cookie_notice
   in functions.php). Hidden until interactivity.js confirms no stored choice,
   so visitors who already chose never see a flash. */
.csat-cookie {
	/* The notice is injected in the footer, OUTSIDE .csat-page, so the design
	   tokens are not in scope here. Redeclare the ones it (and its buttons) use. */
	--csat-blue: #279BD7;
	--csat-navy: #022047;
	--csat-navy-2: #092357;
	--csat-font: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--csat-radius-card: 15px;
	--csat-radius-btn: 10px;
	font-family: var(--csat-font);
	position: fixed;
	z-index: 1000;
	left: 50%;
	bottom: clamp(12px, 3vw, 28px);
	transform: translateX(-50%) translateY(16px);
	width: min(760px, calc(100% - 24px));
	background: linear-gradient(135deg, var(--csat-navy) 0%, var(--csat-navy-2) 100%);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--csat-radius-card);
	padding: clamp(18px, 2.4vw, 24px) clamp(20px, 2.6vw, 28px);
	display: none;
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
}
.csat-cookie.is-visible {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px 26px;
	align-items: center;
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.csat-cookie__text { margin: 0; font-size: 0.92rem; line-height: 1.55; color: rgba(255, 255, 255, 0.9); }
.csat-cookie__text strong { color: #fff; font-weight: 700; }
.csat-cookie__text a { color: #7FD0F5; text-decoration: underline; text-underline-offset: 2px; }
.csat-cookie__text a:hover { color: #fff; }
.csat-cookie__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.csat-cookie button.csat-btn { -webkit-appearance: none; appearance: none; white-space: nowrap; }
.csat-cookie .csat-btn--primary { background: var(--csat-blue); color: #fff; }
.csat-cookie .csat-btn--primary:hover { background: #fff; color: var(--csat-navy); }
@media (max-width: 640px) {
	.csat-cookie.is-visible { grid-template-columns: 1fr; }
	.csat-cookie__actions { margin-top: 4px; }
	.csat-cookie__actions .csat-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.csat-cookie { transition: none; transform: translateX(-50%); }
	.csat-cookie.is-visible { transform: translateX(-50%); }
}