/*
Theme Name: MGTech
Theme URI: https://yourwebsite.com
Author: MR.SARKAR.WEBDEV
Author URI: https://yourwebsite.com
Description: Custom WordPress Theme For Vetri Stack
Version: 1.0
Text Domain: mgtech
*/
/* ── TOKENS ────────────────────────────────────────────── */
:root {

	/* Brand Colors */
	--c-primary: #13a490;
	--c-secondary: #022d52;
	--c-lime: #022d52;
	/* Backward compatibility */

	/* Neutral Palette */
	--c-dark: #111111;
	--c-dark-soft: #1a1a1a;
	--c-white: #ffffff;
	--c-offwhite: #f7f9f6;
	--c-light: #fafafa;

	/* Text Colors */
	--c-text: #111111;
	--c-text-light: #6b7280;
	--c-text-muted: #9ca3af;

	/* Borders & Effects */
	--c-border: rgba(17, 17, 17, .08);
	--c-border-dark: rgba(255, 255, 255, .08);
	--c-glow: rgba(19, 164, 144, .18);
	--c-shadow: rgba(17, 17, 17, .08);

	/* Typography */
	--f-primary: 'Plus Jakarta Sans', sans-serif;
	--f-display: 'Plus Jakarta Sans', sans-serif;
	--f-body: 'Plus Jakarta Sans', sans-serif;

	/* Border Radius */
	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-xl: 32px;

	/* Container */
	--container: 1320px;

	/* Transitions */
	--transition: .4s cubic-bezier(.4, 0, .2, 1);

	/* Shadows */
	--shadow-sm: 0 10px 25px rgba(17, 17, 17, .04);

	--shadow-md: 0 20px 50px rgba(17, 17, 17, .08);

	--shadow-lg: 0 30px 80px rgba(17, 17, 17, .12);

}

/* ── RESET / BASE ───────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--f-body);
	color: var(--c-text);
	background: var(--c-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--f-display);
	color: var(--c-dark);
	margin-bottom: 0;
}

h1 {
	font-size: clamp(3rem, 6vw, 5.5rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.05em;
}

h2 {
	font-size: clamp(2.2rem, 4vw, 3.8rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.04em;
}

h3 {
	font-weight: 700;
	letter-spacing: -0.03em;
}

p {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--c-text-light);
}

a {
	text-decoration: none;
	color: inherit;
}
img {
    max-width: 100%;
    display: block;
    border-radius: 15px;
    margin-bottom: 70px;
}

.container {
	max-width: 1320px;
}

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-track {
	background: var(--c-dark);
}

::-webkit-scrollbar-thumb {
	background: var(--c-primary);
	border-radius: 99px;
}


/* ==========================
   GLOBAL UTILITIES
========================== */

.careers-hero-image-wrap > img {
    border-radius: 2rem;
}


.text-gradient {
	background: linear-gradient(135deg,
			var(--c-primary),
			var(--c-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.glass-card {
	background: rgba(255, 255, 255, .8);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, .4);
}

.dark-surface {
	background: #111;
	color: #fff;
}

.light-surface {
	background: #fff;
}

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

/* ── NAV ────────────────────────────────────────────────── */
#navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	padding: 20px 0;
	transition: var(--transition);
}

#navbar.scrolled {
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.nav-logo {
	display: flex;
	align-items: center;
	gap: 0px;
}

.nav-logo img {
    width: 5rem;
    height: auto;
    margin: 0;
    padding: 0;
    object-fit: contain;
    border-radius: 0;
}

.nav-logo span {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--c-primary);
	letter-spacing: -.01em;
}

.nav-logo span em {
	font-style: normal;
	color: var(--c-lime);
}

.navbar-links {
	display: flex;
	align-items: center;
	gap: 36px;
	list-style: none;
}

.navbar-links a {
	color: var(--c-light);
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: .02em;
	transition: color var(--transition);
}

.navbar-links a:hover {
	color: var(--c-white);
}

.scrolled .navbar-links a {
	color: var(--c-dark);
}

.btn-nav {
	background: var(--c-primary);
	color: var(--c-white) !important;
	padding: 9px 22px;
	border-radius: 99px;
	font-weight: 600 !important;
	font-size: .85rem !important;
	transition: background var(--transition), transform var(--transition) !important;
}

.btn-nav:hover {
	background: var(--c-lime) !important;
	color: var(--c-white) !important;
	transform: translateY(-1px);
}

/* MOBILE NAV TOGGLE */
.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 4px;
}

.nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--c-white);
	border-radius: 2px;
	transition: var(--transition);
}

.mobile-menu {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(17, 17, 17, .97);
	backdrop-filter: blur(24px);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 36px;
}

.mobile-menu.open {
	display: flex;
}

.mobile-menu a {
	color: var(--c-white);
	font-family: var(--f-display);
	font-size: 2rem;
	font-weight: 700;
	transition: color var(--transition);
}

.mobile-menu a:hover {
	color: var(--c-lime);
}

.mobile-close {
	position: absolute;
	top: 28px;
	right: 28px;
	background: none;
	border: none;
	color: var(--c-white);
	font-size: 1.6rem;
	cursor: pointer;
}

/* ── HERO ───────────────────────────────────────────────── */
.hero {
	min-height: 100vh;
	background: var(--c-dark);
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Animated mesh canvas */
#hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: .55;
}

/* Diagonal accent */
.hero::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 120px;
	background: var(--c-white);
	clip-path: polygon(0 60%, 100% 0%, 100% 100%, 0% 100%);
}

.hero-content {
	position: relative;
	z-index: 2;
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(2, 45, 82, .12);
	border: 1px solid rgba(2, 45, 82, .25);
	color: var(--c-lime);
	padding: 6px 14px;
	border-radius: 99px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 28px;
}

.hero-eyebrow i {
	font-size: .7rem;
}

.hero h1 {
	font-size: clamp(2.6rem, 6vw, 5rem);
	font-weight: 800;
	color: var(--c-white);
	line-height: 1.06;
	letter-spacing: -.03em;
	margin-bottom: 24px;
}

.hero h1 .accent {
	color: var(--c-lime);
}

.hero h1 .stroke-text {
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, .4);
	color: transparent;
}

.hero-desc {
	font-size: 1.05rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, .6);
	max-width: 480px;
	margin-bottom: 40px;
}

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

.btn-primary-vs {
	background: var(--c-primary);
	color: var(--c-white);
	padding: 14px 32px;
	border-radius: 99px;
	font-weight: 600;
	font-size: .95rem;
	border: none;
	cursor: pointer;
	transition: var(--transition);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-primary-vs:hover {
	background: var(--c-lime);
	color: var(--c-white);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(2, 45, 82, .35);
}

.btn-primary-vs i {
	transition: transform var(--transition);
}

.btn-primary-vs:hover i {
	transform: translateX(3px);
}

.btn-ghost-vs {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .2);
	color: rgba(255, 255, 255, .8);
	padding: 14px 28px;
	border-radius: 99px;
	font-weight: 500;
	font-size: .95rem;
	cursor: pointer;
	transition: var(--transition);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-ghost-vs:hover {
	border-color: var(--c-primary);
	color: var(--c-white);
	background: rgba(19, 164, 144, .12);
}

.hero-stats {
	display: flex;
	gap: 40px;
	margin-top: 60px;
	flex-wrap: wrap;
}

.hero-stat span {
	display: block;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 2.2rem;
	color: var(--c-white);
	line-height: 1;
}

.hero-stat span em {
	color: var(--c-lime);
	font-style: normal;
}

.hero-stat p {
	font-size: .8rem;
	color: rgba(255, 255, 255, .45);
	margin-top: 4px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Hero right side — floating cards */
.hero-visual {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.floating-card {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
	backdrop-filter: blur(16px);
	border-radius: var(--radius-md);
	padding: 20px 24px;
	color: var(--c-white);
}

.fc-main {
	width: min(100%, 340px);
	margin-left: auto;
}

.fc-tag {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-lime);
	margin-bottom: 12px;
}

.fc-title {
	font-family: var(--f-display);
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.fc-body {
	font-size: .83rem;
	color: rgba(255, 255, 255, .55);
	line-height: 1.6;
}

.fc-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
}

.fc-pill {
	background: rgba(19, 164, 144, .2);
	border: 1px solid var(--c-border);
	color: var(--c-primary);
	border-radius: 99px;
	font-size: .72rem;
	font-weight: 600;
	padding: 4px 10px;
}

.fc-mini {
	position: absolute;
	background: rgba(17, 17, 17, .85);
	border: 1px solid rgba(255, 255, 255, .1);
	backdrop-filter: blur(16px);
	border-radius: var(--radius-sm);
	padding: 10px 14px;
	font-size: .78rem;
	color: var(--c-white);
	white-space: nowrap;
	z-index: 9;
}

.fc-mini i {
	color: var(--c-lime);
	margin-right: 6px;
}

.fc-mini-1 {
	top: -3rem;
	left: -40px;
	animation: floatY 3.5s ease-in-out infinite;
}

.fc-mini-2 {
	bottom: -3rem;
	left: -50px;
	animation: floatY 4s ease-in-out infinite 1s;
}

.fc-mini-3 {
	top: 50%;
	right: -50%;
	transform: translate(-50%, -50%);
	animation: floatY 3.2s ease-in-out infinite .5s;
}

@keyframes floatY {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

.fc-mini-1 {
	animation: floatA 3.5s ease-in-out infinite;
}

.fc-mini-2 {
	animation: floatB 4s ease-in-out infinite 1s;
}

.fc-mini-3 {
	animation: floatC 3.2s ease-in-out infinite .5s;
}

@keyframes floatA {

	0%,
	100% {
		transform: translateY(0)
	}

	50% {
		transform: translateY(-8px)
	}
}

@keyframes floatB {

	0%,
	100% {
		transform: translateY(0)
	}

	50% {
		transform: translateY(-6px)
	}
}

@keyframes floatC {

	0%,
	100% {
		transform: translateY(-50%)
	}

	50% {
		transform: translateY(calc(-50% - 8px))
	}
}

/* ── SECTION COMMONS ────────────────────────────────────── */
.section {
	padding: 140px 0;
}

.section-sm {
	padding: 100px 0;
}

.tag-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-primary);
	margin-bottom: 14px;
}

.tag-label::before {
	content: '';
	display: block;
	width: 20px;
	height: 2px;
	background: var(--c-lime);
	border-radius: 2px;
}

.section-title {
	font-size: clamp(2.5rem, 5vw, 4.25rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.05em;
}

.section-title .accent {
	color: var(--c-primary);
}

.section-sub {
	font-size: 1rem;
	color: var(--c-muted);
	line-height: 1.75;
	max-width: 520px;
	margin-top: 12px;
}

/* ── LOGOS MARQUEE ──────────────────────────────────────── */
.marquee-section {
	background: var(--c-offwhite);
	padding: 40px 0;
	overflow: hidden;
}

.marquee-label {
	text-align: center;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: 24px;
}

.marquee-track {
	display: flex;
	gap: 56px;
	align-items: center;
	animation: marqueeRun 22s linear infinite;
	width: max-content;
}

.marquee-track:hover {
	animation-play-state: paused;
}

@keyframes marqueeRun {
	to {
		transform: translateX(-50%);
	}
}

.marquee-item {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1.1rem;
	color: #bbb;
	letter-spacing: -.01em;
	white-space: nowrap;
	transition: color var(--transition);
}

.marquee-item:hover {
	color: var(--c-primary);
}

/* ── ABOUT ──────────────────────────────────────────────── */
.about-section {
	background: var(--c-white);
}

.about-img-wrap {
	position: relative;
}

.about-img-main {
	border-radius: var(--radius-lg);
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
	background: linear-gradient(135deg, #13a490 0%, #022d52 100%);
	display: flex;
	align-items: flex-end;
	padding: 28px;
	overflow: hidden;
}

.about-img-overlay {
	background: rgba(17, 17, 17, .55);
	border-radius: var(--radius-md);
	padding: 18px 22px;
	width: 100%;
	backdrop-filter: blur(8px);
}

.about-img-overlay p {
	color: rgba(255, 255, 255, .7);
	font-size: .82rem;
	margin-bottom: 4px;
}

.about-img-overlay strong {
	color: var(--c-white);
	font-family: var(--f-display);
	font-size: 1.3rem;
}

.about-badge {
	position: absolute;
	top: 24px;
	right: -16px;
	background: var(--c-lime);
	color: var(--c-white);
	border-radius: var(--radius-md);
	padding: 14px 18px;
	text-align: center;
	box-shadow: 0 8px 32px rgba(2, 45, 82, .3);
}

.about-badge strong {
	font-family: var(--f-display);
	font-size: 2rem;
	font-weight: 800;
	display: block;
	line-height: 1;
}

.about-badge span {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.about-points {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.about-point {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.about-point-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: rgba(19, 164, 144, .1);
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-primary);
	font-size: .95rem;
}

.about-point h4 {
	font-size: .95rem;
	font-weight: 700;
	margin-bottom: 2px;
}

.about-point p {
	font-size: .84rem;
	color: var(--c-muted);
	line-height: 1.6;
}

/* ── SERVICES ───────────────────────────────────────────── */
.services-section {
	background: #f8faf9;
}

.services-section .section-title {
	color: var(--c-dark);
}

.services-section .section-sub {
	color: var(--c-text-light);
}

.services-section .tag-label {
	color: var(--c-lime);
}

.service-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .06);
	box-shadow: var(--shadow-sm);
	padding: 32px 28px;
	transition: var(--transition);
	cursor: default;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.service-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--c-primary) 0%, transparent 100%);
	opacity: 0;
	transition: opacity var(--transition);
	border-radius: inherit;
}

.service-card:hover {
	border-color: rgba(19, 164, 144, .35);
	transform: translateY(-4px);
}

.service-card:hover::before {
	opacity: .06;
}

.service-card:hover .svc-icon-wrap {
	background: var(--c-primary);
	color: var(--c-white);
}

.svc-icon-wrap {
	width: 52px;
	height: 52px;
	border-radius: var(--radius-sm);
	background: rgba(19, 164, 144, .15);
	color: var(--c-primary);
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	transition: var(--transition);
}

.svc-title {
	font-family: var(--f-display);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--c-dark);
	margin-bottom: 10px;
}

.svc-desc {
	font-size: .85rem;
	color: var(--c-text-light);
	line-height: 1.7;
	margin-bottom: 18px;
}

.svc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.svc-tag {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: rgba(19, 164, 144, .9);
	background: rgba(19, 164, 144, .1);
	padding: 3px 9px;
	border-radius: 99px;
}

/* ==================================================
   WHY CHOOSE VETRISTACK
================================================== */

.why-choose-section {
	position: relative;
	background: #ffffff;
	overflow: hidden;
}

.why-card {
	height: 100%;
	padding: 40px;
	background: #fff;
	border-radius: 28px;
	transition: all .35s ease;
	box-shadow: var(--shadow-sm);
	border: 1px solid rgba(0, 0, 0, .05);
	position: relative;
	overflow: hidden;
}

.why-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg,
			var(--c-primary),
			var(--c-lime));
	transform: scaleX(0);
	transform-origin: left;
	transition: .4s ease;
}

.why-card:hover::before {
	transform: scaleX(1);
}

.why-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 25px 70px rgba(0, 0, 0, .08);
}

.why-icon {
	width: 70px;
	height: 70px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(19, 164, 144, .08);
	margin-bottom: 24px;
}

.why-icon i {
	font-size: 1.5rem;
	color: var(--c-primary);
}

.why-card h3 {
	font-size: 1.35rem;
	font-weight: 700;
	margin-bottom: 15px;
	color: var(--c-dark);
}

