/* ==========================================================================
   Edge theme — design tokens + base
   Values sourced from the Figma "Nav" and "HeroSection" CSS export.
   ========================================================================== */

/* DM Sans, used by the site-wide header skin below (and by
   reimagined-home.css / reimagined-fde.css, which redeclare their own
   copies since they might load without this file in theory — but in
   practice both always load main.css too, so this is the one that
   matters site-wide). */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-regular.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500 800;font-display:swap;src:url('../fonts/dm-sans-semibold.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:500 800;font-display:swap;src:url('../fonts/manrope-semibold.ttf') format('truetype')}

:root {
	--color-navy-900: #000C1D;
	--color-navy-950: #091525;
	--color-navy-glow: #224F8B;
	--color-orange: #FF5900;
	--color-orange-dark: #E04F00;
	--color-yellow: #FAAA18;
	--color-white: #FFFFFF;
	--color-heading: rgba(255, 255, 255, 0.92);
	--color-muted: #B9C5D7;
	--color-border-light: rgba(255, 255, 255, 0.22);
	--color-ink: #0A1628;
	--color-surface: #F6F7F8;
	--color-text-muted-light: #99A3B3;
	--color-body-muted: #748398;

	/* Reference-design token, added for the site-wide dark header/footer
	   skin below — kept alongside --color-navy-900 rather than replacing
	   it, since --color-navy-900 is still used elsewhere in this file. */
	--deep: #040e1e;

	--font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--gutter: clamp(20px, 4.1667vw, 80px);
	--container-max: 1920px;

	--nav-height: 72px;
}

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

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

body {
	margin: 0;
	font-family: var(--font-body);
	/* Matches the header/footer navy, not white: on a viewport taller than
	   the page (e.g. a tall monitor, or the WP admin bar reducing usable
	   height) this is what shows below the footer, and every page starts
	   and ends with a navy section, so this blends in instead of flashing
	   white. */
	background: var(--color-navy-900);
	color: var(--color-navy-900);
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

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

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 6px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn--primary {
	background: var(--color-orange);
	color: var(--color-white);
}

.btn--primary:hover {
	background: var(--color-orange-dark);
	box-shadow: 0 8px 20px rgba(255, 89, 0, 0.28);
	transform: translateY(-1px);
}

.btn--outline {
	background: transparent;
	color: var(--color-white);
	border-color: var(--color-border-light);
	padding: 12px 22px;
}

.btn--outline:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.4);
	transform: translateY(-1px);
}

.btn--hero {
	height: 46px;
}

.btn--nav {
	height: 36px;
}

.btn__icon {
	flex: none;
	transition: transform 0.25s ease;
}

.btn:hover .btn__icon {
	transform: translateX(4px);
}

.btn__icon--play {
	width: 8px;
	height: 10px;
}

/* ==========================================================================
   Site header / nav
   ========================================================================== */

.site-header {
	background: var(--color-navy-900);
	position: relative;
	z-index: 14;
}

.site-header__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 12px var(--gutter);
	min-height: var(--nav-height);
}

.site-logo {
	flex: none;
	display: block;
	width: 96px;
	height: 47px;
}

.site-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-header__collapsible {
	display: flex;
	align-items: center;
	gap: 64px;
	flex: 1;
	justify-content: space-between;
}

.site-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	flex-wrap: nowrap;
}

.site-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	color: var(--color-white);
	padding: 4px 0;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.site-nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 2px;
	background: var(--color-orange);
	transition: width 0.25s ease;
}

.site-nav__link:hover {
	color: var(--color-orange);
}

.site-nav__link:hover::after {
	width: 100%;
}

.site-nav__chevron {
	flex: none;
	transition: transform 0.2s ease;
}

.site-nav__link:hover .site-nav__chevron {
	transform: translateY(1px);
}

.site-header__right {
	display: flex;
	align-items: center;
	gap: 64px;
}

.site-header__meta {
	display: flex;
	align-items: center;
	gap: 20px;
}

.site-header__location {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: none;
	color: var(--color-white);
	font-size: 16px;
	font-family: var(--font-body);
	padding: 0;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.site-header__location:hover {
	color: var(--color-orange);
}

.site-header__location:hover .site-nav__chevron {
	transform: translateY(1px);
}

.site-header__flag {
	flex: none;
	border-radius: 2px;
}

.site-header__phone {
	font-size: 16px;
	color: var(--color-white);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.site-header__phone:hover {
	color: var(--color-orange);
}

.site-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: transparent;
	border: none;
	padding: 8px;
	margin-left: auto;
}

.site-header__toggle-bar {
	width: 24px;
	height: 2px;
	background: var(--color-white);
	display: block;
}

/* ==========================================================================
   Simple nav dropdowns (a flat list, e.g. "Industries" — lighter weight
   than the Services mega-menu, no sub-panels).
   ========================================================================== */

.site-nav__item--simple {
	position: relative;
}

.site-nav__link--simple {
	background: none;
	border: none;
	font-family: var(--font-body);
	cursor: pointer;
}

.site-nav__simple-menu {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 220px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--color-white);
	border-radius: 8px;
	box-shadow: 0 24px 48px rgba(10, 22, 40, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	z-index: 20;
}

.site-nav__item--simple.is-open .site-nav__simple-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav__simple-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 15px;
	color: var(--color-ink);
	white-space: nowrap;
}

.site-nav__simple-menu a:hover {
	background: var(--color-surface);
	color: var(--color-orange);
}

/* ==========================================================================
   Services mega-menu
   ========================================================================== */

.site-nav__item--services {
	position: static;
}

.site-nav__link--services {
	background: none;
	border: none;
	font-family: var(--font-body);
	cursor: pointer;
}

.services-menu {
	position: absolute;
	left: 0;
	top: 100%;
	background: var(--color-white);
	box-shadow: 0 24px 48px rgba(10, 22, 40, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	z-index: 20;
}

.site-nav__item--services.is-open .services-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.services-menu__inner {
	display: flex;
	align-items: stretch;
	padding: 20px 56px 20px 80px;
	gap: 40px;
}

.services-menu__rail {
	flex: 0 0 339px;
	display: flex;
	flex-direction: column;
}

.services-menu__rail-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 8px;
	padding: 20px 0;
	border-bottom: 1px solid var(--color-ink);
	font-size: 17px;
	font-weight: 600;
	color: var(--color-ink);
}

.services-menu__categories {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.services-menu__category > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 20px;
	font-size: 14px;
	color: var(--color-ink);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.services-menu__category.is-active > a {
	background: var(--color-orange);
	color: var(--color-white);
}

.services-menu__panel {
	display: none;
	flex: none;
	gap: 40px;
}

.services-menu__panel.is-active {
	display: flex;
}

.services-menu__content {
	flex: none;
	display: flex;
	background: #FFE0CF;
}

.services-menu__col {
	flex: 0 0 380px;
	padding: 0 40px;
}

.services-menu__col--sub {
	flex-basis: 0;
	width: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	white-space: nowrap;
	transition: flex-basis 0.3s ease, width 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

.services-menu__col--sub.is-active {
	flex-basis: 380px;
	width: 380px;
	padding: 0 40px;
	opacity: 1;
	white-space: normal;
}

.services-menu__platforms-card {
	flex: 0 0 380px;
	padding: 20px;
	background: var(--color-white);
}

.services-menu__col-title {
	margin: 0;
	padding: 20px 0;
	border-bottom: 0.5px solid rgba(10, 22, 40, 0.5);
	font-size: 15px;
	font-weight: 700;
	color: var(--color-ink);
}

.services-menu__platforms-card .services-menu__col-title {
	padding: 0 0 16px;
	border-bottom: none;
	font-size: 14px;
}

.services-menu__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 8px 0 0;
	list-style: none;
}

.services-menu__list-item > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 -40px;
	padding: 12px 40px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-ink);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.services-menu__col--sub .services-menu__list-item > a:hover {
	color: var(--color-orange);
}

.services-menu__list-item.has-children.is-active > a {
	background: var(--color-orange);
	color: var(--color-white);
}

.services-menu__arrow-icon {
	flex: none;
}

.services-menu__platforms {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.services-menu__platform {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 64px;
	padding: 8px 12px;
	background: var(--color-surface);
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.services-menu__platform:hover {
	background: var(--color-white);
	box-shadow: 0 4px 12px rgba(10, 22, 40, 0.1);
}

.services-menu__platform img {
	max-width: 100%;
	height: 26px;
	object-fit: contain;
	mix-blend-mode: luminosity;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.services-menu__platform:hover img {
	mix-blend-mode: normal;
	opacity: 1;
}

.services-menu__platform-mark {
	width: 22px;
	height: 22px;
	color: var(--color-body-muted);
	opacity: 0.8;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.services-menu__platform:hover .services-menu__platform-mark {
	color: var(--color-orange);
	opacity: 1;
}

.services-menu__platform-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-body-muted);
	transition: color 0.2s ease;
}

.services-menu__platform:hover .services-menu__platform-label {
	color: var(--color-ink);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	background: var(--color-navy-950);
	padding: clamp(48px, 8.3333vw, 160px) var(--gutter) 40px;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(270deg, rgba(34, 79, 139, 0) 0%, var(--color-navy-950) 66.77%);
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.hero__content {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 751px;
}

.hero__eyebrow {
	margin: 0;
	font-size: 16px;
	color: var(--color-muted);
}

.hero__heading {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 600;
	font-size: clamp(26px, 2.9167vw, 56px);
	line-height: 1.1;
	color: var(--color-heading);
}

.hero__heading .accent {
	color: var(--color-orange);
}

.hero__subtext {
	margin: 12px 0 0;
	font-size: clamp(14px, 1.0417vw, 20px);
	line-height: 1.3;
	color: var(--color-white);
}

.hero__trust-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 8px;
}

.hero__trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	letter-spacing: -0.02em;
	color: var(--color-white);
	padding-right: 24px;
	border-right: 1px solid var(--color-muted);
}

.hero__trust-item:last-child {
	border-right: none;
	padding-right: 0;
}

.hero__trust-icon {
	flex: none;
}

.hero__actions {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 36px;
}

.hero__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.hero__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--color-yellow);
}

.hero__stars {
	letter-spacing: 2px;
}

.hero__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px;
}

.hero__stat {
	display: flex;
	align-items: center;
	gap: 20px;
}

.hero__stat-icon {
	flex: none;
}

.hero__stat-text {
	white-space: nowrap;
}

.hero__stat-number {
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 32px;
	line-height: 1;
	letter-spacing: -0.64px;
	color: var(--color-heading);
}

.hero__stat-label {
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 2;
	letter-spacing: -0.64px;
	color: var(--color-muted);
}

/* ==========================================================================
   Trust bar
   ========================================================================== */

.trust-bar {
	background: var(--color-surface);
}

.trust-bar__inner > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.trust-bar.is-visible .trust-bar__inner > * {
	opacity: 1;
	transform: translateY(0);
}

.trust-bar.is-visible .trust-bar__inner > *:nth-child(2) {
	transition-delay: 0.1s;
}

.trust-bar.is-visible .trust-bar__inner > *:nth-child(3) {
	transition-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
	.trust-bar__inner > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.trust-bar__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px 48px;
	padding: 28px var(--gutter);
}

.trust-bar__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}

.trust-bar__label {
	margin: 0;
	flex: none;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.25;
	color: var(--color-ink);
	max-width: 170px;
}

.trust-bar__logos,
.trust-bar__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}

.trust-bar__logo {
	max-height: 22px;
	width: auto;
	mix-blend-mode: darken;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.trust-bar__logo:hover {
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-2px) scale(1.05);
}

.trust-bar__more {
	font-weight: 600;
	font-size: 18px;
	line-height: 1.25;
	color: var(--color-text-muted-light);
	white-space: nowrap;
}

.trust-bar__divider {
	flex: none;
	width: 1px;
	height: 48px;
	background: #999999;
}

.trust-bar__badge {
	height: 48px;
	width: auto;
	mix-blend-mode: darken;
	opacity: 0.75;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.trust-bar__badge:hover {
	opacity: 1;
	transform: translateY(-2px) scale(1.05);
}

@media (max-width: 900px) {
	.trust-bar__inner {
		justify-content: flex-start;
	}

	.trust-bar__divider {
		display: none;
	}
}

/* ==========================================================================
   About / "Built for the AI Era"
   ========================================================================== */

.about {
	background: #FEFEFE;
	padding: clamp(48px, 6.25vw, 120px) var(--gutter) clamp(24px, 3vw, 56px);
}

.about__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(32px, 4.1667vw, 80px);
}

.about__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	flex: 1 1 380px;
	max-width: 480px;
}

.about__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.about__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(28px, 2.0833vw, 40px);
	line-height: 1.1;
	color: var(--color-ink);
}

.about__text {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

.btn--about {
	height: 40px;
	margin-top: 8px;
}

.about__cards {
	flex: 1 1 480px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.about__card {
	padding: 20px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(185, 197, 215, 0) 55%, rgba(185, 197, 215, 0.25) 100%);
	transition: background 0.3s ease, transform 0.3s ease;
}

.about__card:hover {
	transform: translateY(-3px);
	background: linear-gradient(135deg, rgba(185, 197, 215, 0.1) 45%, rgba(185, 197, 215, 0.35) 100%);
}

.about__card-icon {
	margin-bottom: 14px;
}

.about__card-title {
	margin: 0 0 8px;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -0.02em;
	color: var(--color-ink);
}

.about__card-text {
	margin: 0;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

@media (max-width: 900px) {
	.about__cards {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Certified Service Partners
   ========================================================================== */

.partners {
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: clamp(16px, 2vw, 40px) var(--gutter) clamp(40px, 4.1667vw, 80px);
}

.partners__label {
	margin: 0;
	font-weight: 500;
	font-size: clamp(18px, 1.25vw, 24px);
	letter-spacing: -0.02em;
	color: var(--color-ink);
	text-align: center;
}

.partners__row {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	width: 100%;
}

.partners__card {
	position: relative;
	flex: 1 1 200px;
	max-width: 220px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 16px;
	background: var(--color-surface);
	border-radius: 12px;
	transition: background 0.4s ease;
}

.partners__card:hover {
	background: #FBE2D4;
}

.partners__logo {
	max-width: 100%;
	max-height: 48px;
	width: auto;
	height: auto;
	mix-blend-mode: darken;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.3s ease, opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.partners__card:hover .partners__logo {
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-16px) scale(0.62);
}

.partners__cta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-orange);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.partners__cta-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.partners__card:hover .partners__cta {
	opacity: 1;
	transform: translateY(0);
}

.partners__card:hover .partners__cta-arrow {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.partners__logo,
	.partners__cta {
		transition: opacity 0.2s ease;
	}

	.partners__card:hover .partners__logo {
		transform: none;
	}
}

@media (max-width: 700px) {
	.partners__card {
		flex: 1 1 45%;
	}
}

/* ==========================================================================
   Core Capabilities
   ========================================================================== */

.capabilities {
	background: var(--color-surface);
	padding: clamp(48px, 6.25vw, 120px) var(--gutter);
}

.capabilities__inner {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 2.5vw, 48px);
}

.capabilities__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.capabilities__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.capabilities__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(26px, 2.0833vw, 40px);
	line-height: 1.15;
	color: var(--color-ink);
}

.capabilities__subtext {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-body-muted);
}

