*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
	/* NOTE: no overflow-x here — it breaks position:sticky (e.g. .lg-side TOC).
	Horizontal clipping is handled on body below. */
}
body {
	font-family:
		"Inter",
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	-webkit-font-smoothing: antialiased;
	background: #f7f5f1;
	color: #1c2b3a;
	overflow-x: hidden;
	line-height: 1.6;
}
.jk {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
}
:root {
	--t: #0d6e70;
	--tl: #1a9698;
	--ts: rgba(13, 110, 112, 0.08);
	--tb: rgba(13, 110, 112, 0.2);
	--n: #182638;
	--nd: #0e1b2a;
	--a: #e5a227;
	--as: rgba(229, 162, 39, 0.1);
	--w: #f7f5f1;
	--wh: #fff;
	--mu: #6a7a8a;
	--br: #e6e3de;
	--r: 20px;
	--rs: 12px;
}
.wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 48px;
}
.sec {
	padding: 108px 0;
}


*,
*::before,
*::after {
    box-sizing: border-box;
} 
.restable {overflow-x:auto; overflow-y:hidden;}
@media (max-width: 768px) {
	.wrap {
		padding: 0 22px;
	}
	html,
body {
    overflow-x: hidden;
} 
	.sec {
		padding: 72px 0;
	}
}
.g2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
}
.g3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.g4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
@media (max-width: 1024px) {
	.g4 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 768px) {
	.g2,
	.g3 {
		grid-template-columns: 1fr !important;
	}
	.g4 {
		grid-template-columns: 1fr 1fr;
	}
	.pc-table th, .pc-table td {
    padding: 14px 7px;
}
}

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

/* NAV */
#nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 500;
	transition:
		background 0.4s,
		box-shadow 0.4s;
}
#nav.sc {
	background: rgba(247, 245, 241, 0.93);
	backdrop-filter: saturate(200%) blur(24px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
}
.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0;
	transition: padding 0.4s;
}
#nav.sc .nav-inner {
	padding: 14px 0;
}
.nl {
	font-size: 14px;
	font-weight: 500;
	color: var(--n);
	text-decoration: none;
	position: relative;
	padding-bottom: 2px;
	transition: color 0.2s;
}
.nl::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--t);
	border-radius: 2px;
	transition: width 0.25s;
}
.nl:hover,
.nl.on {
	color: var(--t);
}
.nl:hover::after,
.nl.on::after {
	width: 100%;
}

/* MOBILE MENU */
#mm {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 600;
	background: rgba(247, 245, 241, 0.97);
	backdrop-filter: blur(24px);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}
#mm.op {
	display: flex;
}
.ml {
	font-size: 20px;
	font-weight: 900;
	color: var(--n);
	text-decoration: none;
	font-family: "Plus Jakarta Sans", sans-serif;
	padding: 8px 0;
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.35s,
		transform 0.35s,
		color 0.2s;
}
#mm.op .ml {
	opacity: 1;
	transform: none;
}
#mm.op .ml:nth-child(2) {
	transition-delay: 0.05s;
}
#mm.op .ml:nth-child(3) {
	transition-delay: 0.1s;
}
#mm.op .ml:nth-child(4) {
	transition-delay: 0.15s;
}
#mm.op .ml:nth-child(5) {
	transition-delay: 0.2s;
}
#mm.op .ml:nth-child(6) {
	transition-delay: 0.25s;
}
#mm.op .ml:nth-child(7) {
	transition-delay: 0.3s;
}
#mm.op .ml:nth-child(8) {
	transition-delay: 0.35s;
}
.ml:hover {
	color: var(--t);
}
.hb {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	padding: 6px;
	cursor: pointer;
}
.hb span {
	display: block;
	height: 2px;
	background: var(--n);
	border-radius: 2px;
}
.hb .l1 {
	width: 22px;
}
.hb .l2 {
	width: 15px;
}
.hb .l3 {
	width: 22px;
}
@media (max-width: 960px) {
	.hb {
		display: flex;
	}

	.nl-grp,
	.nav-cta {
		display: none !important;
	}
		.mm-links{
		width: 100%;
		max-width: 95%;
		display: flex;
		gap: 0 25px;
		white-space: nowrap;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		a.ml{
			font-size: 16px;
		}
	}
	
}

/* BUTTONS */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;
	border-radius: 14px;
	transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	border: none;
	text-decoration: none;
	white-space: nowrap;
}
.bp {
	background: linear-gradient(135deg, var(--t), #0a5557);
	color: #fff;
	padding: 14px 28px;
	box-shadow: 0 4px 20px rgba(13, 110, 112, 0.28);
}
.bp:hover {
	box-shadow: 0 8px 32px rgba(13, 110, 112, 0.42);
	transform: translateY(-1px);
}
.bp:active {
	transform: scale(0.975);
}
.bg {
	background: rgba(255, 255, 255, 0.94);
	color: var(--n);
	padding: 14px 24px;
	border: 1.5px solid var(--br);
}
.bg:hover {
	border-color: var(--t);
	color: var(--t);
}
.btn-sm {
	padding: 10px 20px;
	font-size: 13px;
	border-radius: 10px;
}
.bdo {
	background: rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.14);
	padding: 12px 22px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s;
	text-decoration: none;
}
.bdo:hover {
	background: rgba(255, 255, 255, 0.13);
	border-color: rgba(255, 255, 255, 0.28);
}

/* BADGES */
.bdg {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ts);
	border: 1px solid var(--tb);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	color: #fff;
	text-transform: uppercase;
}
.bdgd {
	background: rgba(13, 110, 112, 0.18);
	border: 1px solid rgba(13, 110, 112, 0.4);
	color: #bcfff8 !;
}
.dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--t);
	position: relative;
	flex-shrink: 0;
}
.dot::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: var(--t);
	opacity: 0.4;
	animation: rpl 1.6s ease-out infinite;
}
@keyframes rpl {
	0% {
		transform: scale(1);
		opacity: 0.4;
	}
	100% {
		transform: scale(2.6);
		opacity: 0;
	}
}

/* CARDS */
.cd {
	background: var(--wh);
	border-radius: var(--r);
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.055);
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s;
}
.cd:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(13, 110, 112, 0.13);
}
.cdd {
	background: rgba(255, 255, 255, 0.048);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--r);
	transition:
		background 0.25s,
		border-color 0.25s,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cdd:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(13, 110, 112, 0.42);
	transform: translateY(-3px);
}

/* GRADIENT TEXT */
.tg {
	background: linear-gradient(135deg, var(--t), var(--tl));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.ag {
	background: linear-gradient(135deg, var(--a), #c98b1a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* CANVAS removed */

/* HERO GRID */
.hgb {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(rgba(13, 110, 112, 0.065) 1px, transparent 1px),
		linear-gradient(90deg, rgba(13, 110, 112, 0.065) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black, transparent);
}

/* ORB */
.orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
}

/* MARQUEE */
@keyframes mq {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}
.mqt {
	display: flex;
	white-space: nowrap;
	width: max-content;
	animation: mq 32s linear infinite;
}
.mqt:hover {
	animation-play-state: paused;
}
.mqi {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 30px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.54);
	flex-shrink: 0;
}
.mqs {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.24);
}

/* ANIMATIONS */
@keyframes flt {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}
.fl {
	animation: flt 6s ease-in-out infinite;
}
@keyframes flt2 {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}
.fl2 {
	animation: flt2 4s ease-in-out 1s infinite;
}
@keyframes tin {
	from {
		opacity: 0;
		transform: translateX(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.tin {
	animation: tin 0.6s ease forwards;
}

/* REVEAL */
.rv {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.rv.in {
	opacity: 1;
	transform: none;
}
.d1 {
	transition-delay: 0.08s;
}
.d2 {
	transition-delay: 0.16s;
}
.d3 {
	transition-delay: 0.24s;
}
.d4 {
	transition-delay: 0.32s;
}

/* PROGRESS BAR */
.pb {
	height: 6px;
	background: #edebe7;
	border-radius: 99px;
	overflow: hidden;
}
.pbf {
	height: 100%;
	background: linear-gradient(90deg, var(--t), var(--tl));
	border-radius: 99px;
	width: 0;
	transition: width 1.7s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}
.pbf.am {
	background: linear-gradient(90deg, var(--a), #c98b1a);
}

/* STARS */
.str {
	color: #ffd60a;
	letter-spacing: 1px;
}

/* ICON BOX */
.ib {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: var(--ts);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--t);
	flex-shrink: 0;
}
.ib.am {
	background: var(--as);
	color: var(--a);
}

/* MATERIAL ICONS */
.material-symbols-outlined {
	font-variation-settings:
		"FILL" 0,
		"wght" 400,
		"GRAD" 0,
		"opsz" 24;
	line-height: 1;
	font-size: 22px;
}

/* FAQ */
details summary {
	list-style: none;
	cursor: pointer;
	user-select: none;
}
details summary::-webkit-details-marker {
	display: none;
}
.fi {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
details[open] .fi {
	transform: rotate(45deg);
}

/* FORM */
.ff {
	width: 100%;
	background: #eeece8;
	border: 1.5px solid rgba(28, 43, 58, 0.09);
	border-radius: var(--rs);
	padding: 13px 16px;
	font-size: 15px;
	color: var(--n);
	outline: none;
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
	font-family: inherit;
}
.ff:focus {
	border-color: var(--t);
	box-shadow: 0 0 0 3px rgba(13, 110, 112, 0.1);
}
.fl3 {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--mu);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-bottom: 6px;
}

/* AGENT FEATURED */
.af {
	background: rgba(255, 255, 255, 0.065);
	border: 1.5px solid rgba(13, 110, 112, 0.48);
	border-radius: var(--r);
	box-shadow:
		0 0 0 1px rgba(13, 110, 112, 0.08),
		0 20px 60px rgba(13, 110, 112, 0.18);
	position: relative;
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s;
}
.af:hover {
	transform: translateY(-4px);
	box-shadow:
		0 0 0 1px rgba(13, 110, 112, 0.14),
		0 28px 72px rgba(13, 110, 112, 0.28);
}

/* PRICING */
.pf {
	background: linear-gradient(155deg, #0d6e70, #0a4e52);
	border-radius: var(--r);
	box-shadow: 0 24px 72px rgba(13, 110, 112, 0.38);
	position: relative;
	/* Clip the decorative ::before circle (right:-60px) so it can't push
	past the viewport and cause horizontal overflow when the pricing grid
	collapses to a single full-width column below 768px. Matches .asc. */
	overflow: hidden;
}
.pf::before {
	content: "";
	position: absolute;
	top: -60px;
	right: -60px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
}
@media (max-width: 768px) {
	.pf {
		transform: none;
	}
}

/* ABOUT STATS */
.asc {
	background: linear-gradient(145deg, #0d6e70, #0a4e52);
	border-radius: var(--r);
	padding: 44px;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.asc::after {
	content: "";
	position: absolute;
	bottom: -60px;
	right: -60px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
}

/* CTA SECTION */
#contact {
	background: linear-gradient(135deg, var(--n), var(--nd));
	position: relative;
	overflow: hidden;
}
#contact::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -80px;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: rgba(13, 110, 112, 0.12);
	filter: blur(60px);
}

/* STEPS FLOW */
.step-line {
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(13, 110, 112, 0.3),
		transparent
	);
	flex: 1;
	position: relative;
	top: 34px;
	margin: 0 -8px;
}
@media (max-width: 768px) {
	.step-line {
		display: none !important;
	}
}

/* SECTOR ICON */
.si {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(13, 110, 112, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

/* TESTIMONIAL FEATURED */
.tf {
	border: 1.5px solid var(--tb);
	box-shadow: 0 2px 24px rgba(13, 110, 112, 0.1);
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	.rv {
		opacity: 1;
		transform: none;
	}
}

/* -- THEME SWITCHER WIDGET --------------------------------------------- */
#tsw {
	position: fixed;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 400;
	background: rgba(14, 27, 42, 0.82);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 14px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.theme-dot.active-dot {
	box-shadow: 0 0 0 3px rgba(13, 110, 112, 0.4);
	border-color: #0d6e70;
}
@media (max-width: 640px) {
	#tsw {
		right: 10px;
		padding: 10px 8px;
	}
}
.sec.sec-white.video-sec{
	padding-bottom: 40px;
}
/* -- HOW-IT-WORKS STEPPER ---------------------------------------------- */
#how-inner {
	display: grid;
	grid-template-columns: 300px 1fr;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);
	min-height: 400px;
}
/* Sidebar IS a direct grid child */
.sp-sidebar {
	background: var(--wh);
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 8px 0;
	border-right: 1px solid var(--br);
}
.sp-tab {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 26px 28px;
	cursor: pointer;
	border: none;
	background: transparent;
	text-align: left;
	width: 100%;
	border-left: 3px solid transparent;
	transition:
		background 0.22s,
		border-color 0.22s;
	user-select: none;
	position: relative;
}
.sp-tab:hover {
	background: rgba(13, 110, 112, 0.04);
}
.sp-tab.sp-active {
	background: rgba(13, 110, 112, 0.07);
	border-left-color: var(--t);
}
.sp-num {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #edebe7;
	color: var(--mu);
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 900;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition:
		background 0.28s,
		color 0.28s,
		transform 0.28s,
		box-shadow 0.28s;
}
.sp-tab.sp-active .sp-num {
	background: var(--t);
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 4px 16px rgba(13, 110, 112, 0.35);
}
.sp-tab-title {
	font-weight: 700;
	font-size: 15px;
	color: var(--n);
	line-height: 1.2;
	margin-bottom: 3px;
	transition: color 0.22s;
}
.sp-tab.sp-active .sp-tab-title {
	color: var(--t);
}
.sp-tab-sub {
	font-size: 12px;
	color: var(--mu);
}
/* Dividers between tabs */
.sp-divider {
	height: 32px;
	display: flex;
	align-items: center;
	padding: 0 0 0 40px;
}
.sp-divider-fill {
	height: 100%;
	width: 2px;
	background: #edebe7;
	border-radius: 2px;
	transition: background 0.4s;
}
.sp-divider-fill.active {
	background: var(--t);
}
/* Content panel */
.sp-content {
	background: #f7f5f1;
	padding: 48px 52px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.sp-content::before {
	content: "";
	position: absolute;
	top: -80px;
	right: -80px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: rgba(13, 110, 112, 0.05);
	pointer-events: none;
}
.sp-panel {
	display: none;
	animation: panelIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.sp-panel.sp-show {
	display: block;
}
@keyframes panelIn {
	from {
		opacity: 0;
		transform: translateX(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.sp-icon-ring {
	width: 72px;
	height: 72px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	background: linear-gradient(135deg, var(--t), var(--tl));
	box-shadow: 0 8px 28px rgba(13, 110, 112, 0.28);
	transition:
		transform 0.3s,
		box-shadow 0.3s;
}
.sp-icon-ring:hover {
	transform: scale(1.06) rotate(-3deg);
	box-shadow: 0 12px 36px rgba(13, 110, 112, 0.38);
}
.sp-feature-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 20px;
}
.sp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(13, 110, 112, 0.08);
	border: 1px solid rgba(13, 110, 112, 0.16);
	border-radius: 99px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--t);
	transition:
		background 0.2s,
		border-color 0.2s,
		transform 0.2s;
	cursor: default;
}
.sp-chip:hover {
	background: rgba(13, 110, 112, 0.16);
	border-color: rgba(13, 110, 112, 0.32);
	transform: translateY(-1px);
}
@media (max-width: 860px) {
	#how-inner {
		grid-template-columns: 1fr;
	}
	.sp-sidebar {
		flex-direction: row;
		overflow-x: auto;
		border-right: none;
		border-bottom: 1px solid var(--br);
		padding: 0;
	}
	.sp-tab {
		flex-direction: column;
		text-align: center;
		gap: 6px;
		padding: 16px 18px;
		border-left: none;
		border-bottom: 3px solid transparent;
		min-width: 90px;
	}
	.sp-tab.sp-active {
		border-left: none;
		border-bottom-color: var(--t);
	}
	.sp-divider {
		display: none;
	}
	.sp-content {
		padding: 32px 24px;
	}
}

/* -- BESPOKE SECTION --------------------------------------------------- */
.bsp-pill {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border-radius: 16px;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	text-align:left;
	transition:
		background 0.25s,
		border-color 0.25s,
		transform 0.2s;
}
.bsp-pill:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(13, 110, 112, 0.35);
	transform: translateX(4px);
}
.bsp-pill-active {
	background: rgba(13, 110, 112, 0.15) !important;
	border-color: rgba(13, 110, 112, 0.45) !important;
}
.bsp-pill-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(13, 110, 112, 0.2);
	color: #5ee0d4;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.25s;
}
.bsp-pill-active .bsp-pill-icon {
	background: var(--t);
}
.bsp-pill-title {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 2px;
}
.bsp-pill-sub {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.45);
	line-height: 1.45;
}
.bsp-pill-arrow {
	color: rgba(255, 255, 255, 0.25);
	transition:
		color 0.25s,
		transform 0.25s;
}
.bsp-pill-active .bsp-pill-arrow {
	color: #5ee0d4;
	transform: translateX(3px);
}

#bsp-diagram {
	width: 380px;
	height: 380px;
	position: relative;
	margin: 0 auto;
	user-select: none;
}
#bsp-hub {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}
#bsp-hub-inner {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--t), var(--tl));
	box-shadow:
		0 0 0 10px rgba(13, 110, 112, 0.14),
		0 8px 40px rgba(13, 110, 112, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: hubPulse 3s ease-in-out infinite;
}
@keyframes hubPulse {
	0%,
	100% {
		box-shadow:
			0 0 0 8px rgba(13, 110, 112, 0.15),
			0 8px 40px rgba(13, 110, 112, 0.4);
	}
	50% {
		box-shadow:
			0 0 0 16px rgba(13, 110, 112, 0.07),
			0 8px 40px rgba(13, 110, 112, 0.55);
	}
}
#bsp-hub-logo {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 900;
	font-size: 14px;
	color: #fff;
	letter-spacing: -0.5px;
	white-space: nowrap;
}
.bsp-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	border: 1px solid rgba(13, 110, 112, 0.18);
	transform: translate(-50%, -50%);
	animation: ringRotate 22s linear infinite;
}
.bsp-ring-1 {
	width: 200px;
	height: 200px;
}
.bsp-ring-2 {
	width: 320px;
	height: 320px;
	border-color: rgba(13, 110, 112, 0.08);
	animation-direction: reverse;
	animation-duration: 34s;
}
@keyframes ringRotate {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
.bsp-node {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 52px;
	height: 52px;
	transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--dist))
		rotate(calc(-1 * var(--angle)));
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	transition: filter 0.3s;
	z-index: 5;
}
.bsp-node-inner {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(20, 36, 58, 0.9);
	border: 1.5px solid rgba(255, 255, 255, 0.09);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		border-color 0.25s,
		box-shadow 0.25s,
		background 0.25s,
		transform 0.2s;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.bsp-node:hover .bsp-node-inner,
.bsp-node.bsp-lit .bsp-node-inner {
	border-color: rgba(13, 110, 112, 0.6);
	box-shadow: 0 4px 28px rgba(13, 110, 112, 0.4);
	background: rgba(13, 110, 112, 0.2);
	transform: scale(1.1);
}
.bsp-node.bsp-dim {
	filter: grayscale(0.8) opacity(0.35);
}
.bsp-node-label {
	font-size: 10px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
	white-space: nowrap;
	letter-spacing: 0.02em;
	transition: color 0.25s;
}
.bsp-node.bsp-lit .bsp-node-label {
	color: #5ee0d4;
}
.bsp-node.bsp-dim .bsp-node-label {
	color: rgba(255, 255, 255, 0.2);
}
@keyframes dashFlow {
	to {
		stroke-dashoffset: -16;
	}
}
.bsp-conn {
	stroke: rgba(13, 110, 112, 0.45);
	stroke-width: 1.5;
	stroke-dasharray: 4 5;
	fill: none;
	animation: dashFlow 0.7s linear infinite;
	transition:
		stroke 0.3s,
		opacity 0.3s;
}
.bsp-conn.dim {
	opacity: 0.07;
}
#bsp-tooltip {
	display: none;
	position: absolute;
	background: rgba(14, 27, 42, 0.96);
	border: 1px solid rgba(13, 110, 112, 0.45);
	border-radius: 10px;
	padding: 8px 14px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	pointer-events: none;
	white-space: nowrap;
	z-index: 20;
	backdrop-filter: blur(8px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
@media (max-width: 860px) {
	#bsp-diagram {
		width: 300px;
		height: 300px;
	}
	#bsp-info {
		width: 300px !important;
	}
	.bsp-node {
		transform: translate(-50%, -50%) rotate(var(--angle))
			translateX(calc(var(--dist) * 0.72)) rotate(calc(-1 * var(--angle)));
	}
}
@media (max-width: 640px) {
	#bsp-diagram,
	#bsp-info {
		display: none !important;
	}
}

/* -- RICH HOVER MICRO-INTERACTIONS ------------------------------------- */

/* -- Service cards icon lift + colour shift ---------------------------- */
.cd:hover .material-symbols-outlined[style*="color:var(--t)"] {
	transform: scale(1.18) translateY(-2px);
}
/* Generic icon transition inside cards */
.cd .material-symbols-outlined {
	transition:
		transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		color 0.2s;
}

/* -- Industry/dark cards icon scale + glow ----------------------------- */
.cdd:hover .si {
	transform: scale(1.12);
	box-shadow: 0 0 0 6px rgba(13, 110, 112, 0.15);
}
.si {
	transition:
		transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.28s;
}

/* -- Stats bar number colour pop on hover ------------------------------ */
.stat-num {
	transition:
		color 0.22s,
		transform 0.22s,
		letter-spacing 0.22s;
}
.stat-item:hover .stat-num {
	color: var(--t);
	transform: scale(1.04);
	letter-spacing: -3px;
}

/* -- Testimonial cards subtle lift + quote mark ------------------------ */
.cd.tcard {
	position: relative;
	overflow: hidden;
}
.cd.tcard::before {
	content: '"';
	position: absolute;
	top: -10px;
	right: 16px;
	font-size: 120px;
	font-weight: 900;
	color: rgba(13, 110, 112, 0.06);
	font-family: "Plus Jakarta Sans", sans-serif;
	line-height: 1;
	pointer-events: none;
	transition: color 0.3s;
}
.cd.tcard:hover::before {
	color: rgba(13, 110, 112, 0.12);
}

/* -- Pricing cards ghost hover glow ------------------------------------ */
.cd.pcard {
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s;
}
.cd.pcard:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 56px rgba(13, 110, 112, 0.14);
}
.pf {
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s;
}
.pf:hover {
	transform: translateY(-4px);
	box-shadow: 0 32px 80px rgba(13, 110, 112, 0.48);
}