.why-card p {
	margin: 0;
	color: #6f6f6f;
	line-height: 1.8;
	font-size: .95rem;
}

/* ── HOW WE WORK ────────────────────────────────────────── */
.process-section {
	background: var(--c-offwhite);
	overflow-x: hidden;
}

.process-step {
	position: relative;
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding: 28px 0;
}



.process-step:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 23px;
	top: 56px;
	bottom: 0;
	width: 1px;
	background: linear-gradient(180deg, var(--c-primary), transparent);
}

.step-num {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--c-primary);
	color: var(--c-white);
	font-family: var(--f-display);
	font-weight: 800;
	font-size: .95rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 6px rgba(19, 164, 144, .12);
}

.step-body h4 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 6px;
}

.step-body p {
	font-size: .85rem;
	color: var(--c-muted);
	line-height: 1.65;
}

.process-visual {
	background: var(--c-dark);
	border-radius: var(--radius-lg);
	padding: 40px 32px;
	height: 100%;
}

.process-visual-title {
	color: var(--c-white);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1.2rem;
	margin-bottom: 24px;
}

.kpi-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.kpi-card {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: var(--radius-sm);
	padding: 18px;
}

.kpi-val {
	font-family: var(--f-display);
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--c-white);
	line-height: 1;
}

.kpi-val .k-accent {
	color: var(--c-lime);
}

.kpi-lbl {
	font-size: .72rem;
	color: rgba(255, 255, 255, .4);
	margin-top: 4px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ── INDUSTRIES ─────────────────────────────────────────── */
.industries-section {
	background: var(--c-white);
}

.ind-card {
	padding: 28px 24px;
	border-radius: var(--radius-md);
	border: 1px solid rgba(0, 0, 0, .06);
	transition: var(--transition);
	cursor: default;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	height: 100%;
}

.ind-card:hover {
	border-color: var(--c-primary);
	box-shadow: 0 8px 32px var(--c-glow);
	transform: translateY(-3px);
}

.ind-icon {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	background: rgba(19, 164, 144, .08);
	color: var(--c-primary);
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
}

.ind-card:hover .ind-icon {
	background: var(--c-primary);
	color: var(--c-white);
}

.ind-card h4 {
	font-size: .95rem;
	font-weight: 700;
	margin-bottom: 4px;
}

.ind-card p {
	font-size: .82rem;
	color: var(--c-muted);
	line-height: 1.6;
}

/* ── TESTIMONIALS ───────────────────────────────────────── */
.testi-section {
	background: var(--c-offwhite);
}

.testi-card {
	background: var(--c-white);
	border-radius: var(--radius-md);
	padding: 32px 28px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
	height: 100%;
	transition: transform var(--transition), box-shadow var(--transition);
}

.testi-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .1);
}

.testi-stars {
	color: var(--c-lime);
	margin-bottom: 16px;
	font-size: .9rem;
}

.testi-quote {
	font-size: .9rem;
	line-height: 1.75;
	color: #444;
	margin-bottom: 20px;
	font-style: italic;
}

.testi-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--c-primary), var(--c-lime));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-white);
	font-family: var(--f-display);
	font-weight: 800;
	font-size: .9rem;
}

.testi-name {
	font-weight: 700;
	font-size: .88rem;
}

.testi-role {
	font-size: .78rem;
	color: var(--c-muted);
}

/* ── CTA BAND ───────────────────────────────────────────── */
.cta-band {
	background: var(--c-primary);
	padding: 80px 0;
	position: relative;
	overflow: hidden;
}

.cta-band::before {
	content: '';
	position: absolute;
	right: -100px;
	top: -100px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: rgba(2, 45, 82, .12);
}

.cta-band::after {
	content: '';
	position: absolute;
	left: -60px;
	bottom: -80px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .08);
}

.cta-band .container {
	position: relative;
	z-index: 1;
}

.cta-band h2 {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 800;
	color: var(--c-white);
	letter-spacing: -.03em;
	line-height: 1.1;
	margin-bottom: 14px;
}

.cta-band p {
	color: rgba(255, 255, 255, .75);
	font-size: 1rem;
	max-width: 420px;
}

.btn-cta-white {
	background: var(--c-white);
	color: var(--c-primary);
	padding: 15px 36px;
	border-radius: 99px;
	font-weight: 700;
	font-size: .95rem;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: var(--transition);
	border: none;
	cursor: pointer;
}

.btn-cta-white:hover {
	background: var(--c-dark);
	color: var(--c-white);
	transform: translateY(-2px);
	box-shadow: 0 10px 32px rgba(0, 0, 0, .2);
}

.btn-cta-outline {
	background: transparent;
	color: var(--c-white);
	border: 1.5px solid rgba(255, 255, 255, .4);
	padding: 14px 28px;
	border-radius: 99px;
	font-weight: 600;
	font-size: .95rem;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: var(--transition);
	cursor: pointer;
}

.btn-cta-outline:hover {
	border-color: var(--c-white);
	background: rgba(255, 255, 255, .08);
}

/* ── FOOTER ─────────────────────────────────────────────── */
footer {
	background: var(--c-dark);
	padding: 72px 0 32px;
	border-top: 1px solid rgba(255, 255, 255, .05);
}

.footer-brand img {
	width: 40px;
	margin-bottom: 12px;
}

.footer-brand h3 {
	font-family: var(--f-display);
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--c-primary);
	margin-bottom: 10px;
}

.footer-brand h3 em {
	color: var(--c-lime);
	font-style: normal;
}

.footer-brand p {
	font-size: .84rem;
	color: rgba(255, 255, 255, .4);
	line-height: 1.65;
	max-width: 260px;
}

.footer-socials {
	display: flex;
	gap: 12px;
	margin-top: 22px;
}

.footer-social {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: rgba(255, 255, 255, .5);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .9rem;
	transition: var(--transition);
}

.footer-social:hover {
	background: var(--c-primary);
	color: var(--c-white);
}

.footer-col h4 {
	font-family: var(--f-display);
	font-size: .85rem;
	font-weight: 700;
	color: var(--c-white);
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.footer-links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-links a {
	font-size: .84rem;
	color: rgba(255, 255, 255, .4);
	transition: color var(--transition);
}

.footer-links a:hover {
	color: var(--c-white);
}

.footer-bottom {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .06);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.footer-bottom p {
	font-size: .78rem;
	color: rgba(255, 255, 255, .28);
}

.footer-bottom a {
	color: rgba(255, 255, 255, .28);
	transition: color var(--transition);
}

.footer-bottom a:hover {
	color: var(--c-lime);
}

/* ── BACK TO TOP ────────────────────────────────────────── */
#back-top {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 900;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-primary);
	color: var(--c-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .9rem;
	opacity: 0;
	pointer-events: none;
	transition: var(--transition);
	box-shadow: 0 4px 16px rgba(19, 164, 144, .4);
}

#back-top.visible {
	opacity: 1;
	pointer-events: auto;
}

#back-top:hover {
	background: var(--c-lime);
	color: var(--c-white);
	transform: translateY(-2px);
}

/* ── MISC UTILITIES ─────────────────────────────────────── */
.grad-text {
	background: linear-gradient(90deg, var(--c-primary), var(--c-lime));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.divider-line {
	width: 48px;
	height: 3px;
	background: var(--c-lime);
	border-radius: 99px;
	margin-bottom: 20px;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:991px) {
	.hero-visual {
		display: none;
	}

	.hero h1 {
		font-size: clamp(2.2rem, 7vw, 3.2rem);
	}

	.about-badge {
		right: 10px;
	}
}

@media(max-width:767px) {
	.navbar-links {
		display: none;
	}

	.nav-toggle {
		display: flex;
	}

	.hero::after {
		height: 60px;
	}

	.hero-stats {
		gap: 24px;
	}

	.kpi-grid {
		grid-template-columns: 1fr;
	}

	.cta-band .d-flex {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-bottom {
		flex-direction: column;
		text-align: center;
	}
}

@media(prefers-reduced-motion:reduce) {

	*,
	::before,
	::after {
		animation: none !important;
		transition: none !important;
	}
}


 /* =========================================================
    POLICY PAGE
    VetriStack / MGTech Theme
    ========================================================= */

.policy-page {
    position: relative;
    background: var(--c-white);
    overflow: hidden;
}


/* =========================================================
   POLICY HERO
   ========================================================= */

.policy-hero {
    position: relative;
    min-height: 430px;
    padding: 170px 0 110px;
    background: var(--c-dark);
    display: flex;
    align-items: center;
    overflow: hidden;
}


/* Decorative background glow */

.policy-hero::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    top: -260px;
    right: -120px;
    border-radius: 50%;
    background: rgba(19, 164, 144, .12);
    filter: blur(10px);
}


/* Secondary decorative glow */

.policy-hero::after {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    left: -180px;
    bottom: -220px;
    border-radius: 50%;
    background: rgba(2, 45, 82, .08);
}


/* Keep content above decorations */

.policy-hero .container {
    position: relative;
    z-index: 2;
}


.policy-hero-content {
    max-width: 850px;
    margin: 0 auto;
}


/* Small label */

.policy-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 15px;

    background: rgba(2, 45, 82, .10);
    border: 1px solid rgba(2, 45, 82, .25);

    border-radius: 99px;

    color: var(--c-lime);

    font-size: .72rem;
    font-weight: 600;
    line-height: 1;

    letter-spacing: .1em;
    text-transform: uppercase;

    margin-bottom: 24px;
}


/* Small decorative dot */

.policy-eyebrow::before {
    content: '';

    width: 6px;
    height: 6px;

    background: var(--c-lime);

    border-radius: 50%;
}


/* Page title */

.policy-title {
    color: var(--c-white);

    font-family: var(--f-display);

    font-size: clamp(2.6rem, 6vw, 4.8rem);
    font-weight: 800;

    line-height: 1.05;
    letter-spacing: -.05em;

    margin-bottom: 22px;
}


/* Description */

.policy-hero-description {
    max-width: 680px;
    margin: 0 auto;

    color: rgba(255, 255, 255, .58);

    font-size: 1rem;
    line-height: 1.8;
}


/* =========================================================
   MAIN POLICY CONTENT
   ========================================================= */

.policy-content-section {
    padding: 110px 0 120px;
    background: var(--c-white);
}


.policy-content {
    width: 100%;
    color: var(--c-text);
}


/* WordPress content typography */

.policy-content h2 {
    position: relative;

    margin-top: 58px;
    margin-bottom: 20px;

    padding-left: 20px;

    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;

    line-height: 1.2;
    letter-spacing: -.035em;

    color: var(--c-dark);
}


/* First heading */

.policy-content h2:first-child {
    margin-top: 0;
}


/* Heading accent */

.policy-content h2::before {
    content: '';

    position: absolute;
    left: 0;
    top: .2em;

    width: 4px;
    height: calc(100% - .4em);

    background: linear-gradient(
        180deg,
        var(--c-primary),
        var(--c-lime)
    );

    border-radius: 99px;
}


.policy-content h3 {
    margin-top: 38px;
    margin-bottom: 14px;

    font-size: 1.25rem;
    font-weight: 700;

    line-height: 1.35;
    letter-spacing: -.025em;

    color: var(--c-dark);
}


.policy-content h4 {
    margin-top: 28px;
    margin-bottom: 10px;

    font-size: 1.05rem;
    font-weight: 700;

    color: var(--c-dark);
}


/* Paragraphs */

.policy-content p {
    margin-bottom: 18px;

    font-size: .95rem;
    line-height: 1.85;

    color: var(--c-text-light);
}


/* Strong text */

.policy-content strong {
    color: var(--c-dark);
    font-weight: 700;
}


/* Links */

.policy-content a {
    color: var(--c-primary);
    font-weight: 600;

    text-decoration: underline;
    text-decoration-color: rgba(19, 164, 144, .25);
    text-underline-offset: 3px;

    transition: var(--transition);
}


.policy-content a:hover {
    color: var(--c-lime);
    text-decoration-color: var(--c-lime);
}


/* =========================================================
   LISTS
   ========================================================= */

.policy-content ul,
.policy-content ol {
    margin: 20px 0 28px;
    padding-left: 22px;
}


.policy-content ul {
    list-style: none;
    padding-left: 0;
}


.policy-content ul li {
    position: relative;

    padding-left: 26px;
    margin-bottom: 12px;

    color: var(--c-text-light);

    font-size: .94rem;
    line-height: 1.75;
}


.policy-content ul li::before {
    content: '';

    position: absolute;
    left: 2px;
    top: .7em;

    width: 7px;
    height: 7px;

    background: var(--c-primary);

    border-radius: 50%;
}


.policy-content ol {
    padding-left: 25px;
}


.policy-content ol li {
    padding-left: 7px;
    margin-bottom: 12px;

    color: var(--c-text-light);

    font-size: .94rem;
    line-height: 1.75;
}


.policy-content ol li::marker {
    color: var(--c-primary);
    font-weight: 700;
}



/* =========================================================
   BLOCKQUOTES
   ========================================================= */

.policy-content blockquote {
    position: relative;

    margin: 32px 0;

    padding: 26px 30px;

    background: var(--c-offwhite);

    border-left: 3px solid var(--c-primary);
    border-radius: var(--radius-sm);

    color: var(--c-text-light);
}


.policy-content blockquote p {
    margin: 0;
}


/* =========================================================
   TABLES
   ========================================================= */

.policy-content table {
    width: 100%;

    margin: 32px 0;

    border-collapse: separate;
    border-spacing: 0;

    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);

    overflow: hidden;

    box-shadow: var(--shadow-sm);
}


.policy-content th {
    padding: 15px 18px;

    background: var(--c-dark);

    color: var(--c-white);

    font-size: .82rem;
    font-weight: 700;

    text-align: left;
}


.policy-content td {
    padding: 15px 18px;

    border-top: 1px solid var(--c-border);

    color: var(--c-text-light);

    font-size: .84rem;
    line-height: 1.6;

    vertical-align: top;
}


.policy-content tr:nth-child(even) td {
    background: var(--c-offwhite);
}


/* =========================================================
   HORIZONTAL RULE
   ========================================================= */

.policy-content hr {
    border: 0;

    height: 1px;

    margin: 45px 0;

    background: var(--c-border);
}


/* =========================================================
   IMAGES INSIDE POLICY CONTENT
   ========================================================= */

.policy-content img {
    width: auto;
    max-width: 100%;
    height: auto;

    margin: 28px auto;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);
}


/* WordPress captions */

.policy-content .wp-caption {
    max-width: 100%;
    margin: 30px auto;
}