.capabilities__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.capabilities__card {
	position: relative;
	aspect-ratio: 513 / 480;
	border-radius: 16px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.capabilities__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(10, 22, 40, 0.18);
}

.capabilities__card-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(10, 22, 40, 0.92) 0%, rgba(10, 22, 40, 0) 58%);
	pointer-events: none;
}

.capabilities__card-copy {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px;
}

.capabilities__card-title {
	margin: 0;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-orange);
}

.capabilities__card-text {
	margin: 4px 0 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-white);
}

.capabilities__card-detail {
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	overflow: hidden;
	transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.capabilities__card:hover .capabilities__card-detail {
	max-height: 120px;
	opacity: 1;
	margin-top: 10px;
}

.capabilities__card-detail p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-muted);
}

.capabilities__card--cta {
	background-color: var(--color-ink);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 24px;
	transition: background-color 0.4s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.capabilities__card--cta:hover {
	background-color: #FFE0CF;
}

.capabilities__cta-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.capabilities__cta-title {
	margin: 0;
	font-weight: 500;
	font-size: 19px;
	line-height: 1.3;
	color: var(--color-white);
	transition: color 0.4s ease;
}

.capabilities__card--cta:hover .capabilities__cta-title {
	color: var(--color-ink);
}

.capabilities__cta-text {
	margin: 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-muted);
	transition: color 0.4s ease;
}

.capabilities__card--cta:hover .capabilities__cta-text {
	color: var(--color-body-muted);
}

.capabilities__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-white);
	transition: color 0.4s ease;
}

.capabilities__card--cta:hover .capabilities__cta-link {
	color: var(--color-orange);
}

.capabilities__cta-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.capabilities__card--cta:hover .capabilities__cta-arrow {
	transform: translateX(4px);
}

@media (max-width: 960px) {
	.capabilities__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.capabilities__grid {
		grid-template-columns: 1fr;
	}

	.capabilities__card {
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   Industry Expertise
   ========================================================================== */

.industries {
	background: var(--color-ink);
	padding: clamp(48px, 6.25vw, 120px) var(--gutter);
}

.industries__inner {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 2.5vw, 48px);
}

.industries__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.industries__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.industries__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(26px, 2.0833vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-white);
}

.industries__subtext {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-muted);
}

.industries__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.industries__grid > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.industries.is-visible .industries__grid > * {
	opacity: 1;
	transform: translateY(0);
}

.industries.is-visible .industries__grid > *:nth-child(1) { transition-delay: 0s; }
.industries.is-visible .industries__grid > *:nth-child(2) { transition-delay: 0.06s; }
.industries.is-visible .industries__grid > *:nth-child(3) { transition-delay: 0.12s; }
.industries.is-visible .industries__grid > *:nth-child(4) { transition-delay: 0.18s; }
.industries.is-visible .industries__grid > *:nth-child(5) { transition-delay: 0.24s; }
.industries.is-visible .industries__grid > *:nth-child(6) { transition-delay: 0.3s; }
.industries.is-visible .industries__grid > *:nth-child(7) { transition-delay: 0.36s; }
.industries.is-visible .industries__grid > *:nth-child(8) { transition-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
	.industries__grid > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.industries__card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
	background: var(--color-surface);
	border: 1px solid rgba(10, 22, 40, 0.06);
	border-radius: 12px;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.industries__card::before,
.industries__card::after {
	content: '';
	position: absolute;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 89, 0, 0.16) 0%, rgba(255, 89, 0, 0) 70%);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.industries__card::before {
	top: -60px;
	left: -60px;
}

.industries__card::after {
	bottom: -60px;
	right: -60px;
}

.industries__card:hover::after {
	opacity: 1;
	transform: scale(1);
}

.industries__card:hover {
	transform: translateY(-6px) scale(1.015);
	background: var(--color-white);
	border-color: rgba(10, 22, 40, 0.08);
	box-shadow: 0 4px 12px rgba(10, 22, 40, 0.05), 0 20px 36px rgba(10, 22, 40, 0.1);
}

.industries__card:hover::before {
	opacity: 1;
	transform: scale(1);
}

.industries__icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: transparent;
	transition: background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.industries__card:hover .industries__icon-wrap {
	background-color: var(--color-orange);
	transform: scale(1.05);
}

.industries__icon {
	flex: none;
	transition: filter 0.4s ease;
}

.industries__card:hover .industries__icon {
	filter: brightness(0) invert(1);
}

.industries__card-title {
	margin: 0;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -0.02em;
	color: var(--color-ink);
	transition: color 0.4s ease;
}

.industries__card:not(.industries__card--cta):hover .industries__card-title {
	color: var(--color-orange);
}

.industries__card-text {
	margin: 0;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.4;
	color: var(--color-body-muted);
}

.industries__card-link {
	margin-top: auto;
	padding-top: 4px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-orange);
	transition: color 0.2s ease;
}

.industries__card-link:hover {
	color: var(--color-orange-dark);
}

.industries__card-link--ink {
	color: var(--color-ink);
}

.industries__card-link--ink:hover {
	color: var(--color-orange);
}

.industries__card-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.industries__card-link:hover .industries__card-arrow {
	transform: translateX(3px);
}

.industries__card--cta {
	background: #FFE0CF;
	border-color: transparent;
}

.industries__card--cta:hover {
	background: #FFE0CF;
	border-color: transparent;
}

@media (max-width: 1100px) {
	.industries__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

/* ==========================================================================
   Testimonials / "In Their Words"
   ========================================================================== */

.testimonials {
	background: var(--color-surface);
	padding: clamp(48px, 6.25vw, 120px) var(--gutter);
}

.testimonials__inner {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 2.5vw, 48px);
}

.testimonials__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.testimonials__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.testimonials__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(26px, 2.0833vw, 40px);
	line-height: 1.2;
	color: var(--color-ink);
}

.testimonials__subtext {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-body-muted);
}

.testimonials__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.testimonials__card {
	position: relative;
	overflow: hidden;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 30px 28px 28px;
	background: var(--color-white);
	border-radius: 16px;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.testimonials__card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--color-orange);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonials__card::after {
	content: '\201C';
	position: absolute;
	top: -10px;
	right: 20px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 96px;
	line-height: 1;
	color: var(--color-ink);
	opacity: 0.04;
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
	transform: translateY(4px);
}

.testimonials__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(10, 22, 40, 0.12);
}

.testimonials__card:hover::before {
	transform: scaleX(1);
}

.testimonials__card:hover::after {
	opacity: 0.07;
	transform: translateY(0);
}

.testimonials__logo {
	align-self: flex-start;
	flex: none;
	max-width: 100%;
	max-height: 32px;
	width: auto;
	height: auto;
	mix-blend-mode: darken;
	transition: transform 0.35s ease;
}

.testimonials__card:hover .testimonials__logo {
	transform: scale(1.06);
}

.testimonials__quote {
	position: relative;
	margin: 0;
	flex: 1;
}

.testimonials__quote p {
	margin: 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

.testimonials__attribution {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.testimonials__name {
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.testimonials__role {
	font-weight: 400;
	font-size: 13px;
	color: var(--color-ink);
}

@media (max-width: 1000px) {
	.testimonials__row {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-inline: auto;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.testimonials__card,
	.testimonials__card::before,
	.testimonials__card::after,
	.testimonials__logo {
		transition: none;
	}
}

/* ==========================================================================
   Process / "How We Deliver"
   ========================================================================== */

.process {
	background: var(--color-ink);
	padding: clamp(48px, 6.25vw, 120px) var(--gutter) clamp(24px, 3vw, 56px);
}

.process__inner {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 2.5vw, 48px);
}

.process__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 700px;
	margin-inline: auto;
	text-align: center;
}

.process__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.process__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(26px, 2.0833vw, 40px);
	line-height: 1.15;
	color: var(--color-white);
}

.process__subtext {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-muted);
}

.process__row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
}

.process__card {
	position: relative;
	aspect-ratio: 300 / 350;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.process__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

.process__card-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(10, 22, 40, 0.92) 0%, rgba(10, 22, 40, 0) 58%);
	pointer-events: none;
}

.process__card-copy {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 18px;
}

.process__card-number {
	margin: 0;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(255, 89, 0, 0.5);
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	color: var(--color-orange);
	width: 28px;
}

.process__card-title {
	margin: 8px 0 0;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	color: var(--color-white);
}

.process__card-detail {
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	overflow: hidden;
	transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.process__card:hover .process__card-detail {
	max-height: 160px;
	opacity: 1;
	margin-top: 8px;
}

.process__card-detail p {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--color-muted);
}

@media (max-width: 960px) {
	.process__row {
		grid-template-columns: repeat(3, 1fr);
		gap: 14px;
	}
}

@media (max-width: 560px) {
	.process__row {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   MVP CTA banner
   ========================================================================== */

.mvp-cta {
	background: var(--color-ink);
	padding: clamp(24px, 3vw, 56px) var(--gutter);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mvp-cta__inner {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.mvp-cta__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 700px;
}

.mvp-cta__heading {
	margin: 0;
	font-weight: 600;
	font-size: clamp(26px, 2.1875vw, 42px);
	line-height: 1.1;
	color: var(--color-white);
}

.mvp-cta__subtext {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-muted);
}

.mvp-cta__btn {
	flex: none;
}

/* ==========================================================================
   AI Readiness Assessment
   ========================================================================== */

.assessment {
	background: var(--color-white);
	border-top: 1px solid #323F52;
	padding: clamp(48px, 6.25vw, 120px) var(--gutter);
}

.assessment__inner {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
}

.assessment__image {
	flex: 1 1 360px;
	max-width: 460px;
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.assessment__content {
	flex: 1 1 420px;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 3.3333vw, 48px);
}

.assessment__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.assessment__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.assessment__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(24px, 2.0833vw, 36px);
	line-height: 1.25;
	color: var(--color-ink);
}

.assessment__subtext {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-body-muted);
}

.assessment__form-block {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.assessment__form {
	display: flex;
	align-items: stretch;
	max-width: 460px;
}

.assessment__field {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
	padding: 0 14px;
	background: #F0F2F7;
	border: 1px solid rgba(107, 116, 137, 0.2);
	border-right: none;
	border-radius: 8px 0 0 8px;
}

.assessment__field-icon {
	flex: none;
}

.assessment__input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 14px 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-ink);
	outline: none;
}

.assessment__input::placeholder {
	color: var(--color-body-muted);
}

.assessment__submit {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 20px;
	background: var(--color-orange);
	color: var(--color-white);
	border: none;
	border-radius: 0 8px 8px 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.assessment__submit:hover {
	background: var(--color-orange-dark);
}

.assessment__submit-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.assessment__submit:hover .assessment__submit-arrow {
	transform: translateX(3px);
}

.assessment__trust-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.assessment__trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--color-body-muted);
}

.assessment__trust-item img {
	flex: none;
}

@media (max-width: 480px) {
	.assessment__form {
		flex-direction: column;
		max-width: none;
	}

	.assessment__field {
		border-right: 1px solid rgba(107, 116, 137, 0.2);
		border-radius: 8px 8px 0 0;
	}

	.assessment__submit {
		justify-content: center;
		border-radius: 0 0 8px 8px;
	}
}

/* ==========================================================================
   Insights
   ========================================================================== */

.insights {
	background: var(--color-surface);
	padding: clamp(48px, 6.25vw, 120px) var(--gutter);
}

.insights__inner {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 2.5vw, 48px);
}

.insights__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.insights__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 560px;
}

.insights__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.insights__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(26px, 2.0833vw, 40px);
	line-height: 1.15;
	color: var(--color-ink);
}

.insights__subtext {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-body-muted);
}

.insights__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.insights__card {
	display: flex;
	flex-direction: column;
	background: #F0F2F7;
	border-radius: 20px;
	overflow: hidden;
}

.insights__thumb {
	display: block;
	overflow: hidden;
}

.insights__thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 518 / 246;
	object-fit: cover;
}

.insights__card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 20px;
}

.insights__meta {
	margin: 0;
	font-size: 13px;
	color: var(--color-text-muted-light);
}

.insights__card-title {
	margin: 0;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

.insights__card-title a {
	color: var(--color-ink);
	transition: color 0.2s ease;
}

.insights__card-title a:hover,
.insights__card:hover .insights__card-title a {
	color: var(--color-orange);
}

.insights__card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-orange);
	transition: color 0.2s ease;
}

.insights__card-link:hover {
	color: var(--color-orange-dark);
}

.insights__card-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.insights__card-link:hover .insights__card-arrow {
	transform: translateX(3px);
}

@media (max-width: 960px) {
	.insights__grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-inline: auto;
		width: 100%;
	}
}

/* ==========================================================================
   FAQ / "Straight Answers"
   ========================================================================== */

.faq {
	background: #F0F2F7;
	padding: clamp(48px, 6.25vw, 120px) var(--gutter);
}

.faq__inner {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(32px, 5vw, 80px);
}

.faq__text {
	flex: 1 1 320px;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.faq__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.faq__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(26px, 2.0833vw, 36px);
	line-height: 1.25;
	color: var(--color-ink);
}

.faq__subtext {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-body-muted);
}

.faq__list {
	flex: 1 1 480px;
	max-width: 775px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.faq__item {
	background: rgba(255, 255, 255, 0.6);
	border-radius: 12px;
	overflow: hidden;
	transition: background-color 0.25s ease;
}

.faq__item:hover {
	background: rgba(255, 255, 255, 0.9);
}

.faq__question {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 22px;
	cursor: pointer;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	color: var(--color-ink);
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__icon {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
}

.faq__icon::before,
.faq__icon::after {
	content: '';
	position: absolute;
	background: var(--color-orange);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq__icon::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	transform: translateY(-50%) rotate(0deg);
}

.faq__icon::after {
	left: 50%;
	top: 0;
	width: 1.5px;
	height: 100%;
	transform: translateX(-50%) rotate(0deg);
}

.faq__item[open] .faq__icon::before {
	transform: translateY(-50%) rotate(45deg);
}

.faq__item[open] .faq__icon::after {
	transform: translateX(-50%) rotate(45deg);
}

.faq__answer {
	padding: 0 22px 22px;
	overflow: hidden;
}

.faq__answer p {
	margin: 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

.faq__item.is-animating {
	overflow: hidden;
}

@media (max-width: 800px) {
	.faq__question {
		font-size: 15px;
	}
}

/* ==========================================================================
   Contact / "Let's Build for Outcome"
   ========================================================================== */

.contact {
	background: var(--color-white);
	padding: clamp(48px, 6.25vw, 120px) var(--gutter);
}

.contact__inner {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 2.5vw, 48px);
}

.contact__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 600px;
	margin-inline: auto;
	text-align: center;
}

.contact__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.contact__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(26px, 2.0833vw, 40px);
	line-height: 1.15;
	color: var(--color-ink);
}