/* -- FAQ rows left border slide ---------------------------------------- */
details {
	border-left: 3px solid transparent;
	transition:
		border-color 0.25s,
		background 0.25s;
}
details:hover,
details[open] {
	border-left-color: var(--t);
}

/* -- Bespoke stat strip hover highlight -------------------------------- */
.bsp-stat {
	transition: background 0.22s;
}
.bsp-stat:hover {
	background: rgba(13, 110, 112, 0.08) !important;
}
.bsp-stat p.jk {
	transition: color 0.22s;
}
.bsp-stat:hover p.jk {
	color: #5ee0d4;
}

/* -- Agent card icon boxes rotate on hover ----------------------------- */
.agent-icon {
	transition:
		transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s;
}
.cdd:hover .agent-icon,
.af:hover .agent-icon {
	transform: scale(1.08) rotate(-4deg);
}

/* -- Nav CTA button shimmer sweep -------------------------------------- */
@keyframes shimmer {
	0% {
		left: -60%;
	}
	100% {
		left: 120%;
	}
}
.btn.bp {
	position: relative;
	overflow: hidden;
}
.btn.bp::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.18),
		transparent
	);
	transform: skewX(-15deg);
	transition: none;
	pointer-events: none;
}
.btn.bp:hover::after {
	animation: shimmer 0.6s ease forwards;
}

/* Sector card title uppercase tracking */
.cdd h4 {
	transition:
		letter-spacing 0.22s,
		color 0.22s;
}
.cdd:hover h4 {
	letter-spacing: 0.1em;
	color: #5ee0d4;
}

/* About stat card number scale */
.asc .jk {
	transition: transform 0.28s;
}
.asc:hover .jk {
	transform: scale(1.03);
}

/* -- Contact info rows slide right ------------------------------------- */
.cinfo-row {
	transition:
		transform 0.22s,
		background 0.22s;
	border-radius: 14px;
	padding: 16px 18px;
}
.cinfo-row:hover {
	transform: translateX(4px);
	background: rgba(255, 255, 255, 0.05);
}

/* -- Footer links colour from left ------------------------------------- */
.ft-link {
	position: relative;
	/* transition:
	color 0.2s,
	padding-left 0.2s; */
	transition: color 0.2s ease, transform 0.2s ease;
}
.ft-link:hover {
	color: #5ee0d4 !important;
	/* padding-left: 6px; */
	transform: translateX(6px);
}

/* Marker line on nav brand hover */
.nav-logo-sq {
	transition:
		transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.28s;
}

/* -- END HOVER MICRO-INTERACTIONS -------------------------------------- */

/* -- FLOATING CHATBOT -------------------------------------------------- */
#chat-widget {
	position: fixed;
	bottom: 28px;
	left: 28px;
	z-index: 1000;
}
#chat-btn {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: linear-gradient(135deg, var(--t), var(--tl));
	box-shadow: 0 4px 24px rgba(13, 110, 112, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition:
		transform 0.25s,
		box-shadow 0.25s;
}
#chat-btn:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 32px rgba(13, 110, 112, 0.6);
}
#chat-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #e5a227;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #f7f5f1;
	animation: badgePop 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes badgePop {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}
#chat-window {
	position: absolute;
	bottom: 72px;
	left: 0;
	width: 340px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 16px 64px rgba(0, 0, 0, 0.18);
	display: none;
	flex-direction: column;
	overflow: hidden;
	transform-origin: bottom left;
	animation: chatOpen 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes chatOpen {
	from {
		opacity: 0;
		transform: scale(0.92) translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
#chat-window.open {
	display: flex;
}
#chat-header {
	background: linear-gradient(135deg, var(--t), var(--tl));
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#chat-msgs {
	flex: 1;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-y: auto;
	max-height: 280px;
	min-height: 180px;
	background: #f7f5f1;
}
.chat-msg {
	animation: msgIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	opacity: 0;
}
@keyframes msgIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.chat-bot p {
	background: #fff;
	border-radius: 14px 14px 14px 4px;
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.55;
	color: #1c2b3a;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
	display: inline-block;
	max-width: 90%;
}
.chat-user p {
	background: linear-gradient(135deg, var(--t), var(--tl));
	border-radius: 14px 14px 4px 14px;
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.55;
	color: #fff;
	display: inline-block;
	max-width: 90%;
	margin-left: auto;
}
.chat-user {
	display: flex;
	justify-content: flex-end;
}
#chat-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}
.chat-qr {
	background: #fff;
	border: 1px solid rgba(13, 110, 112, 0.2);
	color: var(--t);
	border-radius: 99px;
	padding: 6px 13px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition:
		background 0.18s,
		border-color 0.18s,
		transform 0.18s;
}
.chat-qr:hover {
	background: rgba(13, 110, 112, 0.07);
	border-color: var(--t);
	transform: translateY(-1px);
}
#chat-input-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid #edebe7;
	background: #fff;
}
#chat-input {
	flex: 1;
	border: 1.5px solid #edebe7;
	border-radius: 10px;
	padding: 9px 13px;
	font-size: 13px;
	outline: none;
	transition: border-color 0.2s;
	font-family: inherit;
	color: #1c2b3a;
}
#chat-input:focus {
	border-color: var(--t);
}
#chat-send {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	background: linear-gradient(135deg, var(--t), var(--tl));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: opacity 0.2s;
}
#chat-send:hover {
	opacity: 0.85;
}
/* -- END CHATBOT ------------------------------------------------------- */

/* -- COMPARE SECTION --------------------------------------------------- */
.cmp-header {
	display: flex;
	align-items: center;
	margin-bottom: 18px;
	gap: 0;
}
.cmp-header-prob {
	flex: 1;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 10px 16px;
	border-radius: 10px;
	color: #ef4444;
	background: rgba(239, 68, 68, 0.06);
}
.cmp-header-sol {
	flex: 1;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 10px 16px;
	border-radius: 10px;
	color: var(--t);
	background: rgba(13, 110, 112, 0.06);
	text-align: right;
}

.cmp-row {
	display: flex;
	align-items: stretch;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	transition:
		box-shadow 0.28s,
		transform 0.28s;
}
.cmp-row:hover {
	box-shadow: 0 8px 36px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.cmp-prob {
	flex: 1;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 22px 20px;
	background: #fefefe;
	border-right: 1px solid #f2efe8;
}
.cmp-sol {
	flex: 1;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 22px 20px;
	background: rgba(13, 110, 112, 0.022);
}
.cmp-text {
	flex: 1;
}
.cmp-icon-wrap {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}
.cmp-icon-prob {
	background: rgba(239, 68, 68, 0.08);
}
.cmp-icon-sol {
	background: rgba(13, 110, 112, 0.09);
}

.cmp-label {
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin-bottom: 5px;
}
.cmp-label-prob {
	color: #ef4444;
}
.cmp-label-sol {
	color: var(--t);
}
.cmp-h {
	font-size: 15px;
	font-weight: 800;
	color: var(--n);
	line-height: 1.25;
	margin-bottom: 5px;
}
.cmp-p {
	font-size: 13px;
	color: var(--mu);
	line-height: 1.6;
}

.cmp-arrow {
	flex: 0 0 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
		180deg,
		rgba(13, 110, 112, 0.04),
		rgba(13, 110, 112, 0.09)
	);
	border-left: 1px solid #f2efe8;
	border-right: 1px solid #f2efe8;
}

@media (max-width: 768px) {
	.cmp-row {
		flex-direction: column;
	}
	.cmp-arrow {
		flex: 0 0 32px;
		border: none;
		border-top: 1px solid #f2efe8;
		border-bottom: 1px solid #f2efe8;
	}
	.cmp-arrow .material-symbols-outlined {
		transform: rotate(90deg);
	}
	.cmp-header {
		display: none;
	}
	.cmp-prob {
		border-right: none;
		border-bottom: 1px solid #f2efe8;
	}
}
/* -- END COMPARE ------------------------------------------------------- */

/* -- EXTRACTED INLINE STYLES ------------------------------------------- */

/* Spacing / layout utilities */
.mb-6 {
	margin-bottom: 6px;
}
.mb-8 {
	margin-bottom: 8px;
}
.mb-10 {
	margin-bottom: 10px;
}
.mb-12 {
	margin-bottom: 12px;
}
.mb-14 {
	margin-bottom: 14px;
}
.mb-16 {
	margin-bottom: 16px;
}
.mb-18 {
	margin-bottom: 18px;
}
.mb-20 {
	margin-bottom: 20px;
}
.mb-22 {
	margin-bottom: 22px;
}
.mb-28 {
	margin-bottom: 28px;
}
.mb-32 {
	margin-bottom: 32px;
}
.mb-36 {
	margin-bottom: 36px;
}
.mb-52 {
	margin-bottom: 52px;
}
.mb-56 {
	margin-bottom: 56px;
}
.mb-60 {
	margin-bottom: 60px;
}
.mb-64 {
	margin-bottom: 64px;
}
.mb-72 {
	margin-bottom: 72px;
}
.mt-16 {
	margin-top: 16px;
}
.mt-28 {
	margin-top: 28px;
}
.mt-36 {
	margin-top: 36px;
}
.mw-380 {
	max-width: 380px;
}
.mw-420 {
	max-width: 420px;
}
.mw-470 {
	max-width: 470px;
}
.mw-480 {
	max-width: 480px;
}
.mw-490 {
	max-width: 490px;
}
.wrap-z {
	position: relative;
	z-index: 1;
}

/* Section backgrounds */
.sec-white {
	background: var(--wh);
}
.sec-warm {
	background: var(--w);
}
.sec-warm2 {
	background: #f0ede8;
}
.sec-dark {
	background: var(--nd);
	position: relative;
	overflow: hidden;
}

/* Shared section header + copy */
.sec-head {
	text-align: center;
}
.sec-sub {
	font-size: 17px;
	color: var(--mu);
	margin: 0 auto;
	line-height: 1.7;
}

/* Orbs (positioned instances) */
.orb-hero-1 {
	width: 600px;
	height: 600px;
	background: rgba(13, 110, 112, 0.08);
	top: -100px;
	right: -120px;
	z-index: 0;
}
.orb-hero-2 {
	width: 380px;
	height: 380px;
	background: rgba(229, 162, 39, 0.07);
	bottom: -60px;
	left: -90px;
	z-index: 0;
}
.orb-agents {
	width: 700px;
	height: 700px;
	background: rgba(13, 110, 112, 0.1);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
}
.orb-bespoke-1 {
	width: 560px;
	height: 560px;
	background: rgba(13, 110, 112, 0.12);
	top: -80px;
	right: -120px;
	z-index: 0;
}
.orb-bespoke-2 {
	width: 400px;
	height: 400px;
	background: rgba(229, 162, 39, 0.06);
	bottom: -60px;
	left: -80px;
	z-index: 0;
}
.orb-industries {
	width: 700px;
	height: 700px;
	background: rgba(13, 110, 112, 0.09);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
}
.orb-faq {
	width: 500px;
	height: 500px;
	background: rgba(13, 110, 112, 0.08);
	top: 0;
	right: -100px;
	z-index: 0;
}

/* -- Buttons size + layout helpers ------------------------------------- */
.btn-xl {
	font-size: 16px;
	padding: 16px 32px;
}
.btn-lg {
	padding: 16px 36px;
	font-size: 16px;
}
.btn-md {
	padding: 14px 30px;
	font-size: 15px;
}
.btn-nudge {
	padding: 13px 28px;
	font-size: 14px;
}
.btn-ghost-lg {
	font-size: 16px;
	padding: 16px 26px;
}
.btn-full {
	width: 100%;
	justify-content: center;
}
.btn-ico {
	font-size: 18px;
}
.btn-ico-sm {
	font-size: 17px;
}
.cta-center {
	display: flex;
	justify-content: center;
}

/* MOBILE MENU */
.mm-close {
	position: absolute;
	top: 24px;
	right: 24px;
	background: none;
	border: none;
	font-size: 22px;
	cursor: pointer;
	color: var(--n);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mm-cta {
	margin-top: 16px;
}

/* NAV */
.nav-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}
.nav-logo-sq {
	height: 50px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	display: block;
	flex-shrink: 0;
	background: transparent;
	border-radius: 0;
}
.nav-logo-txt {
	color: #fff;
	font-weight: 900;
	font-size: 12px;
	font-family: "Plus Jakarta Sans", sans-serif;
	letter-spacing: -0.3px;
}
.nav-brand-name {
	font-weight: 800;
	font-size: 16px;
	color: var(--n);
	letter-spacing: -0.3px;
}
.nav-brand-name .hl {
	color: var(--t);
}
.nl-grp {
	display: flex;
	gap: 28px;
	align-items: center;
}
.nav-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* HERO */
#hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-top: 96px;
	padding-bottom: 60px;
	position: relative;
	overflow: hidden;
}
.hero-wrap {
	position: relative;
	z-index: 2;
	width: 100%;
}
.hero-grid {
	align-items: center;
	gap: 80px;
}
.hero-h1 {
	font-size: clamp(40px, 5.5vw, 52px);
	font-weight: 900;
	line-height: 1.03;
	letter-spacing: -2px;
	margin-bottom: 22px;
}
.hero-sub {
	font-size: 18px;
	line-height: 1.75;
	color: var(--mu);
	max-width: 490px;
	margin-bottom: 36px;
}
.hero-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 44px;
}
.hero-proof {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.hero-avatars {
	display: flex;
}
.hero-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 3px solid var(--w);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
}
.hero-avatar + .hero-avatar {
	margin-left: -10px;
}
.hero-avatar-1 {
	background: linear-gradient(135deg, var(--t), var(--tl));
}
.hero-avatar-2 {
	background: linear-gradient(135deg, var(--n), #3d5a6b);
}
.hero-avatar-3 {
	background: linear-gradient(135deg, var(--a), #c98b1a);
}
.hero-avatar-more {
	background: #e6e3de;
	color: var(--mu);
	font-size: 9px;
}
.hero-stars {
	font-size: 15px;
}
.hero-proof-txt {
	font-size: 12px;
	color: var(--mu);
	font-weight: 500;
	margin-top: 2px;
}

/* HERO DASHBOARD MOCKUP */
.dash-wrap {
	position: relative;
}
.dash-card {
	padding: 28px;
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.13);
}
.dash-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
}
.dash-kicker {
	font-size: 10px;
	font-weight: 700;
	color: var(--mu);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.dash-title {
	font-size: 18px;
	font-weight: 800;
	color: var(--n);
	margin-top: 3px;
}
.dash-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 22px;
}
.dash-stat {
	background: var(--w);
	border-radius: 14px;
	padding: 16px;
}
.dash-stat-label {
	font-size: 10px;
	color: var(--mu);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 6px;
}
.dash-stat-num {
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -1px;
}
.dash-stat-num.teal {
	color: var(--t);
}
.dash-stat-num.navy {
	color: var(--n);
}
.dash-stat-delta {
	font-size: 11px;
	font-weight: 600;
	margin-top: 3px;
}
.dash-stat-delta.teal {
	color: var(--t);
}
.dash-stat-delta.amber {
	color: var(--a);
}
.dash-bar-block {
	margin-bottom: 14px;
}
.dash-bar-block.last {
	margin-bottom: 20px;
}
.dash-bar-row {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 8px;
}
.dash-bar-row .navy {
	color: var(--n);
}
.dash-bar-row .teal {
	color: var(--t);
}
.dash-bar-row .amber {
	color: var(--a);
}
.dash-live {
	background: rgba(13, 110, 112, 0.06);
	border: 1px solid rgba(13, 110, 112, 0.15);
	border-radius: 10px;
	padding: 11px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.dash-live-dot {
	position: relative;
	display: inline-flex;
	width: 8px;
	height: 8px;
}
.dash-live-dot .pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--t);
	opacity: 0.5;
	animation: rpl 1.6s ease-out infinite;
}
.dash-live-dot .core {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--t);
}
.dash-live-txt {
	font-size: 12px;
	font-weight: 700;
	color: var(--t);
}
.toast {
	position: absolute;
	z-index: 3;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
}
.toast-1 {
	bottom: -52px;
	left: -28px;
	border-radius: 16px;
	padding: 13px 17px;
	gap: 12px;
	min-width: 200px;
}
.toast-2 {
	top: -41px;
	right: -20px;
	border-radius: 14px;
	padding: 12px 16px;
	gap: 10px;
	min-width: 160px;
	animation-delay: 1.2s;
}
.toast-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.toast-ico-1 {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--a), #c98b1a);
}
.toast-ico-2 {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--t), var(--tl));
}
.toast-ico .material-symbols-outlined {
	color: #fff;
}
.toast-ico-1 .material-symbols-outlined {
	font-size: 17px;
}
.toast-ico-2 .material-symbols-outlined {
	font-size: 15px;
}
.toast-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--n);
}
.toast-title.sm {
	font-size: 11px;
}
.toast-sub {
	font-size: 11px;
	color: var(--mu);
}
.toast-sub.sm {
	font-size: 10px;
}

/* TICKER */
.ticker {
	background: var(--n);
	padding: 14px 0;
	overflow: hidden;
}

/* VIDEO */
.video-title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.5px;
	line-height: 1.15;
	color: var(--n);
}
.video-sub {
	max-width: 640px;
	margin-top: 18px;
}
.video-frame {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(11, 31, 51, 0.18);
	background: var(--n);
}
.video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
@media (max-width: 768px) {
	.video-title {
		font-size: 30px;
		letter-spacing: -1px;
	}
}

/* STATS */
.stats-sec {
	background: var(--wh);
	padding: 72px 0;
	border-bottom: 1px solid var(--br);
}
.stats-grid {
	text-align: center;
}
.stat-num {
	font-size: 56px;
	font-weight: 900;
	letter-spacing: -2.5px;
	line-height: 1;
}
.stat-num.teal {
	color: var(--t);
}
.stat-num.navy {
	color: var(--n);
}
.stat-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--mu);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin-top: 8px;
}

/* AGENTS */
.agents-title {
	font-size: clamp(30px, 4.5vw, 60px);
	font-weight: 900;
	color: #fff;
	letter-spacing: -1.5px;
	line-height: 1.08;
	margin-bottom: 14px;
}
.agents-sub {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.48);
	max-width: 470px;
	margin: 0 auto;
	line-height: 1.65;
}
.agents-grid {
	margin-bottom: 22px;
}
.agents-more {
	text-align: center;
	margin-top: 40px;
}
.agent-card {
	padding: 36px 28px;
}
.agent-featured {
	padding: 38px 28px;
}
.agent-ico {
	width: 52px;
	height: 52px;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
}
.agent-ico .material-symbols-outlined {
	font-size: 26px;
}
.agent-ico-teal {
	background: rgba(13, 110, 112, 0.2);
}
.agent-ico-teal .material-symbols-outlined {
	color: #5ee0d4;
}
.agent-ico-solid {
	background: var(--t);
	box-shadow: 0 8px 24px rgba(13, 110, 112, 0.45);
}
.agent-ico-solid .material-symbols-outlined {
	color: #fff;
}
.agent-ico-amber {
	background: rgba(229, 162, 39, 0.15);
}
.agent-ico-amber .material-symbols-outlined {
	color: var(--a);
}
.agent-h {
	font-size: 21px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 10px;
}
.agent-p {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.68;
	margin-bottom: 24px;
}
.agent-feats {
	margin-bottom: 28px;
}
.agent-feat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	font-weight: 500;
}
.agent-feat.last {
	border-bottom: none;
}
.agent-feat .material-symbols-outlined {
	font-size: 16px;
	flex-shrink: 0;
	color: #5ee0d4;
}
.agent-feat.amber .material-symbols-outlined {
	color: var(--a);
}
.agent-badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, var(--t), var(--tl));
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	padding: 5px 18px;
	border-radius: 99px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.agent-cta-amber {
	display: flex;
	justify-content: center;
	padding: 12px;
	border-radius: 12px;
	background: rgba(229, 162, 39, 0.12);
	border: 1px solid rgba(229, 162, 39, 0.32);
	color: var(--a);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: background 0.2s;
}
.agent-cta-amber:hover {
	background: rgba(229, 162, 39, 0.22);
}
.mini-card {
	padding: 22px 18px;
}
.mini-ico {
	color: #5ee0d4;
	font-size: 22px;
	margin-bottom: 9px;
	display: block;
}
.mini-h {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 5px;
}
.mini-p {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.55;
}