.policy-content .wp-caption-text {
    margin-top: 8px;

    color: var(--c-text-muted);

    font-size: .78rem;
    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   RELATED POLICY NAVIGATION
   ========================================================= */

.policy-navigation {
    padding: 85px 0 100px;

    background: var(--c-offwhite);

    border-top: 1px solid rgba(17, 17, 17, .04);
}


.policy-navigation-inner {
    padding: 42px;

    background: var(--c-white);

    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.policy-navigation-title {
    margin-bottom: 28px;
}


.policy-navigation-title h2 {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 800;

    line-height: 1.15;
    letter-spacing: -.035em;

    color: var(--c-dark);
}


.policy-navigation-links {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;
}


/* Individual policy link */

.policy-navigation-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    min-height: 62px;

    padding: 16px 18px;

    background: var(--c-offwhite);

    border: 1px solid transparent;
    border-radius: var(--radius-sm);

    color: var(--c-dark);

    font-size: .85rem;
    font-weight: 600;

    transition: var(--transition);
}


.policy-navigation-link i {
    color: var(--c-primary);

    font-size: .8rem;

    transition: transform var(--transition);
}


.policy-navigation-link:hover {
    background: var(--c-white);

    border-color: rgba(19, 164, 144, .25);

    color: var(--c-primary);

    transform: translateY(-3px);

    box-shadow: var(--shadow-sm);
}


.policy-navigation-link:hover i {
    transform: translateX(4px);
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 991px) {

    .policy-hero {
        min-height: 390px;

        padding: 150px 0 90px;
    }


    .policy-content-section {
        padding: 85px 0 95px;
    }


    .policy-navigation {
        padding: 70px 0 80px;
    }


    .policy-navigation-links {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .policy-hero {
        min-height: 350px;

        padding: 130px 0 75px;
    }


    .policy-eyebrow {
        margin-bottom: 18px;

        font-size: .67rem;

        padding: 6px 12px;
    }


    .policy-title {
        font-size: clamp(2.2rem, 11vw, 3.2rem);

        letter-spacing: -.045em;

        margin-bottom: 18px;
    }


    .policy-hero-description {
        font-size: .88rem;

        line-height: 1.7;
    }


    .policy-content-section {
        padding: 65px 0 75px;
    }


    .policy-content h2 {
        margin-top: 42px;

        padding-left: 15px;

        font-size: 1.65rem;
    }


    .policy-content h3 {
        margin-top: 30px;

        font-size: 1.15rem;
    }


    .policy-content p,
    .policy-content ul li,
    .policy-content ol li {
        font-size: .88rem;

        line-height: 1.8;
    }


    .policy-content blockquote {
        padding: 20px 22px;

        margin: 25px 0;
    }


    /*
     * Prevent large policy tables from breaking
     * the mobile layout.
     */

    .policy-content table {
        display: block;

        overflow-x: auto;

        white-space: nowrap;
    }


    .policy-navigation {
        padding: 55px 0 65px;
    }


    .policy-navigation-inner {
        padding: 28px 22px;

        border-radius: var(--radius-md);
    }


    .policy-navigation-title {
        margin-bottom: 20px;
    }


    .policy-navigation-title h2 {
        font-size: 1.65rem;
    }


    .policy-navigation-link {
        min-height: 58px;

        padding: 14px 16px;

        font-size: .82rem;
    }

}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 480px) {

    .policy-hero {
        padding-top: 115px;
        padding-bottom: 65px;
    }


    .policy-content-section {
        padding-top: 55px;
        padding-bottom: 65px;
    }


    .policy-navigation-inner {
        padding: 24px 18px;
    }


    .policy-content ul li {
        padding-left: 22px;
    }


    .policy-content table {
        font-size: .78rem;
    }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .policy-navigation-link,
    .policy-navigation-link i,
    .policy-content a {
        transition: none;
    }

}




/* =========================================================
   SERVICES PAGE
  
   ========================================================= */

.services-page {
    position: relative;
    background: var(--c-white);
    color: var(--c-text);
    overflow: hidden;
}


/* =========================================================
   SERVICES HERO
   ========================================================= */

.services-hero {
    position: relative;
    min-height: 470px;

    padding: 170px 0 110px;

    background: var(--c-dark);

    display: flex;
    align-items: center;

    overflow: hidden;
}


/* Primary decorative glow */

.services-hero::before {
    content: '';

    position: absolute;

    width: 540px;
    height: 540px;

    top: -270px;
    right: -130px;

    border-radius: 50%;

    background: rgba(19, 164, 144, .12);

    filter: blur(10px);

    pointer-events: none;
}


/* Secondary decorative glow */

.services-hero::after {
    content: '';

    position: absolute;

    width: 380px;
    height: 380px;

    left: -190px;
    bottom: -230px;

    border-radius: 50%;

    background: rgba(2, 45, 82, .08);

    pointer-events: none;
}

.services-hero-image-wrap > img {
    border-radius: 2rem;
}

/* Keep hero content above decorations */

.services-hero .container {
    position: relative;
    z-index: 2;
}


.services-hero-content {
    max-width: 900px;

    margin: 0 auto;
}


/* =========================================================
   SERVICES EYEBROW
   ========================================================= */
.services-why-section {
    padding: 100px 0;
    background: #f7f7f5;
}

.services-why-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.services-why-left {
    max-width: 600px;
}

.services-why-eyebrow {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #777;
}

.services-why-left h2 {
    font-size: 58px;
    line-height: 1.05;
    margin: 20px 0 25px;
    color: #111;
}

.services-why-left h2 span {
    display: block;
    color: #777;
}

.services-why-left p {
    font-size: 17px;
    line-height: 1.7;
    color: #666;
}

.services-why-highlights {
    display: flex;
    gap: 35px;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid #ddd;
}

.services-why-highlight {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.services-why-highlight span {
    font-size: 12px;
    color: #999;
}

.services-why-highlight strong {
    font-size: 15px;
    color: #222;
}

.services-why-image {
    height: 580px;
    overflow: hidden;
}

.services-why-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Mobile */

@media (max-width: 768px) {

    .services-why-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .services-why-left h2 {
        font-size: 40px;
    }

    .services-why-image {
        height: 400px;
    }

    .services-why-highlights {
        flex-wrap: wrap;
    }

}

.services-eyebrow {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    padding: 7px 15px;

    background: rgba(2, 45, 82, .10);

    border: 1px solid rgba(2, 45, 82, .25);

    border-radius: 99px;

    color: var(--c-lime);

    font-size: .72rem;
    font-weight: 600;

    line-height: 1;

    letter-spacing: .1em;

    text-transform: uppercase;

    margin-bottom: 24px;
}


.services-eyebrow::before {
    content: '';

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    background: var(--c-lime);

    border-radius: 50%;
}


/* =========================================================
   SERVICES HERO TITLE
   ========================================================= */

.services-title {
    margin: 0 0 22px;

    color: var(--c-white);

    font-family: var(--f-display);

    font-size: clamp(2.6rem, 6vw, 4.8rem);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -.05em;
}


.services-title span {
    display: block;

    color: var(--c-lime);
}


/* =========================================================
   SERVICES HERO DESCRIPTION
   ========================================================= */

.services-hero-description {
    max-width: 700px;

    margin: 0 auto;

    color: rgba(255, 255, 255, .58);

    font-size: 1rem;

    line-height: 1.8;
}


/* =========================================================
   SERVICES INTRODUCTION
   ========================================================= */

.services-intro-section {
    padding: 105px 0 55px;

    background: var(--c-white);
}


.services-section-heading {
    max-width: 650px;
}


.services-section-eyebrow {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    color: var(--c-primary);

    font-size: .72rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing: .1em;

    text-transform: uppercase;

    margin-bottom: 18px;
}


.services-section-eyebrow::before {
    content: '';

    width: 25px;
    height: 2px;

    background: var(--c-primary);

    border-radius: 99px;
}


.services-section-heading h2,
.services-approach-content h2,
.services-cta h2 {
    margin: 0;

    color: var(--c-dark);

    font-family: var(--f-display);

    font-size: clamp(2rem, 4vw, 3.4rem);

    font-weight: 800;

    line-height: 1.12;

    letter-spacing: -.04em;
}


.services-section-heading h2 span,
.services-approach-content h2 span,
.services-cta h2 span {
    color: var(--c-primary);
}


.services-intro-text {
    max-width: 540px;
}


.services-intro-text p {
    margin: 0;

    color: var(--c-text-light);

    font-size: .95rem;

    line-height: 1.85;
}


/* =========================================================
   SERVICES GRID
   ========================================================= */

.services-list-section {
    padding: 40px 0 120px;

    background: var(--c-white);
}


.services-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid var(--c-border);

    border-left: 1px solid var(--c-border);

    border-radius: var(--radius-lg);

    overflow: hidden;

    box-shadow: var(--shadow-sm);
}


/* =========================================================
   SERVICE CARD
   ========================================================= */

.service-item {
    position: relative;

    min-height: 420px;

    padding: 34px;

    display: flex;

    flex-direction: column;

    background: var(--c-white);

    border-right: 1px solid var(--c-border);

    border-bottom: 1px solid var(--c-border);

    transition:
        var(--transition);
}


.service-item:hover {
    background: var(--c-offwhite);

    transform: translateY(-3px);

    z-index: 2;

    box-shadow: var(--shadow-md);
}


/* =========================================================
   SERVICE CARD TOP
   ========================================================= */

.service-item-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 62px;
}


.service-number {
    color: var(--c-text-muted);

    font-size: .72rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .12em;
}


/* =========================================================
   SERVICE ICON
   ========================================================= */

.service-icon {
    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(19, 164, 144, .06);

    border: 1px solid rgba(19, 164, 144, .20);

    border-radius: var(--radius-sm);

    color: var(--c-primary);

    font-size: 17px;

    transition: var(--transition);
}


.service-item:hover .service-icon {
    background: var(--c-primary);

    border-color: var(--c-primary);

    color: var(--c-white);

    transform: translateY(-2px);
}


/* =========================================================
   SERVICE CONTENT
   ========================================================= */

.service-item-content {
    flex: 1;
}


.service-item-content h3 {
    margin: 0 0 16px;

    color: var(--c-dark);

    font-family: var(--f-display);

    font-size: 1.45rem;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -.025em;
}


.service-item-content p {
    max-width: 370px;

    margin: 0;

    color: var(--c-text-light);

    font-size: .9rem;

    line-height: 1.8;
}


/* =========================================================
   SERVICE LINK
   ========================================================= */

.service-link {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    width: 100%;

    padding-top: 22px;

    margin-top: 30px;

    border-top: 1px solid var(--c-border);

    color: var(--c-dark);

    font-size: .72rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .09em;

    text-transform: uppercase;

    text-decoration: none;

    transition: var(--transition);
}


.service-link i {
    color: var(--c-primary);

    font-size: .75rem;

    transition: var(--transition);
}


.service-link:hover {
    color: var(--c-primary);
}


.service-link:hover i {
    transform: translateX(5px);

    color: var(--c-lime);
}


/* =========================================================
   SERVICES APPROACH SECTION
   ========================================================= */

.services-approach-section {
    padding: 0 0 120px;

    background: var(--c-white);
}


.services-approach {
    position: relative;

    padding: 85px 75px;

    background: var(--c-offwhite);

    border: 1px solid var(--c-border);

    border-radius: var(--radius-lg);

    overflow: hidden;
}


/* Decorative glow */

.services-approach::before {
    content: '';

    position: absolute;

    width: 300px;
    height: 300px;

    right: -150px;
    bottom: -170px;

    border-radius: 50%;

    background: rgba(19, 164, 144, .07);

    pointer-events: none;
}


.services-approach .row {
    position: relative;

    z-index: 2;
}


.services-approach-content {
    max-width: 600px;
}


.services-approach-content p {
    margin: 25px 0 0;

    color: var(--c-text-light);

    font-size: .92rem;

    line-height: 1.85;
}


.services-approach-content p + p {
    margin-top: 16px;
}


/* =========================================================
   APPROACH POINTS
   ========================================================= */

.approach-points {
    border-top: 1px solid var(--c-border);
}


.approach-point {
    display: grid;

    grid-template-columns: 45px 1fr;

    gap: 18px;

    padding: 22px 0;

    border-bottom: 1px solid var(--c-border);
}


.approach-point-number {
    padding-top: 4px;

    color: var(--c-primary);

    font-size: .7rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .1em;
}


.approach-point h4 {
    margin: 0 0 6px;

    color: var(--c-dark);

    font-size: 1rem;

    font-weight: 700;

    line-height: 1.3;
}


.approach-point p {
    margin: 0;

    color: var(--c-text-light);

    font-size: .82rem;

    line-height: 1.7;
}


/* =========================================================
   CTA SECTION
   ========================================================= */

.services-cta-section {
    padding: 0 0 110px;

    background: var(--c-white);
}


.services-cta {
    padding: 70px 75px;

    background: var(--c-dark);

    border-radius: var(--radius-lg);

    position: relative;

    overflow: hidden;
}


/* CTA glow */

.services-cta::before {
    content: '';

    position: absolute;

    width: 380px;
    height: 380px;

    top: -230px;
    right: -100px;

    border-radius: 50%;

    background: rgba(19, 164, 144, .15);

    filter: blur(8px);

    pointer-events: none;
}


.services-cta .row {
    position: relative;

    z-index: 2;
}


.services-cta .services-section-eyebrow {
    color: var(--c-lime);
}


.services-cta .services-section-eyebrow::before {
    background: var(--c-lime);
}


.services-cta h2 {
    color: var(--c-white);

    margin-bottom: 18px;
}


.services-cta h2 span {
    color: var(--c-lime);
}


.services-cta p {
    max-width: 600px;

    margin: 0;

    color: rgba(255, 255, 255, .58);

    font-size: .92rem;

    line-height: 1.8;
}


/* =========================================================
   CTA BUTTON
   ========================================================= */

.services-cta-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 16px 23px;

    background: var(--c-primary);

    border: 1px solid var(--c-primary);

    border-radius: var(--radius-sm);

    color: var(--c-white);

    font-size: .72rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .08em;

    text-transform: uppercase;

    text-decoration: none;

    transition: var(--transition);
}


.services-cta-button i {
    transition: var(--transition);
}


.services-cta-button:hover {
    background: var(--c-lime);

    border-color: var(--c-lime);

    color: var(--c-white);

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);
}


.services-cta-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   LARGE LAPTOP
   ========================================================= */