.contact__subtext {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-body-muted);
}

.contact__panel {
	display: flex;
	flex-wrap: wrap;
	border-radius: 20px;
	overflow: hidden;
}

.contact__info {
	position: relative;
	flex: 1 1 460px;
	background-size: cover;
	background-position: center;
	padding: clamp(28px, 3vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	min-height: 480px;
}

.contact__info::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(10, 22, 40, 0.8);
}

.contact__info-top,
.contact__info-alt {
	position: relative;
	z-index: 1;
}

.contact__info-top {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.contact__info-eyebrow {
	margin: 0;
	font-weight: 400;
	font-size: 13px;
	color: var(--color-orange);
}

.contact__info-heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(20px, 1.6667vw, 28px);
	line-height: 1.3;
	color: var(--color-white);
}

.contact__info-heading .accent {
	color: var(--color-orange);
}

.contact__info-bullet {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	color: var(--color-white);
}

.contact__info-bullet-icon {
	flex: none;
	color: var(--color-orange);
	font-weight: 700;
}

.contact__info-alt {
	display: block;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-white);
	transition: color 0.2s ease;
}

.contact__info-alt:hover {
	color: var(--color-orange);
}

.contact__info-alt-arrow {
	color: var(--color-orange);
	transition: transform 0.25s ease;
	display: inline-block;
}

.contact__info-alt:hover .contact__info-alt-arrow {
	transform: translateX(3px);
}

.contact__form-wrap {
	flex: 1 1 420px;
	background: #F0F2F7;
	padding: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 48px);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contact__form {
	width: 100%;
	max-width: 520px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.contact__form-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.contact__field {
	position: relative;
}

.contact__form-row .contact__field {
	flex: 1 1 200px;
}

.contact__field input,
.contact__field select,
.contact__field textarea {
	width: 100%;
	padding: 14px 16px;
	background: var(--color-white);
	border: none;
	border-bottom: 1px solid rgba(107, 116, 137, 0.16);
	border-radius: 8px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-ink);
	outline: none;
	transition: box-shadow 0.2s ease;
}

.contact__field input:focus,
.contact__field select:focus,
.contact__field textarea:focus {
	box-shadow: 0 0 0 2px rgba(255, 89, 0, 0.25);
}

.contact__field input::placeholder,
.contact__field textarea::placeholder {
	color: #888888;
}

.contact__field--select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	color: #888888;
}

.contact__field--select select:valid {
	color: var(--color-ink);
}

.contact__field--select::after {
	content: '';
	position: absolute;
	right: 18px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid #888888;
	border-bottom: 1.5px solid #888888;
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}

.contact__field--textarea textarea {
	resize: vertical;
	min-height: 90px;
	font-family: var(--font-body);
}

.contact__submit-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
}

.contact__submit {
	align-self: center;
}

.contact__form-note {
	margin: 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	color: #6B7489;
	max-width: 420px;
}

@media (max-width: 480px) {
	.contact__form-row {
		flex-direction: column;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background: var(--color-ink);
	padding: 0 var(--gutter);
	font-family: 'DM Sans', Arial, sans-serif;
}

.site-footer__col-title {
	font-family: 'Manrope', 'DM Sans', Arial, sans-serif;
}

.site-footer__inner {
	max-width: 1400px;
	margin-inline: auto;
}

.site-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px;
	padding: clamp(48px, 6.25vw, 80px) 0 32px;
}

.site-footer__brand {
	flex: 1 1 260px;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.site-footer__logo {
	display: block;
	width: 100px;
}

.site-footer__logo img {
	width: 100%;
	height: auto;
}

.site-footer__tagline {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

.site-footer__social {
	display: flex;
	gap: 12px;
}

.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.site-footer__social a:hover {
	background: var(--color-orange);
	transform: translateY(-3px);
}

.site-footer__social img {
	width: 15px;
	height: auto;
}

.site-footer__col {
	flex: 1 1 140px;
	max-width: 220px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.site-footer__col-title {
	margin: 0;
	font-weight: 500;
	font-size: 15px;
	color: var(--color-white);
}

.site-footer__col-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__col-list a {
	font-size: 14px;
	color: var(--color-body-muted);
	transition: color 0.2s ease;
}

.site-footer__col-list a:hover {
	color: var(--color-orange);
}

.site-footer__offices {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	padding: 32px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.site-footer__office {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.site-footer__office-flag {
	flex: none;
	margin-top: 2px;
	border-radius: 3px;
}

.site-footer__office-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.site-footer__office-city {
	margin: 0;
	font-weight: 500;
	font-size: 15px;
	color: var(--color-white);
}

.site-footer__office-address {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

.site-footer__office-note {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--color-text-muted-light);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 22px 0 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.site-footer__copyright {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.5);
}

.site-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.site-footer__legal-list a {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.5);
	transition: color 0.2s ease;
}

.site-footer__legal-list a:hover {
	color: var(--color-white);
}

@media (max-width: 900px) {
	.site-footer__offices {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.site-footer__offices {
		grid-template-columns: 1fr;
	}
}

.site-main--default {
	padding: 40px var(--gutter);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Laptop-width tier: keep the full inline nav, just tighten it so it
   fits without wrapping (the literal 1920px-spec gaps/font only fit
   at very wide viewports). */
@media (max-width: 1600px) {
	.site-header__collapsible {
		gap: 32px;
	}

	.site-nav__list {
		gap: 22px;
	}

	.site-header__right {
		gap: 32px;
	}

	.site-header__meta {
		gap: 12px;
	}

	.site-nav__link,
	.site-header__location,
	.site-header__phone {
		font-size: 15px;
	}

	.services-menu__inner {
		padding: 16px 40px 16px 56px;
		gap: 28px;
	}

	.services-menu__rail {
		flex-basis: 300px;
	}

	.services-menu__rail-title {
		padding: 16px 0;
		font-size: 15px;
	}

	.services-menu__category > a {
		padding: 10px 16px;
		font-size: 13px;
	}

	.services-menu__panel {
		gap: 28px;
	}

	.services-menu__col {
		flex-basis: 320px;
		padding: 0 28px;
	}

	.services-menu__col--sub {
		flex-basis: 0;
		width: 0;
		padding: 0;
	}

	.services-menu__col--sub.is-active {
		flex-basis: 320px;
		width: 320px;
		padding: 0 28px;
	}

	.services-menu__platforms-card {
		flex-basis: 320px;
		padding: 16px;
	}

	.services-menu__col-title {
		padding: 16px 0;
		font-size: 14px;
	}

	.services-menu__platforms-card .services-menu__col-title {
		padding: 0 0 14px;
		font-size: 13px;
	}

	.services-menu__list-item > a {
		margin: 0 -28px;
		padding: 10px 28px;
		font-size: 13px;
	}
}

@media (max-width: 1024px) {
	.site-header__collapsible {
		position: fixed;
		inset: var(--nav-height) 0 0 0;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 32px;
		background: var(--color-navy-900);
		padding: 32px var(--gutter);
		overflow-y: auto;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}

	.site-header__collapsible.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.site-nav__link,
	.site-header__location,
	.site-header__phone {
		font-size: 17px;
	}

	.site-header__right {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.site-header__toggle {
		display: inline-flex;
	}

	.site-nav__item--services {
		width: 100%;
	}

	.site-nav__link--services {
		width: 100%;
		justify-content: space-between;
	}

	.services-menu {
		position: static;
		display: none;
		width: 100%;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: transparent;
		border-radius: 12px;
		margin-top: 12px;
	}

	.site-nav__item--services.is-open .services-menu {
		display: block;
	}

	.services-menu__inner {
		flex-direction: column;
		padding: 0;
		gap: 20px;
	}

	.services-menu__rail {
		flex: none;
	}

	.services-menu__rail-title {
		color: var(--color-white);
		border-bottom-color: var(--color-border-light);
	}

	/* .site-header: outranks the page "a { color: inherit }" resets (body.edge-…-home a). */
	.site-header .services-menu__category > a {
		color: var(--color-white);
		padding: 10px 0;
		font-size: 15px;
	}

	.services-menu__panel {
		flex-direction: column;
		gap: 20px;
	}

	.services-menu__content {
		flex-direction: column;
		background: transparent;
	}

	.services-menu__col {
		flex: none;
		padding: 0;
	}

	.services-menu__col--sub {
		padding-top: 12px;
	}

	.services-menu__col-title {
		color: var(--color-muted);
		border-bottom-color: var(--color-border-light);
		padding: 12px 0;
	}

	.services-menu__list-item > a {
		margin: 0;
		padding: 10px 0;
		color: var(--color-white);
	}

	.services-menu__list-item.has-children.is-active > a {
		background: transparent;
		padding: 10px 0;
		color: var(--color-orange);
	}

	.services-menu__platforms-card {
		flex: none;
		background: transparent;
		padding: 0;
	}

	.services-menu__platforms-card .services-menu__col-title {
		color: var(--color-white);
	}

	.hero__stats {
		gap: 24px 32px;
	}
}

@media (max-width: 720px) {
	.hero__stat-number {
		font-size: 24px;
	}

	.hero__stat-label {
		font-size: 14px;
	}

	.hero__buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__buttons .btn {
		justify-content: center;
	}

	.hero__trust-item {
		border-right: none;
		padding-right: 0;
	}
}

/* ==========================================================================
   Astra's own default UI (scroll-to-top button etc.) loses its styling here
   since Astra's global CSS is deliberately dequeued on this page — hide
   rather than restyle, the new design doesn't use it.
   ========================================================================== */

/* This file only ever loads on facelift templates (edge_facelift_assets()
   gates on edge_is_facelift_template()), and every one of them already
   dequeues Astra's own CSS — so Astra's scroll-to-top button always
   renders unstyled (a bare, misplaced icon in the corner) wherever this
   file is loaded. Hide it everywhere, not just body.edge-facelift-home. */
#ast-scroll-top {
	display: none !important;
}

/* ==========================================================================
   Hire-a-role template ("hire-deployed-service2.0" reference build)
   Same dequeue-Astra-global-CSS treatment as the homepage, scoped to
   body.edge-hire-page instead.

   Type scale: intro/eyebrow + card blocks on this page reuse the homepage's
   "Built for the AI Era" section values (.about__* above) rather than the
   larger sizes in the raw Figma spec, for visual consistency with the rest
   of the site. Reuse these on any future section added to this page:
     - eyebrow:     14px / 500 / var(--color-orange)
     - heading:     clamp(28px, 2.0833vw, 40px) / 500 / line-height 1.1 / var(--color-ink)
     - body text:   15px / 400 / line-height 1.5 / var(--color-body-muted)
     - card title:  16px / 500 / letter-spacing -0.02em / var(--color-ink)
     - card body:   13px / 400 / line-height 1.5 / var(--color-body-muted)
     - card:        padding 20px, border-radius 12px,
                     background linear-gradient(135deg, rgba(185,197,215,0) 55%, rgba(185,197,215,0.25) 100%)
     - card icon:   margin-bottom 14px
   ========================================================================== */

/* #ast-scroll-top is hidden globally above (this file only loads on
   facelift templates, and Astra's CSS is dequeued on all of them). */

/* ---- Hero ---- */

.hire-hero {
	position: relative;
	background: linear-gradient(270deg, rgba(34, 79, 139, 0) 0%, var(--color-navy-950) 66.77%),
		url('../images/hire/hero-bg.jpg');
	background-size: cover;
	background-position: center;
	/* Same vertical rhythm as the homepage .hero, so the two pages read as
	   one system rather than two different scales. */
	padding: clamp(48px, 8.3333vw, 160px) var(--gutter) 40px;
}

.hire-hero__inner {
	max-width: var(--container-max);
	margin-inline: auto;
}

/* Text column constrained to the same width as the homepage's
   .hero__content, left-aligned against the gutter — not centered — so the
   background photo stays visible on the right, matching the reference. */
.hire-hero__content {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 751px;
}

.hire-hero__breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--color-muted);
	margin: 0;
}

.hire-hero__breadcrumb a {
	color: var(--color-white);
	font-weight: 600;
	text-decoration: none;
}

.hire-hero__breadcrumb a:hover {
	text-decoration: underline;
}

.hire-hero__breadcrumb-sep {
	opacity: 0.6;
}

.hire-hero__title {
	margin: 0;
	font-weight: 600;
	font-size: clamp(26px, 2.9167vw, 56px);
	line-height: 1.1;
	color: var(--color-heading);
}

.hire-hero__title-highlight {
	color: var(--color-orange);
}

.hire-hero__subhead {
	margin: 0;
	font-size: clamp(14px, 1.0417vw, 20px);
	line-height: 1.3;
	color: var(--color-white);
}

.hire-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-top: 12px;
}

.hire-hero__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--color-yellow);
	font-size: 15px;
}

.hire-hero__stars {
	letter-spacing: 2px;
}

/* ---- Trust-point row ---- */

.hire-trust-row {
	background: var(--color-surface);
	padding: 40px var(--gutter);
}

.hire-trust-row__list {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px 40px;
	list-style: none;
}

.hire-trust-row__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-ink);
	white-space: nowrap;
}

.hire-trust-row__icon {
	flex: none;
}

.hire-trust-row__divider {
	width: 1.5px;
	height: 28px;
	background: #CDCDCD;
	list-style: none;
}

@media (max-width: 720px) {
	.hire-trust-row__divider { display: none; }
}

/* Scroll-reveal, same treatment as .trust-bar on the homepage: fade + rise,
   staggered per item, one-time (JS unobserves after it fires). */
.hire-trust-row__list > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.hire-trust-row.is-visible .hire-trust-row__list > * {
	opacity: 1;
	transform: translateY(0);
}