/* COMPARE (supplemental) */
.compare-title {
	font-size: clamp(28px, 4vw, 54px);
	font-weight: 900;
	letter-spacing: -1.2px;
	margin-bottom: 14px;
}
.cmp-spacer {
	flex: 0 0 50px;
}
.cmp-hdr-ico {
	font-size: 16px;
	vertical-align: middle;
	margin-right: 5px;
}
.cmp-ico {
	font-size: 22px;
}
.cmp-ico.prob {
	color: #ef4444;
}
.cmp-ico.sol {
	color: var(--t);
}
.cmp-arrow-ico {
	color: var(--t);
	font-size: 20px;
}
.cmp-rows {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.delay-0 {
	transition-delay: 0s;
}
.delay-06 {
	transition-delay: 0.06s;
}
.delay-12 {
	transition-delay: 0.12s;
}
.delay-18 {
	transition-delay: 0.18s;
}
.delay-24 {
	transition-delay: 0.24s;
}
.delay-30 {
	transition-delay: 0.3s;
}
.compare-cta {
	text-align: center;
	margin-top: 56px;
}
.compare-note {
	font-size: 13px;
	color: var(--mu);
	margin-top: 14px;
}

/* HOW IT WORKS (panel copy) */
.how-title {
	font-size: clamp(28px, 4vw, 52px);
	font-weight: 900;
	letter-spacing: -1.2px;
	margin-bottom: 10px;
}
.how-note {
	font-size: 17px;
	color: var(--mu);
	max-width: 380px;
	margin: 0 auto;
}
.sp-icon-ring .material-symbols-outlined {
	color: #fff;
	font-size: 32px;
}
.sp-kicker {
	font-size: 10px;
	font-weight: 800;
	color: var(--t);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 10px;
}
.sp-title {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -0.5px;
	margin-bottom: 12px;
}
.sp-desc {
	font-size: 15px;
	color: var(--mu);
	line-height: 1.72;
	margin-bottom: 24px;
}
.sp-chip .material-symbols-outlined {
	font-size: 14px;
}
.sp-cta-wrap {
	margin-top: 28px;
}
.sp-note-box {
	margin-top: 28px;
	padding: 18px 20px;
	background: rgba(13, 110, 112, 0.07);
	border-radius: 14px;
	border: 1px solid rgba(13, 110, 112, 0.15);
}
.sp-note-txt {
	font-size: 13px;
	font-weight: 600;
	color: var(--t);
	display: flex;
	align-items: center;
	gap: 8px;
}
.sp-note-txt .material-symbols-outlined {
	font-size: 16px;
}

/* SERVICES */
.svc-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 52px;
}
.svc-title {
	font-size: clamp(26px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1px;
}
.svc-all {
	font-size: 13px;
	font-weight: 700;
	color: var(--t);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 5px;
	border-bottom: 2px solid var(--t);
	padding-bottom: 3px;
}
.svc-all .material-symbols-outlined {
	font-size: 16px;
}
.svc-card {
	padding: 26px;
}
.svc-ico {
	color: var(--t);
	font-size: 26px;
	margin-bottom: 12px;
	display: block;
}
.svc-h {
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 7px;
}
.svc-p {
	font-size: 13px;
	color: var(--mu);
	line-height: 1.6;
}

/* BESPOKE */
.bsp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 40px;
	margin-bottom: 72px;
}
.bsp-col {
	max-width: 560px;
}
.bsp-title {
	font-size: clamp(30px, 4vw, 56px);
	font-weight: 900;
	color: #fff;
	letter-spacing: -1.5px;
	line-height: 1.08;
	margin-bottom: 18px;
}
.bsp-title .hl {
	color: #5ee0d4;
}
.bsp-desc {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.72;
	margin-bottom: 32px;
}
.bsp-pills {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bsp-pill-icon .material-symbols-outlined {
	font-size: 20px;
}
.bsp-pill-arrow {
	font-size: 18px;
	margin-left: auto;
	flex-shrink: 0;
}
.bsp-cta-wrap {
	margin-top: 36px;
}
.bsp-diagram-col {
	flex: 1;
	min-width: 360px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.bsp-node {
	--dist: 155px;
}
.ang-0 {
	--angle: 0deg;
}
.ang-36 {
	--angle: 36deg;
}
.ang-72 {
	--angle: 72deg;
}
.ang-108 {
	--angle: 108deg;
}
.ang-144 {
	--angle: 144deg;
}
.ang-180 {
	--angle: 180deg;
}
.ang-216 {
	--angle: 216deg;
}
.ang-252 {
	--angle: 252deg;
}
.ang-288 {
	--angle: 288deg;
}
.ang-324 {
	--angle: 324deg;
}
.bsp-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}
#bsp-info {
	margin-top: 20px;
	padding: 18px 22px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	min-height: 64px;
	transition: all 0.3s;
	width: 380px;
}
.bsp-info-title {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4px;
}
.bsp-info-desc {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.45);
	line-height: 1.5;
}
.bsp-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 20px;
	overflow: hidden;
}
.bsp-stat {
	background: rgba(255, 255, 255, 0.03);
	padding: 28px 32px;
}
.bsp-stat-num {
	font-size: 36px;
	font-weight: 900;
	color: #fff;
	letter-spacing: -1px;
	margin-bottom: 4px;
}
.bsp-stat-label {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.4);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* INDUSTRIES */
.industries-title {
	font-size: clamp(28px, 4vw, 54px);
	font-weight: 900;
	color: #fff;
	letter-spacing: -1.2px;
	margin-bottom: 12px;
}
.industries-sub {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.44);
	max-width: 420px;
	margin: 0 auto;
}
.ind-card {
	padding: 26px 22px;
}
.si .material-symbols-outlined {
	color: #5ee0d4;
	font-size: 20px;
}
.ind-h {
	font-size: 12px;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-bottom: 7px;
}
.ind-p {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.38);
	line-height: 1.6;
}

/* TESTIMONIALS */
.testi-title {
	font-size: clamp(26px, 3.5vw, 50px);
	font-weight: 900;
	letter-spacing: -1px;
}
.testi-card {
	padding: 38px;
	display: flex;
	flex-direction: column;
}
.testi-stars {
	font-size: 15px;
	margin-bottom: 18px;
}
.testi-quote {
	font-size: 15px;
	font-style: italic;
	color: var(--n);
	line-height: 1.72;
	flex: 1;
	margin-bottom: 24px;
}
.testi-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--br);
}
.testi-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
}
.testi-avatar-1 {
	background: linear-gradient(135deg, var(--t), var(--tl));
}
.testi-avatar-2 {
	background: linear-gradient(135deg, var(--n), #3d5a6b);
}
.testi-avatar-3 {
	background: linear-gradient(135deg, var(--a), #c98b1a);
}
.testi-name {
	font-weight: 700;
	font-size: 14px;
}
.testi-role {
	font-size: 10px;
	font-weight: 700;
	color: var(--mu);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 2px;
}

/* ABOUT */
.about-grid {
	align-items: center;
	gap: 72px;
}
.asc-inner {
	position: relative;
	z-index: 1;
}
.asc-h {
	font-size: 24px;
	font-weight: 900;
	color: #fff;
	margin-bottom: 8px;
}
.asc-p {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.65;
	margin-bottom: 32px;
}
.asc-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 32px;
}
.asc-stat-num {
	font-size: 38px;
	font-weight: 900;
	color: #fff;
	letter-spacing: -1.5px;
}
.asc-stat-label {
	font-size: 11px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.44);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-top: 4px;
}
.asc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.asc-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 99px;
	padding: 6px 13px;
	font-size: 11px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.8);
}
.asc-tag .material-symbols-outlined {
	font-size: 14px;
	color: #5ee0d4;
}
.about-h2 {
	font-size: clamp(26px, 3.5vw, 44px);
	font-weight: 900;
	letter-spacing: -1px;
	margin-bottom: 20px;
}
.about-p {
	font-size: 16px;
	color: var(--mu);
	line-height: 1.75;
	margin-bottom: 20px;
}
.about-p.tight {
	margin-bottom: 32px;
}
.about-feats {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 36px;
}
.about-feat {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.about-feat-ico {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	flex-shrink: 0;
	margin-top: 1px;
}
.about-feat-ico .material-symbols-outlined {
	font-size: 18px;
}
.about-feat-h {
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 3px;
}
.about-feat-p {
	font-size: 13px;
	color: var(--mu);
	line-height: 1.6;
}

/* PRICING */
.pricing-title {
	font-size: clamp(26px, 3.5vw, 52px);
	font-weight: 900;
	letter-spacing: -1.2px;
	margin-bottom: 10px;
}
.pricing-grid {
	align-items: start;
	padding-top: 20px;
}
.price-card {
	padding: 40px 34px;
}
.price-featured {
	padding: 52px 34px 40px;
}
.price-tier {
	font-size: 11px;
	font-weight: 800;
	color: var(--mu);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin-bottom: 12px;
}
.price-tier.lt {
	color: rgba(255, 255, 255, 0.55);
}
.price-row {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin-bottom: 5px;
}
.price-amt {
	font-size: 48px;
	font-weight: 900;
	color: var(--n);
	letter-spacing: -2px;
}
.price-amt.sm {
	font-size: 36px;
	letter-spacing: -1.5px;
}
.price-amt.lt {
	color: #fff;
}
.price-per {
	font-size: 14px;
	color: var(--mu);
	font-weight: 500;
}
.price-per.lt {
	color: rgba(255, 255, 255, 0.5);
}
.price-desc {
	font-size: 13px;
	color: var(--mu);
	margin-bottom: 26px;
	line-height: 1.5;
}
.price-desc.lt {
	color: rgba(255, 255, 255, 0.5);
}
.price-feats {
	margin-bottom: 28px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.price-feat {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}
.price-feat .material-symbols-outlined {
	color: var(--t);
	font-size: 18px;
	flex-shrink: 0;
}
.price-feat.off {
	color: var(--mu);
}
.price-feat.off .material-symbols-outlined {
	color: #d0ccc7;
}
.price-feat.lt {
	color: rgba(255, 255, 255, 0.85);
}
.price-feat.lt .material-symbols-outlined {
	color: #5ee0d4;
}
.price-badge {
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	padding: 7px 22px;
	border-radius: 0 0 14px 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	backdrop-filter: blur(10px);
}
.price-cta-white {
	width: 100%;
	justify-content: center;
	background: rgba(255, 255, 255, 0.95);
	color: var(--t);
	font-weight: 800;
	border-radius: 12px;
	padding: 16px;
	font-size: 15px;
}

/* FAQ */
.faq-grid {
	align-items: start;
	gap: 80px;
}
.faq-title {
	font-size: clamp(26px, 3.5vw, 46px);
	font-weight: 900;
	color: #fff;
	letter-spacing: -1px;
	margin-bottom: 16px;
}
.faq-sub {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.44);
	line-height: 1.65;
	margin-bottom: 28px;
}
.faq-sub a {
	color: rgba(255, 255, 255, 0.82);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.faq-item {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 14px;
	overflow: hidden;
}
.faq-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px;
	font-weight: 700;
	font-size: 15px;
	color: #fff;
}
.faq-summary .fi {
	color: rgba(255, 255, 255, 0.45);
	font-size: 20px;
	flex-shrink: 0;
}
.faq-answer {
	padding: 0 24px 22px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.7;
}

/* CONTACT */
.contact-grid {
	gap: 72px;
	align-items: start;
}
.contact-h2 {
	font-size: clamp(26px, 3.5vw, 50px);
	font-weight: 900;
	color: #fff;
	letter-spacing: -1.2px;
	line-height: 1.1;
	margin-bottom: 16px;
}
.contact-lead {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.72;
	margin-bottom: 36px;
}
.contact-info {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 36px;
}
.contact-info-row {
	display: flex;
	align-items: center;
	gap: 14px;
}
.contact-info-ico {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(13, 110, 112, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.contact-info-ico .material-symbols-outlined {
	color: #5ee0d4;
	font-size: 20px;
}
.contact-info-label {
	font-size: 11px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.38);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 3px;
}
.contact-info-val {
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}
.contact-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.contact-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 99px;
	padding: 7px 13px;
	font-size: 11px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.7);
}
.contact-card {
	padding: 44px;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22);
}
.contact-card-h {
	font-size: 22px;
	font-weight: 800;
	color: var(--n);
	margin-bottom: 5px;
}
.contact-card-sub {
	font-size: 13px;
	color: var(--mu);
	margin-bottom: 28px;
}
.form-body {
	display: flex;
	flex-direction: column;
	gap: 17px;
}
.form-row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 13px;
}
.form-select {
	appearance: none;
	cursor: pointer;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236A7A8A" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	padding-right: 40px;
}
.form-submit {
	width: 100%;
	justify-content: center;
	padding: 16px;
	font-size: 16px;
}
.form-note {
	font-size: 11px;
	color: var(--mu);
	text-align: center;
	line-height: 1.5;
}
.form-done {
	display: none;
	text-align: center;
	padding: 40px 0;
}
.form-done-ico {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(13, 110, 112, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}
.form-done-ico .material-symbols-outlined {
	color: var(--t);
	font-size: 28px;
}
.form-done-h {
	font-size: 20px;
	font-weight: 800;
	color: var(--n);
	margin-bottom: 8px;
}
.form-done-p {
	font-size: 14px;
	color: var(--mu);
}

/* FOOTER */
.footer {
	background: var(--nd);
	padding: 68px 0 28px;
}
.footer-grid {
	display: grid;
	grid-template-columns: auto auto auto auto;
	gap: 40px;
	margin-bottom: 52px;
}
.footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	text-decoration: none;
}
.footer-logo {
	height: 60px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	display: block;
	background: #fff;
	border-radius: 10px;
	padding: 6px;
}
.footer-logo span {
	color: #fff;
	font-weight: 900;
	font-size: 11px;
	font-family: "Plus Jakarta Sans", sans-serif;
}
.footer-brand-name {
	font-weight: 800;
	font-size: 15px;
	color: #fff;
	letter-spacing: -0.3px;
}
.footer-about {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.36);
	line-height: 1.7;
	max-width: 230px;
	margin-bottom: 20px;
}
.footer-col-h {
	font-size: 11px;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.32);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 14px;
}
.footer-links {
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.ft-link {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.48);
	text-decoration: none;
	/* transition:
	color 0.2s,
	padding-left 0.2s; */
}
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.footer-copy {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.26);
}

.footer-copy-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.footer-copy-link:hover {
	color: rgba(255, 255, 255, 0.6);
}

/* CHATBOT (supplemental) */
.chat-btn-ico {
	font-size: 26px;
	color: #fff;
}
.chat-close-ico {
	font-size: 24px;
	color: #fff;
	display: none;
}
.chat-head-info {
	display: flex;
	align-items: center;
	gap: 12px;
}
.chat-head-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.chat-head-avatar .material-symbols-outlined {
	color: #fff;
	font-size: 20px;
}
.chat-head-name {
	font-weight: 700;
	font-size: 14px;
	color: #fff;
}
.chat-head-status {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.65);
	display: flex;
	align-items: center;
	gap: 5px;
}
.chat-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4ade80;
	display: inline-block;
}
.chat-head-close {
	background: rgba(255, 255, 255, 0.12);
	border: none;
	border-radius: 8px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.chat-head-close .material-symbols-outlined {
	color: #fff;
	font-size: 18px;
}
.chat-bot-2 {
	animation-delay: 0.4s;
}
.chat-send-ico {
	font-size: 19px;
	color: #fff;
}

/* THEME SWITCHER (built by JS) */
.tsw-label {
	font-size: 9px;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.45);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 10px;
	text-align: center;
}
.tsw-dots {
	display: flex;
	flex-direction: column;
	gap: 7px;
	align-items: center;
}
.theme-dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition:
		transform 0.18s,
		box-shadow 0.18s;
	display: block;
	padding: 0;
	outline: none;
}
.theme-dot:hover {
	transform: scale(1.2);
}

.page-id-48 .in-hero, .post-type-archive-service .svl-hero{
	padding-top: 100px;
}
.page-id-18 #plans{
	padding-bottom: 70px;
	padding-top: 100px;
}
.page-id-18 .first_white{
	padding-top: 70px;
}
.footer-copy a{
	font-size: 12px;
	color: rgba(255, 255, 255, 0.26);
	text-decoration: none;
	&:hover{
		color: #fff;
	}
}
/* -- RESPONSIVE 1024px tablet/small-laptop -----------------------------
Tightens section padding, grid gaps and the fixed (non-clamp) font sizes
so the layout stays comfortable between the desktop and 768px breakpoints. */
@media (max-width: 1200px) {
	#nav.sc {
		padding: 0 10px;
	}
}

@media (max-width: 1180px){
	.sec.sec-white.video-sec{
		padding-bottom: 15px;
	}
	.nl-grp {
		gap: 20px;
	}
}

@media (max-width: 1024px) {
        .nl {
    font-size: 13px;
}
.btn-sm {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 10px;
}
	/* Layout & section rhythm */
	.wrap {
		padding: 0 32px;
	}
	.sec {
		padding: 76px 0;
	}
	.g2 {
		gap: 44px;
	}
	.g3 {
		gap: 18px;
	}

	/* Shared section spacing utilities */
	.mb-52 {
		margin-bottom: 40px;
	}
	.mb-56 {
		margin-bottom: 42px;
	}
	.mb-60 {
		margin-bottom: 44px;
	}
	.mb-64 {
		margin-bottom: 46px;
	}
	.mb-72 {
		margin-bottom: 52px;
	}
	.sec-sub {
		font-size: 15px;
	}

	/* HERO */
	#hero {
		padding-top: 88px;
		padding-bottom: 48px;
	}
	.hero-grid {
		gap: 48px;
	}
	.hero-sub {
		font-size: 16px;
		margin-bottom: 28px;
	}
	.hero-btns {
		margin-bottom: 32px;
	}
	.dash-card {
		padding: 22px;
	}
	.dash-stat-num {
		font-size: 24px;
	}

	/* STATS */
	.stats-sec {
		padding: 56px 0;
	}
	.stat-num {
		font-size: 42px;
		letter-spacing: -1.8px;
	}

	/* AGENTS */
	.agents-title {
		margin-bottom: 12px;
	}
	.agents-sub {
		font-size: 16px;
	}
	.agent-card {
		padding: 28px 22px;
	}
	.agent-featured {
		padding: 30px 22px;
	}
	.agent-h {
		font-size: 19px;
	}
	.agent-p {
		font-size: 13px;
		margin-bottom: 20px;
	}
	.agent-feats {
		margin-bottom: 22px;
	}

	/* HOW IT WORKS */
	.how-title {
		margin-bottom: 8px;
	}
	.sp-content {
		padding: 38px 40px;
	}
	.sp-title {
		font-size: 23px;
	}
	.sp-desc {
		font-size: 14px;
		margin-bottom: 20px;
	}

	/* COMPARE */
	.cmp-h {
		font-size: 14px;
	}
	.cmp-p {
		font-size: 12px;
	}

	/* SERVICES */
	.svc-head {
		margin-bottom: 40px;
	}
	.svc-card {
		padding: 22px;
	}

	/* BESPOKE */
	.bsp-head {
		margin-bottom: 52px;
		gap: 32px;
	}
	.bsp-desc {
		font-size: 15px;
		margin-bottom: 26px;
	}
	.bsp-stat {
		padding: 22px 24px;
	}
	.bsp-stat-num {
		font-size: 30px;
	}

	/* INDUSTRIES */
	.industries-sub {
		font-size: 15px;
	}
	.ind-card {
		padding: 22px 18px;
	}

	/* TESTIMONIALS */
	.testi-card {
		padding: 30px;
	}
	.testi-quote {
		font-size: 14px;
		margin-bottom: 20px;
	}

	/* ABOUT */
	.about-grid {
		gap: 48px;
	}
	.about-p {
		font-size: 15px;
	}
	.about-feats {
		margin-bottom: 28px;
	}
	.asc {
		padding: 36px;
	}
	.asc-stat-num {
		font-size: 32px;
	}

	/* PRICING */
	.price-card {
		padding: 32px 26px;
	}
	.price-featured {
		padding: 44px 26px 32px;
	}
	.price-amt {
		font-size: 40px;
		letter-spacing: -1.5px;
	}
	.price-amt.sm {
		font-size: 32px;
	}

	/* FAQ */
	.faq-grid {
		gap: 48px;
	}
	.faq-summary {
		padding: 18px 20px;
		font-size: 14px;
	}
	.faq-answer {
		padding: 0 20px 18px;
		font-size: 13px;
	}

	/* CONTACT */
	.contact-grid {
		gap: 48px;
	}
	.contact-lead {
		font-size: 15px;
		margin-bottom: 28px;
	}
	.contact-info {
		margin-bottom: 28px;
	}
	.contact-card {
		padding: 34px;
	}

	/* FOOTER */
	.footer {
		padding: 56px 0 24px;
	}
	.footer-grid {
		gap: 32px;
		margin-bottom: 42px;
	}
}

/* -- RESPONSIVE 991px small tablet -------------------------------------
Further compresses section rhythm, grid gaps and card padding. */
@media (max-width: 991px) {
	/* Layout & section rhythm */
	.bsp-col {
    max-width:50%;
}
.bsp-title , .svc-title , .industries-title ,.about-h2 , .pricing-title , .faq-title , .how-title{
    font-size: clamp(30px, 3vw, 56px); line-height:1.2;
}
.hero-h1 {
    font-size: clamp(30px, 4.8vw, 52px);
}
	.wrap {
		padding: 0 28px;
	}
	.sec {
		padding: 60px 0;
	}
	.g2 {
		gap: 36px;
	}
	.g3 {
		gap: 16px;
	}
	.g4 {
		gap: 12px;
	}

	/* Shared section spacing utilities */
	.mb-52 {
		margin-bottom: 34px;
	}
	.mb-56 {
		margin-bottom: 36px;
	}
	.mb-60 {
		margin-bottom: 38px;
	}
	.mb-64 {
		margin-bottom: 40px;
	}
	.mb-72 {
		margin-bottom: 44px;
	}
	.mt-28 {
		margin-top: 22px;
	}
	.mt-36 {
		margin-top: 28px;
	}

	/* HERO */
	#hero {
		padding-top: 80px;
		padding-bottom: 80px;
		padding-bottom: 40px;
	}
	.hero-grid {
		gap: 40px;
	}
	.hero-btns {
		margin-bottom: 28px;
	}

	/* STATS */
	.stats-sec {
		padding: 48px 0;
	}

	/* AGENTS */
	.agents-grid {
		margin-bottom: 18px;
	}
	.agent-card {
		padding: 24px 20px;
	}
	.agent-featured {
		padding: 26px 20px;
	}

	/* HOW IT WORKS */
	.sp-content {
		padding: 34px 32px;
	}

	/* SERVICES */
	.svc-head {
		margin-bottom: 34px;
	}

	/* BESPOKE */
	.bsp-head {
		margin-bottom: 44px;
	}
	.bsp-stat {
		padding: 20px 20px;
	}
	.bsp-stat-num {
		font-size: 26px;
	}

	/* TESTIMONIALS */
	.testi-card {
		padding: 26px;
	}

	/* ABOUT */
	.about-grid {
		gap: 40px;
	}
	.about-feats {
		margin-bottom: 18px;	margin-top: 18px;
	}
	.asc {
		padding: 32px;
	}

	/* PRICING */
	.pricing-grid {
		padding-top: 12px;
	}
	.price-card {
		padding: 28px 22px;
	}
	.price-featured {
		padding: 38px 22px 28px;
	}

	/* FAQ */
	.faq-grid {
		gap: 40px;
	}

	/* CONTACT */
	.contact-grid {
		gap: 40px;
	}
	.contact-card {
		padding: 30px;
	}

	/* FOOTER */
	.footer {
		padding: 48px 0 22px;
	}
	.footer-grid {
		gap: 28px;
		margin-bottom: 36px;
	}
}
@media (max-width: 850px) {
    .bsp-col {
    max-width: 100%;
}
#bsp-info {
    margin-top: 40px;
}
.toast-1 {
    bottom: -37px;
    left: -8px;
    min-width: 200px;
}
.wrap {
    padding: 0 28px;
    /*margin:30px 0 30px;*/
}
}
/* -- RESPONSIVE 767px bespoke stat sizing ------------------------------ */
@media (max-width: 767px) {
	.bsp-stat-num {
		font-size: 24px;
	}
	.lg-side {
    margin-bottom: 20px;
}
	.sec {
    padding: 30px 0;
}
	.btn-lg {
		padding: 16px 25px;
		font-size: 13px;
	}
	.pc-ben-visual.price_about img{
		height: auto;
	}
	.toast-2{
		right: -8px;
	}
	.pc-table-wrap {
		overflow-x: auto;
		max-width: 100% !important;
		width: 100%;
		transform: unset !important;
	}

	.r4u-filter-search{
		margin-inline: auto;
	}
	.mm-contact-link{
		justify-content: center;
	}
	.pc-maint-light {
		background: var(--wh);
		border: 1px solid var(--t);
		border-top: none;
		border-right: 1px solid var(--t);
	}
}