@media (max-width: 1199px) {

    .services-hero {
        min-height: 440px;

        padding: 155px 0 100px;
    }


    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }


    .service-item {
        min-height: 410px;

        padding: 30px;
    }


    .service-item-top {
        margin-bottom: 52px;
    }


    .services-approach {
        padding: 70px 55px;
    }


    .services-cta {
        padding: 65px 55px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .services-hero {
        min-height: 400px;

        padding: 145px 0 90px;
    }


    .services-title {
        font-size: clamp(2.5rem, 7vw, 4rem);
    }


    .services-intro-section {
        padding: 85px 0 45px;
    }


    .services-intro-text {
        margin-top: 28px;
    }


    .services-list-section {
        padding: 35px 0 90px;
    }


    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .service-item {
        min-height: 400px;
    }


    .services-approach {
        padding: 60px 45px;
    }


    .services-approach-content {
        max-width: none;

        margin-bottom: 50px;
    }


    .services-cta {
        padding: 60px 45px;
    }


    .services-cta-button {
        margin-top: 30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .services-hero {
        min-height: 350px;

        padding: 130px 0 75px;
    }


    .services-hero::before {
        width: 380px;
        height: 380px;

        right: -190px;
        top: -190px;
    }


    .services-hero::after {
        width: 280px;
        height: 280px;

        left: -140px;
        bottom: -170px;
    }


    .services-eyebrow {
        margin-bottom: 18px;

        padding: 6px 12px;

        font-size: .67rem;
    }


    .services-title {
        font-size: clamp(2.2rem, 11vw, 3.2rem);

        letter-spacing: -.045em;

        margin-bottom: 18px;
    }


    .services-title span {
        display: inline;
    }


    .services-hero-description {
        font-size: .88rem;

        line-height: 1.7;
    }


    .services-intro-section {
        padding: 65px 0 35px;
    }


    .services-section-heading h2,
    .services-approach-content h2,
    .services-cta h2 {
        font-size: 2rem;

        line-height: 1.15;
    }


    .services-intro-text {
        margin-top: 25px;
    }


    .services-intro-text p {
        font-size: .88rem;

        line-height: 1.8;
    }


    .services-list-section {
        padding: 30px 0 75px;
    }


    .services-grid {
        grid-template-columns: 1fr;

        border-radius: var(--radius-md);
    }


    .service-item {
        min-height: 370px;

        padding: 27px;
    }


    .service-item-top {
        margin-bottom: 55px;
    }


    .service-item-content h3 {
        font-size: 1.35rem;
    }


    .service-item-content p {
        font-size: .86rem;
    }


    .services-approach-section {
        padding-bottom: 75px;
    }


    .services-approach {
        padding: 48px 25px;

        border-radius: var(--radius-md);
    }


    .services-approach-content {
        margin-bottom: 42px;
    }


    .services-approach-content p {
        font-size: .86rem;

        line-height: 1.8;
    }


    .approach-point {
        grid-template-columns: 38px 1fr;

        gap: 14px;

        padding: 20px 0;
    }


    .approach-point p {
        font-size: .78rem;
    }


    .services-cta-section {
        padding-bottom: 65px;
    }


    .services-cta {
        padding: 48px 25px;

        border-radius: var(--radius-md);
    }


    .services-cta p {
        font-size: .86rem;

        line-height: 1.75;
    }


    .services-cta-button {
        width: 100%;

        margin-top: 28px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .services-hero {
        padding-top: 115px;

        padding-bottom: 65px;
    }


    .services-title {
        font-size: clamp(2rem, 11vw, 2.8rem);
    }


    .services-section-heading h2,
    .services-approach-content h2,
    .services-cta h2 {
        font-size: 1.85rem;
    }


    .services-list-section {
        padding-top: 25px;

        padding-bottom: 65px;
    }


    .service-item {
        min-height: 350px;

        padding: 24px;
    }


    .service-item-top {
        margin-bottom: 48px;
    }


    .service-icon {
        width: 48px;
        height: 48px;

        font-size: 15px;
    }


    .service-item-content h3 {
        font-size: 1.25rem;
    }


    .service-item-content p {
        font-size: .83rem;

        line-height: 1.75;
    }


    .service-link {
        font-size: .67rem;
    }


    .services-approach {
        padding: 40px 20px;
    }


    .services-cta {
        padding: 40px 20px;
    }


    .approach-point {
        grid-template-columns: 32px 1fr;

        gap: 12px;
    }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .service-item,
    .service-icon,
    .service-link,
    .service-link i,
    .services-cta-button,
    .services-cta-button i {
        transition: none;
    }

}









/* =========================================================
   CAREERS PAGE
   ========================================================= */

.careers-page {
    position: relative;
    background: var(--c-white);
    color: var(--c-text);
    overflow: hidden;
}


/* =========================================================
   HERO
   ========================================================= */

.careers-hero {
    position: relative;
    min-height: 500px;
    padding: 170px 0 110px;
    background: var(--c-dark);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.careers-hero::before {
    content: '';
    position: absolute;
    width: 540px;
    height: 540px;
    top: -270px;
    right: -130px;
    border-radius: 50%;
    background: rgba(19, 164, 144, .12);
    filter: blur(10px);
    pointer-events: none;
}

.careers-hero::after {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    left: -190px;
    bottom: -230px;
    border-radius: 50%;
    background: rgba(2, 45, 82, .08);
    pointer-events: none;
}

.careers-hero .container {
    position: relative;
    z-index: 2;
}

.careers-hero-content {
    max-width: 900px;
    margin: 0 auto;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.careers-eyebrow,
.careers-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-primary);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.careers-eyebrow {
    padding: 7px 15px;
    margin-bottom: 24px;
    background: rgba(2, 45, 82, .10);
    border: 1px solid rgba(2, 45, 82, .25);
    border-radius: 99px;
    color: var(--c-lime);
}

.careers-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background: var(--c-lime);
    border-radius: 50%;
}

.careers-section-eyebrow {
    margin-bottom: 18px;
}

.careers-section-eyebrow::before {
    content: '';
    width: 25px;
    height: 2px;
    background: var(--c-primary);
    border-radius: 99px;
}


/* =========================================================
   HERO TITLE
   ========================================================= */

.careers-title {
    margin: 0 0 22px;
    color: var(--c-white);
    font-family: var(--f-display);
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.05em;
}

.careers-title span {
    display: block;
    color: var(--c-lime);
}

.careers-hero-description {
    max-width: 700px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .58);
    font-size: 1rem;
    line-height: 1.8;
}


/* =========================================================
   HERO BUTTON
   ========================================================= */

.careers-hero-button,
.careers-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 16px 23px;
    border-radius: var(--radius-sm);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}

.careers-hero-button {
    margin-top: 30px;
    background: var(--c-primary);
    border: 1px solid var(--c-primary);
    color: var(--c-white);
}

.careers-hero-button:hover {
    background: var(--c-lime);
    border-color: var(--c-lime);
    color: var(--c-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.careers-hero-button i {
    transition: var(--transition);
}

.careers-hero-button:hover i {
    transform: translateY(4px);
}


/* =========================================================
   INTRO
   ========================================================= */

.careers-intro-section {
    padding: 105px 0 55px;
    background: var(--c-white);
}

.careers-section-heading {
    max-width: 650px;
}

.careers-section-heading h2,
.careers-culture-content h2,
.careers-cta h2 {
    margin: 0;
    color: var(--c-dark);
    font-family: var(--f-display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.04em;
}

.careers-section-heading h2 span,
.careers-culture-content h2 span,
.careers-cta h2 span {
    color: var(--c-primary);
}

.careers-intro-text {
    max-width: 540px;
}

.careers-intro-text p,
.careers-jobs-description,
.careers-culture-content p,
.careers-cta p {
    margin: 0;
    color: var(--c-text-light);
    font-size: .92rem;
    line-height: 1.85;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.careers-benefits-section {
    padding: 40px 0 120px;
    background: var(--c-white);
}

.careers-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--c-border);
    border-left: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.career-benefit {
    min-height: 360px;
    padding: 32px;
    background: var(--c-white);
    border-right: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    transition: var(--transition);
}

.career-benefit:hover {
    background: var(--c-offwhite);
    transform: translateY(-3px);
    z-index: 2;
    box-shadow: var(--shadow-md);
}

.career-benefit-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 65px;
}

.career-number,
.career-job-number,
.culture-point-number {
    color: var(--c-text-muted);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .12em;
}

.career-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(19, 164, 144, .06);
    border: 1px solid rgba(19, 164, 144, .20);
    border-radius: var(--radius-sm);
    color: var(--c-primary);
    font-size: 17px;
    transition: var(--transition);
}

.career-benefit:hover .career-icon {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-white);
    transform: translateY(-2px);
}

.career-benefit-content h3 {
    margin: 0 0 14px;
    color: var(--c-dark);
    font-family: var(--f-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.career-benefit-content p {
    margin: 0;
    color: var(--c-text-light);
    font-size: .86rem;
    line-height: 1.8;
}


/* =========================================================
   OPEN POSITIONS
   ========================================================= */

.careers-jobs-section {
    padding: 0 0 120px;
    background: var(--c-white);
}

.careers-jobs-header {
    margin-bottom: 50px;
}

.careers-jobs-description {
    max-width: 500px;
    margin-left: auto;
}

.careers-jobs-list {
    border-top: 1px solid var(--c-border);
}

.career-job {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 30px;
    padding: 28px 0;
    border-bottom: 1px solid var(--c-border);
    transition: var(--transition);
}

.career-job:hover {
    padding-left: 12px;
    padding-right: 12px;
    background: var(--c-offwhite);
}

.career-job-number {
    color: var(--c-primary);
}

.career-job-info h3 {
    margin: 0 0 12px;
    color: var(--c-dark);
    font-family: var(--f-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.career-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.career-job-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--c-text-muted);
    font-size: .75rem;
    line-height: 1.4;
}

.career-job-meta i {
    color: var(--c-primary);
    font-size: .7rem;
}

.career-job-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--c-dark);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}

.career-job-link i {
    color: var(--c-primary);
    transition: var(--transition);
}

.career-job-link:hover {
    color: var(--c-primary);
}

.career-job-link:hover i {
    color: var(--c-lime);
    transform: translateX(5px);
}


/* =========================================================
   CULTURE
   ========================================================= */

.careers-culture-section {
    padding: 0 0 120px;
    background: var(--c-white);
}

.careers-culture {
    position: relative;
    padding: 85px 75px;
    background: var(--c-offwhite);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.careers-culture::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    right: -150px;
    bottom: -170px;
    border-radius: 50%;
    background: rgba(19, 164, 144, .07);
    pointer-events: none;
}

.careers-culture .row {
    position: relative;
    z-index: 2;
}

.careers-culture-content {
    max-width: 600px;
}

.careers-culture-content p {
    margin-top: 25px;
}

.careers-culture-content p + p {
    margin-top: 16px;
}

.culture-points {
    border-top: 1px solid var(--c-border);
}

.culture-point {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--c-border);
}

.culture-point-number {
    padding-top: 4px;
    color: var(--c-primary);
}