.hire-trust-row.is-visible .hire-trust-row__list > *:nth-child(2) { transition-delay: 0.05s; }
.hire-trust-row.is-visible .hire-trust-row__list > *:nth-child(3) { transition-delay: 0.1s; }
.hire-trust-row.is-visible .hire-trust-row__list > *:nth-child(4) { transition-delay: 0.15s; }
.hire-trust-row.is-visible .hire-trust-row__list > *:nth-child(5) { transition-delay: 0.2s; }
.hire-trust-row.is-visible .hire-trust-row__list > *:nth-child(6) { transition-delay: 0.25s; }
.hire-trust-row.is-visible .hire-trust-row__list > *:nth-child(7) { transition-delay: 0.3s; }
.hire-trust-row.is-visible .hire-trust-row__list > *:nth-child(8) { transition-delay: 0.35s; }
.hire-trust-row.is-visible .hire-trust-row__list > *:nth-child(9) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
	.hire-trust-row__list > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---- Expertise partners band ---- */

/* Compact intro strip — own section, title is deliberately small (24px per
   spec), not a full section header. */
.hire-expertise-intro {
	padding: 40px var(--gutter);
	text-align: center;
}

.hire-expertise-intro__title {
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.64px;
	color: var(--color-ink);
	margin-bottom: 12px;
}

.hire-expertise-intro__subhead {
	max-width: 1150px;
	margin: 0 auto;
	color: var(--color-body-muted);
	font-size: 15px;
	line-height: 1.25;
}

/* ---- Overview (Bridge the Gap / Customer Collaboration) ---- */

.hire-overview {
	background: #FEFEFE;
	padding: 40px var(--gutter) 80px;
}

.hire-overview__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	align-items: flex-start;
	gap: 80px;
}

.hire-overview__intro {
	flex: none;
	width: 100%;
	max-width: 646px;
}

.hire-overview__eyebrow {
	color: var(--color-orange);
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 12px;
}

.hire-overview__title {
	font-size: clamp(28px, 2.0833vw, 40px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--color-ink);
	margin-bottom: 12px;
}

.hire-overview__body {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-body-muted);
	margin-bottom: 20px;
}

.hire-overview__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-orange);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.hire-overview__link:hover {
	text-decoration: underline;
}

.hire-overview__cards {
	flex: 1;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.hire-overview__card {
	flex: 1;
	min-width: 0;
	background: linear-gradient(135deg, rgba(185, 197, 215, 0) 55%, rgba(185, 197, 215, 0.25) 100%);
	border-radius: 12px;
	padding: 20px;
	transition: background 0.3s ease, transform 0.3s ease;
}

.hire-overview__card:hover {
	transform: translateY(-3px);
	background: linear-gradient(135deg, rgba(185, 197, 215, 0.1) 45%, rgba(185, 197, 215, 0.35) 100%);
}

.hire-overview__card-icon {
	margin-bottom: 14px;
}

.hire-overview__card-title {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--color-ink);
	margin-bottom: 8px;
}

.hire-overview__card-body {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-body-muted);
}

@media (max-width: 960px) {
	.hire-overview__inner { flex-direction: column; }
	.hire-overview__intro { max-width: none; }
	.hire-overview__cards { flex-direction: column; width: 100%; }
}

/* ---- About FDE (concept explainer) ---- */

.hire-about-fde {
	background: var(--color-surface);
	padding: 60px var(--gutter);
}

.hire-about-fde__intro {
	max-width: 800px;
	margin: 0 auto 48px;
	text-align: center;
}

.hire-about-fde__eyebrow {
	color: var(--color-orange);
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 12px;
}

.hire-about-fde__title {
	font-size: clamp(28px, 2.0833vw, 40px);
	font-weight: 500;
	color: var(--color-ink);
	margin-bottom: 16px;
}

.hire-about-fde__subhead {
	color: var(--color-body-muted);
	font-size: 15px;
	line-height: 1.25;
}

.hire-about-fde__grid {
	max-width: 1280px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(280px, 500px) 1fr;
	gap: 40px;
	align-items: center;
}

.hire-about-fde__diagram {
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.hire-about-fde__content-title {
	font-size: 20px;
	font-weight: 500;
	color: var(--color-ink);
	margin-bottom: 16px;
}

.hire-about-fde__content-body {
	color: var(--color-body-muted);
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 24px;
}

.hire-about-fde__steps {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
}

.hire-about-fde__steps li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--color-body-muted);
	font-size: 15px;
	line-height: 1.5;
}

.hire-about-fde__step-arrow {
	flex: none;
	color: var(--color-orange);
}

.hire-about-fde__note {
	color: var(--color-body-muted);
	font-size: 15px;
	line-height: 1.5;
}

/* ---- When Should You Hire an FDE? (hire vs. don't-engage cards) ---- */

.hire-when {
	background: #0A1628;
	padding: 80px var(--gutter);
}

.hire-when__intro {
	max-width: 800px;
	margin: 0 auto 48px;
	text-align: center;
}

.hire-when__eyebrow {
	color: var(--color-orange);
	font-weight: 500;
	font-size: 14px;
	margin: 0 0 8px;
}

.hire-when__title {
	color: var(--color-white);
	font-weight: 500;
	font-size: clamp(28px, 2.0833vw, 40px);
	line-height: 1.25;
	letter-spacing: -0.64px;
	margin: 0 0 16px;
}

.hire-when__subhead {
	color: var(--color-body-muted);
	font-size: 15px;
	line-height: 1.5;
}

.hire-when__grid {
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
}

.hire-when__card {
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	overflow: hidden;
	padding: 40px;
	background-size: cover;
	background-position: center;
}

.hire-when__card--hire {
	background-image:
		linear-gradient(0deg, rgba(10, 22, 40, 0.9), rgba(10, 22, 40, 0.9)),
		url('../images/hire/when-hire-bg.jpg');
}

.hire-when__card--avoid {
	background-image:
		linear-gradient(0deg, rgba(10, 22, 40, 0.9), rgba(10, 22, 40, 0.9)),
		url('../images/hire/dont-engage-bg.png');
}

.hire-when__card-title {
	color: var(--color-orange);
	font-weight: 500;
	font-size: 20px;
	letter-spacing: -0.64px;
	margin: 0 0 24px;
}

.hire-when__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hire-when__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--color-white);
	font-size: 15px;
	line-height: 1.5;
}

.hire-when__list strong {
	font-weight: 600;
}

.hire-when__arrow {
	flex: none;
	color: var(--color-orange);
	font-weight: 600;
}

.hire-when__cta {
	text-align: center;
	margin-top: 48px;
}

/* ---- What Makes A Strong FDE (horizontally scrolling trait cards) ---- */

.hire-what-makes {
	background: var(--color-white);
	padding: 80px var(--gutter);
}

.hire-what-makes__intro {
	max-width: 800px;
	margin: 0 auto 40px;
	text-align: center;
}

.hire-what-makes__eyebrow {
	color: var(--color-orange);
	font-weight: 500;
	font-size: 14px;
	margin: 0 0 8px;
}

.hire-what-makes__title {
	color: var(--color-ink);
	font-weight: 500;
	font-size: clamp(28px, 2.0833vw, 40px);
	line-height: 1.25;
	margin: 0 0 16px;
}

.hire-what-makes__subhead {
	color: var(--color-body-muted);
	font-size: 15px;
	line-height: 1.5;
}

.hire-what-makes__row {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 12px;
	cursor: grab;
	scrollbar-width: thin;
	scrollbar-color: var(--color-orange) var(--color-surface);
}

.hire-what-makes__row.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.hire-what-makes__row::-webkit-scrollbar {
	height: 6px;
}

.hire-what-makes__row::-webkit-scrollbar-track {
	background: var(--color-surface);
	border-radius: 3px;
}

.hire-what-makes__row::-webkit-scrollbar-thumb {
	background: var(--color-orange);
	border-radius: 3px;
}

.hire-what-makes__card {
	flex: none;
	scroll-snap-align: start;
	width: 300px;
	aspect-ratio: 385 / 268;
	display: flex;
	align-items: flex-end;
	padding: 24px 16px;
	border-radius: 16px;
	background-size: cover;
	background-position: center;
}

.hire-what-makes__card-title {
	margin: 0;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-orange);
}

/* ---- FDE vs. Other Technical Roles (comparison table) ---- */

.hire-comparison {
	background: var(--color-white);
	padding: 80px var(--gutter);
}

.hire-comparison__intro {
	max-width: 900px;
	margin: 0 auto 40px;
	text-align: center;
}

.hire-comparison__eyebrow {
	color: var(--color-orange);
	font-weight: 500;
	font-size: 14px;
	margin: 0 0 8px;
}

.hire-comparison__title {
	color: var(--color-ink);
	font-weight: 500;
	font-size: clamp(28px, 2.0833vw, 40px);
	line-height: 1.25;
	margin: 0 0 16px;
}

.hire-comparison__subhead {
	color: var(--color-body-muted);
	font-size: 15px;
	line-height: 1.5;
}

.hire-comparison__table-wrap {
	max-width: var(--container-max);
	margin: 0 auto;
	overflow-x: auto;
	border: 1px solid #CFCFCF;
	border-radius: 12px;
	scrollbar-width: thin;
	scrollbar-color: var(--color-orange) var(--color-surface);
}

.hire-comparison__table-wrap::-webkit-scrollbar {
	height: 6px;
}

.hire-comparison__table-wrap::-webkit-scrollbar-track {
	background: var(--color-surface);
}

.hire-comparison__table-wrap::-webkit-scrollbar-thumb {
	background: var(--color-orange);
	border-radius: 3px;
}

.hire-comparison__table {
	width: 100%;
	min-width: 900px;
	border-collapse: collapse;
}

.hire-comparison__table th {
	background: var(--color-navy-950);
	color: var(--color-white);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.02em;
	text-align: left;
	padding: 16px 20px;
	white-space: nowrap;
}

.hire-comparison__table th.hire-comparison__th--accent {
	background: var(--color-orange);
}

.hire-comparison__table th:not(:first-child),
.hire-comparison__table td:not(:first-child) {
	text-align: center;
}

.hire-comparison__table td {
	background: var(--color-white);
	color: var(--color-body-muted);
	font-size: 15px;
	padding: 14px 20px;
	border-top: 1px solid #DDDDDD;
}

.hire-comparison__table td.hire-comparison__td--role {
	background: var(--color-surface);
	color: var(--color-ink);
	font-weight: 500;
	text-align: left;
}

/* ---- Why Hire FDEs Through Wildnet Edge (8-reason grid) ---- */

.hire-why-us {
	background: var(--color-surface);
	padding: 80px var(--gutter);
}

.hire-why-us__intro {
	max-width: 900px;
	margin: 0 auto 40px;
	text-align: center;
}

.hire-why-us__eyebrow {
	color: var(--color-orange);
	font-weight: 500;
	font-size: 14px;
	margin: 0 0 8px;
}

.hire-why-us__title {
	color: var(--color-ink);
	font-weight: 500;
	font-size: clamp(28px, 2.0833vw, 40px);
	line-height: 1.25;
	margin: 0 0 16px;
}

.hire-why-us__subhead {
	color: var(--color-body-muted);
	font-size: 15px;
	line-height: 1.5;
}

.hire-why-us__grid {
	max-width: var(--container-max);
	margin: 0 auto 40px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.hire-why-us__card {
	background: rgba(185, 197, 215, 0.2);
	border-radius: 12px;
	padding: 24px;
}

.hire-why-us__icon {
	display: block;
	height: 48px;
	width: auto;
	margin-bottom: 20px;
}

.hire-why-us__card-title {
	margin: 0 0 8px;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.25;
	color: var(--color-ink);
}

.hire-why-us__card-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-body-muted);
}

.hire-why-us__cta {
	text-align: center;
}

/* ---- Our FDE Hiring Process (5-step card row) ---- */

.hire-process {
	background: #0A1628;
	padding: 80px var(--gutter);
}

.hire-process__intro {
	max-width: 930px;
	margin: 0 auto 40px;
	text-align: center;
}

.hire-process__eyebrow {
	color: var(--color-orange);
	font-weight: 500;
	font-size: 14px;
	margin: 0 0 8px;
}

.hire-process__title {
	color: var(--color-white);
	font-weight: 500;
	font-size: clamp(28px, 2.0833vw, 40px);
	line-height: 1.25;
	margin: 0 0 16px;
}

.hire-process__subhead {
	color: var(--color-body-muted);
	font-size: 15px;
	line-height: 1.5;
}

.hire-process__row {
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
}

.hire-process__card {
	aspect-ratio: 300 / 350;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 20px;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
}

.hire-process__number {
	font-weight: 600;
	font-size: 24px;
	letter-spacing: -0.5px;
	color: var(--color-orange);
}

.hire-process__divider {
	display: block;
	width: 54px;
	height: 0;
	margin: 8px 0;
	border-top: 1px solid #6B7489;
}

.hire-process__card-title {
	margin: 0;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.25;
	color: var(--color-white);
}

/* ---- Engagement Models for Hiring FDE Talent ---- */

.hire-engagement {
	background: var(--color-white);
	border-top: 1px solid #323F52;
	padding: 80px var(--gutter);
}

.hire-engagement__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	gap: 40px;
}

.hire-engagement__photo {
	flex: none;
	width: 588px;
	max-width: 40%;
	height: auto;
	object-fit: cover;
	border-radius: 20px;
}

.hire-engagement__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
}

.hire-engagement__intro {
	max-width: 700px;
}

.hire-engagement__eyebrow {
	color: var(--color-orange);
	font-weight: 500;
	font-size: 14px;
	margin: 0 0 8px;
}

.hire-engagement__title {
	color: var(--color-ink);
	font-weight: 500;
	font-size: clamp(28px, 2.0833vw, 40px);
	line-height: 1.25;
	margin: 0 0 16px;
}

.hire-engagement__subhead {
	color: var(--color-body-muted);
	font-size: 15px;
	line-height: 1.5;
}

.hire-engagement__grid {
	display: flex;
	align-items: stretch;
	gap: 20px;
}

.hire-engagement__card {
	flex: 1;
	background: linear-gradient(135deg, rgba(185, 197, 215, 0) 15%, rgba(185, 197, 215, 0.2) 90%);
	border-radius: 12px;
	padding: 24px;
}

.hire-engagement__icon {
	display: block;
	height: 48px;
	width: auto;
	margin-bottom: 20px;
}

.hire-engagement__card-title {
	margin: 0 0 8px;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.25;
	color: var(--color-ink);
}

.hire-engagement__card-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-body-muted);
}

/* ---- Industries That Benefit From Our FDE Talent ---- */

.hire-industries {
	background: #F0F2F7;
	padding: 80px var(--gutter);
}

.hire-industries__intro {
	max-width: 900px;
	margin: 0 auto 40px;
	text-align: center;
}

.hire-industries__eyebrow {
	color: var(--color-orange);
	font-weight: 500;
	font-size: 14px;
	margin: 0 0 8px;
}

.hire-industries__title {
	color: var(--color-ink);
	font-weight: 500;
	font-size: clamp(28px, 2.0833vw, 40px);
	line-height: 1.25;
	margin: 0 0 16px;
}