/* -- RESPONSIVE 575px phones -------------------------------------------
Compact single-column rhythm, smaller bespoke stat numbers, and
heading font sizes stepped down to suit phone-width screens. */
@media (max-width: 575px) {
	/* -- Responsive (mobile) menu smaller links on phones ------------------ */
	.ml {
		font-size: 16px;
		padding: 7px 0;
	}
	.ct-submit {
    padding: 11px 11px 11px 18px !important;
    gap: 9px !important;
    font-size: 13px !important;
}
	.ct-grid {
    display: block !important;
}
	.ct-channel-txt {
    gap: 3px;
    min-width: 100% !important;
    font-size:12px !important;
}
	.bdg {
     letter-spacing: normal; 
}
	.ag-metric-n {
    font-size: 28px;
}
	h1 {
    font-size: 28px !important;
}
	h2 {
    font-size: 18px !important;
}
	.mm-contact {
    font-size: 13px;
}
	.lg-layout {
    display: block !important;
}
.btn-xl , .btn-ghost-lg ,.bdo , .btn {
    font-size: 14px;
    padding: 10px 25px;
}
.footer-about {
    margin-bottom: 10px;
}
.fl3 {
    margin-bottom: 0;
}
.sp-icon-ring {
    width: 52px;
    height: 52px;
}
.asc-stat-num {
    font-size: 24px;
}
	.ag-h1 {
    font-size: clamp(28px,4vw, 52px);
}
		.mm-close {
    top: 1px;
    right: 2px;
}
	.bsp-head {
    margin-bottom: 0px;
}
	#nav.sc .nav-inner {
    padding: 6px 0;
}

	/* Layout & section rhythm */
	.wrap {
		padding: 0 18px;
	}
	/*.sec {*/
	/*	padding: 52px 0;*/
	/*}*/
	.g2,
	.g3 {
		gap: 22px;
	}
	.g4 {
		gap: 12px;
	}

	/* Section header margins */
	.mb-52 {
		margin-bottom: 15px;
	}
	.mb-56 {
		margin-bottom: 15px;
	}
	.mb-60 {
		margin-bottom: 15px;
	}
	.mb-64 {
		margin-bottom: 15px;
	}
	.mb-72 {
		margin-bottom: 15px;
	}

	/* -- HEADINGS clamp floors are too large for phones; step them down. ----
	Each rule overrides the clamp()/fixed min so titles shrink with the
	viewport instead of staying locked at their desktop minimum. */
	.hero-h1 {
		font-size: 34px;
		letter-spacing: -1px;
		margin-bottom: 18px;
	}
	.agents-title {
		font-size: 27px;
		letter-spacing: -1px;
	}
	.agents-sub {
		font-size: 15px;
	}
	.compare-title {
		font-size: 26px;
		letter-spacing: -0.8px;
	}
	.how-title {
		font-size: 26px;
		letter-spacing: -0.8px;
	}
	.how-note {
		font-size: 15px;
	}
	.svc-title {
		font-size: 25px;
		letter-spacing: -0.6px;
	}
	.bsp-title {
		font-size: 27px;
		letter-spacing: -1px;
	}
	.bsp-desc {
		font-size: 15px;
	}
	.industries-title {
		font-size: 26px;
		letter-spacing: -0.8px;
	}
	.industries-sub {
		font-size: 14px;
	}
	.testi-title {
		font-size: 25px;
		letter-spacing: -0.6px;
	}
	.about-h2 {
		font-size: 24px;
		letter-spacing: -0.6px;
	}
	.asc-h {
		font-size: 21px;
	}
	.pricing-title {
		font-size: 25px;
		letter-spacing: -0.8px;
	}
	.faq-title {
		font-size: 24px;
		letter-spacing: -0.6px;
	}
	.contact-h2 {
		font-size: 24px;
		letter-spacing: -0.8px;
	}
	.contact-card-h {
		font-size: 20px;
	}
	.sec-sub {
		font-size: 14px;
	}

	/* HERO */
	#hero {
		padding-top: 74px;
		padding-bottom: 74px;
	}
	.toast-1 {
		/* left: -7px; */
		left: 0;
	}
	.dash-wrap {
		position: relative;
		margin-top: 30px;

		padding-bottom: 32px;
	}
	.hero-grid {
		gap: 32px;
	}
	.hero-sub {
		font-size: 15px;
	}
	.dash-card {
		padding: 18px;
	}

	/* STATS */
	.stats-sec {
		padding: 40px 0;
	}
	.stat-num {
		font-size: 30px;
		letter-spacing: -1px;
	}

	/* AGENTS */
	.agent-card,
	.agent-featured {
		padding: 22px 18px;
	}
	.agent-h {
		font-size: 18px;
	}

	/* HOW IT WORKS */
	.sp-content {
		padding: 28px 22px;
	}
	.sp-title {
		font-size: 21px;
	}

	/* SERVICES */
	.svc-card {
		padding: 20px;
	}

	/* BESPOKE */
	.bsp-stats {
		grid-template-columns: 1fr 1fr;
	}
	.bsp-stat {
		padding: 18px 16px;
	}
	.bsp-stat-num {
		font-size: 22px;
	}

	/* TESTIMONIALS */
	.testi-card {
		padding: 24px;
	}

	/* ABOUT */
	.asc {
		padding: 26px;
	}
	.asc-stat-num {
		font-size: 28px;
	}

	/* PRICING */
	.price-card,
	.price-featured {
		padding: 26px 20px;
	}
	.price-amt {
		font-size: 28px;
	}
	.price-amt.sm {
		font-size: 28px;
	}

	/* CONTACT */
	.contact-card {
		padding: 26px;
	}

	/* FOOTER */
	.footer {
		padding: 44px 0 20px;
	}
	/* Collapse the 4-column footer to 2 columns. At its full 4-up width the
	link columns fall below the min-width of single words like
	"Testimonials"/"Automation" on narrow phones, forcing horizontal
	overflow. Two columns keep every word inside its track. */
	.footer-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px 20px;
	}
	/* .footer-grid > div:first-child {
	grid-column: auto;
} */
	.footer-grid > :first-child {
		grid-column: 1 / -1;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.footer-about{
		max-width: 100%;
		text-align: center;
	}
	.form-row2 {
		display: grid;
		grid-template-columns: 1fr;
		gap: 13px;
	}

	/* -- CHATBOT shrink so the panel fits within the viewport on phones. ----
	Pull the widget closer to the corner and size the window to the
	available width instead of a fixed 340px. */
	#chat-widget {
		bottom: 18px;
		left: 18px;
	}
	#chat-btn {
		width: 50px;
		height: 50px;
	}
	#chat-window {
		bottom: 62px;
		width: calc(100vw - 36px);
		max-width: 320px;
	}
	#chat-msgs {
		max-height: 240px;
		min-height: 150px;
		padding: 14px 12px;
	}
	#chat-header {
		padding: 13px 14px;
	}
	#chat-input-row {
		padding: 10px 12px;
	}
	.r4u-to-top {
		bottom: 15px;
		width: 40px;
		height: 40px;
	}
}

/* -- RESPONSIVE 400px small phones -------------------------------------
Final step-down for the narrowest devices so headings never overflow
and long words don't force horizontal scroll. */
@media (max-width: 400px) {
    .sp-sidebar {
    flex-direction: column;
}
	.wrap {
		padding: 0 14px;
	}
	.r4u-to-top {
		right: 15px;
		bottom: 15px;
		width: 35px;
		height: 35px;
	}

	/* -- Headings one more notch smaller ----------------------------------- */
	.hero-h1 {
		font-size: 30px;
		letter-spacing: -0.5px;
	}
	.agents-title {
		font-size: 24px;
	}
	.compare-title {
		font-size: 23px;
	}
	.how-title {
		font-size: 23px;
	}
	.svc-title {
		font-size: 22px;
	}
	.bsp-title {
		font-size: 24px;
	}
	.industries-title {
		font-size: 23px;
	}
	.testi-title {
		font-size: 22px;
	}
	.about-h2 {
		font-size: 22px;
	}
	.asc-h {
		font-size: 20px;
	}
	.pricing-title {
		font-size: 22px;
	}
	.faq-title {
		font-size: 22px;
	}
	.contact-h2 {
		font-size: 22px;
	}
	.sp-title {
		font-size: 19px;
	}

	/* Guard against long words (URLs, emails) overflowing narrow screens */
	.hero-h1,
	.agents-title,
	.compare-title,
	.how-title,
	.svc-title,
	.bsp-title,
	.industries-title,
	.testi-title,
	.about-h2,
	.pricing-title,
	.faq-title,
	.contact-h2 {
		overflow-wrap: break-word;
	}

	/* Stats & bespoke numbers a touch smaller to hold two-up layout */
	.stat-num {
		font-size: 25px;
	}
	.bsp-stats {
		grid-template-columns: 1fr;
	}
	.footer-grid{
		grid-template-columns: 1fr;
		text-align: center;
	}
	.footer-bottom {
		text-align: center;
		justify-content: center;
	}
}
@media (max-width: 330px){
	.r4u-to-top {
		right: 10px;
		bottom: 38px;
		width: 30px;
		height: 30px;
	}
	.pc-table th, .pc-table td {
    padding: 14px 3px !important;
} 
}

.bdg.text-white{
	color: #fff !important;
	border-color: #ffffff85 !important;
}

#tsw{
	display: none;
}
/* ==========================================================================
ABOUT PAGE
========================================================================== */

/* ================================================================
-- ABOUT PAGE extends style.css --------------------------------------
Adds only the section patterns the About page needs. Every token,
button, card, badge, reveal and breakpoint comes from style.css.
================================================================ */

/* Shared heading scale (light + dark section variants) */
.ab-h2 {
	font-size: clamp(28px, 4vw, 52px);
	font-weight: 900;
	letter-spacing: -1.2px;
	line-height: 1.08;
	margin-bottom: 14px;
}
.ab-h2.lt {
	color: #fff;
}
.ab-lead {
	font-size: 17px;
	color: var(--mu);
	line-height: 1.72;
	margin: 0 auto;
	max-width: 560px;
}
.ab-lead.lt {
	color: rgba(255, 255, 255, 0.48);
}

/* -- HERO -------------------------------------------------------------- */
.ab-hero-h1 {
	font-size: clamp(34px, 3.9vw, 52px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -1.5px;
	margin-bottom: 22px;
}
.ab-hero-p {
	font-size: 17px;
	line-height: 1.78;
	color: var(--mu);
	max-width: 520px;
	margin-bottom: 16px;
}
.ab-hero-p.last {
	margin-bottom: 34px;
}
.ab-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.ab-badges .sp-chip {
	padding: 9px 16px;
	font-size: 12px;
	font-weight: 700;
	animation: abFloat 5s ease-in-out infinite;
}
.ab-badges .sp-chip:nth-child(2) {
	animation-delay: 0.7s;
}
.ab-badges .sp-chip:nth-child(3) {
	animation-delay: 1.4s;
}
.ab-badges .sp-chip .material-symbols-outlined {
	font-size: 15px;
}
@keyframes abFloat {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
}

/* -- Hero visual browser mock ------------------------------------------ */
.ab-browser {
	border: 1px solid var(--br);
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 20px;
}
.ab-browser-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	background: #efece7;
	border-bottom: 1px solid var(--br);
}
.ab-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.ab-dot.r {
	background: #eb9184;
}
.ab-dot.y {
	background: #edc35c;
}
.ab-dot.g {
	background: #85c48c;
}
.ab-url {
	flex: 1;
	margin-left: 8px;
	background: #fff;
	border-radius: 99px;
	padding: 5px 12px;
	font-size: 10px;
	font-weight: 700;
	color: var(--mu);
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}
.ab-url .material-symbols-outlined {
	font-size: 12px;
	color: var(--t);
}
.ab-browser-body {
	padding: 16px 14px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.ab-sk-line {
	height: 9px;
	border-radius: 99px;
	background: linear-gradient(
		90deg,
		rgba(13, 110, 112, 0.22),
		rgba(13, 110, 112, 0.06)
	);
}
.ab-sk-line.w70 {
	width: 70%;
}
.ab-sk-line.w45 {
	width: 45%;
	background: #eceae5;
}
.ab-sk-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 4px;
}
.ab-sk-box {
	height: 34px;
	border-radius: 9px;
	background: #f3f0eb;
	border: 1px solid #e9e5df;
}
.ab-sk-box:first-child {
	background: var(--ts);
	border-color: var(--tb);
}

/* -- Hero visual service layers ---------------------------------------- */
.ab-layers {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 18px;
}
.ab-layer {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 13px;
	border-radius: 12px;
	background: var(--w);
	transition:
		background 0.25s,
		transform 0.25s;
}
.ab-layer:hover {
	background: var(--ts);
	transform: translateX(3px);
}
.ab-layer-ico {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--ts);
	color: var(--t);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ab-layer-ico .material-symbols-outlined {
	font-size: 18px;
}
.ab-layer-txt {
	flex: 1;
	min-width: 0;
}
.ab-layer-h {
	font-size: 13px;
	font-weight: 700;
	color: var(--n);
}
.ab-layer-p {
	font-size: 11px;
	color: var(--mu);
	margin-top: 1px;
}
.ab-layer-tag {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--t);
	background: var(--ts);
	border: 1px solid var(--tb);
	border-radius: 99px;
	padding: 4px 9px;
	flex-shrink: 0;
}
.ab-layer-tag.am {
	color: var(--a);
	background: var(--as);
	border-color: rgba(229, 162, 39, 0.3);
}

/* -- MISSION & VALUES -------------------------------------------------- */
.mv-grid {
	gap: 28px;
	align-items: stretch;
}
.mv-card {
	border-radius: var(--r);
	padding: 44px;
	height: 100%;
	position: relative;
	overflow: hidden;
	transition:
		transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.35s,
		border-color 0.35s;
}
.mv-card:hover {
	transform: translateY(-5px);
}
.mv-mission {
	background: linear-gradient(145deg, var(--t), #0a4e52);
	box-shadow: 0 18px 60px rgba(13, 110, 112, 0.26);
}
.mv-mission:hover {
	box-shadow: 0 26px 74px rgba(13, 110, 112, 0.36);
}
.mv-mission::before {
	content: "";
	position: absolute;
	top: -50px;
	left: -46px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
}
.mv-mission::after {
	content: "";
	position: absolute;
	bottom: -70px;
	right: -70px;
	width: 230px;
	height: 230px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
}
.mv-values {
	background: rgba(255, 255, 255, 0.74);
	backdrop-filter: saturate(160%) blur(18px);
	-webkit-backdrop-filter: saturate(160%) blur(18px);
	border: 1.5px solid var(--br);
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.055);
}
.mv-values:hover {
	border-color: var(--tb);
	box-shadow: 0 20px 56px rgba(13, 110, 112, 0.14);
}
.mv-values::after {
	content: "";
	position: absolute;
	top: -90px;
	right: -80px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: rgba(13, 110, 112, 0.05);
}
.mv-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.mv-ico {
	width: 64px;
	height: 64px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	transition:
		transform 0.3s,
		box-shadow 0.3s;
}
.mv-ico .material-symbols-outlined {
	font-size: 30px;
}
.mv-card:hover .mv-ico {
	transform: scale(1.06) rotate(-4deg);
}
.mv-ico-glass {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #fff;
}
.mv-ico-teal {
	background: linear-gradient(135deg, var(--t), var(--tl));
	color: #fff;
	box-shadow: 0 8px 28px rgba(13, 110, 112, 0.28);
}
.mv-kicker {
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 10px;
}
.mv-mission .mv-kicker {
	color: rgba(255, 255, 255, 0.55);
}
.mv-values .mv-kicker {
	color: var(--t);
}
.mv-h {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -0.6px;
	margin-bottom: 14px;
}
.mv-mission .mv-h {
	color: #fff;
}
.mv-p {
	font-size: 15px;
	line-height: 1.78;
	margin-bottom: 16px;
}
.mv-mission .mv-p {
	color: rgba(255, 255, 255, 0.66);
}
.mv-values .mv-p {
	color: var(--mu);
}
.mv-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: auto;
	padding-top: 16px;
}
.mv-values-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: auto;
	padding-top: 18px;
}
.mv-value {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 13px;
	border-radius: 12px;
	background: var(--ts);
	border: 1px solid var(--tb);
	transition:
		background 0.22s,
		transform 0.22s;
}
.mv-value:hover {
	background: rgba(13, 110, 112, 0.14);
	transform: translateY(-2px);
}
.mv-value .material-symbols-outlined {
	font-size: 17px;
	color: var(--t);
	flex-shrink: 0;
}
.mv-value-t {
	font-size: 12px;
	font-weight: 700;
	color: var(--n);
}
.mv-value.am {
	background: var(--as);
	border-color: rgba(229, 162, 39, 0.26);
}
.mv-value.am .material-symbols-outlined {
	color: var(--a);
}
.mv-value.am:hover {
	background: rgba(229, 162, 39, 0.16);
}

/* -- PROCESS ----------------------------------------------------------- */
.pr-track {
	position: relative;
}
/* Continuous connector behind the cards, aligned to the icon centres.
The cards are opaque, so the line only reads through the gutters. */
.pr-track::before {
	content: "";
	position: absolute;
	top: 62px;
	left: 12%;
	right: 12%;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(13, 110, 112, 0.3),
		rgba(13, 110, 112, 0.3),
		transparent
	);
	z-index: 0;
}
.pr-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	position: relative;
	z-index: 1;
}
.pr-step {
	padding: 34px 26px 30px;
	position: relative;
	overflow: hidden;
}
.pr-num {
	position: absolute;
	top: 18px;
	right: 22px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 34px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -1.5px;
	color: rgba(13, 110, 112, 0.1);
	transition: color 0.3s;
}
.pr-step:hover .pr-num {
	color: rgba(13, 110, 112, 0.22);
}
.pr-ico {
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--t), var(--tl));
	box-shadow: 0 8px 24px rgba(13, 110, 112, 0.26);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	transition:
		transform 0.3s,
		box-shadow 0.3s;
}
.pr-ico .material-symbols-outlined {
	color: #fff;
	font-size: 26px;
}
.pr-step:hover .pr-ico {
	transform: scale(1.07) rotate(-4deg);
	box-shadow: 0 12px 32px rgba(13, 110, 112, 0.38);
}
.pr-kicker {
	font-size: 10px;
	font-weight: 800;
	color: var(--t);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 8px;
}
.pr-h {
	font-size: 19px;
	font-weight: 900;
	letter-spacing: -0.4px;
	margin-bottom: 9px;
}
.pr-p {
	font-size: 13px;
	color: var(--mu);
	line-height: 1.7;
}

/* -- TRUST & PARTNERSHIP ----------------------------------------------- */
.tr-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.tr-card {
	padding: 30px 26px;
	height: 100%;
}
.tr-ico {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgba(13, 110, 112, 0.18);
	border: 1px solid rgba(13, 110, 112, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	transition:
		background 0.28s,
		transform 0.28s;
}
.tr-ico .material-symbols-outlined {
	font-size: 22px;
	color: #5ee0d4;
	transition: color 0.28s;
}
.tr-card:hover .tr-ico {
	background: var(--t);
	transform: translateY(-2px) rotate(-4deg);
}
.tr-card:hover .tr-ico .material-symbols-outlined {
	color: #fff;
}
.tr-h {
	font-size: 15px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.2px;
	margin-bottom: 8px;
}
.tr-p {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.42);
	line-height: 1.68;
}

/* -- CLOSING CTA BAND -------------------------------------------------- */
.cta-band {
	background: linear-gradient(135deg, var(--n), var(--nd));
	position: relative;
	overflow: hidden;
	text-align: center;
}
.cta-band::before {
	content: "";
	position: absolute;
	top: -140px;
	right: -90px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: rgba(13, 110, 112, 0.12);
	filter: blur(60px);
}
.cta-band::after {
	content: "";
	position: absolute;
	bottom: -170px;
	left: -110px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba(229, 162, 39, 0.07);
	filter: blur(70px);
}
.cta-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
}
.cta-inner .contact-lead {
	max-width: 580px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 34px;
}
.cta-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 30px;
}
.cta-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* -- RESPONSIVE -------------------------------------------------------- */
@media (max-width: 1024px) {
	.pr-track::before {
		display: none;
	}
	.pr-grid {
		grid-template-columns: 1fr 1fr;
	}
	.tr-grid {
		grid-template-columns: 1fr 1fr;
	}
	.mv-card {
		padding: 34px;
	}
	.mv-h {
		font-size: 23px;
	}
}

@media (max-width: 768px) {
	.ab-hero-p {
		font-size: 15px;
	}
	.mv-grid {
		gap: 20px;
	}
	.mv-card {
		padding: 28px 24px;
	}
	.mv-ico {
		width: 56px;
		height: 56px;
		border-radius: 16px;
		margin-bottom: 20px;
	}
	.mv-ico .material-symbols-outlined {
		font-size: 26px;
	}
	.mv-h {
		font-size: 21px;
	}
	.mv-p {
		font-size: 14px;
	}
	.pr-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.pr-step {
		padding: 28px 22px 26px;
	}
	.tr-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.ab-layer-p {
		display: none;
	}
}

@media (max-width: 480px) {
	.mv-values-list {
		grid-template-columns: 1fr;
	}
	.ab-badges .sp-chip {
		padding: 8px 13px;
		font-size: 11px;
	}
}

@media (max-width: 400px) {
	.ab-hero-h1 {
		font-size: 28px;
		letter-spacing: -0.5px;
	}
	.ab-h2 {
		font-size: 23px;
		letter-spacing: -0.6px;
	}
	.mv-h {
		font-size: 19px;
	}
	.pr-h {
		font-size: 17px;
	}
	.ab-hero-h1,
	.ab-h2,
	.mv-h,
	.pr-h,
	.tr-h {
		overflow-wrap: break-word;
	}
	.ab-layer-tag {
		display: none;
	}
}

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

/* ================================================================
-- SERVICES PAGE extends style.css -----------------------------------
Only the listing-page patterns live here. Tokens, buttons, cards,
badges, reveals, ticker, nav and footer all come from style.css.
================================================================ */

/* -- PAGE HEADER ------------------------------------------------------- */
.svl-hero {
	position: relative;
	overflow: hidden;
	padding: 172px 0 92px;
}
.svl-hero-inner {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 780px;
	margin: 0 auto;
}
.svl-h1 {
	font-size: clamp(38px, 5vw, 52px);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -2px;
	margin-bottom: 20px;
}
.svl-lead {
	font-size: 18px;
	line-height: 1.75;
	color: var(--mu);
	max-width: 620px;
	margin: 0 auto 34px;
}
.svl-hero-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 42px;
}
.svl-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	justify-content: center;
}
.svl-jump .sp-chip {
	text-decoration: none;
	cursor: pointer;
}
.svl-jump .sp-chip:hover {
	transform: translateY(-2px);
}