.culture-point h4 {
    margin: 0 0 6px;
    color: var(--c-dark);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.culture-point p {
    margin: 0;
    color: var(--c-text-light);
    font-size: .82rem;
    line-height: 1.7;
}


/* =========================================================
   CTA
   ========================================================= */

.careers-cta-section {
    padding: 0 0 110px;
    background: var(--c-white);
}

.careers-cta {
    position: relative;
    padding: 70px 75px;
    background: var(--c-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.careers-cta::before {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    top: -230px;
    right: -100px;
    border-radius: 50%;
    background: rgba(19, 164, 144, .15);
    filter: blur(8px);
    pointer-events: none;
}

.careers-cta .row {
    position: relative;
    z-index: 2;
}

.careers-cta .careers-section-eyebrow {
    color: var(--c-lime);
}

.careers-cta .careers-section-eyebrow::before {
    background: var(--c-lime);
}

.careers-cta h2 {
    margin-bottom: 18px;
    color: var(--c-white);
}

.careers-cta h2 span {
    color: var(--c-lime);
}

.careers-cta p {
    max-width: 600px;
    color: rgba(255, 255, 255, .58);
}

.careers-cta-button {
    background: var(--c-primary);
    border: 1px solid var(--c-primary);
    color: var(--c-white);
}

.careers-cta-button:hover {
    background: var(--c-lime);
    border-color: var(--c-lime);
    color: var(--c-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.careers-cta-button i {
    transition: var(--transition);
}

.careers-cta-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   LARGE LAPTOP
   ========================================================= */

@media (max-width: 1199px) {

    .careers-hero {
        min-height: 460px;
        padding: 155px 0 100px;
    }

    .careers-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .career-benefit {
        min-height: 350px;
    }

    .careers-culture {
        padding: 70px 55px;
    }

    .careers-cta {
        padding: 65px 55px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .careers-hero {
        min-height: 420px;
        padding: 145px 0 90px;
    }

    .careers-title {
        font-size: clamp(2.5rem, 7vw, 4rem);
    }

    .careers-intro-section {
        padding: 85px 0 45px;
    }

    .careers-intro-text {
        margin-top: 28px;
    }

    .careers-benefits-section {
        padding: 35px 0 90px;
    }

    .careers-jobs-section {
        padding-bottom: 90px;
    }

    .careers-jobs-description {
        margin: 28px 0 0;
    }

    .career-job {
        grid-template-columns: 50px 1fr auto;
        gap: 22px;
    }

    .careers-culture {
        padding: 60px 45px;
    }

    .careers-culture-content {
        max-width: none;
        margin-bottom: 50px;
    }

    .careers-cta {
        padding: 60px 45px;
    }

    .careers-cta-button {
        margin-top: 30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .careers-hero {
        min-height: 370px;
        padding: 130px 0 75px;
    }

    .careers-hero::before {
        width: 380px;
        height: 380px;
        right: -190px;
        top: -190px;
    }

    .careers-hero::after {
        width: 280px;
        height: 280px;
        left: -140px;
        bottom: -170px;
    }

    .careers-eyebrow {
        margin-bottom: 18px;
        padding: 6px 12px;
        font-size: .67rem;
    }

    .careers-title {
        font-size: clamp(2.2rem, 11vw, 3.2rem);
        letter-spacing: -.045em;
        margin-bottom: 18px;
    }

    .careers-title span {
        display: inline;
    }

    .careers-hero-description {
        font-size: .88rem;
        line-height: 1.7;
    }

    .careers-hero-button {
        margin-top: 25px;
    }

    .careers-intro-section {
        padding: 65px 0 35px;
    }

    .careers-section-heading h2,
    .careers-culture-content h2,
    .careers-cta h2 {
        font-size: 2rem;
        line-height: 1.15;
    }

    .careers-intro-text {
        margin-top: 25px;
    }

    .careers-intro-text p,
    .careers-jobs-description {
        font-size: .88rem;
        line-height: 1.8;
    }

    .careers-benefits-section {
        padding: 30px 0 75px;
    }

    .careers-benefits-grid {
        grid-template-columns: 1fr;
        border-radius: var(--radius-md);
    }

    .career-benefit {
        min-height: 320px;
        padding: 27px;
    }

    .career-benefit-top {
        margin-bottom: 50px;
    }

    .career-benefit-content h3 {
        font-size: 1.25rem;
    }

    .career-benefit-content p {
        font-size: .84rem;
    }

    .careers-jobs-section {
        padding-bottom: 75px;
    }

    .careers-jobs-header {
        margin-bottom: 35px;
    }

    .career-job {
        grid-template-columns: 35px 1fr;
        gap: 15px;
        padding: 24px 0;
    }

    .career-job:hover {
        padding-left: 8px;
        padding-right: 8px;
    }

    .career-job-info h3 {
        font-size: 1.12rem;
    }

    .career-job-meta {
        gap: 9px 15px;
    }

    .career-job-meta span {
        font-size: .7rem;
    }

    .career-job-link {
        grid-column: 2;
        justify-self: start;
        margin-top: 5px;
    }

    .careers-culture-section {
        padding-bottom: 75px;
    }

    .careers-culture {
        padding: 48px 25px;
        border-radius: var(--radius-md);
    }

    .careers-culture-content {
        margin-bottom: 42px;
    }

    .careers-culture-content p {
        font-size: .86rem;
        line-height: 1.8;
    }

    .culture-point {
        grid-template-columns: 38px 1fr;
        gap: 14px;
        padding: 20px 0;
    }

    .culture-point p {
        font-size: .78rem;
    }

    .careers-cta-section {
        padding-bottom: 65px;
    }

    .careers-cta {
        padding: 48px 25px;
        border-radius: var(--radius-md);
    }

    .careers-cta p {
        font-size: .86rem;
        line-height: 1.75;
    }

    .careers-cta-button {
        width: 100%;
        margin-top: 28px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .careers-hero {
        padding-top: 115px;
        padding-bottom: 65px;
    }

    .careers-title {
        font-size: clamp(2rem, 11vw, 2.8rem);
    }

    .careers-section-heading h2,
    .careers-culture-content h2,
    .careers-cta h2 {
        font-size: 1.85rem;
    }

    .career-benefit {
        min-height: 300px;
        padding: 24px;
    }

    .career-benefit-top {
        margin-bottom: 45px;
    }

    .career-icon {
        width: 48px;
        height: 48px;
        font-size: 15px;
    }

    .career-benefit-content h3 {
        font-size: 1.2rem;
    }

    .career-benefit-content p {
        font-size: .82rem;
        line-height: 1.75;
    }

    .career-job {
        grid-template-columns: 30px 1fr;
        gap: 12px;
    }

    .career-job-info h3 {
        font-size: 1.05rem;
    }

    .career-job-meta {
        display: grid;
        gap: 8px;
    }

    .careers-culture {
        padding: 40px 20px;
    }

    .careers-cta {
        padding: 40px 20px;
    }

    .culture-point {
        grid-template-columns: 32px 1fr;
        gap: 12px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .career-benefit,
    .career-icon,
    .career-job,
    .career-job-link,
    .career-job-link i,
    .careers-hero-button,
    .careers-hero-button i,
    .careers-cta-button,
    .careers-cta-button i {
        transition: none;
    }

}

.career-card {
    padding: 30px;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.career-card:hover {
    border-color: var(--c-primary);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.career-card > span {
    color: var(--c-primary);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.career-card h3 {
    margin: 18px 0 10px;
    color: var(--c-dark);
    font-family: var(--f-display);
    font-size: 1.35rem;
}

.career-card p {
    margin: 0 0 22px;
    color: red;
    font-size: .85rem;
    line-height: 1.7;
}

.career-info {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 25px;
    color: var(--c-text-muted);
    font-size: .72rem;
}

.career-info i {
    color: var(--c-primary);
    margin-right: 5px;
}

.career-card a {
    color: var(--c-primary);
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.career-card a i {
    margin-left: 6px;
}

/* =========================================================
   CAREERS PAGE - IMAGE STYLING ONLY
   ========================================================= */

/* Image wrapper */
.careers-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    isolation: isolate;
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.12),
        0 8px 18px rgba(0, 0, 0, 0.06);
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}

/* Image */
.careers-image {
    display: block;
    width: 100%;
    height: 430px;
    object-fit: cover;
    object-position: center;
    transition:
        transform 0.65s cubic-bezier(.2,.7,.2,1),
        filter 0.45s ease;
}

/* Dark premium overlay */
.careers-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            135deg,
            rgba(16, 24, 40, 0.05),
            rgba(16, 24, 40, 0.28)
        );
    pointer-events: none;
    transition: opacity 0.45s ease;
}

/* Hover */
.careers-image-wrap:hover {
    transform: translateY(-7px);
    box-shadow:
        0 30px 65px rgba(0, 0, 0, 0.18),
        0 12px 25px rgba(19, 164, 144, 0.10);
}

.careers-image-wrap:hover .careers-image {
    transform: scale(1.055);
    filter: saturate(1.08) contrast(1.03);
}

.careers-image-wrap:hover::after {
    opacity: 0.7;
}


/* =========================================================
   IMAGE HOVER SHINE
   ========================================================= */

.careers-image-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.18),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.8s ease;
    pointer-events: none;
}

.careers-image-wrap:hover::before {
    left: 140%;
}


/* =========================================================
   IMAGE RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .careers-image {
        height: 380px;
    }

}

@media (max-width: 767px) {

    .careers-image-wrap {
        border-radius: 16px;
    }

    .careers-image {
        height: 320px;
    }

}

@media (max-width: 480px) {

    .careers-image {
        height: 270px;
    }

}


/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-page {
    position: relative;
    background: var(--c-white);
    color: var(--c-text);
    overflow: hidden;
}


/* =========================================================
   HERO
   ========================================================= */

.contact-hero {
    position: relative;
    min-height: 470px;
    padding: 170px 0 110px;
    background: var(--c-dark);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.contact-hero::before {
    content: '';
    position: absolute;
    width: 540px;
    height: 540px;
    top: -270px;
    right: -130px;
    border-radius: 50%;
    background: rgba(19, 164, 144, .12);
    filter: blur(10px);
    pointer-events: none;
}

.contact-hero::after {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    left: -190px;
    bottom: -230px;
    border-radius: 50%;
    background: rgba(2, 45, 82, .08);
    pointer-events: none;
}

.contact-hero .container {
    position: relative;
    z-index: 2;
}

.contact-hero-content {
    max-width: 900px;
    margin: 0 auto;
}


/* =========================================================
   EYEBROWS
   ========================================================= */

.contact-eyebrow,
.contact-section-eyebrow,
.contact-form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-primary);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.contact-eyebrow {
    padding: 7px 15px;
    margin-bottom: 24px;
    background: rgba(2, 45, 82, .10);
    border: 1px solid rgba(2, 45, 82, .25);
    border-radius: 99px;
    color: var(--c-lime);
}

.contact-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background: var(--c-lime);
    border-radius: 50%;
}

.contact-section-eyebrow {
    margin-bottom: 18px;
}

.contact-section-eyebrow::before,
.contact-form-eyebrow::before {
    content: '';
    width: 25px;
    height: 2px;
    background: var(--c-primary);
    border-radius: 99px;
}


/* =========================================================
   HERO TITLE
   ========================================================= */

.contact-title {
    margin: 0 0 22px;
    color: var(--c-white);
    font-family: var(--f-display);
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.05em;
}

.contact-title span {
    display: block;
    color: var(--c-lime);
}

.contact-hero-description {
    max-width: 700px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .58);
    font-size: 1rem;
    line-height: 1.8;
}


/* =========================================================
   INTRO
   ========================================================= */

.contact-intro-section {
    padding: 105px 0 55px;
    background: var(--c-white);
}

.contact-section-heading {
    max-width: 650px;
}

.contact-section-heading h2,
.contact-information h2,
.contact-services-header h2,
.contact-cta h2 {
    margin: 0;
    color: var(--c-dark);
    font-family: var(--f-display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.04em;
}

.contact-section-heading h2 span,
.contact-information h2 span,
.contact-services-header h2 span,
.contact-cta h2 span {
    color: var(--c-primary);
}

.contact-intro-text {
    max-width: 540px;
}

.contact-intro-text p {
    margin: 0;
    color: var(--c-text-light);
    font-size: .92rem;
    line-height: 1.85;
}


/* =========================================================
   CONTACT MAIN
   ========================================================= */

.contact-main-section {
    padding: 40px 0 120px;
    background: var(--c-white);
}

.contact-main {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}


/* =========================================================
   CONTACT INFORMATION
   ========================================================= */

.contact-information {
    height: 100%;
    padding: 55px 45px;
    background: var(--c-dark);
}

.contact-information .contact-section-eyebrow {
    color: var(--c-lime);
}

.contact-information .contact-section-eyebrow::before {
    background: var(--c-lime);
}

.contact-information h2 {
    color: var(--c-white);
    font-size: clamp(2rem, 3vw, 2.8rem);
}

.contact-information h2 span {
    color: var(--c-lime);
}

.contact-information-description {
    max-width: 470px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, .58);
    font-size: .88rem;
    line-height: 1.8;
}


/* =========================================================
   CONTACT DETAILS
   ========================================================= */

.contact-details {
    margin-top: 42px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.contact-detail-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(19, 164, 144, .12);
    border: 1px solid rgba(19, 164, 144, .25);
    border-radius: var(--radius-sm);
    color: var(--c-lime);
    font-size: 14px;
}

.contact-detail-label {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .42);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.contact-detail a,
.contact-detail p {
    margin: 0;
    color: var(--c-white);
    font-size: .86rem;
    line-height: 1.5;
    text-decoration: none;
}

.contact-detail a {
    transition: var(--transition);
}

.contact-detail a:hover {
    color: var(--c-lime);
}


/* =========================================================
   AVAILABILITY
   ========================================================= */

.contact-availability {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 35px;
    padding: 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-sm);
}

.contact-status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-top: 5px;
    background: var(--c-lime);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(2, 45, 82, .10);
}

.contact-availability strong,
.contact-availability span {
    display: block;
}

.contact-availability strong {
    color: var(--c-white);
    font-size: .76rem;
    line-height: 1.4;
}

.contact-availability div > span {
    margin-top: 3px;
    color: rgba(255, 255, 255, .42);
    font-size: .7rem;
    line-height: 1.5;
}


/* =========================================================
   CONTACT FORM
   ========================================================= */

.contact-form-wrapper {
    padding: 55px 50px;
    background: var(--c-white);
}

.contact-form-heading {
    margin-bottom: 35px;
}

.contact-form-eyebrow {
    margin-bottom: 15px;
}

.contact-form-heading h3 {
    margin: 0;
    color: var(--c-dark);
    font-family: var(--f-display);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.03em;
}

.contact-form-heading h3 span {
    color: var(--c-primary);
}


/* =========================================================
   FORM FIELDS
   ========================================================= */

.contact-field {
    margin-bottom: 22px;
}

.contact-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--c-dark);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    padding: 14px 15px;
    background: var(--c-offwhite);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    outline: none;
    color: var(--c-dark);
    font-family: inherit;
    font-size: .85rem;
    line-height: 1.5;
    transition: var(--transition);
}

.contact-field input,
.contact-field select {
    height: 50px;
}

.contact-field textarea {
    min-height: 145px;
    resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: var(--c-text-muted);
}

.contact-field select {
    cursor: pointer;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    background: var(--c-white);
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(19, 164, 144, .08);
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.contact-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-width: 175px;
    padding: 16px 23px;
    background: var(--c-primary);
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-sm);
    color: var(--c-white);
    cursor: pointer;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: var(--transition);
}