.hire-industries__subhead {
	color: var(--color-body-muted);
	font-size: 15px;
	line-height: 1.5;
}

.hire-industries__grid {
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.hire-industries__card {
	background: var(--color-white);
	border-radius: 12px;
	padding: 24px;
}

.hire-industries__icon {
	display: block;
	height: 40px;
	width: auto;
	margin-bottom: 20px;
}

.hire-industries__card-title {
	margin: 0 0 8px;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.25;
	color: var(--color-ink);
}

.hire-industries__card-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-body-muted);
}

@media (max-width: 900px) {
	.hire-about-fde__grid { grid-template-columns: 1fr; }
	.hire-when__grid { grid-template-columns: 1fr; }
	.hire-when__list { max-width: none; }
	.hire-why-us__grid { grid-template-columns: repeat(2, 1fr); }
	.hire-process__row { grid-template-columns: repeat(2, 1fr); }
	.hire-engagement__inner { flex-direction: column; }
	.hire-engagement__photo { width: 100%; max-width: none; height: 320px; }
	.hire-engagement__grid { flex-direction: column; }
	.hire-industries__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	.hire-hero { padding: 48px var(--gutter); }
	.hire-trust-row__list { gap: 16px 24px; justify-content: flex-start; }
	.hire-when__card { padding: 28px; min-height: 0; }
	.hire-what-makes__card { width: 220px; }
	.hire-why-us__grid { grid-template-columns: 1fr; }
	.hire-process__row { grid-template-columns: 1fr; }
	.hire-industries__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SERVICE PAGE TEMPLATE (template-service.php) — reusable ~60-70 page
   template. Features/CTA/FAQ sections reuse .about__card*, .mvp-cta*, and
   .faq* classes already defined above for visual consistency; only the
   hero/stats/overview sections below are new.
   ========================================================================== */

.service-hero {
	background: var(--color-navy-900);
	padding: 96px 24px 64px;
}

.service-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}

.service-hero__logo {
	display: block;
	margin: 0 auto 24px;
	object-fit: contain;
}

.service-hero__eyebrow {
	margin: 0 0 12px;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.service-hero__heading {
	margin: 0 0 16px;
	font-weight: 600;
	font-size: clamp(28px, 3.3vw, 48px);
	line-height: 1.15;
	color: var(--color-heading);
}

.service-hero__subtext {
	margin: 0 0 32px;
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.5;
	color: var(--color-muted);
}

.service-stats {
	background: var(--color-surface);
	padding: 40px 24px;
}

.service-stats__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 48px;
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.service-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.service-stats__number {
	font-weight: 600;
	font-size: 32px;
	color: var(--color-ink);
}

.service-stats__label {
	margin-top: 4px;
	font-size: 14px;
	color: var(--color-body-muted);
}

.service-overview {
	background: var(--color-white);
	padding: 64px 24px;
}

.service-overview__inner {
	max-width: 760px;
	margin: 0 auto;
}

.service-overview__heading {
	margin: 0 0 20px;
	font-weight: 500;
	font-size: clamp(24px, 2.1vw, 32px);
	line-height: 1.2;
	color: var(--color-ink);
}

.service-overview__content {
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-body-muted);
}

.service-overview__content p {
	margin: 0 0 16px;
}

.service-overview__content p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Real-content-page custom template components (pilot: Generative AI
   Development, page-generative-ai-development.php). Generic/reusable —
   built to be fed real per-page content via get_template_part() $args,
   not just for this one page.
   ========================================================================== */

/* ---- Hero + Zoho lead form ---- */

.service-hero {
	position: relative;
	background: var(--color-ink);
	padding: clamp(48px, 6.25vw, 100px) var(--gutter) clamp(32px, 4vw, 60px);
	overflow: hidden;
}

.service-hero--has-bg {
	background-color: var(--color-navy-900);
}

.service-hero__bg {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	opacity: 0.5;
	z-index: 0;
}

.service-hero__bg--layer2 {
	opacity: 0.35;
	mix-blend-mode: screen;
}

.service-hero--has-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10, 22, 40, 0.92) 0%, rgba(10, 22, 40, 0.75) 55%, rgba(10, 22, 40, 0.92) 100%);
	z-index: 0;
}

.service-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.service-hero__eyebrow {
	margin: 0 0 12px;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.service-hero__heading {
	margin: 0 0 16px;
	font-weight: 500;
	font-size: clamp(28px, 2.7vw, 48px);
	line-height: 1.15;
	color: var(--color-heading);
}

.service-hero__heading mark {
	background: none;
	color: var(--color-orange);
}

.service-hero__subtext {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-muted);
	max-width: 640px;
}

.service-hero__badges {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 0;
}

.service-hero__badge {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	letter-spacing: -0.01em;
	color: var(--color-white);
	padding-right: 20px;
	margin-right: 20px;
	border-right: 1px solid var(--color-border-light);
}

.service-hero__badge:last-child {
	border-right: none;
	padding-right: 0;
	margin-right: 0;
}

.service-hero__badge-icon {
	flex: none;
}

.service-hero__awards {
	list-style: none;
	margin: 20px 0 0;
	padding: 16px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	border-top: 1px solid var(--color-border-light);
}

.service-hero__award img {
	display: block;
	height: 40px;
	width: auto;
	max-width: 100px;
	object-fit: contain;
}

.service-hero__btn {
	margin-top: 8px;
}

.service-hero__stats-row {
	list-style: none;
	margin: 32px 0 0;
	padding: 24px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
	border-top: 1px solid var(--color-border-light);
}

.service-hero__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.service-hero__stat-number {
	font-size: 28px;
	font-weight: 500;
	line-height: 1;
	color: var(--color-heading);
}

.service-hero__stat-label {
	font-size: 14px;
	color: var(--color-muted);
}

.service-hero--no-form .service-hero__inner {
	grid-template-columns: 1fr;
	max-width: 760px;
	text-align: center;
}

.service-hero--no-form .service-hero__subtext {
	max-width: none;
}

.service-hero--no-form .service-hero__badges {
	justify-content: center;
}

.service-hero--no-form .service-hero__awards,
.service-hero--no-form .service-hero__stats-row {
	justify-content: center;
}

.service-hero__form-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--color-border-light);
	border-radius: 16px;
	overflow: hidden;
}

.service-hero-stats {
	background: var(--color-ink);
	padding: 0 var(--gutter) clamp(32px, 4vw, 60px);
}

.service-hero-stats .hero__stats {
	max-width: var(--container-max);
	margin-inline: auto;
	justify-content: center;
}

/* ---- Simple text intro section ---- */

.service-intro {
	background: var(--color-surface);
	padding: clamp(40px, 5vw, 80px) var(--gutter);
}

.service-intro__inner {
	max-width: 860px;
	margin-inline: auto;
	text-align: center;
}

.service-intro__heading {
	margin: 0 0 20px;
	font-weight: 500;
	font-size: clamp(24px, 2vw, 36px);
	color: var(--color-ink);
}

.service-intro__inner p {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-body-muted);
	text-align: left;
}

.service-intro__inner a {
	color: var(--color-orange);
}

.service-intro__inner a.btn {
	color: var(--color-white);
}

.service-intro__heading mark {
	background: none;
	color: var(--color-orange);
}

.service-intro--with-image .service-intro__inner {
	max-width: 1200px;
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: stretch;
	text-align: left;
}

.service-intro--with-image .service-intro__heading {
	text-align: left;
}

.service-intro__media {
	height: 100%;
	border-radius: 16px;
	overflow: hidden;
}

.service-intro__media img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	display: block;
	border-radius: 16px;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.service-intro__media:hover img {
	transform: scale(1.05);
}

.service-intro--with-image .service-intro__body {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.service-intro__scroll {
	max-height: 480px;
	overflow-y: auto;
	padding-right: 16px;
	scrollbar-width: thin;
	scrollbar-color: var(--color-body-muted) transparent;
}

.service-intro__scroll::-webkit-scrollbar {
	width: 6px;
}

.service-intro__scroll::-webkit-scrollbar-track {
	background: transparent;
}

.service-intro__scroll::-webkit-scrollbar-thumb {
	background: var(--color-body-muted);
	border-radius: 10px;
}

.service-intro__scroll::-webkit-scrollbar-thumb:hover {
	background: var(--color-orange);
}

.service-intro__bullets-heading {
	margin: 4px 0 8px;
	font-weight: 600;
	color: var(--color-ink);
}

.service-intro__bullets {
	margin: 0 0 16px;
	padding-left: 20px;
	color: var(--color-body-muted);
}

.service-intro__bullets li {
	margin-bottom: 8px;
	font-size: 15px;
	line-height: 1.6;
}

.service-intro__btn {
	margin-top: 8px;
}

@media (max-width: 800px) {
	.service-intro--with-image .service-intro__inner {
		grid-template-columns: 1fr;
	}

	.service-intro__media img {
		min-height: 220px;
	}

	.service-intro__scroll {
		max-height: none;
		overflow-y: visible;
		padding-right: 0;
	}
}

/* ---- Generic banner / CTA (simple + image-split variants) ---- */

.service-banner {
	background: var(--color-surface);
	padding: clamp(40px, 5vw, 80px) var(--gutter);
}

.service-banner__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 3vw, 48px);
	flex-wrap: wrap;
}

.service-banner--dark {
	background: var(--color-ink);
}

.service-banner--dark .service-banner__heading {
	color: var(--color-heading);
}

.service-banner--dark .service-banner__body {
	color: var(--color-muted);
}

.service-banner__text {
	flex: 1 1 420px;
}

.service-banner__heading {
	margin: 0 0 12px;
	font-weight: 500;
	font-size: clamp(24px, 2vw, 34px);
	color: var(--color-ink);
}

.service-banner__heading mark {
	background: none;
	color: var(--color-orange);
}

.service-banner__body {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-body-muted);
}

.service-banner__body a {
	color: var(--color-orange);
}

.service-banner--split .service-banner__inner {
	flex-wrap: wrap;
}

.service-banner__media {
	flex: 1 1 360px;
	border-radius: 16px;
	overflow: hidden;
}

.service-banner__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.service-banner__media:hover img {
	transform: scale(1.05);
}

/* ---- Banner weight variants: 'quiet' (low-emphasis inline nudge) and
   'bold' (high-emphasis decision point) — for pages with more than one
   banner, so they read as intentionally different instead of duplicated
   copy-paste blocks. See template-parts/service-banner.php for usage. ---- */

.service-banner--quiet {
	background: var(--color-white);
	padding-block: clamp(24px, 3vw, 40px);
	border-top: 1px solid #DDE2E9;
	border-bottom: 1px solid #DDE2E9;
}

.service-banner--quiet .service-banner__inner {
	justify-content: center;
	text-align: center;
	flex-direction: column;
	gap: 16px;
}

/* .service-banner__text's base "flex: 1 1 420px" sets *width* in the
   default row layout; flipped to this column layout that same 420px
   becomes a minimum *height* instead, so it must be reset per variant
   that uses flex-direction: column. */
.service-banner--quiet .service-banner__text {
	flex: none;
}

.service-banner--quiet .service-banner__heading {
	font-size: clamp(18px, 1.5vw, 22px);
}

.service-banner--quiet .service-banner__body {
	margin: 0;
}

.service-banner--quiet .service-banner__btn {
	padding: 10px 22px;
	font-size: 14px;
}

/* quiet + an image (service-banner--split): go back to a left-text/
   right-photo row instead of quiet's centered column — a compact,
   lower-emphasis version of the default split layout. */
.service-banner--quiet.service-banner--split .service-banner__inner {
	flex-direction: row;
	text-align: left;
	justify-content: space-between;
}

.service-banner--quiet.service-banner--split .service-banner__text {
	flex: 1 1 420px;
}

.service-banner--quiet.service-banner--split .service-banner__media {
	flex: 1 1 320px;
	max-height: 220px;
}

.service-banner--bold {
	background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-navy-glow) 100%);
	padding-block: clamp(56px, 7vw, 96px);
}

.service-banner--bold .service-banner__inner {
	justify-content: center;
	text-align: center;
	flex-direction: column;
	gap: 18px;
}

.service-banner--bold .service-banner__text {
	flex: none;
}

.service-banner--bold .service-banner__heading {
	color: var(--color-heading);
	font-size: clamp(28px, 2.6vw, 40px);
	max-width: 720px;
}

.service-banner--bold .service-banner__body {
	color: var(--color-muted);
	font-size: 16px;
	max-width: 560px;
}

/* bold + an image (service-banner--split): left-aligned text next to a
   photo, the photo faded into the gradient background on its inner edge
   instead of the centered no-image column layout above. */
.service-banner--bold.service-banner--split .service-banner__inner {
	flex-direction: row;
	text-align: left;
	justify-content: space-between;
}

.service-banner--bold.service-banner--split .service-banner__text {
	flex: 1 1 420px;
}

.service-banner--bold.service-banner--split .service-banner__heading,
.service-banner--bold.service-banner--split .service-banner__body {
	max-width: none;
}

.service-banner--bold.service-banner--split .service-banner__media {
	flex: 1 1 380px;
	position: relative;
	align-self: stretch;
	max-height: 320px;
}

.service-banner--bold.service-banner--split .service-banner__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--color-navy-glow) 0%, rgba(9, 21, 37, 0) 55%);
}

.service-banner--bold .service-banner__btn {
	padding: 16px 32px;
	font-size: 16px;
}

/* ---- Generic feature/card grid (services, why-choose, industries) ---- */

.service-feature-grid {
	background: var(--color-surface);
	padding: clamp(48px, 6.25vw, 120px) var(--gutter);
}

/* Real pages often stack 2-3 of these sections back to back (e.g.
   Industries -> Why Choose -> Success Stories) with nothing in
   between to break them up — since they all share the same default
   background, that reads as one long wall of identical cards instead
   of distinct sections. Alternate automatically whenever this happens,
   anywhere it happens, without needing a page-specific class. */
.service-feature-grid + .service-feature-grid {
	background: var(--color-white);
}

.service-feature-grid + .service-feature-grid + .service-feature-grid {
	background: var(--color-surface);
}

.service-feature-grid + .service-feature-grid + .service-feature-grid + .service-feature-grid {
	background: var(--color-white);
}

.service-feature-grid__inner {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 2.5vw, 48px);
}

.service-feature-grid__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

.service-feature-grid__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.service-feature-grid__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(24px, 2vw, 36px);
	line-height: 1.15;
	color: var(--color-ink);
}

.service-feature-grid__heading mark {
	background: none;
	color: var(--color-orange);
}