/* -- Section heading matches .svc-title's scale, with a tuned line-height ----
for centred two-line headings. */
.svl-sec-h {
	font-size: clamp(26px, 3.5vw, 46px);
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1.12;
}

/* -- SERVICE CARDS ----------------------------------------------------- */
.svl-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.svl-card {
	position: relative;
	padding: 34px 30px 30px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* clears the fixed nav when a jump chip targets this card */
	scroll-margin-top: 110px;
}
.svl-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 4px;
	width: 0;
	background: linear-gradient(90deg, var(--t), var(--tl));
	transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.svl-card:hover::before {
	width: 100%;
}
.svl-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 22px;
}
.svl-ico {
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--t), var(--tl));
	box-shadow: 0 8px 24px rgba(13, 110, 112, 0.26);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition:
		transform 0.3s,
		box-shadow 0.3s;
}
.svl-ico .material-symbols-outlined {
	color: #fff;
	font-size: 27px;
}
.svl-card:hover .svl-ico {
	transform: scale(1.07) rotate(-4deg);
	box-shadow: 0 12px 32px rgba(13, 110, 112, 0.36);
}
.svl-num {
	font-size: 30px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -1.2px;
	color: rgba(13, 110, 112, 0.12);
	transition: color 0.3s;
}
.svl-card:hover .svl-num {
	color: rgba(13, 110, 112, 0.24);
}
.svl-h {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.5px;
	line-height: 1.25;
	margin-bottom: 11px;
}
.svl-p {
	font-size: 14px;
	color: var(--mu);
	line-height: 1.72;
	margin-bottom: 24px;
}
.svl-link {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--t);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding-bottom: 3px;
	transition: border-color 0.22s;
}
.svl-link .material-symbols-outlined {
	font-size: 16px;
	transition: transform 0.22s;
}
.svl-link:hover {
	border-bottom-color: var(--t);
}
.svl-link:hover .material-symbols-outlined {
	transform: translateX(3px);
}

/* -- INCLUDED-WITH-EVERY-SERVICE STRIP --------------------------------- */
.svl-assure-sec {
	padding: 72px 0;
}
.svl-assure-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.svl-assure {
	padding: 26px 24px;
}
.svl-assure .ib {
	margin-bottom: 16px;
}
.svl-assure-h {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.2px;
	margin-bottom: 6px;
}
.svl-assure-p {
	font-size: 13px;
	color: var(--mu);
	line-height: 1.65;
}

/* -- CLOSING CTA BAND -------------------------------------------------- */
.svl-cta {
	background: linear-gradient(135deg, var(--n), var(--nd));
	position: relative;
	overflow: hidden;
	text-align: center;
}
.svl-cta::before {
	content: "";
	position: absolute;
	top: -140px;
	right: -90px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: rgba(13, 110, 112, 0.12);
	filter: blur(60px);
}
.svl-cta::after {
	content: "";
	position: absolute;
	bottom: -170px;
	left: -110px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba(229, 162, 39, 0.07);
	filter: blur(70px);
}
.svl-cta-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
}
.svl-cta-inner .contact-lead {
	max-width: 580px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 34px;
}
.svl-cta-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 30px;
}
.svl-cta-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* -- RESPONSIVE -------------------------------------------------------- */
@media (max-width: 1024px) {
	.svl-hero {
		padding: 150px 0 78px;
	}
	.svl-grid {
		grid-template-columns: 1fr 1fr;
	}
	.svl-assure-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.svl-hero {
		padding: 126px 0 62px;
	}
	.svl-lead {
		font-size: 16px;
		margin-bottom: 28px;
	}
	.svl-hero-btns {
		margin-bottom: 32px;
	}
	.svl-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.svl-card {
		padding: 28px 24px 26px;
	}
	.svl-h {
		font-size: 18px;
	}
	.svl-assure-sec {
		padding: 52px 0;
	}
	.svl-assure-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.svl-assure {
		padding: 20px 18px;
	}
}

@media (max-width: 480px) {
	.svl-jump .sp-chip {
		padding: 6px 12px;
		font-size: 11px;
	}
}

@media (max-width: 400px) {
	.svl-h1 {
		font-size: 30px;
		letter-spacing: -0.6px;
	}
	.svl-h1,
	.svl-h,
	.svl-assure-h {
		overflow-wrap: break-word;
	}
	.svl-num {
		font-size: 24px;
	}
}

/* ==========================================================================
SERVICE DETAIL PAGES
========================================================================== */

/* ================================================================
-- SERVICE DETAIL PAGE extends style.css -----------------------------
Template for a single service. Three content sections:
1) overview hero  2) details + aside  3) closing CTA
================================================================ */

/* -- 1. OVERVIEW HERO -------------------------------------------------- */
.sd-hero {
	position: relative;
	overflow: hidden;
	padding: 148px 0 96px;
}
.sd-hero-grid {
	align-items: center;
	gap: 72px;
	position: relative;
	z-index: 2;
}
.sd-crumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--mu);
	margin-bottom: 22px;
}
.sd-crumb a {
	color: var(--mu);
	text-decoration: none;
	transition: color 0.2s;
}
.sd-crumb a:hover {
	color: var(--t);
}
.sd-crumb .material-symbols-outlined {
	font-size: 15px;
	color: #c7c2ba;
}
.sd-crumb-now {
	color: var(--t);
	font-weight: 700;
}
.sd-h1 {
	font-size: clamp(32px, 3.8vw, 52px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -1.6px;
	margin-bottom: 20px;
}
.sd-p {
	font-size: 17px;
	line-height: 1.78;
	color: var(--mu);
	max-width: 520px;
	margin-bottom: 26px;
}
.sd-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 34px;
}
.sd-hero-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* -- Hero visual responsive-website mock ------------------------------- */
.sd-visual {
	position: relative;
	isolation: isolate;
}
/* soft stage light so the device stack sits in space rather than on flat paper */
.sd-visual::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -10% -6% -16%;
	background:
		radial-gradient(
			58% 52% at 60% 26%,
			rgba(26, 150, 152, 0.22),
			transparent 70%
		),
		radial-gradient(
			52% 48% at 22% 88%,
			rgba(229, 162, 39, 0.13),
			transparent 72%
		);
	filter: blur(24px);
	pointer-events: none;
}
.sd-frame {
	position: relative;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, 0.72);
	background: linear-gradient(158deg, #fff 0%, #fcfbf9 52%, #f2efea 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 2px 6px rgba(24, 38, 56, 0.05),
		0 20px 44px -20px rgba(24, 38, 56, 0.3),
		0 52px 96px -46px rgba(13, 110, 112, 0.4);
}
.sd-frame:hover {
	transform: translateY(-5px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 2px 6px rgba(24, 38, 56, 0.05),
		0 26px 54px -20px rgba(24, 38, 56, 0.32),
		0 64px 110px -46px rgba(13, 110, 112, 0.46);
}
.sd-browser {
	border: 1px solid var(--br);
	border-radius: 13px;
	overflow: hidden;
	background: var(--wh);
	box-shadow: 0 1px 2px rgba(24, 38, 56, 0.06);
}
.sd-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	background: linear-gradient(180deg, #f6f3ee, #e9e5df);
	border-bottom: 1px solid var(--br);
}
.sd-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.sd-dot.r {
	background: #eb9184;
}
.sd-dot.y {
	background: #edc35c;
}
.sd-dot.g {
	background: #85c48c;
}
.sd-url {
	flex: 1;
	margin-left: 8px;
	background: var(--wh);
	border: 1px solid rgba(24, 38, 56, 0.07);
	border-radius: 99px;
	padding: 5px 12px;
	font-size: 10px;
	font-weight: 700;
	color: var(--mu);
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}
.sd-url .material-symbols-outlined {
	font-size: 12px;
	color: var(--t);
}
.sd-bar-acts {
	display: flex;
	gap: 3px;
	flex-shrink: 0;
	margin-left: 2px;
}
.sd-bar-acts i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #bfb9b1;
}
.sd-page {
	background: linear-gradient(180deg, #fff, #fdfcfa);
	padding: 14px;
}
/* -- miniature site nav ------------------------------------------------ */
.sd-site-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 11px;
	margin-bottom: 12px;
	border-bottom: 1px solid #f0ede8;
}
.sd-site-logo {
	width: 30px;
	height: 9px;
	border-radius: 3px;
	background: linear-gradient(135deg, var(--t), var(--tl));
}
.sd-site-links {
	display: flex;
	gap: 8px;
	margin-left: auto;
}
.sd-site-links i {
	width: 20px;
	height: 5px;
	border-radius: 99px;
	background: rgba(24, 38, 56, 0.14);
}
.sd-site-cta {
	width: 34px;
	height: 14px;
	border-radius: 5px;
	background: var(--ts);
	border: 1px solid var(--tb);
}
/* -- miniature site hero ----------------------------------------------- */
.sd-wf-hero {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: center;
	gap: 14px;
	background: linear-gradient(
		135deg,
		rgba(13, 110, 112, 0.11),
		rgba(13, 110, 112, 0.03)
	);
	border: 1px solid rgba(13, 110, 112, 0.09);
	border-radius: 12px;
	padding: 16px 15px;
	margin-bottom: 12px;
}
.sd-wf-copy {
	min-width: 0;
}
.sd-wf-eyebrow {
	display: block;
	width: 40px;
	height: 6px;
	border-radius: 99px;
	background: rgba(229, 162, 39, 0.55);
	margin-bottom: 10px;
}
.sd-wf-art {
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	background:
		radial-gradient(
			82% 74% at 88% 92%,
			rgba(229, 162, 39, 0.55),
			transparent 68%
		),
		linear-gradient(150deg, var(--t), var(--tl) 70%, #35b3b0);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.85);
	box-shadow: 0 8px 20px -10px rgba(13, 110, 112, 0.7);
}
.sd-wf-art .material-symbols-outlined {
	font-size: 22px;
}
.sd-wf-l {
	height: 9px;
	border-radius: 99px;
	background: rgba(24, 38, 56, 0.22);
	margin-bottom: 7px;
}
.sd-wf-l.s {
	height: 6px;
	background: rgba(24, 38, 56, 0.13);
}
.sd-wf-l.w80 {
	width: 80%;
}
.sd-wf-l.w55 {
	width: 55%;
}
.sd-wf-l.w40 {
	width: 40%;
}
.sd-wf-btn {
	width: 66px;
	height: 20px;
	border-radius: 6px;
	background: linear-gradient(135deg, var(--t), var(--tl));
	box-shadow: 0 4px 10px -3px rgba(13, 110, 112, 0.55);
	margin-top: 11px;
}
/* -- miniature site feature row ---------------------------------------- */
.sd-wf-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 9px;
}
.sd-wf-card {
	border: 1px solid #edeae5;
	border-radius: 10px;
	padding: 10px 9px;
	background: linear-gradient(180deg, #fff, #faf9f7);
	transition: border-color 0.3s;
}
.sd-wf-card .sd-wf-l:last-child {
	margin-bottom: 0;
}
.sd-frame:hover .sd-wf-card {
	border-color: rgba(13, 110, 112, 0.18);
}
.sd-wf-ic {
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: linear-gradient(
		135deg,
		rgba(13, 110, 112, 0.16),
		rgba(13, 110, 112, 0.06)
	);
	color: var(--t);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 9px;
}
.sd-wf-ic .material-symbols-outlined {
	font-size: 13px;
}
/* -- phone overlay same site, small screen ----------------------------- */
.sd-phone {
	position: absolute;
	right: -44px;
	bottom: -72px;
	width: 128px;
	padding: 6px;
	border-radius: 20px;
	background: linear-gradient(160deg, #253549, #131f2e);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.09),
		0 22px 46px -14px rgba(24, 38, 56, 0.5);
	z-index: 3;
}
.sd-phone-notch {
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 42px;
	height: 9px;
	border-radius: 0 0 7px 7px;
	background: #131f2e;
	z-index: 2;
}
.sd-phone-screen {
	border-radius: 15px;
	background: var(--wh);
	overflow: hidden;
	padding: 16px 9px 11px;
}
.sd-phone-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.sd-phone-logo {
	width: 20px;
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(135deg, var(--t), var(--tl));
}
.sd-phone-bar i {
	width: 11px;
	height: 6px;
	border-radius: 2px;
	background: rgba(24, 38, 56, 0.16);
}
.sd-phone-hero {
	background: linear-gradient(
		135deg,
		rgba(13, 110, 112, 0.14),
		rgba(13, 110, 112, 0.03)
	);
	border-radius: 8px;
	padding: 9px 8px;
	margin-bottom: 7px;
}
.sd-phone-btn {
	display: block;
	width: 38px;
	height: 11px;
	border-radius: 4px;
	background: linear-gradient(135deg, var(--t), var(--tl));
	margin-top: 8px;
}
.sd-phone-stack {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sd-phone-card {
	height: 20px;
	border-radius: 6px;
	background: linear-gradient(180deg, #fff, #f6f4f0);
	border: 1px solid #ece9e4;
}
/* floating caption pill */
.sd-live {
	position: absolute;
	left: -28px;
	bottom: -24px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 15px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 14px 34px -12px rgba(24, 38, 56, 0.35);
	font-size: 12px;
	font-weight: 700;
	color: var(--n);
	white-space: nowrap;
}

/* -- HERO VISUAL PRIMITIVES (shared by all service pages) -------------- */
/* -- status / feature rows used by domain, hosting, maintenance, seo ---- */
.sd-rows {
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.sd-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 13px;
	border-radius: 12px;
	background: var(--w);
	transition:
		background 0.25s,
		transform 0.25s;
}
.sd-row:hover {
	background: var(--ts);
	transform: translateX(3px);
}
.sd-row-ico {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--ts);
	color: var(--t);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.sd-row-ico .material-symbols-outlined {
	font-size: 18px;
}
.sd-row-txt {
	flex: 1;
	min-width: 0;
}
.sd-row-h {
	font-size: 13px;
	font-weight: 700;
	color: var(--n);
}
.sd-row-p {
	font-size: 11px;
	color: var(--mu);
	margin-top: 1px;
}
.sd-tag {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--t);
	background: var(--ts);
	border: 1px solid var(--tb);
	border-radius: 99px;
	padding: 4px 9px;
	flex-shrink: 0;
}
.sd-tag.am {
	color: var(--a);
	background: var(--as);
	border-color: rgba(229, 162, 39, 0.3);
}

/* -- booking panel e-commerce & online booking ------------------------- */
.sd-panel {
	border: 1px solid var(--br);
	border-radius: 13px;
	overflow: hidden;
	margin-bottom: 14px;
	background: var(--wh);
	box-shadow: 0 1px 2px rgba(24, 38, 56, 0.06);
}
.sd-panel-head {
	padding: 11px 14px;
	background: linear-gradient(180deg, #f6f3ee, #e9e5df);
	border-bottom: 1px solid var(--br);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.sd-panel-title {
	font-size: 12px;
	font-weight: 800;
	color: var(--n);
}
.sd-panel-body {
	padding: 14px;
	background: #fff;
}
.sd-slots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 12px;
}
.sd-slot {
	padding: 9px 4px;
	border-radius: 9px;
	border: 1px solid var(--br);
	background: #faf9f7;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--mu);
}
.sd-slot.on {
	background: var(--ts);
	border-color: var(--tb);
	color: var(--t);
}
.sd-cta-mock {
	height: 38px;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--t), var(--tl));
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-bottom: 14px;

}
.sd-cta-mock .material-symbols-outlined {
	font-size: 16px;
}

/* -- search-result mock seo -------------------------------------------- */
.sd-serp {
	border: 1px solid var(--br);
	border-radius: 12px;
	padding: 15px 14px;
	background: #fff;
	margin-bottom: 14px;
}
.sd-serp-url {
	font-size: 10.5px;
	font-weight: 600;
	color: var(--mu);
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 6px;
}
.sd-serp-url .material-symbols-outlined {
	font-size: 12px;
	color: var(--t);
}
.sd-serp-title {
	font-size: 14px;
	font-weight: 800;
	color: var(--t);
	margin-bottom: 8px;
	letter-spacing: -0.2px;
}

/* -- 2. DETAILS -------------------------------------------------------- */
.sd-body {
	display: grid;
	grid-template-columns: 1.62fr 1fr;
	gap: 52px;
	align-items: start;
}
.sd-h2 {
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1.14;
	margin-bottom: 14px;
}
.sd-sub {
	font-size: 16px;
	color: var(--mu);
	line-height: 1.75;
	max-width: 580px;
	margin-bottom: 34px;
}
.sd-inc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 60px;
}
.sd-inc {
	display: flex;
	gap: 14px;
	padding: 22px 20px;
	background: var(--w);
	border: 1px solid var(--br);
	border-radius: var(--rs);
	transition:
		border-color 0.25s,
		box-shadow 0.3s,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sd-inc:hover {
	border-color: var(--tb);
	box-shadow: 0 12px 32px rgba(13, 110, 112, 0.1);
	transform: translateY(-3px);
}
.sd-inc-ico {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--ts);
	color: var(--t);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.25s;
}
.sd-inc-ico .material-symbols-outlined {
	font-size: 19px;
}
.sd-inc:hover .sd-inc-ico {
	background: rgba(13, 110, 112, 0.16);
}
.sd-inc-h {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.2px;
	margin-bottom: 5px;
}
.sd-inc-p {
	font-size: 13px;
	color: var(--mu);
	line-height: 1.65;
}

/* -- how it works compact 4-step row ----------------------------------- */
.sd-steps-h {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.5px;
	margin-bottom: 22px;
}
.sd-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.sd-step {
	position: relative;
}
.sd-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 17px;
	left: 44px;
	right: -16px;
	height: 2px;
	background: linear-gradient(
		90deg,
		rgba(13, 110, 112, 0.28),
		rgba(13, 110, 112, 0.06)
	);
}
.sd-step-n {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--t), var(--tl));
	box-shadow: 0 6px 18px rgba(13, 110, 112, 0.28);
	color: #fff;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 900;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	position: relative;
	z-index: 1;
}
.sd-step-h {
	font-size: 14px;
	font-weight: 800;
	margin-bottom: 6px;
}
.sd-step-p {
	font-size: 12.5px;
	color: var(--mu);
	line-height: 1.62;
}

/* aside */
.sd-aside {
	position: sticky;
	top: 104px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sd-card {
	padding: 28px 26px;
}
.sd-card-h {
	font-size: 18px;
	font-weight: 900;
	letter-spacing: -0.3px;
	margin-bottom: 8px;
}
.sd-card-p {
	font-size: 13.5px;
	color: var(--mu);
	line-height: 1.7;
	margin-bottom: 20px;
}
.sd-ticks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}
.sd-tick {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--n);
}
.sd-tick .material-symbols-outlined {
	font-size: 16px;
	color: var(--t);
}
.sd-card-label {
	font-size: 10px;
	font-weight: 800;
	color: var(--mu);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 6px;
}
.sd-other a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--n);
	text-decoration: none;
	border-bottom: 1px solid var(--br);
	transition:
		color 0.2s,
		padding-left 0.2s;
}
.sd-other a:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.sd-other a .material-symbols-outlined {
	font-size: 16px;
	color: #c7c2ba;
	transition: color 0.2s;
}
.sd-other a:hover {
	color: var(--t);
	padding-left: 5px;
}
.sd-other a:hover .material-symbols-outlined {
	color: var(--t);
}