.contact-submit-button:hover {
    background: var(--c-lime);
    border-color: var(--c-lime);
    color: var(--c-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.contact-submit-button i {
    transition: var(--transition);
}

.contact-submit-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   SERVICES SECTION
   ========================================================= */

.contact-services-section {
    padding: 0 0 120px;
    background: var(--c-white);
}

.contact-services-header {
    max-width: 750px;
    margin-bottom: 45px;
}

.contact-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--c-border);
    border-left: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.contact-service-item {
    min-height: 330px;
    padding: 30px;
    background: var(--c-white);
    border-right: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    transition: var(--transition);
}

.contact-service-item:hover {
    background: var(--c-offwhite);
    transform: translateY(-3px);
    z-index: 2;
    box-shadow: var(--shadow-md);
}

.contact-service-number {
    display: block;
    margin-bottom: 48px;
    color: var(--c-text-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.contact-service-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(19, 164, 144, .06);
    border: 1px solid rgba(19, 164, 144, .20);
    border-radius: var(--radius-sm);
    color: var(--c-primary);
    font-size: 16px;
    transition: var(--transition);
}

.contact-service-item:hover .contact-service-icon {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-white);
}

.contact-service-item h3 {
    margin: 0 0 12px;
    color: var(--c-dark);
    font-family: var(--f-display);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

.contact-service-item p {
    margin: 0;
    color: var(--c-text-light);
    font-size: .82rem;
    line-height: 1.75;
}


/* =========================================================
   CTA
   ========================================================= */

.contact-cta-section {
    padding: 0 0 110px;
    background: var(--c-white);
}

.contact-cta {
    position: relative;
    padding: 70px 75px;
    background: var(--c-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.contact-cta::before {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    top: -230px;
    right: -100px;
    border-radius: 50%;
    background: rgba(19, 164, 144, .15);
    filter: blur(8px);
    pointer-events: none;
}

.contact-cta .row {
    position: relative;
    z-index: 2;
}

.contact-cta .contact-section-eyebrow {
    color: var(--c-lime);
}

.contact-cta .contact-section-eyebrow::before {
    background: var(--c-lime);
}

.contact-cta h2 {
    margin-bottom: 18px;
    color: var(--c-white);
}

.contact-cta h2 span {
    color: var(--c-lime);
}

.contact-cta p {
    max-width: 600px;
    color: rgba(255, 255, 255, .58);
}

.contact-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 16px 23px;
    background: var(--c-primary);
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-sm);
    color: var(--c-white);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}

.contact-cta-button:hover {
    background: var(--c-lime);
    border-color: var(--c-lime);
    color: var(--c-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.contact-cta-button i {
    transition: var(--transition);
}

.contact-cta-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   LARGE LAPTOP
   ========================================================= */

@media (max-width: 1199px) {

    .contact-hero {
        min-height: 440px;
        padding: 155px 0 100px;
    }

    .contact-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-service-item {
        min-height: 300px;
    }

    .contact-cta {
        padding: 65px 55px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .contact-hero {
        min-height: 400px;
        padding: 145px 0 90px;
    }

    .contact-title {
        font-size: clamp(2.5rem, 7vw, 4rem);
    }

    .contact-intro-section {
        padding: 85px 0 45px;
    }

    .contact-intro-text {
        margin-top: 28px;
    }

    .contact-main-section {
        padding: 35px 0 90px;
    }

    .contact-information {
        padding: 50px 40px;
    }

    .contact-form-wrapper {
        padding: 50px 40px;
    }

    .contact-services-section {
        padding-bottom: 90px;
    }

    .contact-cta {
        padding: 60px 45px;
    }

    .contact-cta-button {
        margin-top: 30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .contact-hero {
        min-height: 350px;
        padding: 130px 0 75px;
    }

    .contact-hero::before {
        width: 380px;
        height: 380px;
        right: -190px;
        top: -190px;
    }

    .contact-hero::after {
        width: 280px;
        height: 280px;
        left: -140px;
        bottom: -170px;
    }

    .contact-eyebrow {
        margin-bottom: 18px;
        padding: 6px 12px;
        font-size: .67rem;
    }

    .contact-title {
        font-size: clamp(2.2rem, 11vw, 3.2rem);
        letter-spacing: -.045em;
        margin-bottom: 18px;
    }

    .contact-title span {
        display: inline;
    }

    .contact-hero-description {
        font-size: .88rem;
        line-height: 1.7;
    }

    .contact-intro-section {
        padding: 65px 0 35px;
    }

    .contact-section-heading h2,
    .contact-services-header h2,
    .contact-cta h2 {
        font-size: 2rem;
        line-height: 1.15;
    }

    .contact-intro-text {
        margin-top: 25px;
    }

    .contact-intro-text p {
        font-size: .86rem;
        line-height: 1.8;
    }

    .contact-main-section {
        padding: 30px 0 75px;
    }

    .contact-main {
        border-radius: var(--radius-md);
    }

    .contact-information {
        padding: 42px 25px;
    }

    .contact-information h2 {
        font-size: 2rem;
    }

    .contact-information-description {
        font-size: .84rem;
    }

    .contact-details {
        margin-top: 35px;
    }

    .contact-form-wrapper {
        padding: 42px 25px;
    }

    .contact-form-heading {
        margin-bottom: 30px;
    }

    .contact-form-heading h3 {
        font-size: 1.55rem;
    }

    .contact-field {
        margin-bottom: 18px;
    }

    .contact-submit-button {
        width: 100%;
    }

    .contact-services-section {
        padding-bottom: 75px;
    }

    .contact-services-header {
        margin-bottom: 35px;
    }

    .contact-services-grid {
        grid-template-columns: 1fr;
        border-radius: var(--radius-md);
    }

    .contact-service-item {
        min-height: 280px;
        padding: 27px;
    }

    .contact-service-number {
        margin-bottom: 40px;
    }

    .contact-service-item h3 {
        font-size: 1.15rem;
    }

    .contact-service-item p {
        font-size: .8rem;
    }

    .contact-cta-section {
        padding-bottom: 65px;
    }

    .contact-cta {
        padding: 48px 25px;
        border-radius: var(--radius-md);
    }

    .contact-cta p {
        font-size: .84rem;
        line-height: 1.75;
    }

    .contact-cta-button {
        width: 100%;
        margin-top: 28px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .contact-hero {
        padding-top: 115px;
        padding-bottom: 65px;
    }

    .contact-title {
        font-size: clamp(2rem, 11vw, 2.8rem);
    }

    .contact-section-heading h2,
    .contact-services-header h2,
    .contact-cta h2 {
        font-size: 1.85rem;
    }

    .contact-information {
        padding: 38px 20px;
    }

    .contact-form-wrapper {
        padding: 38px 20px;
    }

    .contact-detail {
        gap: 13px;
    }

    .contact-detail-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .contact-detail a,
    .contact-detail p {
        font-size: .82rem;
    }

    .contact-availability {
        padding: 14px;
    }

    .contact-service-item {
        min-height: 270px;
        padding: 24px;
    }

    .contact-cta {
        padding: 40px 20px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .contact-field input,
    .contact-field select,
    .contact-field textarea,
    .contact-submit-button,
    .contact-submit-button i,
    .contact-service-item,
    .contact-service-icon,
    .contact-cta-button,
    .contact-cta-button i {
        transition: none;
    }

}




/* =========================================================
   INDUSTRIES PAGE
   ========================================================= */

.industries-page {
    background: var(--c-white);
    color: var(--c-text);
    overflow: hidden;
}


/* =========================================================
   HERO
   ========================================================= */

.industries-hero {
    position: relative;
    min-height: 470px;
    padding: 170px 0 110px;
    display: flex;
    align-items: center;
    background: var(--c-dark);
    overflow: hidden;
}

.industries-hero::before {
    content: '';
    position: absolute;
    width: 540px;
    height: 540px;
    top: -270px;
    right: -130px;
    border-radius: 50%;
    background: rgba(19, 164, 144, .12);
    filter: blur(10px);
}

.industries-hero::after {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    left: -190px;
    bottom: -230px;
    border-radius: 50%;
    background: rgba(2, 45, 82, .08);
}

.industries-hero .container {
    position: relative;
    z-index: 2;
}

.industries-hero-content {
    max-width: 900px;
    margin: auto;
}

.industries-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 7px 15px;
    border: 1px solid rgba(2, 45, 82, .25);
    border-radius: 99px;
    background: rgba(2, 45, 82, .1);
    color: var(--c-lime);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.industries-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-lime);
}

.industries-title {
    margin: 0 0 22px;
    color: var(--c-white);
    font-family: var(--f-display);
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.05em;
}

.industries-title span {
    display: block;
    color: var(--c-lime);
}

.industries-hero-description {
    max-width: 700px;
    margin: auto;
    color: rgba(255, 255, 255, .58);
    font-size: 1rem;
    line-height: 1.8;
}


/* =========================================================
   INTRO
   ========================================================= */

.industries-intro {
    padding: 105px 0 55px;
}

.industries-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--c-primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.industries-section-eyebrow::before {
    content: '';
    width: 25px;
    height: 2px;
    border-radius: 99px;
    background: var(--c-primary);
}

.industries-intro h2,
.industries-approach h2,
.industries-cta h2 {
    margin: 0;
    color: var(--c-dark);
    font-family: var(--f-display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.04em;
}

.industries-intro h2 span,
.industries-approach h2 span,
.industries-cta h2 span {
    color: var(--c-primary);
}

.industries-intro p {
    margin: 0;
    color: var(--c-text-light);
    font-size: .92rem;
    line-height: 1.85;
}


/* =========================================================
   INDUSTRY GRID
   ========================================================= */

.industries-list {
    padding: 40px 0 120px;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--c-border);
    border-left: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.industry-card {
    min-height: 390px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--c-white);
    border-right: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    transition: var(--transition);
}

.industry-card:hover {
    background: var(--c-offwhite);
    transform: translateY(-3px);
    z-index: 2;
    box-shadow: var(--shadow-md);
}

.industry-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 35px;
}

.industry-card-top > span,
.challenge-item > span {
    color: var(--c-text-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.industry-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(19, 164, 144, .2);
    border-radius: var(--radius-sm);
    background: rgba(19, 164, 144, .06);
    color: var(--c-primary);
    transition: var(--transition);
}

.industry-card:hover .industry-icon {
    background: var(--c-primary);
    color: var(--c-white);
}

.industry-card h3 {
    margin: 0 0 13px;
    color: var(--c-dark);
    font-family: var(--f-display);
    font-size: 1.35rem;
    font-weight: 700;
}

.industry-card p {
    margin: 0;
    color: var(--c-text-light);
    font-size: .86rem;
    line-height: 1.8;
}

.industry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 25px;
}

.industry-tags span {
    padding: 6px 9px;
    border: 1px solid var(--c-border);
    border-radius: 99px;
    color: var(--c-text-muted);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .04em;
}


/* =========================================================
   APPROACH
   ========================================================= */

.industries-approach {
    padding: 0 0 120px;
}

.industries-approach-box {
    position: relative;
    padding: 75px;
    background: var(--c-offwhite);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.industries-approach-box::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    right: -150px;
    bottom: -170px;
    border-radius: 50%;
    background: rgba(19, 164, 144, .07);
}

.industries-approach-box .row {
    position: relative;
    z-index: 2;
}

.industries-approach h2 {
    max-width: 600px;
}

.industries-approach h2 span {
    color: var(--c-primary);
}

.industries-approach > .container p,
.industries-approach-box p {
    max-width: 580px;
    margin: 24px 0 0;
    color: var(--c-text-light);
    font-size: .9rem;
    line-height: 1.8;
}

.challenge-list {
    border-top: 1px solid var(--c-border);
}

.challenge-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 15px;
    padding: 19px 0;
    border-bottom: 1px solid var(--c-border);
}

.challenge-item > span {
    padding-top: 3px;
    color: var(--c-primary);
}

.challenge-item strong {
    color: var(--c-dark);
    font-size: .95rem;
}

.challenge-item p {
    grid-column: 2;
    margin: 4px 0 0;
    font-size: .78rem;
}


/* =========================================================
   CTA
   ========================================================= */

.industries-cta {
    padding-bottom: 110px;
}

.industries-cta-box {
    position: relative;
    padding: 70px 75px;
    background: var(--c-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.industries-cta-box::before {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    top: -230px;
    right: -100px;
    border-radius: 50%;
    background: rgba(19, 164, 144, .15);
    filter: blur(8px);
}

.industries-cta-box .row {
    position: relative;
    z-index: 2;
}

.industries-cta-box .industries-section-eyebrow {
    color: var(--c-lime);
}

.industries-cta-box .industries-section-eyebrow::before {
    background: var(--c-lime);
}

.industries-cta h2 {
    color: var(--c-white);
    margin-bottom: 18px;
}

.industries-cta h2 span {
    color: var(--c-lime);
}

.industries-cta p {
    max-width: 600px;
    margin: 0;
    color: rgba(255, 255, 255, .58);
    font-size: .9rem;
    line-height: 1.8;
}

.industries-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 16px 23px;
    background: var(--c-primary);
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-sm);
    color: var(--c-white);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}

.industries-cta-button:hover {
    background: var(--c-lime);
    border-color: var(--c-lime);
    color: var(--c-white);
    transform: translateY(-2px);
}

.industries-cta-button i {
    transition: var(--transition);
}

.industries-cta-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {

    .industries-hero {
        min-height: 440px;
        padding: 155px 0 100px;
    }

    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .industries-approach-box,
    .industries-cta-box {
        padding: 60px 55px;
    }

}


@media (max-width: 991px) {

    .industries-hero {
        min-height: 400px;
        padding: 145px 0 90px;
    }

    .industries-intro {
        padding: 85px 0 45px;
    }

    .industries-intro p {
        margin-top: 28px;
    }

    .industries-list {
        padding: 35px 0 90px;
    }

    .industries-approach {
        padding-bottom: 90px;
    }

    .industries-approach-box {
        padding: 55px 45px;
    }

    .challenge-list {
        margin-top: 45px;
    }

    .industries-cta-box {
        padding: 55px 45px;
    }

    .industries-cta-button {
        margin-top: 30px;
    }

}


@media (max-width: 767px) {

    .industries-hero {
        min-height: 350px;
        padding: 130px 0 75px;
    }

    .industries-eyebrow {
        margin-bottom: 18px;
        padding: 6px 12px;
        font-size: .67rem;
    }

    .industries-title {
        font-size: clamp(2.2rem, 11vw, 3.2rem);
    }

    .industries-title span {
        display: inline;
    }

    .industries-hero-description {
        font-size: .88rem;
        line-height: 1.7;
    }

    .industries-intro {
        padding: 65px 0 35px;
    }

    .industries-intro h2,
    .industries-approach h2,
    .industries-cta h2 {
        font-size: 2rem;
    }

    .industries-grid {
        grid-template-columns: 1fr;
        border-radius: var(--radius-md);
    }

    .industry-card {
        min-height: 350px;
        padding: 27px;
    }

    .industries-list {
        padding: 30px 0 75px;
    }

    .industries-approach {
        padding-bottom: 75px;
    }

    .industries-approach-box {
        padding: 45px 25px;
        border-radius: var(--radius-md);
    }

    .challenge-list {
        margin-top: 40px;
    }

    .industries-cta {
        padding-bottom: 65px;
    }

    .industries-cta-box {
        padding: 45px 25px;
        border-radius: var(--radius-md);
    }

    .industries-cta-button {
        width: 100%;
        margin-top: 28px;
    }

}


@media (max-width: 480px) {

    .industries-hero {
        padding-top: 115px;
        padding-bottom: 65px;
    }

    .industries-title {
        font-size: clamp(2rem, 11vw, 2.8rem);
    }

    .industries-intro h2,
    .industries-approach h2,
    .industries-cta h2 {
        font-size: 1.85rem;
    }

    .industry-card {
        min-height: 330px;
        padding: 24px;
    }

    .industries-approach-box,
    .industries-cta-box {
        padding: 40px 20px;
    }

}


/* =========================================================
   COMPANY PAGE
   ========================================================= */

.company-page {
    background: var(--c-white);
    color: var(--c-text);
    overflow: hidden;
}


/* =========================================================
   HERO
   ========================================================= */

.company-hero {
    position: relative;
    min-height: 470px;
    padding: 170px 0 110px;
    display: flex;
    align-items: center;
    background: var(--c-dark);
    overflow: hidden;
}

.company-hero::before {
    content: '';
    position: absolute;
    width: 540px;
    height: 540px;
    top: -270px;
    right: -130px;
    border-radius: 50%;
    background: rgba(19, 164, 144, .12);
    filter: blur(10px);
}

.company-hero::after {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    left: -190px;
    bottom: -230px;
    border-radius: 50%;
    background: rgba(2, 45, 82, .08);
}

.company-hero .container {
    position: relative;
    z-index: 2;
}

.company-hero-content {
    max-width: 900px;
    margin: auto;
}

.company-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 7px 15px;
    border: 1px solid rgba(2, 45, 82, .25);
    border-radius: 99px;
    background: rgba(2, 45, 82, .1);
    color: var(--c-lime);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.company-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-lime);
}

.company-title {
    margin: 0 0 22px;
    color: var(--c-white);
    font-family: var(--f-display);
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.05em;
}

.company-title span {
    display: block;
    color: var(--c-lime);
}

.company-hero-description {
    max-width: 700px;
    margin: auto;
    color: rgba(255,255,255,.58);
    font-size: 1rem;
    line-height: 1.8;
}


/* =========================================================
   COMMON
   ========================================================= */

.company-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--c-primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.company-section-eyebrow::before {
    content: '';
    width: 25px;
    height: 2px;
    border-radius: 99px;
    background: var(--c-primary);
}

.company-intro h2,
.company-values h2,
.company-approach h2,
.company-tech h2,
.company-careers h2,
.company-cta h2 {
    margin: 0;
    color: var(--c-dark);
    font-family: var(--f-display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.04em;
}

.company-intro h2 span,
.company-values h2 span,
.company-approach h2 span,
.company-tech h2 span,
.company-careers h2 span,
.company-cta h2 span {
    color: var(--c-primary);
}


/* =========================================================
   INTRO
   ========================================================= */

.company-intro {
    padding: 105px 0 80px;
}

.company-intro p {
    margin: 0;
    color: var(--c-text-light);
    font-size: .92rem;
    line-height: 1.85;
}

.company-intro p + p {
    margin-top: 16px;
}


/* =========================================================
   VALUES
   ========================================================= */

.company-values {
    padding: 20px 0 120px;
}

.company-values-header {
    margin-bottom: 40px;
}

.company-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--c-border);
    border-left: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.company-value-card {
    position: relative;
    min-height: 330px;
    padding: 30px;
    background: var(--c-white);
    border-right: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.company-value-card:hover {
    background: var(--c-offwhite);
    transform: translateY(-7px);
    box-shadow: var(--shadow-md);
}

.company-value-number {
    display: block;
    margin-bottom: 45px;
    color: var(--c-text-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.company-value-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(19,164,144,.2);
    border-radius: var(--radius-sm);
    background: rgba(19,164,144,.06);
    color: var(--c-primary);
    transition: transform .3s ease;
}

.company-value-card:hover .company-value-icon {
    transform: rotate(-5deg) scale(1.05);
}

.company-value-card h3 {
    margin: 0 0 12px;
    color: var(--c-dark);
    font-family: var(--f-display);
    font-size: 1.2rem;
    font-weight: 700;
}

.company-value-card p {
    margin: 0;
    color: var(--c-text-light);
    font-size: .84rem;
    line-height: 1.75;
}

.company-card-arrow {
    position: absolute;
    right: 25px;
    bottom: 25px;
    opacity: .4;
    transition: all .3s ease;
}

.company-value-card:hover .company-card-arrow {
    opacity: 1;
    transform: translate(3px,-3px);
}


/* =========================================================
   APPROACH
   ========================================================= */

.company-approach {
    padding-bottom: 120px;
}

.company-approach-box {
    position: relative;
    padding: 75px;
    background: var(--c-offwhite);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.company-approach-box::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    right: -150px;
    bottom: -170px;
    border-radius: 50%;
    background: rgba(19,164,144,.07);
}

.company-approach-box .row {
    position: relative;
    z-index: 2;
}

.company-approach p,
.company-tech p,
.company-careers p {
    max-width: 580px;
    margin: 24px 0 0;
    color: var(--c-text-light);
    font-size: .9rem;
    line-height: 1.8;
}

.company-process {
    border-top: 1px solid var(--c-border);
}

.company-process-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 15px;
    padding: 19px 0;
    border-bottom: 1px solid var(--c-border);
    transition: transform .3s ease;
}

.company-process-item:hover {
    transform: translateX(5px);
}

.company-process-item > span {
    color: var(--c-primary);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    transition: all .3s ease;
}

.company-process-item:hover > span {
    transform: scale(1.08);
}

.company-process-item h4 {
    margin: 0 0 5px;
    color: var(--c-dark);
    font-size: .95rem;
}

.company-process-item p {
    margin: 0;
    font-size: .78rem;
}


/* =========================================================
   TECHNOLOGY
   ========================================================= */

.company-tech {
    padding: 0 0 120px;
}

.company-tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.company-tech-list span {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-offwhite);
    color: var(--c-dark);
    font-size: .75rem;
    font-weight: 600;
    transition: all .3s ease;
}

.company-tech-list span:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    transform: translateX(5px);
}

.company-tech-list span i {
    transition: transform .3s ease;
}

.company-tech-list span:hover i {
    transform: scale(1.1);
}

.company-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.company-text-link i {
    transition: transform .3s ease;
}

.company-text-link:hover i {
    transform: translateX(5px);
}


/* =========================================================
   CAREERS
   ========================================================= */

.company-careers {
    padding-bottom: 30px;
}

.company-careers-box {
    padding: 65px 75px;
    background: var(--c-offwhite);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.company-careers h2 {
    margin-bottom: 0;
}

.company-careers-button,
.company-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 16px 23px;
    background: var(--c-primary);
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-sm);
    color: var(--c-white);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}

.company-careers-button:hover,
.company-cta-button:hover {
    background: var(--c-lime);
    border-color: var(--c-lime);
    color: var(--c-white);
    transform: translateY(-2px);
}

.company-careers-button i,
.company-cta-button i {
    transition: var(--transition);
}

.company-careers-button:hover i,
.company-cta-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.company-cta {
    position: relative;
    padding: 80px 0 110px;
    overflow: hidden;
}