.service-feature-grid__subtext {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

/* flex + wrap (not a rigid 3-column grid) so an incomplete last row
   centers instead of leaving a lone card left-aligned with empty
   space beside it — card counts that don't divide evenly by 3 are
   common across real content and shouldn't need a page-specific
   opt-in to look right. */
.service-feature-grid__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.service-feature-grid__card {
	display: block;
	background: #fff;
	border: 1px solid var(--color-border-light, #e7eaef);
	border-radius: 12px;
	padding: 24px;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	flex: 1 1 340px;
	max-width: calc(33.333% - 14px);
}

@media (max-width: 900px) {
	.service-feature-grid__card {
		max-width: calc(50% - 10px);
	}
}

@media (max-width: 600px) {
	.service-feature-grid__card {
		max-width: 100%;
	}
}

a.service-feature-grid__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(10, 22, 40, 0.08);
	border-color: var(--color-orange);
}

.service-feature-grid__card-icon {
	margin: 0 0 14px;
	object-fit: contain;
	transition: transform 0.3s ease;
}

a.service-feature-grid__card:hover .service-feature-grid__card-icon {
	transform: scale(1.1);
}

.service-feature-grid__card-icon--svg {
	display: inline-flex;
	width: 32px;
	height: 32px;
	color: #FF5900;
}

.service-feature-grid__card-icon--svg svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.service-feature-grid__card-title {
	margin: 0 0 8px;
	font-weight: 600;
	font-size: 17px;
	color: var(--color-ink);
}

.service-feature-grid__card-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

.service-feature-grid__card-arrow {
	display: inline-block;
	margin-top: 12px;
	color: var(--color-orange);
	font-weight: 600;
	transition: transform 0.25s ease;
}

a.service-feature-grid__card:hover .service-feature-grid__card-arrow {
	transform: translateX(4px);
}

.service-feature-grid__card--cta {
	background: var(--color-ink);
	color: var(--color-heading);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-weight: 500;
}

.service-feature-grid__card--cta .service-feature-grid__card-arrow {
	color: var(--color-orange);
	margin-top: 0;
}

/* Numbered badges on "Why Choose Us" grids (section_class="gen-why-choose",
   the convention used across all real-content pages) so this grid reads as
   a distinct, ordered list of reasons rather than another generic card
   grid identical to the services/industries grids around it. */
.gen-why-choose .service-feature-grid__grid {
	counter-reset: why-choose-count;
}

.gen-why-choose .service-feature-grid__card {
	position: relative;
	padding-top: 44px;
}

.gen-why-choose .service-feature-grid__card::before {
	counter-increment: why-choose-count;
	content: counter(why-choose-count, decimal-leading-zero);
	position: absolute;
	top: 20px;
	left: 24px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-orange);
}

/* ---- Generic big-number stat grid ---- */

.service-stat-grid {
	background: #fff;
	padding: clamp(48px, 6.25vw, 120px) var(--gutter);
}

.service-stat-grid__inner {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 2.5vw, 48px);
}

.service-stat-grid__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

.service-stat-grid__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.service-stat-grid__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(24px, 2vw, 36px);
	color: var(--color-ink);
}

.service-stat-grid__intro {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

/* A finer 6-column base (each card spans 2, i.e. 3 per row — same
   visual width as a plain 3-column grid) so an incomplete last row
   can widen just its trailing card(s) to fill the row instead of
   leaving 1-2 empty bordered cells dangling on the right. This keeps
   the seamless connected-border look (every track is always occupied
   by some card), unlike the flex-wrap + gap centering used for the
   feature-grid cards, which would introduce visible gaps and break
   this component's distinct "data table" styling. */
.service-stat-grid__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	border-top: 1px solid #DDE2E9;
	border-left: 1px solid #DDE2E9;
}

.service-stat-grid__outro {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

.service-stat-grid__card {
	grid-column: span 2;
	background: transparent;
	border-radius: 0;
	border-right: 1px solid #DDE2E9;
	border-bottom: 1px solid #DDE2E9;
	padding: 32px 24px;
	text-align: left;
	transition: background-color 0.3s ease;
}

.service-stat-grid__card:hover {
	background-color: rgba(255, 89, 0, 0.04);
}

.service-stat-grid__number {
	margin: 0 0 10px;
	font-weight: 700;
	font-size: clamp(32px, 3vw, 44px);
	letter-spacing: -0.02em;
	color: var(--color-orange);
	display: inline-block;
	transition: transform 0.3s ease;
}

.service-stat-grid__card:hover .service-stat-grid__number {
	transform: translateY(-2px);
}

/* Alternate accent colors so a wall of numbers reads as data, not a
   repeated template — orange/blue/orange... across the grid. */
.service-stat-grid__card:nth-child(6n+2) .service-stat-grid__number,
.service-stat-grid__card:nth-child(6n+4) .service-stat-grid__number,
.service-stat-grid__card:nth-child(6n+6) .service-stat-grid__number {
	color: #2E6FE0;
}

.service-stat-grid__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

/* When the total card count isn't a multiple of 3, the last row has 1
   or 2 leftover cards; widen just those to fill the row instead of
   leaving 1-2 empty bordered cells beside them. Only meaningful at the
   desktop 3-per-row layout the 6-column base grid targets — the
   2-per-row/1-per-row mobile collapse below doesn't have this problem
   since every card already fills its own row there. */
@media (min-width: 901px) {
	.service-stat-grid__card:nth-child(3n+1):last-child {
		grid-column: span 6;
	}

	.service-stat-grid__card:nth-child(3n+1):nth-last-child(2),
	.service-stat-grid__card:nth-child(3n+2):last-child {
		grid-column: span 3;
	}
}

/* ---- Generic grouped tech-stack badges ---- */

.service-tech-stack {
	background: var(--color-surface);
	padding: clamp(48px, 6.25vw, 120px) var(--gutter);
}

.service-tech-stack__inner {
	max-width: 1200px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 2.5vw, 48px);
}

.service-tech-stack__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

.service-tech-stack__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.service-tech-stack__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(24px, 2vw, 36px);
	color: var(--color-ink);
}

.service-tech-stack__subtext {
	margin: 0;
	font-size: 15px;
	color: var(--color-body-muted);
}

.service-tech-stack__groups {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.service-tech-stack__group {
	background: #fff;
	border-radius: 12px;
	padding: 20px 24px;
}

.service-tech-stack__group-title {
	margin: 0 0 12px;
	font-weight: 600;
	font-size: 16px;
	color: var(--color-ink);
}

.service-tech-stack__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.service-tech-stack__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--color-surface);
	border: 1px solid var(--color-border-light, #e7eaef);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 13px;
	color: var(--color-body-muted);
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.service-tech-stack__badge:hover {
	background: #FFF1E8;
	border-color: var(--color-orange);
	color: var(--color-ink);
	transform: translateY(-2px);
}

.service-tech-stack__badge-icon {
	flex: none;
	object-fit: contain;
}

/* ---- Generic numbered-step process (text-only variant) ---- */

.service-process {
	background: #fff;
	padding: clamp(48px, 6.25vw, 120px) var(--gutter);
}

.service-process__inner {
	max-width: 1100px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 2.5vw, 48px);
}

.service-process__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

.service-process__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.service-process__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(24px, 2vw, 36px);
	color: var(--color-ink);
}

.service-process__heading mark {
	background: none;
	color: var(--color-orange);
}

.service-process__intro {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

.service-process__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
	padding-left: 64px;
}

/* The connecting vertical line behind the numbered nodes. */
.service-process__list::before {
	content: '';
	position: absolute;
	left: 27px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: #DDE2E9;
}

.service-process__step {
	display: block;
	position: relative;
	padding: 0 0 32px;
}

.service-process__step:last-child {
	padding-bottom: 0;
}

.service-process__step-number {
	position: absolute;
	left: -64px;
	top: -2px;
	margin: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	color: #fff;
	background: var(--color-ink);
	border-radius: 50%;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-process__step:hover .service-process__step-number {
	transform: scale(1.12);
	box-shadow: 0 6px 16px rgba(10, 22, 40, 0.3);
}

/* Alternate node colors so the timeline doesn't read as one flat repeated
   shape — orange/navy/orange... down the list. */
.service-process__step:nth-child(odd) .service-process__step-number {
	background: var(--color-orange);
}

.service-process__step-body {
	padding-top: 4px;
}

.service-process__step-title {
	margin: 0 0 6px;
	font-weight: 600;
	font-size: 16px;
	color: var(--color-ink);
}

.service-process__step-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--color-body-muted);
}

.service-process__cta {
	text-align: center;
	margin-top: 8px;
}

/* Photo-card variant (real per-step photography) — a grid of cards
   instead of the connected numbered timeline. */
.service-process__list--photos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding-left: 0;
}

.service-process__list--photos::before {
	content: none;
}

.service-process__list--photos .service-process__step {
	padding: 0;
	border: 1px solid var(--color-border-light, #e7eaef);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-process__list--photos .service-process__step:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(10, 22, 40, 0.12);
	border-color: var(--color-orange);
}

.service-process__list--photos .service-process__step-photo {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.service-process__list--photos .service-process__step:hover .service-process__step-photo {
	transform: scale(1.06);
}

.service-process__list--photos .service-process__step-number {
	position: static;
	width: 36px;
	height: 36px;
	font-size: 13px;
	margin: -18px 0 0 16px;
	box-shadow: 0 2px 8px rgba(10, 22, 40, 0.25);
}

.service-process__list--photos .service-process__step-body {
	padding: 12px 16px 20px;
}

@media (max-width: 900px) {
	.service-process__list--photos {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.service-process__list--photos {
		grid-template-columns: 1fr;
	}
}

/* ---- Case studies (Challenge / Solution / Results cards) ---- */

.service-case-studies {
	background: var(--color-white);
	padding: clamp(48px, 6.25vw, 120px) var(--gutter);
}

.service-case-studies__inner {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 2.5vw, 48px);
}

.service-case-studies__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

.service-case-studies__eyebrow {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.service-case-studies__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(24px, 2vw, 36px);
	line-height: 1.15;
	color: var(--color-ink);
}

.service-case-studies__subtext {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

.service-case-studies__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.service-case-studies__card {
	background: var(--color-surface);
	border: 1px solid var(--color-border-light, #e7eaef);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-case-studies__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(10, 22, 40, 0.1);
	border-color: var(--color-orange);
}

.service-case-studies__card-title {
	margin: 0 0 12px;
	font-weight: 600;
	font-size: 17px;
	color: var(--color-ink);
}

.service-case-studies__card-label {
	margin: 12px 0 4px;
	font-weight: 600;
	font-size: 13px;
	color: var(--color-orange);
}

.service-case-studies__card-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--color-body-muted);
}

.service-case-studies__results {
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-body-muted);
}

.service-case-studies__card-link {
	margin-top: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 14px;
	color: var(--color-orange);
	text-decoration: none;
	transition: color 0.2s ease;
}

.service-case-studies__card-link:hover {
	color: var(--color-orange-dark);
}

.service-case-studies__card-link span {
	transition: transform 0.25s ease;
}

.service-case-studies__card-link:hover span {
	transform: translateX(3px);
}

@media (max-width: 900px) {
	.service-case-studies__list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.service-hero__inner {
		grid-template-columns: 1fr;
	}
	.service-stat-grid__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 600px) {
	.service-stat-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.service-process__list {
		padding-left: 52px;
	}
	.service-process__step-number {
		left: -52px;
		width: 36px;
		height: 36px;
		font-size: 13px;
	}
	.service-process__list::before {
		left: 21px;
	}
}

/* ---- Industry carousel (icon+category, highlight line, desc, 2 stats) ---- */

.service-industry-carousel {
	background: var(--color-surface);
	padding: clamp(48px, 6.25vw, 120px) var(--gutter);
}

.service-industry-carousel__inner {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 2.5vw, 48px);
}

.service-industry-carousel__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

.service-industry-carousel__heading {
	margin: 0;
	font-weight: 500;
	font-size: clamp(24px, 2vw, 36px);
	color: var(--color-ink);
}

.service-industry-carousel__subtext {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

/* flex + wrap (not a rigid 3-column grid) so an incomplete last row
   centers instead of leaving a lone card left-aligned with empty
   space beside it — this component always renders exactly 10 real
   industry cards, which never divides evenly by 3. */
.service-industry-carousel__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.service-industry-carousel__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: #fff;
	border: 1px solid #DDE2E9;
	border-radius: 12px;
	padding: 24px;
	text-decoration: none;
	flex: 1 1 340px;
	max-width: calc(33.333% - 14px);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (max-width: 900px) {
	.service-industry-carousel__card {
		max-width: calc(50% - 10px);
	}
}

@media (max-width: 600px) {
	.service-industry-carousel__card {
		max-width: 100%;
	}
}

a.service-industry-carousel__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(10, 22, 40, 0.08);
	border-color: var(--color-orange);
}

.service-industry-carousel__top {
	display: flex;
	align-items: center;
	gap: 12px;
}

.service-industry-carousel__icon {
	flex: none;
	display: inline-flex;
	width: 28px;
	height: 28px;
	color: var(--color-orange);
	transition: transform 0.3s ease;
}

a.service-industry-carousel__card:hover .service-industry-carousel__icon {
	transform: scale(1.12);
}

.service-industry-carousel__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.service-industry-carousel__title {
	margin: 0;
	font-weight: 600;
	font-size: 16px;
	color: var(--color-ink);
}

.service-industry-carousel__category {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--color-body-muted);
}

.service-industry-carousel__highlight {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	background: var(--color-surface);
	border-radius: 8px;
}

.service-industry-carousel__highlight-icon {
	flex: none;
	display: inline-flex;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: #2E6FE0;
}

.service-industry-carousel__highlight-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.service-industry-carousel__highlight p {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-ink);
}

.service-industry-carousel__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-body-muted);
}

.service-industry-carousel__desc a {
	color: var(--color-orange);
}

.service-industry-carousel__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid #DDE2E9;
}

.service-industry-carousel__stat {
	text-align: center;
}

.service-industry-carousel__stat-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--color-orange);
	margin-bottom: 6px;
}

.service-industry-carousel__stat-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.service-industry-carousel__stat-value {
	margin: 0;
	font-weight: 700;
	font-size: 15px;
	color: var(--color-ink);
}

.service-industry-carousel__stat-label {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--color-body-muted);
}

.service-industry-carousel__cta {
	text-align: center;
}

/* ==========================================================================
   About Us page components
   ========================================================================== */

.about-timeline {
	background: var(--color-surface);
	padding: clamp(48px, 6.25vw, 100px) var(--gutter);
}

.about-timeline__inner {
	max-width: var(--container-max);
	margin-inline: auto;
}

.about-timeline__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 40px;
}