/* -- 3. CLOSING CTA ---------------------------------------------------- */
.sd-cta {
	background: linear-gradient(135deg, var(--n), var(--nd));
	position: relative;
	overflow: hidden;
	text-align: center;
}
.sd-cta::before {
	content: "";
	position: absolute;
	top: -140px;
	right: -90px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: rgba(13, 110, 112, 0.12);
	filter: blur(60px);
}
.sd-cta::after {
	content: "";
	position: absolute;
	bottom: -170px;
	left: -110px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba(229, 162, 39, 0.07);
	filter: blur(70px);
}
.sd-cta-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
}
.sd-cta-inner .contact-lead {
	max-width: 580px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 34px;
}
.sd-cta-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 30px;
}
.sd-cta-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* -- RESPONSIVE -------------------------------------------------------- */
@media (max-width: 1024px) {
	.sd-hero {
		padding: 128px 0 78px;
	}
	.sd-hero-grid {
		gap: 48px;
	}
	/* -- less gutter left of the wrap pull the overhang back in so it isn't clipped ---- */
	.sd-phone {
		right: -16px;
		bottom: -58px;
	}
	.sd-live {
		left: -12px;
	}
	/* aside drops below the detail column and sits two-up */
	.sd-body {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.sd-aside {
		position: static;
		flex-direction: row;
	}
	.sd-aside > * {
		flex: 1 1 0;
	}
	.sd-inc-grid {
		margin-bottom: 48px;
	}
}

@media (max-width: 768px) {
	.sd-hero {
		padding: 108px 0 60px;
	}
	.sd-p {
		font-size: 15px;
	}
	.sd-frame {
		padding: 11px;
	}
	.sd-visual {
		margin-top: 14px;
		padding-bottom: 32px;
	}
	.sd-phone {
		width: 104px;
		right: -6px;
		bottom: -28px;
	}
	.sd-live {
		left: 0;
		bottom: 2px;
		padding: 8px 13px;
		font-size: 11px;
	}
	.sd-inc-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.sd-steps {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.sd-step:not(:last-child)::after {
		display: none;
	}
	.sd-aside {
		flex-direction: column;
	}
	.sd-card {
		padding: 24px 22px;
	}
}

@media (max-width: 520px) {
	/* -- mini-site hero stacks the art block would be too narrow to read ---- */
	.sd-wf-hero {
		grid-template-columns: 1fr;
	}
	.sd-wf-art {
		display: none;
	}
}

@media (max-width: 400px) {
	.sd-h1 {
		font-size: 27px;
		letter-spacing: -0.6px;
	}
	.sd-h2 {
		font-size: 22px;
		letter-spacing: -0.5px;
	}
	.sd-h1,
	.sd-h2,
	.sd-inc-h,
	.sd-card-h {
		overflow-wrap: break-word;
	}
	.sd-phone {
		display: none;
	}
	/* -- phone is gone reclaim the space it was reserving ------------------ */
	.sd-visual {
		padding-bottom: 20px;
	}
	.sd-live {
		bottom: -8px;
	}
}

/* ==========================================================================
AI AGENTS PAGE
========================================================================== */

/* ================================================================
-- AI AGENTS PAGE page-specific styles -------------------------------
Extends style.css + service-detail.css
================================================================ */

/* -- HERO -------------------------------------------------------------- */
.ag-hero {
	position: relative;
	overflow: hidden;
	padding: 148px 0 96px;
}
.ag-hero-grid {
	align-items: center;
	gap: 72px;
	position: relative;
	z-index: 2;
}
.ag-crumb {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mu);
	margin-bottom: 26px;
}
.ag-crumb a {
	color: var(--mu);
	text-decoration: none;
	transition: color 0.2s;
}
.ag-crumb a:hover {
	color: var(--t);
}
.ag-crumb .material-symbols-outlined {
	font-size: 16px;
	color: #b8c0c9;
}
.ag-crumb-now {
	color: var(--t);
}
.ag-h1 {
	font-size: clamp(34px, 5vw, 52px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--n);
	margin-bottom: 22px;
}
.ag-p {
	font-size: 18px;
	line-height: 1.75;
	color: var(--mu);
	max-width: 520px;
	margin-bottom: 30px;
}
.ag-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 34px;
}
.ag-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.86);
	border: 1px solid var(--br);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--n);
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}
.ag-chip:hover {
	border-color: var(--t);
	box-shadow: 0 6px 18px rgba(13, 110, 112, 0.1);
}
.ag-chip .material-symbols-outlined {
	font-size: 17px;
	color: var(--t);
}
.ag-hero-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* -- HERO VISUAL live agent console ------------------------------------ */
.ag-visual {
	position: relative;
	isolation: isolate;
}
/* soft stage light so the console sits in space rather than on flat paper */
.ag-visual::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -10% -6% -16%;
	background:
		radial-gradient(
			58% 52% at 60% 26%,
			rgba(26, 150, 152, 0.22),
			transparent 70%
		),
		radial-gradient(
			52% 48% at 22% 88%,
			rgba(229, 162, 39, 0.13),
			transparent 72%
		);
	filter: blur(24px);
	pointer-events: none;
}
.ag-console {
	position: relative;
	background: linear-gradient(158deg, #fff 0%, #fcfbf9 52%, #f2efea 100%);
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: var(--r);
	padding: 22px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 2px 6px rgba(24, 38, 56, 0.05),
		0 20px 44px -20px rgba(24, 38, 56, 0.3),
		0 52px 96px -46px rgba(13, 110, 112, 0.4);
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s;
}
.ag-console:hover {
	transform: translateY(-5px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 2px 6px rgba(24, 38, 56, 0.05),
		0 26px 54px -20px rgba(24, 38, 56, 0.32),
		0 64px 110px -46px rgba(13, 110, 112, 0.46);
}
.ag-console-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--br);
	margin-bottom: 16px;
}
.ag-console-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: var(--n);
}
.ag-console-title .material-symbols-outlined {
	font-size: 19px;
	color: var(--t);
}
.ag-console-live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--mu);
}
.ag-feed {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ag-event {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid var(--br);
	border-radius: var(--rs);
	padding: 12px 14px;
	transition:
		background 0.25s,
		border-color 0.25s;
}
.ag-console:hover .ag-event {
	border-color: rgba(13, 110, 112, 0.28);
}
.ag-event-ico {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--ts);
}
.ag-event-ico .material-symbols-outlined {
	font-size: 17px;
	color: var(--t);
}
.ag-event-ico.am {
	background: rgba(229, 162, 39, 0.16);
}
.ag-event-ico.am .material-symbols-outlined {
	color: var(--a);
}
.ag-event-txt {
	min-width: 0;
}
.ag-event-h {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--n);
	margin-bottom: 2px;
}
.ag-event-p {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--mu);
}
.ag-event-time {
	margin-left: auto;
	font-size: 11px;
	font-weight: 600;
	color: #a8b2bd;
	flex-shrink: 0;
	white-space: nowrap;
}
.ag-console-foot {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--br);
}
.ag-stat {
	text-align: center;
}
.ag-stat-n {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 20px;
	font-weight: 900;
	color: var(--t);
	letter-spacing: -0.02em;
}
.ag-stat-l {
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--mu);
	margin-top: 3px;
}

/* -- SECTION HEADINGS (light sections) --------------------------------- */
.ag-h2 {
	font-size: clamp(27px, 3.4vw, 38px);
	font-weight: 900;
	line-height: 1.16;
	letter-spacing: -0.025em;
	color: var(--n);
	margin-bottom: 16px;
}
.ag-h2-light {
	color: #fff;
}
.ag-sub {
	font-size: 17px;
	line-height: 1.7;
	color: var(--mu);
	max-width: 560px;
	margin: 0 auto;
}
.ag-sub-light {
	color: rgba(255, 255, 255, 0.6);
}

/* -- AGENT LINEUP GRID ------------------------------------------------- */
.ag-grid {
	gap: 26px;
	align-items: stretch;
}
.ag-card {
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
}
.ag-card-ico {
	width: 52px;
	height: 52px;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	background: rgba(13, 110, 112, 0.24);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ag-card-ico .material-symbols-outlined {
	font-size: 26px;
	color: var(--tl);
}
.ag-card:hover .ag-card-ico {
	transform: scale(1.07) rotate(-4deg);
}
.ag-card-ico.am {
	background: rgba(229, 162, 39, 0.16);
}
.ag-card-ico.am .material-symbols-outlined {
	color: var(--a);
}
.ag-card-ico.solid {
	background: linear-gradient(135deg, var(--t), #0a5557);
}
.ag-card-ico.solid .material-symbols-outlined {
	color: #fff;
}
.ag-card-h {
	font-size: 19px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
}
.ag-card-p {
	font-size: 14.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.58);
	margin-bottom: 20px;
}
.ag-card-list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-bottom: 26px;
}
.ag-card-li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.74);
}
.ag-card-li .material-symbols-outlined {
	font-size: 17px;
	color: var(--tl);
	flex-shrink: 0;
	margin-top: 1px;
}
.ag-card-li.am .material-symbols-outlined {
	color: var(--a);
}
.ag-card-foot {
	margin-top: auto;
}
.ag-card-cta {
	display: flex;
	width: 100%;
	justify-content: center;
	text-decoration: none;
}
.ag-tag {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, var(--t), #0a5557);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 6px 20px rgba(13, 110, 112, 0.4);
}

/* -- CAPABILITY ROWS --------------------------------------------------- */
.ag-cap-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 52px;
}
.ag-cap {
	display: flex;
	gap: 16px;
	background: var(--wh);
	border: 1px solid var(--br);
	border-radius: var(--r);
	padding: 24px 22px;
	transition:
		border-color 0.25s,
		box-shadow 0.25s,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ag-cap:hover {
	border-color: var(--t);
	box-shadow: 0 14px 40px rgba(13, 110, 112, 0.11);
	transform: translateY(-3px);
}
.ag-cap-ico {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--ts);
	color: var(--t);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ag-cap-ico .material-symbols-outlined {
	font-size: 22px;
}
.ag-cap-h {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: var(--n);
	letter-spacing: -0.015em;
	margin-bottom: 6px;
}
.ag-cap-p {
	font-size: 14px;
	line-height: 1.68;
	color: var(--mu);
}

/* -- INTEGRATIONS ------------------------------------------------------ */
.ag-int-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 48px;
}
.ag-int {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.048);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--rs);
	padding: 24px 16px;
	transition:
		background 0.25s,
		border-color 0.25s,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ag-int:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(13, 110, 112, 0.42);
	transform: translateY(-3px);
}
.ag-int .material-symbols-outlined {
	font-size: 26px;
	color: var(--tl);
}
.ag-int-h {
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
}
.ag-int-p {
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.45);
}

.ag-int-head {
	margin-top: 96px;
}

/* -- ROLLOUT TIMELINE -------------------------------------------------- */
.ag-flow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 52px;
}
.ag-flow-step {
	position: relative;
}
.ag-flow-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 24px;
	left: calc(50% + 34px);
	right: calc(-50% + 34px);
	height: 2px;
	background: linear-gradient(90deg, var(--tb), rgba(13, 110, 112, 0.06));
}
.ag-flow-n {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--t), #0a5557);
	color: #fff;
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 18px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	box-shadow: 0 6px 20px rgba(13, 110, 112, 0.25);
}
.ag-flow-h {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 16.5px;
	font-weight: 800;
	color: var(--n);
	letter-spacing: -0.015em;
	margin-bottom: 8px;
}
.ag-flow-p {
	font-size: 14px;
	line-height: 1.68;
	color: var(--mu);
}
.ag-flow-when {
	display: inline-block;
	margin-top: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--t);
}

/* -- RESULTS STRIP ----------------------------------------------------- */
.ag-metrics-head {
	margin-top: 96px;
}
.ag-metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 48px;
}
.ag-metric {
	background: var(--wh);
	border: 1px solid var(--br);
	border-radius: var(--r);
	padding: 30px 22px;
	text-align: center;
	transition:
		border-color 0.25s,
		box-shadow 0.25s,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ag-metric:hover {
	border-color: var(--t);
	box-shadow: 0 14px 40px rgba(13, 110, 112, 0.11);
	transform: translateY(-3px);
}
.ag-metric-n {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 38px;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: 10px;
}
.ag-metric-h {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--n);
	margin-bottom: 5px;
}
.ag-metric-p {
	font-size: 13px;
	line-height: 1.6;
	color: var(--mu);
}

/* -- PRICING / PACKAGE TIERS ------------------------------------------- */
.ag-plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 52px;
	align-items: stretch;
}
.ag-plan {
	background: var(--wh);
	border: 1px solid var(--br);
	border-radius: var(--r);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	position: relative;
	transition:
		border-color 0.25s,
		box-shadow 0.25s,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ag-plan:hover {
	border-color: var(--t);
	box-shadow: 0 16px 48px rgba(13, 110, 112, 0.13);
	transform: translateY(-4px);
}
.ag-plan.feat {
	border: 1.5px solid var(--t);
	box-shadow: 0 20px 60px rgba(13, 110, 112, 0.16);
}
.ag-plan-name {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 18px;
	font-weight: 800;
	color: var(--n);
	letter-spacing: -0.02em;
	margin-bottom: 6px;
}
.ag-plan-for {
	font-size: 13px;
	color: var(--mu);
	margin-bottom: 20px;
}
.ag-plan-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding-bottom: 20px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--br);
}
.ag-plan-amt {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 34px;
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--n);
	line-height: 1;
}
.ag-plan-per {
	font-size: 13px;
	font-weight: 600;
	color: var(--mu);
}
.ag-plan-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 28px;
}
.ag-plan-li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	line-height: 1.6;
	color: #33465c;
}
.ag-plan-li .material-symbols-outlined {
	font-size: 18px;
	color: var(--t);
	flex-shrink: 0;
	margin-top: 1px;
}
.ag-plan-foot {
	margin-top: auto;
}
.ag-plan-note {
	text-align: center;
	font-size: 13.5px;
	color: var(--mu);
	margin-top: 32px;
}

/* -- FAQ light variant of the shared .faq-* pattern -------------------- */
.ag-faq-wrap {
	max-width: 780px;
	margin: 48px auto 0;
}
.ag-faq .faq-item {
	background: var(--wh);
	border: 1px solid var(--br);
	transition:
		border-color 0.25s,
		box-shadow 0.25s;
}
.ag-faq .faq-item:hover,
.ag-faq .faq-item[open] {
	border-color: var(--t);
	box-shadow: 0 10px 32px rgba(13, 110, 112, 0.09);
}
.ag-faq .faq-summary {
	color: var(--n);
	cursor: pointer;
	list-style: none;
}
.ag-faq .faq-summary::-webkit-details-marker {
	display: none;
}
.ag-faq .faq-summary .fi {
	color: var(--t);
	transition: transform 0.25s;
}
.ag-faq .faq-item[open] .faq-summary .fi {
	transform: rotate(45deg);
}
.ag-faq .faq-answer {
	color: var(--mu);
}

/* -- CTA --------------------------------------------------------------- */
.ag-cta {
	background: var(--nd);
	position: relative;
	overflow: hidden;
}
.ag-cta::before {
	content: "";
	position: absolute;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: rgba(13, 110, 112, 0.2);
	filter: blur(90px);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.ag-cta-inner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}
.ag-cta-inner .contact-lead {
	margin: 0 auto 32px;
}
.ag-cta-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-bottom: 26px;
}
.ag-cta-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* -- RESPONSIVE -------------------------------------------------------- */
@media (max-width: 1024px) {
	.ag-hero {
		padding: 128px 0 84px;
	}
	.ag-hero-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.ag-p {
		max-width: none;
	}
	.ag-flow {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
	.ag-flow-step:not(:last-child)::after {
		display: none;
	}
	.ag-metrics,
	.ag-int-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.ag-plans {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media (max-width: 768px) {
	.ag-hero {
		padding: 112px 0 68px;
	}
	.ag-p {
		font-size: 16px;
	}
	.ag-cap-grid {
		grid-template-columns: 1fr;
	}
	.ag-console {
		padding: 16px;
	}
	.ag-event-time {
		display: none;
	}
	.ag-card {
		padding: 28px 22px;
	}
	.ag-int-head,
	.ag-metrics-head {
		margin-top: 64px;
	}
}
@media (max-width: 520px) {
	.ag-metrics,
	.ag-int-grid,
	.ag-flow {
		grid-template-columns: 1fr;
	}
	.ag-console-foot {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* ================================================================
-- BESPOKE PAGE page-specific styles ---------------------------------
Mirrors the AI Agents page structure and tokens
================================================================ */

/* -- HERO -------------------------------------------------------------- */
.bs-hero {
	position: relative;
	overflow: hidden;
	padding: 148px 0 96px;
}
.bs-hero-grid {
	align-items: center;
	gap: 72px;
	position: relative;
	z-index: 2;
}
.bs-crumb {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mu);
	margin-bottom: 26px;
}
.bs-crumb a {
	color: var(--mu);
	text-decoration: none;
	transition: color 0.2s;
}
.bs-crumb a:hover {
	color: var(--t);
}
.bs-crumb .material-symbols-outlined {
	font-size: 16px;
	color: #b8c0c9;
}
.bs-crumb-now {
	color: var(--t);
}
.bs-h1 {
	font-size: clamp(34px, 5vw, 52px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--n);
	margin-bottom: 22px;
}
.bs-p {
	font-size: 18px;
	line-height: 1.75;
	color: var(--mu);
	max-width: 520px;
	margin-bottom: 30px;
}
.bs-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 34px;
}
.bs-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.86);
	border: 1px solid var(--br);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--n);
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}
.bs-chip:hover {
	border-color: var(--t);
	box-shadow: 0 6px 18px rgba(13, 110, 112, 0.1);
}
.bs-chip .material-symbols-outlined {
	font-size: 17px;
	color: var(--t);
}
.bs-hero-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* -- HERO VISUAL build pipeline console -------------------------------- */
.bs-visual {
	position: relative;
	isolation: isolate;
}
.bs-visual::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -10% -6% -16%;
	background:
		radial-gradient(
			58% 52% at 60% 26%,
			rgba(26, 150, 152, 0.22),
			transparent 70%
		),
		radial-gradient(
			52% 48% at 22% 88%,
			rgba(229, 162, 39, 0.13),
			transparent 72%
		);
	filter: blur(24px);
	pointer-events: none;
}
.bs-console {
	position: relative;
	background: linear-gradient(158deg, #fff 0%, #fcfbf9 52%, #f2efea 100%);
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: var(--r);
	padding: 22px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 2px 6px rgba(24, 38, 56, 0.05),
		0 20px 44px -20px rgba(24, 38, 56, 0.3),
		0 52px 96px -46px rgba(13, 110, 112, 0.4);
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s;
}
.bs-console:hover {
	transform: translateY(-5px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 2px 6px rgba(24, 38, 56, 0.05),
		0 26px 54px -20px rgba(24, 38, 56, 0.32),
		0 64px 110px -46px rgba(13, 110, 112, 0.46);
}
.bs-console-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--br);
	margin-bottom: 16px;
}
.bs-console-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: var(--n);
}
.bs-console-title .material-symbols-outlined {
	font-size: 19px;
	color: var(--t);
}
.bs-console-live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--mu);
}
.bs-feed {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bs-event {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid var(--br);
	border-radius: var(--rs);
	padding: 12px 14px;
	transition:
		background 0.25s,
		border-color 0.25s;
}
.bs-console:hover .bs-event {
	border-color: rgba(13, 110, 112, 0.28);
}
.bs-event-ico {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--ts);
}
.bs-event-ico .material-symbols-outlined {
	font-size: 17px;
	color: var(--t);
}
.bs-event-ico.am {
	background: rgba(229, 162, 39, 0.16);
}
.bs-event-ico.am .material-symbols-outlined {
	color: var(--a);
}
.bs-event-txt {
	min-width: 0;
}
.bs-event-h {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--n);
	margin-bottom: 2px;
}
.bs-event-p {
	display: block;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--mu);
}
.bs-event-time {
	margin-left: auto;
	font-size: 11px;
	font-weight: 600;
	color: #a8b2bd;
	flex-shrink: 0;
	white-space: nowrap;
}
.bs-console-foot {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--br);
}
.bs-stat {
	text-align: center;
}
.bs-stat-n {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 20px;
	font-weight: 900;
	color: var(--t);
	letter-spacing: -0.02em;
}
.bs-stat-l {
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--mu);
	margin-top: 3px;
}

/* -- SECTION HEADINGS -------------------------------------------------- */
.bs-h2 {
	font-size: clamp(27px, 3.4vw, 38px);
	font-weight: 900;
	line-height: 1.16;
	letter-spacing: -0.025em;
	color: var(--n);
	margin-bottom: 16px;
}
.bs-h2-light {
	color: #fff;
}
.bs-sub {
	font-size: 17px;
	line-height: 1.7;
	color: var(--mu);
	max-width: 560px;
	margin: 0 auto;
}
.bs-sub-light {
	color: rgba(255, 255, 255, 0.6);
}

/* -- FIT / NOT-FIT COLUMNS --------------------------------------------- */
.bs-fit {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	margin-top: 52px;
}
.bs-fit-col {
	background: var(--wh);
	border: 1px solid var(--br);
	border-radius: var(--r);
	padding: 30px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition:
		border-color 0.25s,
		box-shadow 0.25s,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bs-fit-col:hover {
	border-color: var(--t);
	box-shadow: 0 14px 40px rgba(13, 110, 112, 0.11);
	transform: translateY(-3px);
}
.bs-fit-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 2px;
	border-bottom: 1px solid var(--br);
}
.bs-fit-ico {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.bs-fit-ico .material-symbols-outlined {
	font-size: 19px;
}
.bs-fit-ico.ok {
	background: linear-gradient(135deg, var(--t), #0a5557);
}
.bs-fit-ico.ok .material-symbols-outlined {
	color: #fff;
}
.bs-fit-ico.no {
	background: #ecebe7;
}
.bs-fit-ico.no .material-symbols-outlined {
	color: #9aa7b4;
}
.bs-fit-h {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 17px;
	font-weight: 800;
	color: var(--n);
	letter-spacing: -0.02em;
}
.bs-fit-li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.65;
	color: #33465c;
}
.bs-fit-li .material-symbols-outlined {
	font-size: 18px;
	color: var(--t);
	flex-shrink: 0;
	margin-top: 2px;
}
.bs-fit-li.muted {
	color: var(--mu);
}
.bs-fit-li.muted .material-symbols-outlined {
	color: #9aa7b4;
}
.bs-fit-note {
	text-align: center;
	font-size: 13.5px;
	color: var(--mu);
	margin-top: 32px;
}

/* -- CAPABILITY CARDS -------------------------------------------------- */
.bs-grid {
	gap: 26px;
	align-items: stretch;
}
.bs-card {
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
}
.bs-card-ico {
	width: 52px;
	height: 52px;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	background: rgba(13, 110, 112, 0.24);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bs-card-ico .material-symbols-outlined {
	font-size: 26px;
	color: var(--tl);
}
.bs-card:hover .bs-card-ico {
	transform: scale(1.07) rotate(-4deg);
}
.bs-card-ico.am {
	background: rgba(229, 162, 39, 0.16);
}
.bs-card-ico.am .material-symbols-outlined {
	color: var(--a);
}
.bs-card-ico.solid {
	background: linear-gradient(135deg, var(--t), #0a5557);
}
.bs-card-ico.solid .material-symbols-outlined {
	color: #fff;
}
.bs-card-h {
	font-size: 19px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
}
.bs-card-p {
	font-size: 14.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.58);
	margin-bottom: 20px;
}
.bs-card-list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-bottom: 26px;
}
.bs-card-li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.74);
}
.bs-card-li .material-symbols-outlined {
	font-size: 17px;
	color: var(--tl);
	flex-shrink: 0;
	margin-top: 1px;
}
.bs-card-li.am .material-symbols-outlined {
	color: var(--a);
}
.bs-card-foot {
	margin-top: auto;
}
.bs-card-cta {
	display: flex;
	width: 100%;
	justify-content: center;
	text-decoration: none;
}
.bs-tag {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, var(--t), #0a5557);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 6px 20px rgba(13, 110, 112, 0.4);
}

/* -- TECH STACK -------------------------------------------------------- */
.bs-stack-head {
	margin-top: 96px;
}
.bs-stack-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 48px;
}
.bs-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.048);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--rs);
	padding: 24px 16px;
	transition:
		background 0.25s,
		border-color 0.25s,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bs-stack:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(13, 110, 112, 0.42);
	transform: translateY(-3px);
}
.bs-stack .material-symbols-outlined {
	font-size: 26px;
	color: var(--tl);
}
.bs-stack-h {
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
}
.bs-stack-p {
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.45);
}

/* -- PROCESS TIMELINE -------------------------------------------------- */
.bs-flow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 52px;
}
.mt-3 {margin-top:1rem}
.bs-flow-step {
	position: relative;
}
.bs-flow-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 24px;
	left: calc(50% + 34px);
	right: calc(-50% + 34px);
	height: 2px;
	background: linear-gradient(90deg, var(--tb), rgba(13, 110, 112, 0.06));
}
.bs-flow-n {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--t), #0a5557);
	color: #fff;
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 18px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	box-shadow: 0 6px 20px rgba(13, 110, 112, 0.25);
}
.bs-flow-h {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 16.5px;
	font-weight: 800;
	color: var(--n);
	letter-spacing: -0.015em;
	margin-bottom: 8px;
}
.bs-flow-p {
	font-size: 14px;
	line-height: 1.68;
	color: var(--mu);
}
.bs-flow-when {
	display: inline-block;
	margin-top: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--t);
}

/* -- RESULTS STRIP ----------------------------------------------------- */
.bs-metrics-head {
	margin-top: 96px;
}
.bs-metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 48px;
}
.bs-metric {
	background: var(--wh);
	border: 1px solid var(--br);
	border-radius: var(--r);
	padding: 30px 22px;
	text-align: center;
	transition:
		border-color 0.25s,
		box-shadow 0.25s,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bs-metric:hover {
	border-color: var(--t);
	box-shadow: 0 14px 40px rgba(13, 110, 112, 0.11);
	transform: translateY(-3px);
}
.bs-metric-n {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 38px;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: 10px;
}
.bs-metric-h {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--n);
	margin-bottom: 5px;
}
.bs-metric-p {
	font-size: 13px;
	line-height: 1.6;
	color: var(--mu);
}