.company-cta-box {
    position: relative;
    padding: 75px 30px;
    text-align: center;
    background: var(--c-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.company-cta-box::before {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    top: -240px;
    right: -80px;
    border-radius: 50%;
    background: rgba(19,164,144,.15);
}

.company-cta-box .company-section-eyebrow,
.company-cta-box h2,
.company-cta-box p,
.company-cta-box a {
    position: relative;
    z-index: 2;
}

.company-cta-box .company-section-eyebrow {
    color: var(--c-lime);
}

.company-cta-box .company-section-eyebrow::before {
    background: var(--c-lime);
}

.company-cta h2 {
    color: var(--c-white);
    margin-bottom: 18px;
}

.company-cta h2 span {
    color: var(--c-lime);
}

.company-cta p {
    max-width: 560px;
    margin: auto auto 28px;
    color: rgba(255,255,255,.58);
    font-size: .9rem;
    line-height: 1.8;
}


/* =========================================================
   HERO IMAGE - PREMIUM
   ========================================================= */

.company-hero-visual {
    position: relative;
    padding: 10px;
}

.company-hero-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 20px;

    background: #101828;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .28),
        0 8px 20px rgba(0, 0, 0, .14);

    transition:
        box-shadow .45s ease,
        transform .45s ease;
}

.company-hero-image {
    display: block;
    width: 100%;
    height: 520px;

    object-fit: cover;
    object-position: center;

    border-radius: 20px;

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1),
        filter .5s ease;
}

.company-hero-image-wrap:hover {
    transform: translateY(-4px);

    box-shadow:
        0 35px 80px rgba(0, 0, 0, .34),
        0 12px 30px rgba(0, 0, 0, .16);
}

.company-hero-image-wrap:hover .company-hero-image {
    transform: scale(1.035);
    filter: brightness(.88);
}


/* IMAGE OVERLAY */

.company-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(0, 0, 0, .04),
            rgba(0, 0, 0, .28)
        );

    pointer-events: none;
}


/* IMAGE GRID */

.company-image-grid {
    position: absolute;
    inset: 0;

    opacity: .10;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.45) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.45) 1px,
            transparent 1px
        );

    background-size: 45px 45px;
}


/* =========================================================
   HERO BADGE
   ========================================================= */

.company-hero-badge {
    position: absolute;
    left: -15px;
    bottom: 25px;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 15px 20px;

    background: rgba(255,255,255,.97);

    border: 1px solid rgba(0,0,0,.05);

    box-shadow:
        0 18px 45px rgba(0,0,0,.18);

    backdrop-filter: blur(10px);
}

.company-badge-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #101828;
    color: #fff;
}

.company-hero-badge strong,
.company-hero-badge small {
    display: block;
}

.company-hero-badge strong {
    font-size: 13px;
    line-height: 1.3;
}

.company-hero-badge small {
    margin-top: 4px;
    font-size: 11px;
    opacity: .6;
}


/* =========================================================
   HERO DECORATION
   ========================================================= */

.company-hero-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.company-hero-shape-one {
    width: 360px;
    height: 360px;
    right: -180px;
    top: -160px;
    background: rgba(2,45,82,.05);
}

.company-hero-shape-two {
    width: 180px;
    height: 180px;
    left: -90px;
    bottom: -80px;
    background: rgba(2,45,82,.04);
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.company-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.company-primary-button,
.company-secondary-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: all .3s ease;
}

.company-primary-button i,
.company-secondary-button i {
    transition: transform .3s ease;
}

.company-primary-button:hover i,
.company-secondary-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   INTRO DETAIL
   ========================================================= */

.company-intro-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
}

.company-intro-line span {
    width: 38px;
    height: 2px;
    display: block;
    background: var(--c-primary);
}

.company-intro-line strong {
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: .65;
}


/* =========================================================
   FINAL CTA DECORATIONS
   ========================================================= */

.company-cta-decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.company-cta-decoration-one {
    width: 300px;
    height: 300px;
    right: -150px;
    top: -150px;
    border: 1px solid rgba(255,255,255,.08);
}

.company-cta-decoration-two {
    width: 180px;
    height: 180px;
    left: -90px;
    bottom: -90px;
    border: 1px solid rgba(255,255,255,.06);
}

.company-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.company-cta-button i {
    transition: transform .3s ease;
}

.company-cta-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {

    .company-hero {
        padding: 155px 0 100px;
    }

    .company-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .company-approach-box,
    .company-careers-box {
        padding: 60px 55px;
    }
}


@media (max-width: 991px) {

    .company-hero {
        min-height: 400px;
        padding: 145px 0 90px;
    }

    .company-hero-image {
        height: 450px;
    }

    .company-hero-badge {
        left: 15px;
    }

    .company-intro {
        padding: 85px 0 65px;
    }

    .company-intro p {
        margin-top: 28px;
    }

    .company-values {
        padding-bottom: 90px;
    }

    .company-values-header {
        display: block;
    }

    .company-values-intro {
        margin-top: 20px;
    }

    .company-approach {
        padding-bottom: 90px;
    }

    .company-approach-box {
        padding: 55px 45px;
    }

    .company-process {
        margin-top: 45px;
    }

    .company-tech {
        padding-bottom: 90px;
    }

    .company-careers-box {
        padding: 55px 45px;
    }

    .company-careers-button {
        margin-top: 30px;
    }

}


@media (max-width: 767px) {

    .company-hero {
        min-height: 350px;
        padding: 130px 0 75px;
    }

    .company-title {
        font-size: clamp(2.2rem, 11vw, 3.2rem);
    }

    .company-title span {
        display: inline;
    }

    .company-hero-description {
        font-size: .88rem;
    }

    .company-hero-visual {
        padding: 5px;
        margin-top: 30px;
    }

    .company-hero-image {
        height: 360px;
        border-radius: 16px;
    }

    .company-hero-image-wrap {
        border-radius: 16px;
    }

    .company-hero-badge {
        left: 10px;
        bottom: 15px;
    }

    .company-hero-actions {
        width: 100%;
    }

    .company-primary-button,
    .company-secondary-button {
        width: 100%;
        justify-content: center;
    }

    .company-intro {
        padding: 65px 0 50px;
    }

    .company-intro h2,
    .company-values h2,
    .company-approach h2,
    .company-tech h2,
    .company-careers h2,
    .company-cta h2 {
        font-size: 2rem;
    }

    .company-values {
        padding-bottom: 75px;
    }

    .company-values-grid {
        grid-template-columns: 1fr;
        border-radius: var(--radius-md);
    }

    .company-value-card {
        min-height: 290px;
        padding: 27px;
    }

    .company-approach {
        padding-bottom: 75px;
    }

    .company-approach-box,
    .company-careers-box {
        padding: 45px 25px;
        border-radius: var(--radius-md);
    }

    .company-tech {
        padding-bottom: 75px;
    }

    .company-tech-list {
        margin-top: 35px;
    }

    .company-careers-button {
        width: 100%;
        margin-top: 28px;
    }

    .company-cta {
        padding: 50px 0 65px;
    }

    .company-cta-box {
        padding: 50px 20px;
        border-radius: var(--radius-md);
    }

    .company-cta-button {
        width: 100%;
    }
}


@media (max-width: 480px) {

    .company-hero {
        padding-top: 115px;
        padding-bottom: 65px;
    }

    .company-title {
        font-size: clamp(2rem, 11vw, 2.8rem);
    }

    .company-intro h2,
    .company-values h2,
    .company-approach h2,
    .company-tech h2,
    .company-careers h2,
    .company-cta h2 {
        font-size: 1.85rem;
    }

    .company-approach-box,
    .company-careers-box {
        padding: 40px 20px;
    }

    .company-cta-box {
        padding: 45px 18px;
    }

    .company-hero-image {
        height: 320px;
    }

    .company-hero-badge {
        padding: 12px 15px;
    }

}

/* =========================================================
   SERVICE DETAIL PAGE
   ========================================================= */

.sd-page {
    color: var(--c-dark);
    background: var(--c-white);
    overflow: hidden;
}

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

.sd-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   COMMON
   ========================================================= */

.sd-section-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 17px;

    color: var(--c-primary);

    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.sd-section-label::before {
    content: '';

    width: 27px;
    height: 2px;

    background: var(--c-primary);
}

.sd-small-heading {
    display: block;

    margin-bottom: 13px;

    color: var(--c-primary);

    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}


/* =========================================================
   HERO
   ========================================================= */

.sd-hero {
    position: relative;

    padding: 145px 0 105px;

    background: var(--c-offwhite);

    overflow: hidden;
}

.sd-hero::before {
    content: '';

    position: absolute;

    width: 520px;
    height: 520px;

    top: -260px;
    right: -180px;

    border-radius: 50%;

    background: rgba(19,164,144,.06);

    pointer-events: none;
}

.sd-hero::after {
    content: '';

    position: absolute;

    width: 300px;
    height: 300px;

    left: -160px;
    bottom: -160px;

    border-radius: 50%;

    background: rgba(2,45,82,.04);

    pointer-events: none;
}

.sd-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1fr .9fr;

    gap: 75px;

    align-items: center;
}

.sd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 23px;

    color: var(--c-primary);

    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.sd-eyebrow span {
    width: 30px;
    height: 2px;

    background: var(--c-primary);
}

.sd-hero-content h1 {
    max-width: 680px;

    margin: 0 0 25px;

    color: var(--c-dark);

    font-size: clamp(3rem, 5.5vw, 5rem);
    line-height: .98;

    letter-spacing: -.055em;
}

.sd-hero-content h1 em {
    display: block;

    color: var(--c-primary);

    font-style: normal;
}

.sd-hero-text {
    max-width: 620px;

    margin: 0;

    color: rgba(16,24,40,.62);

    font-size: .94rem;
    line-height: 1.85;
}

.sd-hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}

.sd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    min-height: 51px;

    padding: 15px 22px;

    border-radius: var(--radius-sm);

    font-size: .7rem;
    font-weight: 700;

    letter-spacing: .07em;
    text-transform: uppercase;

    text-decoration: none;

    transition: var(--transition);
}

.sd-btn i {
    transition: var(--transition);
}

.sd-btn-primary {
    color: var(--c-white);

    background: var(--c-primary);
    border: 1px solid var(--c-primary);

    box-shadow: 0 15px 30px rgba(19,164,144,.18);
}

.sd-btn-primary:hover {
    color: var(--c-white);

    background: var(--c-lime);
    border-color: var(--c-lime);

    transform: translateY(-2px);
}

.sd-btn-primary:hover i {
    transform: translateX(4px);
}

.sd-btn-secondary {
    color: var(--c-dark);

    background: var(--c-white);
    border: 1px solid var(--c-border);
}

.sd-btn-secondary:hover {
    color: var(--c-primary);

    border-color: var(--c-primary);

    transform: translateY(-2px);
}

.sd-btn-secondary:hover i {
    transform: translateY(3px);
}

.sd-hero-meta {
    display: flex;
    align-items: center;
    gap: 38px;

    margin-top: 48px;
    padding-top: 23px;

    border-top: 1px solid var(--c-border);
}

.sd-hero-meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-hero-meta strong {
    color: var(--c-primary);

    font-size: 1rem;
}

.sd-hero-meta span {
    color: rgba(16,24,40,.52);

    font-size: .62rem;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.sd-hero-media {
    position: relative;

    padding: 10px;
}

.sd-hero-image-wrap {
    position: relative;

    overflow: hidden;

    background: var(--c-dark);

    border-radius: var(--radius-lg);

    box-shadow:
        0 28px 65px rgba(0,0,0,.22),
        0 8px 20px rgba(0,0,0,.12);

    transition: var(--transition);
}

.sd-hero-image-wrap:hover {
    transform: translateY(-4px);

    box-shadow:
        0 35px 75px rgba(0,0,0,.27),
        0 12px 25px rgba(0,0,0,.14);
}

.sd-hero-image-wrap img {
    display: block;

    width: 100%;
    height: 540px;

    object-fit: cover;
    object-position: center;

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1),
        filter .5s ease;
}

.sd-hero-image-wrap:hover img {
    transform: scale(1.04);

    filter: brightness(.88);
}

.sd-hero-badge {
    position: absolute;

    left: -18px;
    bottom: 35px;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 14px 18px;

    background: rgba(255,255,255,.97);

    border: 1px solid rgba(0,0,0,.05);

    box-shadow: 0 18px 45px rgba(0,0,0,.17);

    backdrop-filter: blur(10px);
}

.sd-badge-icon {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--c-white);

    background: var(--c-primary);

    border-radius: var(--radius-sm);
}

.sd-hero-badge strong,
.sd-hero-badge span {
    display: block;
}

.sd-hero-badge strong {
    color: var(--c-dark);

    font-size: .73rem;
    line-height: 1.3;
}

.sd-hero-badge span {
    margin-top: 4px;

    color: rgba(16,24,40,.55);

    font-size: .62rem;
}

.sd-hero-number {
    position: absolute;

    top: 35px;
    right: -15px;

    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 14px 17px;

    color: var(--c-white);

    background: var(--c-dark);

    border-radius: var(--radius-sm);

    box-shadow: 0 18px 35px rgba(0,0,0,.18);
}

.sd-hero-number span {
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.sd-hero-number strong {
    margin-top: 3px;

    color: var(--c-lime);

    font-size: 1.3rem;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.sd-overview {
    padding: 110px 0;

    background: var(--c-white);
}

.sd-overview-heading {
    max-width: 800px;

    margin-bottom: 60px;
}

.sd-overview-heading h2,
.sd-offerings-heading h2,
.sd-benefits-content h2,
.sd-tech-heading h2,
.sd-why-content h2,
.sd-faq-intro h2 {
    margin: 0 0 18px;

    color: var(--c-dark);

    font-size: clamp(2.3rem, 4vw, 3.5rem);

    line-height: 1.05;

    letter-spacing: -.045em;
}

.sd-overview-heading h2 span,
.sd-offerings-heading h2 span,
.sd-benefits-content h2 span,
.sd-tech-heading h2 span,
.sd-why-content h2 span,
.sd-faq-intro h2 span {
    color: var(--c-primary);
}

.sd-overview-heading > p {
    max-width: 680px;

    margin: 0;

    color: rgba(16,24,40,.57);

    font-size: .88rem;
    line-height: 1.85;
}

.sd-overview-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: start;
}

.sd-overview-main {
    padding-right: 30px;
}

.sd-overview-main h3 {
    max-width: 570px;

    margin: 0 0 20px;

    color: var(--c-dark);

    font-size: 2rem;

    line-height: 1.18;

    letter-spacing: -.035em;
}

.sd-overview-main p {
    max-width: 580px;

    margin: 0 0 16px;

    color: rgba(16,24,40,.56);

    font-size: .82rem;

    line-height: 1.85;
}

.sd-overview-points {
    border-top: 1px solid var(--c-border);
}

.sd-overview-point {
    display: grid;

    grid-template-columns: 45px 1fr;

    gap: 18px;

    padding: 24px 0;

    border-bottom: 1px solid var(--c-border);
}

.sd-overview-point > span {
    color: var(--c-primary);

    font-size: .65rem;
    font-weight: 800;
}

.sd-overview-point h4 {
    margin: 0 0 7px;

    color: var(--c-dark);

    font-size: .92rem;
}

.sd-overview-point p {
    margin: 0;

    color: rgba(16,24,40,.53);

    font-size: .7rem;

    line-height: 1.75;
}


/* =========================================================
   OFFERINGS
   ========================================================= */

.sd-offerings {
    padding: 110px 0;

    background: var(--c-offwhite);
}

.sd-offerings-heading {
    display: grid;

    grid-template-columns: 1fr .55fr;

    gap: 70px;

    align-items: end;

    margin-bottom: 50px;
}

.sd-offerings-heading > p {
    margin: 0 0 5px;

    color: rgba(16,24,40,.56);

    font-size: .84rem;

    line-height: 1.8;
}

.sd-offerings-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 17px;
}