.about-timeline__eyebrow {
	margin: 0 0 12px;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.about-timeline__heading {
	margin: 0 0 12px;
	font-weight: 500;
	font-size: clamp(26px, 2.5vw, 40px);
	color: var(--color-ink);
}

.about-timeline__heading mark {
	background: none;
	color: var(--color-orange);
}

.about-timeline__subheading {
	margin: 0;
	font-size: 15px;
	color: var(--color-body-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.about-timeline__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.about-timeline__item {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 18px 24px;
	background: #fff;
	border: 1px solid var(--color-border-light, #e7eaef);
	border-radius: 12px;
}

.about-timeline__year {
	flex: none;
	min-width: 72px;
	font-weight: 700;
	font-size: 24px;
	color: var(--color-orange);
}

.about-timeline__title {
	font-size: 16px;
	color: var(--color-ink);
}

.about-leadership {
	background: #fff;
	padding: clamp(48px, 6.25vw, 100px) var(--gutter);
}

.about-leadership__inner {
	max-width: var(--container-max);
	margin-inline: auto;
}

.about-leadership__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 40px;
}

.about-leadership__eyebrow {
	margin: 0 0 12px;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.about-leadership__heading {
	margin: 0 0 12px;
	font-weight: 500;
	font-size: clamp(26px, 2.5vw, 40px);
	color: var(--color-ink);
}

.about-leadership__heading mark {
	background: none;
	color: var(--color-orange);
}

.about-leadership__subheading {
	margin: 0 0 20px;
	font-size: 16px;
	color: var(--color-body-muted);
}

.about-leadership__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.about-leadership__card {
	text-align: center;
}

.about-leadership__photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	margin: 0 0 16px;
}

.about-leadership__name {
	margin: 0 0 4px;
	font-weight: 600;
	font-size: 17px;
	color: var(--color-ink);
}

.about-leadership__title {
	margin: 0;
	font-size: 14px;
	color: var(--color-body-muted);
}

.about-badges {
	background: var(--color-surface);
	padding: clamp(40px, 5vw, 72px) var(--gutter);
}

.about-badges__inner {
	max-width: var(--container-max);
	margin-inline: auto;
}

.about-badges__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 32px;
}

.about-badges__eyebrow {
	margin: 0 0 12px;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-orange);
}

.about-badges__heading {
	margin: 0 0 8px;
	font-weight: 500;
	font-size: clamp(24px, 2.1vw, 32px);
	color: var(--color-ink);
}

.about-badges__heading mark {
	background: none;
	color: var(--color-orange);
}

.about-badges__subheading {
	margin: 0;
	font-size: 15px;
	color: var(--color-body-muted);
}

.about-badges__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 32px 48px;
}

.about-badges__badge {
	display: flex;
	align-items: center;
	gap: 10px;
}

.about-badges__icon {
	display: block;
	height: 40px;
	width: auto;
	max-width: 100px;
	object-fit: contain;
}

.about-badges__label {
	font-weight: 500;
	font-size: 15px;
	color: var(--color-ink);
}

@media (max-width: 900px) {
	.about-leadership__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.about-leadership__grid {
		grid-template-columns: 1fr;
	}

	.about-timeline__item {
		flex-direction: column;
		gap: 6px;
	}
}

/* ---- Reduced-motion fallback for the service-* component hover
   microinteractions above (image zooms, card lifts, icon/arrow nudges,
   number/badge shifts) — keep color/background transitions, drop transforms. ---- */
@media (prefers-reduced-motion: reduce) {
	.service-banner__media img,
	.service-intro__media img,
	.service-feature-grid__card-icon,
	.service-feature-grid__card-arrow,
	.service-stat-grid__number,
	.service-tech-stack__badge,
	.service-process__step-number,
	.service-process__step-photo,
	.service-industry-carousel__icon,
	a.service-feature-grid__card,
	a.service-industry-carousel__card,
	.service-case-studies__card,
	.service-process__list--photos .service-process__step {
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}

	.service-banner__media:hover img,
	.service-intro__media:hover img,
	a.service-feature-grid__card:hover .service-feature-grid__card-icon,
	a.service-feature-grid__card:hover .service-feature-grid__card-arrow,
	.service-stat-grid__card:hover .service-stat-grid__number,
	.service-tech-stack__badge:hover,
	.service-process__step:hover .service-process__step-number,
	.service-process__list--photos .service-process__step:hover .service-process__step-photo,
	a.service-industry-carousel__card:hover .service-industry-carousel__icon,
	a.service-feature-grid__card:hover,
	a.service-industry-carousel__card:hover,
	.service-case-studies__card:hover,
	.service-process__list--photos .service-process__step:hover {
		transform: none;
	}
}

/* ==========================================================================
   Site-wide header skin (reference design)
   Applies to every facelift template (homepage, all 54 service pages, hire
   pages) since this file only loads on those pages already — see
   edge_is_facelift_template() in functions.php. Keeps site-header.php's
   real logo, real menu items, real phone number and real
   location-switcher markup; only colors/sizing/spacing change, to match
   the reference design's dark navy header everywhere instead of just on
   the homepage and the new Hire FDE page.
   ========================================================================== */