/* -- ENGAGEMENT MODELS ------------------------------------------------- */
.bs-plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 52px;
	align-items: stretch;
}
.bs-plan {
	background: var(--wh);
	border: 1px solid var(--br);
	border-radius: var(--r);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	position: relative;
	transition:
		border-color 0.25s,
		box-shadow 0.25s,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bs-plan:hover {
	border-color: var(--t);
	box-shadow: 0 16px 48px rgba(13, 110, 112, 0.13);
	transform: translateY(-4px);
}
.bs-plan.feat {
	border: 1.5px solid var(--t);
	box-shadow: 0 20px 60px rgba(13, 110, 112, 0.16);
}
.bs-plan-name {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 18px;
	font-weight: 800;
	color: var(--n);
	letter-spacing: -0.02em;
	margin-bottom: 6px;
}
.bs-plan-for {
	font-size: 13px;
	color: var(--mu);
	margin-bottom: 20px;
}
.bs-plan-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding-bottom: 20px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--br);
}
.bs-plan-amt {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 34px;
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--n);
	line-height: 1;
}
.bs-plan-per {
	font-size: 13px;
	font-weight: 600;
	color: var(--mu);
}
.bs-plan-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 28px;
}
.bs-plan-li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	line-height: 1.6;
	color: #33465c;
}
.bs-plan-li .material-symbols-outlined {
	font-size: 18px;
	color: var(--t);
	flex-shrink: 0;
	margin-top: 1px;
}
.bs-plan-foot {
	margin-top: auto;
}
.bs-plan-note {
	text-align: center;
	font-size: 13.5px;
	color: var(--mu);
	margin: 32px auto 0;
	max-width: 620px;
}

/* -- FAQ light variant of the shared .faq-* pattern -------------------- */
.bs-faq-wrap {
	max-width: 780px;
	margin: 48px auto 0;
}
.bs-faq .faq-item {
	background: var(--wh);
	border: 1px solid var(--br);
	transition:
		border-color 0.25s,
		box-shadow 0.25s;
}
.bs-faq .faq-item:hover,
.bs-faq .faq-item[open] {
	border-color: var(--t);
	box-shadow: 0 10px 32px rgba(13, 110, 112, 0.09);
}
.bs-faq .faq-summary {
	color: var(--n);
	cursor: pointer;
	list-style: none;
}
.bs-faq .faq-summary::-webkit-details-marker {
	display: none;
}
.bs-faq .faq-summary .fi {
	color: var(--t);
	transition: transform 0.25s;
}
.bs-faq .faq-item[open] .faq-summary .fi {
	transform: rotate(45deg);
}
.bs-faq .faq-answer {
	color: var(--mu);
}

/* -- CTA --------------------------------------------------------------- */
.bs-cta {
	background: var(--nd);
	position: relative;
	overflow: hidden;
}
.bs-cta::before {
	content: "";
	position: absolute;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: rgba(13, 110, 112, 0.2);
	filter: blur(90px);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.bs-cta-inner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}
.bs-cta-inner .contact-lead {
	margin: 0 auto 32px;
}
.bs-cta-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-bottom: 26px;
}
.bs-cta-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* -- RESPONSIVE -------------------------------------------------------- */
@media (max-width: 1024px) {
	.bs-hero {
		padding: 128px 0 84px;
	}
	.bs-hero-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.bs-p {
		max-width: none;
	}
	.bs-flow {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
	.bs-flow-step:not(:last-child)::after {
		display: none;
	}
	.bs-metrics,
	.bs-stack-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.bs-plans {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media (max-width: 768px) {
	.bs-hero {
		padding: 112px 0 68px;
	}
	.bs-p {
		font-size: 16px;
	}
	.bs-fit {
		grid-template-columns: 1fr;
	}
	.bs-fit-col {
		padding: 26px 22px;
	}
	.bs-console {
		padding: 16px;
	}
	.bs-event-time {
		display: none;
	}
	.bs-card {
		padding: 28px 22px;
	}
	.bs-stack-head,
	.bs-metrics-head {
		margin-top: 64px;
	}
}
@media (max-width: 520px) {
	.bs-metrics,
	.bs-stack-grid,
	.bs-flow {
		grid-template-columns: 1fr;
	}
	.bs-console-foot {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* ================================================================
-- INDUSTRIES PAGE page-specific styles ------------------------------
Mirrors the Bespoke / AI Agents page structure and tokens
================================================================ */

/* -- HERO -------------------------------------------------------------- */
.in-hero {
	position: relative;
	overflow: hidden;
	padding: 148px 0 96px;
}
.in-hero-grid {
	align-items: center;
	gap: 72px;
	position: relative;
	z-index: 2;
}
/* Single-column (no visual) hero — centred copy */
.in-hero-copy {
	position: relative;
	z-index: 2;
}
.in-hero-solo .in-hero-copy {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}
.in-hero-solo .in-crumb,
.in-hero-solo .in-facts,
.in-hero-solo .in-hero-btns {
	justify-content: center;
}
.in-hero-solo .in-p {
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
}
.in-crumb {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mu);
	margin-bottom: 26px;
}
.in-crumb a {
	color: var(--mu);
	text-decoration: none;
	transition: color 0.2s;
}
.in-crumb a:hover {
	color: var(--t);
}
.in-crumb .material-symbols-outlined {
	font-size: 16px;
	color: #b8c0c9;
}
.in-crumb-now {
	color: var(--t);
}
.in-h1 {
	font-size: clamp(34px, 5vw, 52px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--n);
	margin-bottom: 22px;
}
.in-p {
	font-size: 18px;
	line-height: 1.75;
	color: var(--mu);
	max-width: 520px;
	margin-bottom: 30px;
}
.in-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 34px;
}
.in-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.86);
	border: 1px solid var(--br);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--n);
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}
.in-chip:hover {
	border-color: var(--t);
	box-shadow: 0 6px 18px rgba(13, 110, 112, 0.1);
}
.in-chip .material-symbols-outlined {
	font-size: 17px;
	color: var(--t);
}
.in-hero-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* -- HERO VISUAL sector board ------------------------------------------ */
.in-visual {
	position: relative;
	isolation: isolate;
}
.in-visual::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -10% -6% -16%;
	background:
		radial-gradient(
			58% 52% at 60% 26%,
			rgba(26, 150, 152, 0.22),
			transparent 70%
		),
		radial-gradient(
			52% 48% at 22% 88%,
			rgba(229, 162, 39, 0.13),
			transparent 72%
		);
	filter: blur(24px);
	pointer-events: none;
}
.in-board {
	position: relative;
	background: linear-gradient(158deg, #fff 0%, #fcfbf9 52%, #f2efea 100%);
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: var(--r);
	padding: 22px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 2px 6px rgba(24, 38, 56, 0.05),
		0 20px 44px -20px rgba(24, 38, 56, 0.3),
		0 52px 96px -46px rgba(13, 110, 112, 0.4);
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s;
}
.in-board:hover {
	transform: translateY(-5px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 2px 6px rgba(24, 38, 56, 0.05),
		0 26px 54px -20px rgba(24, 38, 56, 0.32),
		0 64px 110px -46px rgba(13, 110, 112, 0.46);
}
.in-board-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--br);
	margin-bottom: 16px;
}
.in-board-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: var(--n);
}
.in-board-title .material-symbols-outlined {
	font-size: 19px;
	color: var(--t);
}
.in-board-live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--mu);
	white-space: nowrap;
}
.in-feed {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.in-row {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid var(--br);
	border-radius: var(--rs);
	padding: 12px 14px;
	transition:
		background 0.25s,
		border-color 0.25s;
}
.in-board:hover .in-row {
	border-color: rgba(13, 110, 112, 0.28);
}
.in-row-ico {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--ts);
}
.in-row-ico .material-symbols-outlined {
	font-size: 17px;
	color: var(--t);
}
.in-row-ico.am {
	background: rgba(229, 162, 39, 0.16);
}
.in-row-ico.am .material-symbols-outlined {
	color: var(--a);
}
.in-row-txt {
	min-width: 0;
	flex: 1;
}
.in-row-h {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--n);
	margin-bottom: 2px;
}
.in-row-p {
	display: block;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--mu);
}
.in-row-metric {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: var(--tl);
	flex-shrink: 0;
}
.in-row-metric.am {
	color: var(--a);
}
.in-board-foot {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--br);
	text-align: center;
}
.in-stat {
	min-width: 0;
}
.in-stat-n {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 20px;
	font-weight: 900;
	color: var(--t);
	letter-spacing: -0.02em;
}
.in-stat-l {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--mu);
	margin-top: 2px;
}

/* -- SECTION HEADINGS -------------------------------------------------- */
.in-h2 {
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: -0.025em;
	color: var(--n);
	margin-bottom: 18px;
}
.in-h2-light {
	color: #fff;
}
.in-sub {
	font-size: 17px;
	line-height: 1.72;
	color: var(--mu);
	max-width: 640px;
	margin: 0 auto;
}
.in-sub-light {
	color: rgba(255, 255, 255, 0.52);
}

/* -- THE FOUR LEAKS ---------------------------------------------------- */
.in-leaks {
	gap: 22px;
}
.in-leak {
	padding: 30px 26px;
	border: 1px solid var(--br);
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s,
		border-color 0.25s;
}
.in-leak:hover {
	border-color: var(--t);
}
.in-leak-ico {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.in-leak-ico .material-symbols-outlined {
	font-size: 23px;
	color: var(--t);
}
.in-leak-h {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 16.5px;
	font-weight: 800;
	color: var(--n);
	margin-bottom: 9px;
	letter-spacing: -0.01em;
}
.in-leak-p {
	font-size: 14px;
	line-height: 1.68;
	color: var(--mu);
}
.in-leak-note {
	text-align: center;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--mu);
	max-width: 680px;
	margin: 40px auto 0;
}

/* -- SECTOR GRID ------------------------------------------------------- */
.in-grid {
	gap: 18px;
}
.in-card {
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
}
.in-card-h {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 9px;
	letter-spacing: -0.01em;
}
.in-card-p {
	font-size: 13.5px;
	line-height: 1.68;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 16px;
	flex: 1;
}
.in-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: auto;
}
.in-tag {
	display: inline-flex;
	align-items: center;
	background: linear-gradient(135deg, var(--t), var(--tl));
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 5px 11px;
	border-radius: 999px;
	white-space: nowrap;
}
.in-grid-note {
	text-align: center;
	font-size: 14.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.46);
	max-width: 680px;
	margin: 44px auto 0;
}

/* -- SECTOR SPOTLIGHTS ------------------------------------------------- */
.in-spots {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.in-spot {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 36px;
	background: var(--wh);
	border: 1px solid var(--br);
	border-radius: var(--r);
	padding: 34px 32px;
	transition:
		border-color 0.25s,
		box-shadow 0.3s,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.in-spot:hover {
	border-color: var(--t);
	transform: translateY(-3px);
	box-shadow: 0 18px 48px rgba(13, 110, 112, 0.12);
}
.in-spot-ico {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ts);
	margin-bottom: 16px;
}
.in-spot-ico .material-symbols-outlined {
	font-size: 26px;
	color: var(--t);
}
.in-spot-ico.am {
	background: rgba(229, 162, 39, 0.16);
}
.in-spot-ico.am .material-symbols-outlined {
	color: var(--a);
}
.in-spot-name {
	font-size: 21px;
	font-weight: 800;
	color: var(--n);
	letter-spacing: -0.02em;
	margin-bottom: 6px;
}
.in-spot-for {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--mu);
}
.in-spot-body {
	min-width: 0;
}
.in-spot-block {
	margin-bottom: 22px;
}
.in-spot-lbl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tl);
	margin-bottom: 8px;
}
.in-spot-txt {
	font-size: 15px;
	line-height: 1.72;
	color: var(--mu);
}
.in-spot-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 20px;
}
.in-spot-li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--n);
}
.in-spot-li .material-symbols-outlined {
	font-size: 17px;
	color: var(--tl);
	flex-shrink: 0;
	margin-top: 2px;
}
.in-spot-li.am .material-symbols-outlined {
	color: var(--a);
}
.in-spot-res {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	padding-top: 20px;
	border-top: 1px solid var(--br);
}
.in-spot-metric {
	min-width: 0;
}
.in-spot-n {
	display: block;
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -0.03em;
	margin-bottom: 3px;
}
.in-spot-ml {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mu);
	line-height: 1.5;
}

/* -- HOW WE ADAPT ------------------------------------------------------ */
.in-adapt {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.in-adapt-step {
	background: var(--w);
	border: 1px solid var(--br);
	border-radius: var(--r);
	padding: 30px 26px;
	transition:
		border-color 0.25s,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s;
}
.in-adapt-step:hover {
	border-color: var(--t);
	transform: translateY(-3px);
	box-shadow: 0 16px 42px rgba(13, 110, 112, 0.11);
}
.in-adapt-n {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--t), var(--tl));
	color: #fff;
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 16px;
	font-weight: 800;
	margin-bottom: 18px;
	box-shadow: 0 8px 22px rgba(13, 110, 112, 0.28);
}
.in-adapt-h {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 16.5px;
	font-weight: 800;
	color: var(--n);
	letter-spacing: -0.01em;
	margin-bottom: 9px;
}
.in-adapt-p {
	font-size: 14px;
	line-height: 1.68;
	color: var(--mu);
}
.in-shared {
	margin-top: 32px;
	border: 1px dashed var(--tb);
	border-radius: var(--r);
	background: var(--ts);
	padding: 26px 30px;
	text-align: center;
}
.in-shared-h {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: var(--n);
	margin-bottom: 16px;
}
.in-shared-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	justify-content: center;
}
.in-shared-li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--n);
}
.in-shared-li .material-symbols-outlined {
	font-size: 17px;
	color: var(--t);
}

/* -- FAQ light variant of the shared .faq-* pattern -------------------- */
.in-faq-wrap {
	max-width: 780px;
	margin: 48px auto 0;
}
.in-faq .faq-item {
	background: var(--wh);
	border: 1px solid var(--br);
	transition:
		border-color 0.25s,
		box-shadow 0.25s;
}
.in-faq .faq-item:hover,
.in-faq .faq-item[open] {
	border-color: var(--t);
	box-shadow: 0 10px 32px rgba(13, 110, 112, 0.09);
}
.in-faq .faq-summary {
	color: var(--n);
	cursor: pointer;
	list-style: none;
}
.in-faq .faq-summary::-webkit-details-marker {
	display: none;
}
.in-faq .faq-summary .fi {
	color: var(--t);
	transition: transform 0.25s;
}
.in-faq .faq-item[open] .faq-summary .fi {
	transform: rotate(45deg);
}
.in-faq .faq-answer {
	color: var(--mu);
}
.in-faq .faq-answer a {
	color: var(--t);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -- CTA --------------------------------------------------------------- */
.in-cta {
	background: var(--nd);
	position: relative;
	overflow: hidden;
}
.in-cta::before {
	content: "";
	position: absolute;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: rgba(13, 110, 112, 0.2);
	filter: blur(90px);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.in-cta-inner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}
.in-cta-inner .contact-lead {
	margin: 0 auto 32px;
}
.in-cta-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-bottom: 26px;
}
.in-cta-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* -- RESPONSIVE -------------------------------------------------------- */
@media (max-width: 1024px) {
	.in-hero {
		padding: 128px 0 84px;
	}
	.in-hero-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.in-p {
		max-width: none;
	}
	.in-adapt {
		grid-template-columns: repeat(2, 1fr);
	}
	.in-spot {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.in-spot-side {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-wrap: wrap;
	}
	.in-spot-ico {
		margin-bottom: 0;
	}
	.in-spot-for {
		width: 100%;
	}
}
@media (max-width: 768px) {
	.in-hero {
		padding: 112px 0 68px;
	}
	.in-p {
		font-size: 16px;
	}
	.in-board {
		padding: 16px;
	}
	.in-board-head {
		flex-wrap: wrap;
	}
	.in-row-p {
		display: none;
	}
	.in-leak,
	.in-adapt-step {
		padding: 26px 22px;
	}
	.in-spot {
		padding: 28px 22px;
	}
	.in-spot-list {
		grid-template-columns: 1fr;
	}
	.in-shared {
		padding: 24px 20px;
	}
}
@media (max-width: 520px) {
	.in-adapt,
	.in-spot-res {
		grid-template-columns: 1fr;
	}
	.in-board-foot {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.in-spot-res {
		gap: 18px;
	}
}

/* ================================================================
PRICING PAGE (pricing.html)
================================================================ */

/* -- HERO / PLANS ------------------------------------------------------ */
.pc-hero {
	position: relative;
	overflow: hidden;
	padding: 148px 0 96px;
	background: var(--wh);
}
.pc-crumb {
	justify-content: center;
}
.pc-hero .in-h2 {
	margin-bottom: 0;
}

.pc-grid {
	gap: 26px;
	align-items: stretch;
	padding-top: 40px;
}

.pc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wh);
	border: 1px solid var(--br);
	border-radius: var(--r);
	overflow: visible;
	box-shadow:
		0 2px 6px rgba(24, 38, 56, 0.04),
		0 20px 44px -24px rgba(24, 38, 56, 0.22);
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s,
		border-color 0.25s;
}
.pc-card:hover {
	transform: translateY(-6px);
	border-color: var(--t);
	box-shadow:
		0 2px 6px rgba(24, 38, 56, 0.05),
		0 30px 60px -24px rgba(13, 110, 112, 0.34);
}
.pc-card-pop {
	border-color: var(--t);
	box-shadow:
		0 2px 6px rgba(24, 38, 56, 0.05),
		0 28px 60px -22px rgba(13, 110, 112, 0.36);
}
/* Featured card sits slightly proud of its neighbours */
@media (min-width: 1025px) {
	.pc-card-pop {
		transform: translateY(-18px);
	}
	.pc-card-pop:hover {
		transform: translateY(-24px);
	}
}

/* Circular price badge */
.pc-badge-price {
	position: absolute;
	top: -34px;
	right: 10px;
	z-index: 4;
	width: 82px;
	height: 82px;
	border: 4px solid var(--wh);
	border-radius: 50%;
	background: linear-gradient(135deg, var(--t), var(--tl));
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
	box-shadow: 0 10px 26px -8px rgba(13, 110, 112, 0.55);
}
.pc-badge-amt {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.02em;
}
.pc-badge-per {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.04em;
	opacity: 0.9;
	margin-top: 1px;
}

/* Popular pill */
.pc-pop {
	position: absolute;
	top: -15px;
	left: 24px;
	z-index: 3;
	background: linear-gradient(135deg, var(--t), var(--tl));
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 6px 14px;
	border-radius: 999px;
	box-shadow: 0 8px 20px -8px rgba(13, 110, 112, 0.6);
	white-space: nowrap;
}

/* Card head band */
.pc-card-head {
	background: var(--n);
	border-radius: var(--r) var(--r) 0 0;
	padding: 26px 82px 24px 26px;
}
.pc-card-pop .pc-card-head {
	background: linear-gradient(135deg, var(--t), var(--tl));
}
.pc-tier {
	font-size: 19px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.01em;
}

.pc-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 26px 28px;
}
.pc-best {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--n);
	margin-bottom: 8px;
}
.pc-desc {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--mu);
	margin-bottom: 20px;
}
.pc-inc {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: var(--n);
	margin-bottom: 14px;
}
.pc-feats {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 26px;
}
/* Pushes the CTA to the foot of every card so buttons align across the row */
.pc-cta {
	margin-top: auto;
}
.pc-feat {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--n);
	line-height: 1.5;
}
.pc-feat .material-symbols-outlined {
	font-size: 18px;
	color: var(--t);
	flex-shrink: 0;
	margin-top: 1px;
}
.pc-cta {
	width: 100%;
	justify-content: center;
	gap: 10px;
	padding: 13px 22px;
	font-size: 14px;
}
.pc-cta-ico {
	font-size: 18px;
}
.pc-note {
	text-align: center;
	font-size: 13px;
	line-height: 1.75;
	color: var(--mu);
	margin-top: 44px;
}

/* -- MAINTENANCE PLANS ------------------------------------------------- */
.pc-maint-head {
	text-align: left;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.pc-maint-sub {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--mu);
}
.pc-maint {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 1000px;
	margin: 0 auto;
}
.pc-maint-row {
	display: grid;
	grid-template-columns: 250px 1fr;
	align-items: stretch;
	min-height: 118px;
}
.pc-maint-row-alt {
	grid-template-columns: 1fr 250px;
	margin-left: auto;
	width: 88%;
}
.pc-maint-img {
	border-radius: var(--rs) 0 0 var(--rs);
	overflow: hidden;
	min-height: 118px;
}
/* Reversed rows put the image on the right, so flip the rounded edge */
.pc-maint-row-alt .pc-maint-img {
	border-radius: 0 var(--rs) var(--rs) 0;
}
.pc-maint-row .pc-maint-card {
	border-radius: 0 var(--rs) var(--rs) 0;
}
.pc-maint-row-alt .pc-maint-card {
	border-radius: var(--rs) 0 0 var(--rs);
}
.pc-maint-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pc-maint-row:hover .pc-maint-img img {
	transform: scale(1.05);
}
.pc-maint-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 22px 30px;
	border-radius: var(--rs);
	transition:
		box-shadow 0.3s,
		border-color 0.25s;
}
.pc-maint-dark {
	background: var(--n);
	color: #fff;
}
.pc-maint-dark .pc-maint-h {
	color: #fff;
}
.pc-maint-dark .pc-maint-p {
	color: rgba(255, 255, 255, 0.62);
}
.pc-maint-light {
	background: var(--wh);
	border: 1px solid var(--t);
}
/* .pc-maint-row .pc-maint-light {
border-left: none;
} */
.pc-maint-row-alt .pc-maint-light {
	border-right: none;
}
.pc-maint-h {
	font-size: 17.5px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--n);
	margin-bottom: 8px;
}
.pc-maint-p {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--mu);
	max-width: 420px;
}

/* -- PLAN COMPARISON TABLE --------------------------------------------- */
.pc-table-wrap {
	overflow-x: auto;
	max-width: 1000px;
	margin: 0 auto;
	border-radius: var(--rs);
	border: 1px solid var(--br);
	background: var(--wh);
	box-shadow: 0 18px 42px -26px rgba(24, 38, 56, 0.28);
}
.pc-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	text-align: left;
}
.pc-table thead tr {
	background: var(--n);
}
.pc-table th {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	padding: 18px 24px;
	white-space: nowrap;
}
.pc-table td {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--n);
	padding: 17px 24px;
	border-top: 1px solid var(--br);
	vertical-align: middle;
}
.pc-table tbody tr:nth-child(odd) {
	background: rgba(13, 110, 112, 0.035);
}
.pc-table td:first-child {
	font-weight: 600;
}
.pc-table .material-symbols-outlined {
	font-size: 22px;
}
.pc-yes {
	color: var(--tl);
}
.pc-no {
	color: #b8c0c9;
}