.sd-offering-card {
    position: relative;

    min-height: 350px;

    padding: 30px;

    background: var(--c-white);

    border: 1px solid var(--c-border);

    border-radius: var(--radius-md);

    transition: var(--transition);
}

.sd-offering-card:hover {
    transform: translateY(-6px);

    border-color: rgba(19,164,144,.35);

    box-shadow: 0 25px 55px rgba(0,0,0,.08);
}

.sd-offering-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 23px;

    color: var(--c-primary);

    background: rgba(19,164,144,.08);

    border-radius: var(--radius-sm);

    font-size: 1rem;

    transition: var(--transition);
}

.sd-offering-card:hover .sd-offering-icon {
    color: var(--c-white);

    background: var(--c-lime);
}

.sd-offering-number {
    position: absolute;

    top: 30px;
    right: 30px;

    color: rgba(16,24,40,.20);

    font-size: .65rem;

    font-weight: 800;
}

.sd-offering-card h3 {
    margin: 0 0 11px;

    color: var(--c-dark);

    font-size: 1.08rem;
}

.sd-offering-card > p {
    margin: 0 0 23px;

    color: rgba(16,24,40,.55);

    font-size: .72rem;

    line-height: 1.75;
}

.sd-offering-card ul {
    display: grid;

    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.sd-offering-card li {
    position: relative;

    padding-left: 16px;

    color: rgba(16,24,40,.70);

    font-size: .63rem;

    font-weight: 700;
}

.sd-offering-card li::before {
    content: '';

    position: absolute;

    left: 0;
    top: 6px;

    width: 5px;
    height: 5px;

    background: var(--c-primary);

    border-radius: 50%;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.sd-benefits {
    padding: 110px 0;

    background: var(--c-white);
}

.sd-benefits-grid {
    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 85px;

    align-items: center;
}

.sd-benefits-content > p {
    max-width: 520px;

    margin: 0;

    color: rgba(16,24,40,.56);

    font-size: .84rem;

    line-height: 1.85;
}

.sd-text-button {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-top: 28px;

    color: var(--c-primary);

    font-size: .68rem;

    font-weight: 800;

    text-decoration: none;
}

.sd-text-button i {
    transition: var(--transition);
}

.sd-text-button:hover {
    color: var(--c-dark);
}

.sd-text-button:hover i {
    transform: translateX(5px);
}

.sd-benefits-list {
    border-top: 1px solid var(--c-border);
}

.sd-benefit {
    display: grid;

    grid-template-columns: 45px 1fr;

    gap: 18px;

    padding: 25px 0;

    border-bottom: 1px solid var(--c-border);
}

.sd-benefit > span {
    color: var(--c-primary);

    font-size: .65rem;

    font-weight: 800;
}

.sd-benefit h3 {
    margin: 0 0 7px;

    color: var(--c-dark);

    font-size: .95rem;
}

.sd-benefit p {
    max-width: 550px;

    margin: 0;

    color: rgba(16,24,40,.53);

    font-size: .7rem;

    line-height: 1.75;
}


/* =========================================================
   TECHNOLOGY
   ========================================================= */

.sd-tech {
    padding: 100px 0;

    background: var(--c-offwhite);
}

.sd-tech-heading {
    max-width: 720px;

    margin-bottom: 45px;
}

.sd-tech-heading p {
    max-width: 600px;

    margin: 0;

    color: rgba(16,24,40,.56);

    font-size: .82rem;

    line-height: 1.8;
}

.sd-tech-grid {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 12px;
}

.sd-tech-item {
    min-height: 120px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 13px;

    background: var(--c-white);

    border: 1px solid var(--c-border);

    border-radius: var(--radius-md);

    transition: var(--transition);
}

.sd-tech-item:hover {
    transform: translateY(-4px);

    border-color: rgba(19,164,144,.3);

    box-shadow: 0 15px 35px rgba(0,0,0,.06);
}

.sd-tech-item i {
    color: var(--c-primary);

    font-size: 1.5rem;
}

.sd-tech-item span {
    color: var(--c-dark);

    font-size: .62rem;

    font-weight: 800;

    text-align: center;
}


/* =========================================================
   PROCESS
   ========================================================= */

.sd-process {
    padding: 105px 0;

    background: var(--c-dark);
}

.sd-process-heading {
    max-width: 700px;

    margin-bottom: 55px;
}

.sd-process-heading .sd-section-label {
    color: var(--c-lime);
}

.sd-process-heading .sd-section-label::before {
    background: var(--c-lime);
}

.sd-process-heading h2 {
    margin: 0;

    color: var(--c-white);

    font-size: clamp(2.3rem, 4vw, 3.5rem);

    line-height: 1.05;

    letter-spacing: -.045em;
}

.sd-process-heading h2 span {
    color: var(--c-lime);
}

.sd-process-grid {
    display: grid;

    grid-template-columns:
        1fr 35px
        1fr 35px
        1fr 35px
        1fr;

    align-items: center;
}

.sd-process-item {
    padding: 20px;
}

.sd-process-item > span {
    color: var(--c-lime);

    font-size: .62rem;

    font-weight: 800;

    letter-spacing: .1em;
}

.sd-process-item i {
    display: block;

    margin: 22px 0;

    color: var(--c-white);

    font-size: 1.25rem;
}

.sd-process-item h3 {
    margin: 0 0 9px;

    color: var(--c-white);

    font-size: 1rem;
}

.sd-process-item p {
    margin: 0;

    color: rgba(255,255,255,.48);

    font-size: .69rem;

    line-height: 1.75;
}

.sd-process-line {
    height: 1px;

    background: rgba(255,255,255,.12);
}


/* =========================================================
   WHY CHOOSE US
   ========================================================= */

.sd-why {
    padding: 110px 0;

    background: var(--c-white);
}

.sd-why-grid {
    display: grid;

    grid-template-columns: .9fr 1fr;

    gap: 85px;

    align-items: center;
}

.sd-why-image {
    height: 570px;

    overflow: hidden;

    border-radius: var(--radius-lg);

    box-shadow: 0 25px 55px rgba(0,0,0,.13);
}

.sd-why-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}

.sd-why-image:hover img {
    transform: scale(1.035);
}

.sd-why-content > p {
    max-width: 570px;

    margin: 0;

    color: rgba(16,24,40,.57);

    font-size: .84rem;

    line-height: 1.8;
}

.sd-reasons {
    margin-top: 35px;
}

.sd-reason {
    display: grid;

    grid-template-columns: 43px 1fr;

    gap: 17px;

    padding: 22px 0;

    border-bottom: 1px solid var(--c-border);
}

.sd-reason:first-child {
    border-top: 1px solid var(--c-border);
}

.sd-reason > span {
    color: var(--c-primary);

    font-size: .64rem;

    font-weight: 800;
}

.sd-reason h3 {
    margin: 0 0 6px;

    color: var(--c-dark);

    font-size: .9rem;
}

.sd-reason p {
    margin: 0;

    color: rgba(16,24,40,.53);

    font-size: .7rem;

    line-height: 1.7;
}


/* =========================================================
   CTA
   ========================================================= */

.sd-cta {
    padding: 85px 0 100px;

    background: var(--c-white);
}

.sd-cta-box {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    padding: 65px;

    overflow: hidden;

    background: var(--c-dark);

    border-radius: var(--radius-lg);
}

.sd-cta-box::before {
    content: '';

    position: absolute;

    width: 390px;
    height: 390px;

    top: -250px;
    right: -90px;

    border-radius: 50%;

    background: rgba(19,164,144,.15);
}

.sd-cta-box::after {
    content: '';

    position: absolute;

    width: 210px;
    height: 210px;

    left: -105px;
    bottom: -105px;

    border: 1px solid rgba(255,255,255,.07);

    border-radius: 50%;
}

.sd-cta-content,
.sd-cta-box > a {
    position: relative;

    z-index: 2;
}

.sd-cta-label {
    margin-bottom: 13px;

    color: var(--c-lime);

    font-size: .62rem;

    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;
}

.sd-cta-content h2 {
    max-width: 650px;

    margin: 0 0 14px;

    color: var(--c-white);

    font-size: clamp(2.2rem, 4vw, 3.4rem);

    line-height: 1.04;

    letter-spacing: -.045em;
}

.sd-cta-content h2 span {
    color: var(--c-lime);
}

.sd-cta-content p {
    max-width: 580px;

    margin: 0;

    color: rgba(255,255,255,.52);

    font-size: .78rem;

    line-height: 1.8;
}

.sd-btn-white {
    flex-shrink: 0;

    color: var(--c-dark);

    background: var(--c-white);

    border: 1px solid var(--c-white);
}

.sd-btn-white:hover {
    color: var(--c-white);

    background: var(--c-lime);

    border-color: var(--c-lime);

    transform: translateY(-2px);
}

.sd-btn-white:hover i {
    transform: translateX(5px);
}


/* =========================================================
   FAQ
   ========================================================= */

.sd-faq {
    padding: 105px 0;

    background: var(--c-offwhite);
}

.sd-faq-grid {
    display: grid;

    grid-template-columns: .72fr 1.28fr;

    gap: 90px;
}

.sd-faq-intro p {
    max-width: 390px;

    margin: 0;

    color: rgba(16,24,40,.55);

    font-size: .8rem;

    line-height: 1.8;
}

.sd-faq-contact {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 26px;

    color: var(--c-primary);

    font-size: .65rem;

    font-weight: 800;

    text-decoration: none;
}

.sd-faq-contact i {
    transition: var(--transition);
}

.sd-faq-contact:hover {
    color: var(--c-dark);
}

.sd-faq-contact:hover i {
    transform: translateX(5px);
}

.sd-faq-list details {
    margin-bottom: 10px;

    background: var(--c-white);

    border: 1px solid var(--c-border);

    border-radius: var(--radius-sm);

    overflow: hidden;

    transition: var(--transition);
}

.sd-faq-list details:hover {
    border-color: rgba(19,164,144,.28);
}

.sd-faq-list summary {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 20px 22px;

    color: var(--c-dark);

    font-size: .74rem;

    font-weight: 700;

    cursor: pointer;

    list-style: none;
}

.sd-faq-list summary::-webkit-details-marker {
    display: none;
}

.sd-faq-list summary span {
    flex-shrink: 0;

    color: var(--c-primary);

    font-size: 1.3rem;

    font-weight: 400;

    transition: var(--transition);
}

.sd-faq-list details[open] summary span {
    color: var(--c-dark);

    transform: rotate(45deg);
}

.sd-faq-list details p {
    margin: 0;

    padding: 0 22px 21px;

    color: rgba(16,24,40,.54);

    font-size: .7rem;

    line-height: 1.8;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199px) {

    .sd-hero {
        padding: 135px 0 95px;
    }

    .sd-hero-grid {
        gap: 55px;
    }

    .sd-hero-image-wrap img {
        height: 500px;
    }

    .sd-overview-grid,
    .sd-benefits-grid,
    .sd-why-grid {
        gap: 60px;
    }

    .sd-offerings-heading {
        gap: 50px;
    }

    .sd-cta-box {
        padding: 55px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 991px) {

    .sd-hero {
        padding: 125px 0 85px;
    }

    .sd-hero-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .sd-hero-content h1 {
        max-width: 760px;
    }

    .sd-hero-image-wrap img {
        height: 480px;
    }

    .sd-hero-badge {
        left: 15px;
    }

    .sd-hero-number {
        right: 10px;
    }


    .sd-overview,
    .sd-offerings,
    .sd-benefits,
    .sd-tech,
    .sd-why,
    .sd-faq {
        padding: 85px 0;
    }


    .sd-overview-grid,
    .sd-benefits-grid,
    .sd-why-grid {
        grid-template-columns: 1fr;
    }


    .sd-overview-main {
        padding-right: 0;
    }


    .sd-offerings-heading {
        display: block;
    }

    .sd-offerings-heading > p {
        max-width: 620px;

        margin-top: 20px;
    }


    .sd-offerings-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .sd-tech-grid {
        grid-template-columns: repeat(3, 1fr);
    }


    .sd-process-grid {
        grid-template-columns:
            1fr 25px
            1fr 25px
            1fr 25px
            1fr;
    }


    .sd-why-image {
        height: 500px;
    }


    .sd-faq-grid {
        gap: 55px;
    }


    .sd-cta-box {
        padding: 50px 45px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sd-container {
        width: min(100% - 30px, 1180px);
    }


    .sd-hero {
        padding: 110px 0 70px;
    }


    .sd-hero-content h1 {
        font-size: clamp(2.4rem, 11vw, 3.5rem);
    }


    .sd-hero-text {
        font-size: .82rem;
    }


    .sd-hero-buttons {
        width: 100%;
    }


    .sd-btn {
        width: 100%;
    }


    .sd-hero-image-wrap img {
        height: 390px;
    }


    .sd-hero-meta {
        gap: 23px;
    }


    .sd-overview,
    .sd-offerings,
    .sd-benefits,
    .sd-tech,
    .sd-why,
    .sd-faq {
        padding: 70px 0;
    }


    .sd-overview-heading h2,
    .sd-offerings-heading h2,
    .sd-benefits-content h2,
    .sd-tech-heading h2,
    .sd-why-content h2,
    .sd-faq-intro h2 {
        font-size: 2.05rem;
    }


    .sd-overview-main h3 {
        font-size: 1.65rem;
    }


    .sd-offerings-grid {
        grid-template-columns: 1fr;
    }


    .sd-offering-card {
        min-height: auto;
    }


    .sd-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .sd-tech-item {
        min-height: 105px;
    }


    .sd-process {
        padding: 75px 0;
    }


    .sd-process-grid {
        display: block;
    }


    .sd-process-item {
        padding: 20px 0;
    }


    .sd-process-line {
        width: 100%;

        margin: 5px 0;
    }


    .sd-why-image {
        height: 400px;
    }


    .sd-cta {
        padding: 55px 0 70px;
    }


    .sd-cta-box {
        flex-direction: column;

        align-items: flex-start;

        padding: 45px 25px;

        border-radius: var(--radius-md);
    }


    .sd-cta-box .sd-btn {
        width: 100%;
    }


    .sd-faq-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .sd-hero {
        padding: 100px 0 60px;
    }


    .sd-hero-content h1 {
        font-size: 2.25rem;
    }


    .sd-hero-image-wrap img {
        height: 325px;
    }


    .sd-hero-badge {
        left: 8px;
        bottom: 12px;

        padding: 11px 13px;
    }


    .sd-badge-icon {
        width: 38px;
        height: 38px;
    }


    .sd-hero-number {
        top: 15px;
        right: 8px;

        padding: 11px 13px;
    }


    .sd-hero-meta {
        gap: 17px;
    }


    .sd-hero-meta strong {
        font-size: .9rem;
    }


    .sd-hero-meta span {
        font-size: .54rem;
    }


    .sd-overview-heading h2,
    .sd-offerings-heading h2,
    .sd-benefits-content h2,
    .sd-tech-heading h2,
    .sd-why-content h2,
    .sd-faq-intro h2 {
        font-size: 1.85rem;
    }


    .sd-overview-main h3 {
        font-size: 1.45rem;
    }


    .sd-tech-grid {
        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }


    .sd-tech-item {
        min-height: 95px;
    }


    .sd-tech-item i {
        font-size: 1.25rem;
    }


    .sd-tech-item span {
        font-size: .57rem;
    }


    .sd-why-image {
        height: 330px;
    }


    .sd-cta-box {
        padding: 40px 20px;
    }


    .sd-faq-list summary {
        padding: 17px;
    }


    .sd-faq-list details p {
        padding: 0 17px 18px;
    }

}