.site-header{background:var(--deep);position:sticky;top:0;z-index:40;border-bottom:1px solid #ffffff0b}
.site-header__inner{max-width:1440px;padding:14px 40px;min-height:76px;gap:30px}
.site-logo{width:114px;height:56px}
.site-header__collapsible{gap:40px}
.site-nav__list{gap:22px}
.site-nav__link,.site-nav__link--simple,.site-nav__link--services{color:#fff;font-size:14px;font-family:'DM Sans',Arial,sans-serif}
.site-nav__link:hover,.site-nav__link--simple:hover,.site-nav__link--services:hover,.site-header__location:hover{color:var(--color-orange)}
.site-header__right{gap:30px}
.site-header__location{color:#fff;font-size:14px;font-family:'DM Sans',Arial,sans-serif}
.site-header__location-label{color:#fff}
.site-header__phone{color:#fff;font-size:13px;font-family:'DM Sans',Arial,sans-serif}
.site-header__phone:hover{color:var(--color-orange)}
.btn.btn--nav{border-radius:4px;font-family:'DM Sans',Arial,sans-serif}
.site-header__toggle-bar{background:#fff}
@media(max-width:1250px){.site-header__inner{padding:14px 28px;gap:20px}.site-header__phone{display:none}}
@media(max-width:1000px){.site-header__inner{min-height:72px}.site-header__collapsible{position:absolute;top:100%;left:0;right:0;bottom:auto;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;background:var(--deep);flex-direction:column;align-items:flex-start;padding:20px 28px;gap:16px}.site-header__toggle{display:flex}.site-nav__list{flex-direction:column;align-items:flex-start;gap:16px}.site-header__right{flex-direction:column;align-items:flex-start;gap:16px}}
@media(max-width:700px){.site-header__inner{padding:12px 20px}.site-logo{width:98px;height:48px}}

/* Testimonial card: "View Case Study" link revealed on hover (always shown
   on touch screens, and whenever it has keyboard focus). */
.testimonials__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.testimonials__card .testimonials__case-link {
	flex: none;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-orange);
	text-decoration: none;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonials__card:hover .testimonials__case-link,
.testimonials__card .testimonials__case-link:focus-visible {
	opacity: 1;
	transform: translateX(0);
}

.testimonials__card .testimonials__case-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (hover: none) {
	.testimonials__card .testimonials__case-link {
		opacity: 1;
		transform: none;
	}
}

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

/* Footer column links: hover from the reference design — text brightens to
   white while a 1px orange underline grows in from the left. The selector
   is deliberately specific enough to beat page stylesheets' generic
   "a { color: inherit }" resets (homepage, FDE page). */
html body .site-footer .site-footer__col-list a {
	font-size: 14px;
	color: var(--color-body-muted);
	text-decoration: none;
	background-image: linear-gradient(var(--color-orange), var(--color-orange));
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 0 1px;
	padding-bottom: 2px;
	transition: background-size 0.2s ease, color 0.2s ease;
}

html body .site-footer .site-footer__col-list a:hover,
html body .site-footer .site-footer__col-list a:focus-visible {
	color: var(--color-white);
	background-size: 100% 1px;
}

/* Zoho reCAPTCHA box inside the new-design enquiry forms (contact.php, Hire
   FDE). Centred above the submit button; scaled down on very narrow forms so
   the fixed 304px widget never overflows. */
.enquiry-form .zoho-captcha {
	display: flex;
	justify-content: center;
	min-height: 78px;
	margin: 2px 0 0;
}

.enquiry-form .form-status:not([hidden]) {
	margin: 0;
	font-size: 14px;
	text-align: center;
	color: #6b7489;
}

.enquiry-form .form-status.is-error {
	color: #b42318;
}

@media (max-width: 380px) {
	.enquiry-form .zoho-captcha {
		transform: scale(0.88);
		transform-origin: center top;
		min-height: 69px;
	}
}

/* Services mega-menu: help card filling short sub-lists (1–2 items). */
.services-menu__col--sub.is-active {
	display: flex;
	flex-direction: column;
	padding-bottom: 24px;
}

.services-menu__help {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
	padding: 18px 20px;
	border-radius: 10px;
	background: var(--color-white);
	color: var(--color-ink);
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(12, 22, 39, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.services-menu__help:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 3px var(--color-orange), 0 10px 22px rgba(12, 22, 39, 0.1);
}

.services-menu__help-title {
	font-size: 15px;
	font-weight: 700;
}

.services-menu__help-text {
	font-size: 13px;
	line-height: 1.5;
	color: #626c7c;
}

.services-menu__help-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-orange);
}

.services-menu__help-link svg {
	width: 16px;
	height: 16px;
}

/* ==========================================================================
   Services mega-menu — grid style (edge_services_megamenu_grid); the
   column (.smg__pillar) rules are shared with the hybrid style below
   From the approved "Header – Services mega menu" design: every category
   visible at once, each with its links and technology partners. Laid out
   as five columns under a slim intro bar (selectors are scoped to .services-menu--grid so the site-wide link colour does not override them) so the whole panel fits under the
   header without scrolling; on short screens it compacts in steps
   (labels, then chip names, then chips are dropped). The classic menu
   styles above are untouched (Customize > Header Menu switches styles).
   ========================================================================== */

.services-menu--grid {
	right: 0;
	width: 100%;
	max-height: calc(100vh - var(--edge-header-bottom, 80px));
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top: 1px solid #dde3ec;
	font-family: 'DM Sans', var(--font-body);
}

:is(.services-menu--grid, .services-menu--hybrid) .smg {
	max-width: 1440px;
	margin-inline: auto;
	padding: 22px 40px 30px;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__lead {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding-bottom: 16px;
	margin-bottom: 22px;
	border-bottom: 1px solid #dde3ec;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__lead-title {
	margin: 0;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #0b1f3a;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__lead-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #4a5a72;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding-bottom: 2px;
	border-bottom: 2px solid #f97316;
	font-size: 14px;
	font-weight: 700;
	color: #0b1f3a;
	text-decoration: none;
	white-space: nowrap;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__all:hover {
	color: #c2410c;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 32px;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__title {
	display: block;
	padding-bottom: 9px;
	margin-bottom: 8px;
	border-bottom: 2px solid #f97316;
	font-size: 15.5px;
	line-height: 1.3;
	font-weight: 800;
	color: #c2410c;
	text-decoration: none;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__title:hover {
	color: #9a3412;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__links a {
	display: block;
	padding: 5px 0;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
	color: #0b1f3a;
	text-decoration: none;
	transition: color 0.15s ease, transform 0.15s ease;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__links a:hover,
:is(.services-menu--grid, .services-menu--hybrid) .smg__links a:focus-visible {
	color: #c2410c;
	transform: translateX(3px);
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__label {
	margin: 14px 0 0;
	font-size: 11px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #4a5a72;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px 5px 6px;
	border: 1px solid #dde3ec;
	background: #f7f9fc;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 700;
	color: #0b1f3a;
	white-space: nowrap;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__logo {
	flex: none;
	width: 15px;
	height: 15px;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__mono {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 1px solid #fdba74;
	background: #fff7ed;
	font-size: 9.5px;
	font-weight: 800;
	color: #9a3412;
}

/* Narrower desktops: tighter columns. */
@media (min-width: 1025px) and (max-width: 1280px) {
	:is(.services-menu--grid, .services-menu--hybrid) .smg {
		padding-inline: 28px;
	}

	:is(.services-menu--grid, .services-menu--hybrid) .smg__grid {
		gap: 22px;
	}

	:is(.services-menu--grid, .services-menu--hybrid) .smg__links a {
		font-size: 13.5px;
	}
}

/* Short screens (grid style only — the hybrid panel is short enough):
   compact in steps so the panel never needs scrolling. */
@media (min-width: 1025px) and (max-height: 720px) {
	.services-menu--grid .smg {
		padding-top: 16px;
		padding-bottom: 20px;
	}

	.services-menu--grid .smg__lead {
		padding-bottom: 12px;
		margin-bottom: 16px;
	}

	.services-menu--grid .smg__links a {
		padding: 3px 0;
	}

	.services-menu--grid .smg__label {
		display: none;
	}

	.services-menu--grid .smg__chips {
		margin-top: 12px;
	}
}

@media (min-width: 1025px) and (max-height: 600px) {
	.services-menu--grid .smg__lead-text {
		display: none;
	}

	/* Chips become logo-only squares; the name stays as a tooltip. */
	.services-menu--grid .smg__chip {
		padding: 5px;
	}

	.services-menu--grid .smg__chip-name {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

@media (min-width: 1025px) and (max-height: 500px) {
	.services-menu--grid .smg__chips {
		display: none;
	}
}

/* Mobile menu (dark): stacked categories with their links, no chips. */
@media (max-width: 1024px) {
	.services-menu--grid {
		max-height: none;
		overflow: visible;
		border-top: 0;
	}

	:is(.services-menu--grid, .services-menu--hybrid) .smg {
		padding: 0;
	}

	:is(.services-menu--grid, .services-menu--hybrid) .smg__lead {
		display: block;
		margin-bottom: 8px;
		padding-bottom: 12px;
		border-bottom-color: rgba(255, 255, 255, 0.16);
	}

	:is(.services-menu--grid, .services-menu--hybrid) .smg__lead-title,
	:is(.services-menu--grid, .services-menu--hybrid) .smg__lead-text {
		display: none;
	}

	:is(.services-menu--grid, .services-menu--hybrid) .smg__all {
		margin: 0;
		color: #fff;
	}

	:is(.services-menu--grid, .services-menu--hybrid) .smg__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	:is(.services-menu--grid, .services-menu--hybrid) .smg__title {
		border-bottom-color: rgba(249, 115, 22, 0.6);
		color: #ff8a3d;
	}

	:is(.services-menu--grid, .services-menu--hybrid) .smg__links a {
		color: #fff;
		font-weight: 500;
	}

	:is(.services-menu--grid, .services-menu--hybrid) .smg__label,
	:is(.services-menu--grid, .services-menu--hybrid) .smg__chips {
		display: none;
	}
}

/* ==========================================================================
   Services mega-menu — hybrid style (edge_services_megamenu_hybrid)
   The classic category list on the left (classic markup and hover script)
   and, for the hovered category, one column in the grid design (shared
   .smg__pillar rules above). Desktop polish: a quiet list with a peach
   active row and orange edge bar, and the column as a soft card the same
   height as the list — title with an orange accent and "Explore", links in
   two columns, partner chips as pills along the bottom.
   ========================================================================== */

.services-menu--hybrid {
	font-family: 'DM Sans', var(--font-body);
}

@media (min-width: 1025px) {
	.services-menu--hybrid {
		border-top: 1px solid #e8ebf1;
	}

	/* List in column 1; every category card stacked in column 2, only the
	   active one visible — so the panel keeps the tallest card height and
	   never jumps while hovering between categories. */
	.services-menu--hybrid .services-menu__inner {
		display: grid;
		grid-template-columns: 290px 520px;
		align-items: stretch;
		gap: 24px;
		padding: 22px 28px 26px 40px;
	}

	.services-menu--hybrid .services-menu__rail {
		grid-column: 1;
		grid-row: 1;
	}

	.services-menu--hybrid .services-menu__panel {
		display: flex;
		grid-column: 2;
		grid-row: 1;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

	/* inherit, not visible: a visible child of the hidden (closed) menu
	   would stay hoverable and open the menu from empty space. */
	.services-menu--hybrid .services-menu__panel.is-active {
		visibility: inherit;
		opacity: 1;
		pointer-events: inherit;
	}

	/* ---- Category list ---- */

	.services-menu--hybrid .services-menu__rail-title {
		margin: 0 0 6px;
		padding: 4px 16px 10px;
		border-bottom: 0;
		font-size: 11.5px;
		line-height: 1.4;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #6b778a;
	}

	.services-menu--hybrid .services-menu__rail-title svg {
		display: none;
	}

	.services-menu--hybrid .services-menu__categories {
		gap: 2px;
	}

	.services-menu--hybrid .services-menu__category > a {
		position: relative;
		padding: 13px 14px 13px 16px;
		border-radius: 10px;
		font-size: 15px;
		line-height: 1.35;
		font-weight: 500;
		color: #0b1f3a;
		text-decoration: none;
	}

	/* Orange edge bar on the active row. */
	.services-menu--hybrid .services-menu__category > a::before {
		content: '';
		position: absolute;
		top: 10px;
		bottom: 10px;
		left: 0;
		width: 3px;
		border-radius: 3px;
		background: #ff5900;
		opacity: 0;
		transform: scaleY(0.4);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.services-menu--hybrid .services-menu__category > a svg {
		opacity: 0;
		transform: translateX(-4px);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.services-menu--hybrid .services-menu__category:not(.is-active) > a:hover {
		background: #f5f6f9;
	}

	.services-menu--hybrid .services-menu__category:not(.is-active) > a:hover svg {
		opacity: 0.5;
		transform: none;
	}

	.services-menu--hybrid .services-menu__category.is-active > a {
		background: #fff1e8;
		font-weight: 600;
		color: #c2410c;
	}

	.services-menu--hybrid .services-menu__category.is-active > a::before {
		opacity: 1;
		transform: none;
	}

	.services-menu--hybrid .services-menu__category.is-active > a svg {
		opacity: 1;
		transform: none;
		color: #ff5900;
	}

	/* ---- Category card ---- */

	.services-menu--hybrid .services-menu__panel .smg__pillar {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		width: 100%;
		padding: 22px 26px 20px;
		border: 1px solid #eceff4;
		border-radius: 16px;
		background: #f7f8fb;
	}

	.services-menu--hybrid .services-menu__panel.is-active .smg__pillar {
		animation: edge-smh-in 0.22s ease;
	}

	/* Title: orange, short orange accent over a hairline, "Explore" on the right. */
	.services-menu--hybrid .smg__pillar .smg__title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 10px;
		padding-bottom: 14px;
		border-bottom: 1px solid #e3e7ee;
		background: linear-gradient(#f97316, #f97316) left bottom / 44px 2px no-repeat;
		font-size: 18px;
		line-height: 1.3;
		font-weight: 700;
		color: #c2410c;
	}

	.services-menu--hybrid .smg__pillar .smg__title::after {
		content: 'Explore \2192';
		flex: none;
		font-size: 13px;
		font-weight: 600;
		color: #4a5a72;
		transition: color 0.15s ease, transform 0.15s ease;
	}

	.services-menu--hybrid .smg__pillar .smg__title:hover::after {
		color: #c2410c;
		transform: translateX(3px);
	}

	/* Links in a single column, arrow on hover. */
	.services-menu--hybrid .smg__pillar .smg__links {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 1px;
	}

	.services-menu--hybrid .smg__pillar .smg__links a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin-left: -10px;
		padding: 8px 10px;
		border-radius: 8px;
		font-size: 14.5px;
		line-height: 1.35;
		font-weight: 500;
		color: #1c2a3f;
	}

	.services-menu--hybrid .smg__pillar .smg__links a::after {
		content: '\2192';
		flex: none;
		color: #ff5900;
		opacity: 0;
		transform: translateX(-4px);
		transition: opacity 0.15s ease, transform 0.15s ease;
	}

	.services-menu--hybrid .smg__pillar .smg__links a:hover,
	.services-menu--hybrid .smg__pillar .smg__links a:focus-visible {
		background: #fff;
		color: #c2410c;
		transform: none;
		box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06);
	}

	.services-menu--hybrid .smg__pillar .smg__links a:hover::after,
	.services-menu--hybrid .smg__pillar .smg__links a:focus-visible::after {
		opacity: 1;
		transform: none;
	}

	/* Partner chips: a footer row of pills. */
	.services-menu--hybrid .smg__pillar .smg__label {
		margin-top: auto;
		padding-top: 14px;
		border-top: 1px solid #e3e7ee;
		font-size: 11px;
		letter-spacing: 0.08em;
		color: #6b778a;
	}

	.services-menu--hybrid .smg__pillar .smg__chips {
		gap: 8px;
		margin-top: 10px;
	}

	.services-menu--hybrid .smg__pillar .smg__chip {
		gap: 7px;
		padding: 6px 12px 6px 8px;
		border-color: #e3e7ee;
		border-radius: 999px;
		background: #fff;
		font-size: 12.5px;
		font-weight: 600;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
	}

	.services-menu--hybrid .smg__pillar .smg__chip:hover {
		border-color: #fdba74;
		box-shadow: 0 2px 6px rgba(11, 31, 58, 0.06);
	}

	.services-menu--hybrid .smg__pillar .smg__mono {
		border-radius: 50%;
	}
}

/* Narrower desktops: slimmer list and card. */
@media (min-width: 1025px) and (max-width: 1200px) {
	.services-menu--hybrid .services-menu__inner {
		grid-template-columns: 250px 480px;
		padding-left: 28px;
	}
}

@keyframes edge-smh-in {
	from {
		opacity: 0;
		transform: translateX(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.services-menu--hybrid .services-menu__panel.is-active .smg__pillar {
		animation: none;
	}
}

/* Hybrid card layout: links on the left, "Technologies & partners" as a
   column on the right (chips stacked), so the card has no empty right
   half and the chips never wrap. */
@media (min-width: 1025px) {
	.services-menu--hybrid .services-menu__inner {
		grid-template-columns: 290px 600px;
	}

	.services-menu--hybrid .services-menu__panel .smg__pillar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 196px;
		grid-template-rows: auto auto 1fr;
		column-gap: 28px;
		align-content: start;
	}

	.services-menu--hybrid .smg__pillar .smg__title {
		grid-column: 1 / -1;
	}

	.services-menu--hybrid .smg__pillar .smg__links {
		grid-column: 1;
		grid-row: 2 / 4;
		align-self: start;
	}

	.services-menu--hybrid .smg__pillar .smg__label {
		grid-column: 2;
		grid-row: 2;
		margin: 0;
		padding: 10px 0 0 20px;
		border-top: 0;
		border-left: 1px solid #e3e7ee;
	}

	.services-menu--hybrid .smg__pillar .smg__chips {
		grid-column: 2;
		grid-row: 3;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		margin: 0;
		padding: 10px 0 4px 20px;
		border-left: 1px solid #e3e7ee;
	}

	.services-menu--hybrid .smg__pillar .smg__chip {
		padding: 7px 12px 7px 9px;
	}
}

@media (min-width: 1025px) and (max-width: 1200px) {
	.services-menu--hybrid .services-menu__inner {
		grid-template-columns: 250px 540px;
	}

	.services-menu--hybrid .services-menu__panel .smg__pillar {
		grid-template-columns: minmax(0, 1fr) 176px;
		column-gap: 20px;
	}
}

/* Services menu: child pages under a category item (header structure
   sheet), indented on a thin guide line, smaller and lighter. */
:is(.services-menu--grid, .services-menu--hybrid) .smg__sublinks {
	margin: 0 0 4px 4px;
	padding: 0 0 0 12px;
	border-left: 1px solid #e3e7ee;
	list-style: none;
}

:is(.services-menu--grid, .services-menu--hybrid) .smg__links .smg__sublinks a {
	padding: 3px 0;
	font-size: 13px;
	font-weight: 500;
	color: #5b6678;
}

@media (min-width: 1025px) {
	.services-menu--hybrid .smg__pillar .smg__links .smg__sublinks a {
		margin-left: -8px;
		padding: 5px 8px;
		font-size: 13px;
		font-weight: 450;
		color: #5b6678;
	}
}

/* Simple nav dropdowns (Industries, Hire a Team, Our Work, Insights): an
   arrow slides in on hover and the label nudges forward, matching the
   Services menu. */
.site-nav__simple-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.site-nav__simple-menu a::after {
	content: '\2192';
	flex: none;
	color: var(--color-orange);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.site-nav__simple-menu a:hover::after,
.site-nav__simple-menu a:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.site-nav__simple-menu a::after {
		transition: none;
	}
}

/* Hybrid services menu: the category title carries its own arrow (no
   "Explore" text); on hover the arrow slides forward. */
@media (min-width: 1025px) {
	.services-menu--hybrid .smg__pillar .smg__title {
		justify-content: flex-start;
		gap: 10px;
	}

	.services-menu--hybrid .smg__pillar .smg__title::after {
		content: '\2192';
		font-size: 18px;
		font-weight: 600;
		line-height: 1;
		color: #c2410c;
		transition: transform 0.22s cubic-bezier(0.2, 0.75, 0.25, 1);
	}

	.services-menu--hybrid .smg__pillar .smg__title:hover::after,
	.services-menu--hybrid .smg__pillar .smg__title:focus-visible::after {
		color: #c2410c;
		transform: translateX(6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.services-menu--hybrid .smg__pillar .smg__title::after {
		transition: none;
	}
}

/* Themed option list for the enquiry form dropdowns (zoho-lead-form.js). */
.edge-select-list {
	position: fixed;
	z-index: 9999;
	max-height: 280px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	border: 1px solid #e3e7ee;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 18px 40px -16px rgba(12, 22, 39, 0.35);
	font-family: 'DM Sans', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.35;
	color: #1d2b3e;
}

.edge-select-list li {
	padding: 10px 12px;
	border-radius: 6px;
	cursor: pointer;
}

.edge-select-list li.is-disabled {
	color: #8a94a3;
	cursor: default;
}

.edge-select-list li.is-selected {
	color: #ff5900;
	font-weight: 600;
}

.edge-select-list li.is-active {
	background: #ff5900;
	color: #fff;
}

/* Header office picker (site-header.php + main.js). */
.site-header__office{position:relative}
.site-header__location{cursor:pointer}
.site-header__location[aria-expanded="true"] .site-nav__chevron{transform:rotate(180deg)}
.site-header__location .site-nav__chevron{transition:transform .2s ease}
.site-header__office-list{position:absolute;top:calc(100% + 14px);left:-14px;z-index:1000;min-width:240px;margin:0;padding:8px;list-style:none;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#0f1b2e;box-shadow:0 22px 44px -18px rgba(0,0,0,.6)}
.site-header__office-list[hidden]{display:none}
.site-header__office-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:#fff;font-family:'DM Sans',Arial,sans-serif;cursor:pointer;outline:none;transition:background .15s ease}
.site-header__office-list li img{flex:none;border-radius:2px}
.site-header__office-list li span{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.site-header__office-list li strong{font-size:15px;font-weight:500}
.site-header__office-list li small{font-size:12.5px;color:#a7b1c2}
.site-header__office-list li:hover,.site-header__office-list li:focus-visible{background:rgba(255,255,255,.07)}
.site-header__office-list li[aria-selected="true"] strong{color:var(--color-orange,#ff5900)}
.site-header__office-list li[aria-selected="true"]::after{content:'';margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--color-orange,#ff5900)}

/* Mobile menu: the simple dropdowns (Industries, Hire a Team, Our Work,
   Insights) open in place inside the navy panel, like Services, instead of
   as a floating white card that the panel cut off. .site-header outranks
   the page "a { color: inherit }" resets. */
@media (max-width: 1024px) {
	.site-header .site-nav__simple-menu {
		position: static;
		display: none;
		min-width: 0;
		margin: 10px 0 2px;
		padding: 0 0 0 14px;
		background: none;
		border-left: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.site-header .site-nav__item--simple.is-open .site-nav__simple-menu {
		display: block;
	}

	.site-header .site-nav__simple-menu a {
		padding: 8px 0;
		border-radius: 0;
		font-size: 15px;
		font-weight: 500;
		color: #fff;
		white-space: normal;
	}

	.site-header .site-nav__simple-menu a:hover,
	.site-header .site-nav__simple-menu a:focus-visible {
		background: none;
		color: #ff8a3d;
	}
}

/* "Upload a file" on the enquiry forms (Zoho theFile, as on the live form). */
form .form-file {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
}

form .form-file__label {
	font-size: 13px;
	opacity: 0.8;
}

form .form-file input[type="file"] {
	display: block;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	padding: 10px 12px !important;
	border: 1px dashed #c9ced6 !important;
	border-radius: 8px;
	background: #fff !important;
	color: #626c7c;
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
}

form .form-file input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	border: 0;
	border-radius: 6px;
	background: #0c1627;
	color: #fff;
	font: 600 13px/1 'DM Sans', Arial, sans-serif;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

form .form-file input[type="file"]:hover::file-selector-button,
form .form-file input[type="file"]:focus-visible::file-selector-button {
	background: #ff5900;
}

form .form-file__note {
	font-size: 12px;
	opacity: 0.7;
}