/* -- KEY BENEFITS ------------------------------------------------------ */
.pc-ben-grid {
	align-items: center;
	gap: 64px;
}
.pc-ben-visual {
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: 0 28px 60px -30px rgba(24, 38, 56, 0.42);
}
.pc-ben-visual img {
	width: 100%;
	display: block;
	object-fit: cover;
}
.pc-ben-copy .in-h2 {
	margin-bottom: 26px;
}
.pc-ben-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pc-ben-li {
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--n);
	line-height: 1.55;
}
.pc-ben-ico {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--ts);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.pc-ben-ico .material-symbols-outlined {
	font-size: 17px;
	color: var(--t);
}

/* -- RESPONSIVE -------------------------------------------------------- */
@media (max-width: 1024px) {
	.pc-grid {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin: 0 auto;
		gap: 44px;
	}
	.pc-ben-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.pc-ben-visual {
		order: 2;
	}
}
@media (max-width: 768px) {
	.pc-hero {
		padding: 118px 0 72px;
	}
	.pc-maint-row,
	.pc-maint-row-alt {
		grid-template-columns: 1fr;
		width: 100%;
		margin-left: 0;
	}
	.pc-maint-row-alt .pc-maint-card {
		order: 2;
	}
	.pc-maint-row-alt .pc-maint-img {
		order: 1;
	}
	.pc-maint-img {
		min-height: 180px;
		border-radius: var(--rs) var(--rs) 0 0;
	}
	.pc-maint-card {
		border-radius: 0 0 var(--rs) var(--rs);
		padding: 24px 22px;
	}
	.pc-maint-head {
		text-align: center;
	}
	.pc-maint-sub {
		margin: 0 auto;
	}
	.pc-card-head,
	.pc-card-body {
		padding-left: 22px;
		padding-right: 22px;
	}
	.pc-table th,
	.pc-table td {
		padding: 14px 18px;
	}
}
@media (max-width: 767px){
	.pc-maint-light {
		border-top: none;
		border-right: 1px solid var(--t) !important;
	}
	.pc-maint-row-alt .pc-maint-card, .pc-maint-row .pc-maint-card {
		border-radius: 0 0 var(--rs) var(--rs) ;
	}
	.pc-maint-row-alt .pc-maint-img, .pc-maint-img {
		border-radius: var(--rs) var(--rs) 0 0;
	}
}
@media (max-width: 520px) {
	.pc-badge-price {
		width: 68px;
		height: 68px;
		top: -22px;
		right: 14px;
	}
	.pc-badge-amt {
		font-size: 19px;
	}
}

/* ══════════════════════════════════════════════════════════════════════
CONTACT PAGE
══════════════════════════════════════════════════════════════════════ */
.ct-hero {
	position: relative;
	overflow: hidden;
	padding: 156px 0 64px;
	background:
		radial-gradient(1100px 460px at 82% -10%, var(--ts), transparent 70%),
		linear-gradient(180deg, var(--wh) 0%, var(--w) 100%);
}
/* faint blueprint grid behind the hero */
.ct-hero-grid {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(24, 38, 56, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(24, 38, 56, 0.045) 1px, transparent 1px);
	background-size: 68px 68px;
	-webkit-mask-image: radial-gradient(70% 68% at 50% 34%, #000 0%, transparent 100%);
	mask-image: radial-gradient(70% 68% at 50% 34%, #000 0%, transparent 100%);
}
.ct-hero-grid-2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
	align-items: center;
	gap: 56px;
}
.ct-crumb {
	justify-content: flex-start;
}
.ct-hero-h {
	margin-bottom: 0;
	max-width: 14ch;
}
.ct-hero-em {
	position: relative;
	display: inline-block;
	background: linear-gradient(135deg, var(--t), var(--tl));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.ct-hero-rule {
	display: block;
	width: 92px;
	height: 4px;
	margin-top: 26px;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--t), var(--a));
	transform-origin: left center;
}
.ct-hero-rule.in {
	animation: ctRule 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}
@keyframes ctRule {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/* -- Email / Call rail -------------------------------------------------- */
.ct-channels {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ct-channel {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 18px;
	text-decoration: none;
	padding: 22px 22px;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--br);
	border-radius: var(--r);
	box-shadow: 0 2px 10px rgba(24, 38, 56, 0.04);
	transition:
		transform 0.34s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.34s,
		border-color 0.25s;
}
/* accent bar that grows on hover */
.ct-channel::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 0;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(180deg, var(--t), var(--tl));
	transform: translateY(-50%);
	transition: height 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.ct-channel:hover {
	transform: translateY(-3px);
	border-color: var(--tb);
	box-shadow: 0 20px 46px rgba(13, 110, 112, 0.14);
}
.ct-channel:hover::before {
	height: 62%;
}
.ct-channel-ico {
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--t), var(--tl));
	box-shadow: 0 8px 20px rgba(13, 110, 112, 0.24);
	transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.ct-channel:hover .ct-channel-ico {
	transform: rotate(-6deg) scale(1.05);
}
.ct-channel-ico .material-symbols-outlined {
	color: #fff;
	font-size: 26px;
}
.ct-channel-txt {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.ct-channel-h {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--mu);
}
.ct-channel-val {
	font-size: 16.5px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--n);
	word-break: break-word;
}
.ct-channel-arw {
	margin-left: auto;
	font-size: 20px;
	color: var(--mu);
	opacity: 0;
	transform: translate(-6px, 6px);
	transition:
		opacity 0.3s,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ct-channel:hover .ct-channel-arw {
	opacity: 1;
	transform: none;
}

/* -- Form + help panel grid -------------------------------------------- */
.ct-form-sec {
	padding-top: 84px;
	padding-bottom: 108px;
}
.ct-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 40px;
	align-items: start;
}
.ct-help-col {
	position: sticky;
	top: 104px;
}

/* -- Form card ---------------------------------------------------------- */
.ct-card {
	position: relative;
	overflow: hidden;
	padding: 44px 44px 40px;
	border-radius: var(--r);
	box-shadow: 0 30px 70px -28px rgba(24, 38, 56, 0.28);
}
.ct-card:hover {
	transform: none;
	box-shadow: 0 30px 70px -28px rgba(24, 38, 56, 0.28);
}
.ct-card-rail {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--t), var(--tl) 55%, var(--a));
}
.ct-card-head {
	padding-bottom: 26px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--br);
}
.ct-card-h {
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--n);
	margin-bottom: 8px;
}
.ct-card-sub2 {
	font-size: 15px;
	line-height: 1.65;
	color: var(--mu);
	margin: 0;
}
.ct-form-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.ct-row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.ct-group {
	min-width: 0;
}
.ct-group .fl3 {
	margin-bottom: 8px;
	transition: color 0.2s;
}
.ct-group:focus-within .fl3 {
	color: var(--t);
}

/* Inputs with a trailing icon */
.ct-field {
	position: relative;
}
.ct-ff,
.ct-ta {
	background-color: #fbfaf8;
	border-color: var(--br);
	border-radius: 14px;
	padding: 15px 46px 15px 16px;
	font-size: 15px;
}
.ct-ta {
	padding-right: 16px;
	resize: vertical;
	min-height: 118px;
	line-height: 1.6;
}
.ct-ff:hover,
.ct-ta:hover {
	border-color: rgba(24, 38, 56, 0.18);
}
.ct-ff:focus,
.ct-ta:focus {
	background-color: var(--wh);
}
.ct-field-sel .ct-ff {
	cursor: pointer;
	background-position: right 16px center;
	padding-right: 42px;
}
.ct-field-sel .ct-ff:invalid {
	color: var(--mu);
}
.ct-field-ico {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	color: var(--mu);
	pointer-events: none;
	transition: color 0.2s;
}
.ct-field:focus-within .ct-field-ico {
	color: var(--t);
}
.ct-error {
	display: none;
	align-items: center;
	gap: 8px;
	color: #e11d48;
	background: rgba(225, 29, 72, 0.07);
	border: 1px solid rgba(225, 29, 72, 0.18);
	border-radius: 12px;
	padding: 11px 14px;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}
.ct-error .material-symbols-outlined {
	font-size: 19px;
	flex-shrink: 0;
}
.ct-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 20px;
	padding-top: 8px;
	margin-top: 4px;
	border-top: 1px solid var(--br);
}
.ct-submit {
	padding: 11px 11px 11px 26px;
	gap: 14px;
	font-size: 15px;
	border-radius: 99px;
	box-shadow: 0 12px 28px -8px rgba(13, 110, 112, 0.5);
	transition:
		transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.28s;
}
.ct-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -10px rgba(13, 110, 112, 0.55);
}
.ct-submit .btn-ico {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
	font-size: 19px;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.ct-submit:hover .btn-ico {
	transform: translate(2px, -2px);
}
.ct-form-note {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mu);
	margin: 0;
}
.ct-form-note .material-symbols-outlined {
	font-size: 18px;
	color: var(--t);
}

/* -- "How We Can Help" panel ------------------------------------------- */
.ct-help {
	position: relative;
	overflow: hidden;
	border-radius: var(--r);
	display: flex;
	box-shadow: 0 30px 70px -30px rgba(14, 27, 42, 0.6);
}
.ct-help-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
	transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.ct-help:hover .ct-help-bg {
	transform: scale(1.09);
}
.ct-help::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(165deg, rgba(13, 110, 112, 0.9), rgba(14, 27, 42, 0.95));
}
.ct-help-inner {
	position: relative;
	z-index: 1;
	padding: 44px 38px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ct-help-logo {
	height: 50px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
	display: block;
	background: #fff;
	border-radius: 12px;
	padding: 7px 10px;
	margin-bottom: 26px;
}
.ct-help-h {
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #fff;
	margin-bottom: 14px;
}
.ct-help-p {
	font-size: 15px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 28px;
	padding-bottom: 26px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.ct-help-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ct-help-li {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	font-size: 14.5px;
	line-height: 1.55;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.94);
	padding: 11px 13px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.09);
	transition:
		background 0.28s,
		border-color 0.28s,
		transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.ct-help-li:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateX(4px);
}
.ct-help-ck {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
}
.ct-help-li .material-symbols-outlined {
	font-size: 17px;
	color: #fff;
	flex-shrink: 0;
}

@media (max-width: 1100px) {
	.ct-hero-grid-2 {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.ct-hero-h {
		max-width: none;
	}
	.ct-channels {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 18px;
	}
}
@media (max-width: 1024px) {
	.ct-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.ct-help-col {
		position: static;
		order: 2;
	}
	.ct-form-col {
		order: 1;
	}
}
@media (max-width: 768px) {
	.ct-hero {
		padding: 122px 0 40px;
	}
	.ct-channels {
		grid-template-columns: 1fr;
		max-width: 460px;
	}
	.ct-form-sec {
		padding-top: 48px;
		padding-bottom: 72px;
	}
	.ct-card {
		padding: 32px 22px 28px;
	}
	.ct-row2 {
		grid-template-columns: 1fr;
	}
	.ct-help-inner {
		padding: 34px 24px;
	}
}
@media (max-width: 480px) {
	.ct-hero-rule {
		margin-top: 20px;
	}
	.compare-note {
    font-size: 11px;
}
.ct-channel {
    padding: 18px 12px;
    gap: 5px;
}

	.ct-channel-ico {
		width: 46px;
		height: 46px;
		border-radius: 13px;
	}
	.ct-channel-ico .material-symbols-outlined {
		font-size: 22px;
	}
	.ct-channel-val {
		font-size: 15px;
	}
	.ct-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.ct-submit {
		justify-content: center;
	}
	.ct-form-note {
		justify-content: center;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ct-hero-rule.in {
		animation: none;
	}
	.ct-help-bg,
	.ct-help:hover .ct-help-bg {
		transform: none;
	}
}
textarea {resize: none !important}

/* ══════════ TESTIMONIALS PAGE ══════════════════════════════════ */

/* -- Hero featured card ------------------------------------------------ */
.ts-visual {
	position: relative;
	z-index: 2;
}
.ts-feat {
	padding: 30px 30px 26px;
}
.ts-feat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.ts-feat-live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--mu);
}
.ts-feat-stars {
	font-size: 16px;
	margin-bottom: 14px;
}
.ts-feat-quote {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.68;
	color: var(--n);
	letter-spacing: -0.01em;
	margin-bottom: 24px;
}
.ts-feat-foot {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 20px;
	border-top: 1px solid var(--br);
}
.ts-feat-who {
	min-width: 0;
}
.ts-feat-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

/* -- Avatars / attribution (shared) ------------------------------------ */
.ts-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--wh);
	box-shadow: 0 2px 10px rgba(24, 38, 56, 0.16);
}
.ts-avatar-lg {
	width: 54px;
	height: 54px;
}
.ts-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--n);
	line-height: 1.35;
}
.ts-role {
	font-size: 13px;
	color: var(--mu);
	line-height: 1.4;
}

/* -- Results strip ----------------------------------------------------- */
.ts-stats-sec {
	padding: 72px 0;
}
.ts-stats {
	gap: 22px;
}
.ts-stat {
	text-align: center;
	padding: 26px 18px;
	background: var(--w);
	border: 1px solid rgba(13, 110, 112, 0.13);
	border-radius: var(--r);
	transition:
		border-color 0.25s,
		transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ts-stat:hover {
	border-color: var(--tb);
	transform: translateY(-3px);
}
.ts-stat-n {
	font-size: clamp(30px, 3.4vw, 40px);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin-bottom: 6px;
}
.ts-stat-l {
	font-size: 13.5px;
	color: var(--mu);
	line-height: 1.55;
}

/* -- The wall (masonry columns) ---------------------------------------- */
.ts-wall {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	align-items: start;
}
.ts-wall[hidden] {
	display: none;
}
.ts-wall-more {
	margin-top: 22px;
}
.ts-col {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* -- Quote card -------------------------------------------------------- */
.ts-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 28px 26px;
	overflow: hidden;
}
.ts-mark {
	position: absolute;
	top: 4px;
	right: 20px;
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
	font-size: 92px;
	font-weight: 900;
	line-height: 1;
	color: var(--t);
	opacity: 0.11;
	pointer-events: none;
	user-select: none;
}
.ts-stars {
	position: relative;
	z-index: 1;
	font-size: 14px;
	margin-bottom: 14px;
}
.ts-quote {
	position: relative;
	z-index: 1;
	font-size: 15px;
	line-height: 1.75;
	color: var(--mu);
	margin: 0 0 24px;
	flex: 1 1 auto;
}
.ts-foot {
	display: flex;
	align-items: center;
	gap: 13px;
	padding-top: 20px;
	border-top: 1px solid var(--br);
}

/* -- Load more --------------------------------------------------------- */
.ts-more-row {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

/* -- Why they stay ----------------------------------------------------- */
.ts-why {
	padding: 30px 28px;
}
.ts-why-h {
	font-size: 19px;
	font-weight: 800;
	color: var(--n);
	letter-spacing: -0.015em;
	margin-bottom: 10px;
}
.ts-why-p {
	font-size: 15px;
	line-height: 1.72;
	color: var(--mu);
}

/* -- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
	.ts-wall {
		grid-template-columns: repeat(2, 1fr);
	}
	.ts-visual {
		animation: none;
	}
}
@media (max-width: 768px) {
	.ts-stats-sec {
		padding: 56px 0;
	}
	.ts-wall {
		grid-template-columns: 1fr;
	}
	.ts-feat {
		padding: 24px 22px 22px;
	}
	.ts-feat-quote {
		font-size: 16px;
	}
	.ts-card {
		padding: 26px 22px 22px;
	}
	.ts-more-row {
		margin-top: 36px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ts-stat:hover {
		transform: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
LEGAL PAGES (Terms & Conditions, Privacy, Cookies)  —  .lg-*
══════════════════════════════════════════════════════════════════════════ */

/* -- Hero -------------------------------------------------------------- */
.lg-hero {
	padding: 148px 0 76px;
}
.lg-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 760px;
}
.lg-hero-inner .in-p {
	max-width: 660px;
	margin-bottom: 18px;
}
.lg-note {
	font-size: 15px;
	line-height: 1.75;
	color: var(--mu);
	max-width: 660px;
	padding-left: 16px;
	border-left: 2px solid var(--br);
	margin-bottom: 30px;
}

/* -- Layout ------------------------------------------------------------ */
.lg-sec {
	padding: 76px 0 108px;
}
.lg-layout {
	display: grid;
	grid-template-columns: 268px 1fr;
	gap: 56px;
	align-items: start;
}

/* -- Sidebar TOC ------------------------------------------------------- */
.lg-side {
	position: sticky;
	top: 104px;
}
.lg-toc {
	border: 1px solid var(--br);
	padding: 22px 18px;
	max-height: calc(100vh - 150px);
	overflow-y: auto;
}
.lg-toc:hover {
	transform: none;
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.055);
}
.lg-toc-h {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--n);
	padding: 0 8px 14px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--br);
}
.lg-toc-h .material-symbols-outlined {
	font-size: 18px;
	color: var(--t);
}
.lg-toc-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.lg-toc-l {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--mu);
	text-decoration: none;
	padding: 8px 10px;
	border-radius: 8px;
	border-left: 2px solid transparent;
	transition:
		color 0.2s,
		background 0.2s,
		border-color 0.2s;
}
.lg-toc-l:hover,
.lg-toc-l.on {
	color: var(--t);
	background: var(--ts);
}
.lg-toc-l.on {
	font-weight: 700;
	border-left-color: var(--t);
}

/* -- Document ---------------------------------------------------------- */
.lg-doc {
	max-width: 780px;
}
.lg-intro {
	border: 1px solid var(--tb);
	padding: 28px 30px;
	margin-bottom: 52px;
}
.lg-intro:hover {
	transform: none;
}
.lg-intro .ib {
	margin-bottom: 16px;
}
.lg-block {
	padding-bottom: 42px;
	margin-bottom: 42px;
	border-bottom: 1px solid var(--br);
	scroll-margin-top: 104px;
}
.lg-block-last {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}
.lg-h2 {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: clamp(21px, 2.4vw, 26px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--n);
	margin-bottom: 18px;
}
.lg-num {
	flex: 0 0 auto;
	font-size: 25px;
	font-weight: 900;
	letter-spacing: 0.02em;
	color: var(--t);
	opacity: 0.75;
}
.lg-p {
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--mu);
	margin-bottom: 14px;
}
.lg-p:last-child,
.lg-p-last {
	margin-bottom: 0;
}
.lg-p strong {
	color: var(--n);
	font-weight: 700;
}
.lg-link {
	color: var(--t);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--tb);
	transition: border-color 0.2s;
}
.lg-link:hover {
	border-bottom-color: var(--t);
}

/* -- Lists ------------------------------------------------------------- */
.lg-list {
	list-style: none;
	margin: 4px 0 18px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px 24px;
}
.lg-list li {
	position: relative;
	padding-left: 24px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--mu);
}
.lg-list li::before {
	content: "check";
	font-family: "Material Symbols Outlined";
	position: absolute;
	left: 0;
	top: 2px;
	font-size: 17px;
	color: var(--t);
	line-height: 1.5;
}
.lg-list-x li::before {
	content: "remove";
	color: #b8c0c9;
}

/* -- Plan chips -------------------------------------------------------- */
.lg-plans {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 6px 0 18px;
}

/* -- Tables ------------------------------------------------------------ */
.lg-table-wrap {
	overflow-x: auto;
	margin: 8px 0 20px;
	border: 1px solid var(--br);
	border-radius: var(--rs);
}
.lg-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	min-width: 460px;
}
.lg-table thead th {
	text-align: left;
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--t);
	background: var(--ts);
	padding: 13px 18px;
	white-space: nowrap;
}
.lg-table td {
	padding: 14px 18px;
	line-height: 1.7;
	color: var(--mu);
	border-top: 1px solid var(--br);
	vertical-align: top;
}
.lg-table td strong {
	color: var(--n);
	white-space: nowrap;
}

/* -- Callout ----------------------------------------------------------- */
.lg-callout {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	background: var(--ts);
	border-left: 3px solid var(--t);
	border-radius: 0 var(--rs) var(--rs) 0;
	padding: 18px 22px;
	margin-top: 20px;
}
.lg-callout .material-symbols-outlined {
	font-size: 21px;
	color: var(--t);
	flex: 0 0 auto;
}
.lg-callout p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--n);
	font-weight: 500;
}

/* -- Contact block ----------------------------------------------------- */
.lg-contact {
	border: 1px solid var(--br);
	padding: 26px 28px;
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.lg-contact:hover {
	transform: none;
}
.lg-contact-row {
	display: flex;
	align-items: flex-start;
	gap: 13px;
}
.lg-contact-row .si {
	margin-bottom: 0;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}
.lg-contact-l {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mu);
	margin-bottom: 3px;
}
.lg-contact-v {
	font-size: 15px;
	font-weight: 700;
	color: var(--n);
	word-break: break-word;
}

/* -- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
	.lg-layout {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.lg-side {
		position: static;
	}
	.lg-toc {
		max-height: none;
	}
	.lg-toc-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2px 14px;
	}
	.lg-doc {
		max-width: none;
	}
	.lg-contact {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 768px) {
	.lg-hero {
		padding: 120px 0 56px;
	}
	.lg-sec {
		padding: 52px 0 72px;
	}
	.lg-toc-list {
		grid-template-columns: 1fr;
	}
	.lg-intro {
		padding: 22px 20px;
		margin-bottom: 38px;
	}
	.lg-list {
		grid-template-columns: 1fr;
	}
	.lg-block {
		padding-bottom: 32px;
		margin-bottom: 32px;
	}
	.lg-contact {
		grid-template-columns: 1fr;
		padding: 22px 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lg-toc-l {
		transition: none;
	}
}
.hero-avatar-4 {
	background: #e6e3de;
	color: #6a7a8a;
}


h3.jk.svl-h a {
	color: #1c2b3a;
	text-decoration: none;
}



.page-id-10 #testimonials{
	display: none !important;
}

/* 13-08-2026 :- Sonali*/

body.home .stats-sec .g4.stats-grid{
    grid-template-columns: repeat(3, 1fr);
}
.in-spot-res, .page-id-10 .stats-sec, .page-id-10 .rv.bsp-stats.in, .page-id-10 .asc-stats, .in-board-foot, .ag-metrics, .bs-console-foot, .bs-metrics, .ag-console-foot {
    display: none;
}
@media (max-width: 480px) {
    body.home .stats-sec .g4.stats-grid {
        grid-template-columns: 1fr;
    }
    
.ct-form-note {
    font-size: 11px;
} 
}
.page-id-48 .in-hero {     padding: 40px 0; } below 767px