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

:root {
	--blue: #0099cb;
	--blue-dark: #007aaa;
	--blue-deeper: #005f88;
	--blue-pale: #e8f6fb;
	--blue-mist: #f0fafd;
	--navy: #0a1e35;
	--navy-light: #1a3a5c;
	--gold: #c9922a;
	--gold-pale: #fdf3e3;
	--silver: #6b7f94;
	--silver-pale: #f0f4f7;
	--white: #fff;
	--off-white: #f7fbfd;
	--g100: #f4f7f9;
	--g200: #e8edf2;
	--g300: #d9dfe4;
	--g400: #9aaab8;
	--g600: #5a7189;
	--g800: #2d4560;
	--text: #1e3a52;
	--accent: #dc2626;
	--accent-pale: #fee2e2;
	--accent-mid: #b91c1c;
	--serif: 'Playfair Display', Georgia, serif;
	--sans: 'Plus Jakarta Sans', system-ui, sans-serif;
	--r-sm: 6px;
	--r-md: 12px;
	--r-lg: 20px;
	--r-xl: 32px;
	--shadow-sm: 0 2px 8px rgba(10, 30, 53, .06);
	--shadow-md: 0 8px 32px rgba(10, 30, 53, .10);
	--shadow-lg: 0 20px 60px rgba(10, 30, 53, .14);
	--tr: all .25s cubic-bezier(.4, 0, .2, 1);

	/* Category accent colours */
	--col-surgical: #0099cb;
	--col-surgical-pale: #e8f6fb;
	--col-primary: #16a34a;
	--col-primary-pale: #dcfce7;
	--col-cardio: #dc2626;
	--col-cardio-pale: #fee2e2;
	--col-neuro: #7c3aed;
	--col-neuro-pale: #ede9fe;
	--col-musculo: #d97706;
	--col-musculo-pale: #fef3c7;
	--col-womens: #db2777;
	--col-womens-pale: #fce7f3;
	--col-other: #0891b2;
	--col-other-pale: #cffafe;
}

html {
	scroll-behavior: smooth;
	font-size: 16px
}

body {
	font-family: var(--sans);
	color: var(--text);
	background: var(--white);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased
}

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

img {
	max-width: 100%
}

/* UTILITY */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px
}

.section {
	padding: 100px 0
}

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

.section-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 16px
}

.section-label::before {
	content: '';
	display: block;
	width: 24px;
	height: 2px;
	background: var(--blue);
	border-radius: 2px
}

.section-title {
	font-family: var(--serif);
	font-size: clamp(2rem, 3.5vw, 3rem);
	color: var(--navy);
	line-height: 1.15;
	font-weight: 600;
	margin-bottom: 20px
}

.section-title em {
	font-style: italic;
	color: var(--blue)
}

.section-sub {
	font-size: 1.05rem;
	color: var(--g600);
	line-height: 1.78;
	font-weight: 400;
	max-width: 580px
}

/* BUTTONS */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sans);
	font-weight: 600;
	font-size: .9rem;
	border-radius: var(--r-sm);
	padding: 14px 28px;
	transition: var(--tr);
	cursor: pointer;
	border: none;
	text-decoration: none;
	letter-spacing: .01em
}

.btn-primary {
	background: var(--blue);
	color: #fff
}

.btn-primary:hover {
	background: var(--blue-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 153, 203, .35)
}

.btn-primary:hover .arr {
	transform: translateX(4px)
}

.btn-outline {
	background: transparent;
	color: var(--blue);
	border: 2px solid var(--blue)
}

.btn-outline:hover {
	background: var(--blue);
	color: #fff
}

.btn-white {
	background: #fff;
	color: var(--blue)
}

.btn-white:hover {
	background: var(--blue-pale);
	transform: translateY(-2px)
}

.btn-ghost {
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(10px);
	color: rgba(255, 255, 255, .85);
	border: 1.5px solid rgba(255, 255, 255, .18)
}

.btn-ghost:hover {
	background: rgba(255, 255, 255, .13);
	border-color: rgba(255, 255, 255, .38);
	color: #fff
}

.btn-lg {
	padding: 17px 36px;
	font-size: .96rem
}

.arr {
	transition: transform .22s
}

/* TOP BAR */
.topbar {
	background: var(--navy);
	padding: 10px 0;
	font-size: .8rem;
	color: rgba(255, 255, 255, .6);
	border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.topbar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px
}

.topbar a {
	color: rgba(255, 255, 255, .6);
	transition: color .2s;
	display: flex;
	align-items: center;
	gap: 6px
}

.topbar a:hover {
	color: var(--blue)
}

.tb-left,
.tb-right {
	display: flex;
	gap: 22px;
	align-items: center
}

.tb-div {
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, .15)
}

/* HEADER */
.main-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--g200);
	transition: box-shadow .3s
}

.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 74px
}

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

.logo img {
	width: 180px;
}

.logo-icon {
	width: 40px;
	height: 40px;
	background: var(--blue);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--serif);
	font-size: 1.2rem;
	flex-shrink: 0
}

.logo-text {
	font-family: var(--serif);
	font-size: 1.4rem;
	color: var(--navy);
	line-height: 1
}

.logo-text span {
	color: var(--blue)
}

.nav-menu {
	display: flex;
	list-style: none;
	gap: 2px;
	align-items: center
}

.nav-menu a {
	display: block;
	padding: 9px 15px;
	font-size: .89rem;
	font-weight: 500;
	color: var(--g600);
	border-radius: var(--r-sm);
	transition: var(--tr)
}

.nav-menu a:hover,
.nav-menu a.active {
	color: var(--navy);
	background: var(--g100)
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 10px
}

.nav-login {
	padding: 9px 18px;
	font-size: .87rem;
	font-weight: 600;
	color: var(--blue);
	border: 1.5px solid var(--blue-pale);
	border-radius: var(--r-sm);
	transition: var(--tr)
}

.nav-login:hover {
	background: var(--blue-pale)
}

.hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	padding: 6px
}

.hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--navy);
	border-radius: 2px;
	transition: .3s
}

/* HERO */
.home.hero {
	position: relative;
	min-height: 94vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--navy)
}

.home .hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('https://images.unsplash.com/photo-1563986768494-4dee2763ff3f?w=1600&q=80&auto=format&fit=crop');
	background-size: cover;
	background-position: center 25%;
	animation: slowZoom 18s ease-out both
}

@keyframes slowZoom {
	from {
		transform: scale(1.07)
	}

	to {
		transform: scale(1)
	}
}

.hero-ov1 {
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(10, 30, 53, .97) 0%, rgb(10 30 53 / 97%) 55%, rgb(4 58 91 / 90%) 100%);
}

.hero-ov2 {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 200px;
	background: linear-gradient(to top, rgba(10, 30, 53, .55) 0%, transparent 100%)
}

.hero-flare {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 55% 65% at 80% 40%, rgba(0, 153, 203, .16) 0%, transparent 60%)
}

.hero-inner {
	position: relative;
	z-index: 3;
	width: 100%
}

.hero .hero-content {
	max-width: 855px;
	margin: 60px 0;
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 32px;
	animation: fadeUp .6s ease both .1s
}

.eye-dot {
	width: 8px;
	height: 8px;
	background: var(--blue);
	border-radius: 50%;
	animation: pulse 2.4s ease infinite
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1)
	}

	50% {
		opacity: .35;
		transform: scale(.65)
	}
}

.eye-text {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6)
}

.eye-sep {
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, .2)
}

.eye-year {
	font-size: .72rem;
	color: var(--blue);
	font-weight: 700;
	letter-spacing: .1em
}

.hero h1 {
	font-family: var(--serif);
	font-size: clamp(2.8rem, 5.5vw, 4.2rem);
	color: #fff;
	line-height: 1.06;
	font-weight: 600;
	letter-spacing: -.02em;
	margin-bottom: 28px;
	animation: fadeUp .75s ease both .22s
}

.hero h1 em {
	font-style: italic;
	color: #6dd6f0
}

.hero-line {
	width: 56px;
	height: 3px;
	background: var(--blue);
	border-radius: 2px;
	margin-bottom: 28px;
	animation: fadeRight .6s ease both .38s
}

.hero p {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, .65);
	line-height: 1.82;
	max-width: 580px;
	font-weight: 300;
	margin-bottom: 44px;
	animation: fadeUp .65s ease both .46s
}

.hero-ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	animation: fadeUp .65s ease both .56s;
	margin-bottom: 60px
}

.hero-chips {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	animation: fadeUp .65s ease both .66s
}

.hero-chip {
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-md);
	padding: 18px 24px;
	transition: var(--tr);
	min-width: 148px
}

.hero-chip:hover {
	background: rgba(0, 153, 203, .18);
	border-color: rgba(0, 153, 203, .45);
	transform: translateY(-3px)
}

.chip-num {
	font-family: var(--serif);
	font-size: 2.1rem;
	color: #fff;
	line-height: 1;
	display: block
}

.chip-desc {
	font-size: .77rem;
	color: rgba(255, 255, 255, .52);
	margin-top: 5px;
	display: block
}

.chip-tag {
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6dd6f0;
	margin-top: 7px;
	display: block
}

.hero-scroll {
	position: absolute;
	bottom: 36px;
	right: 48px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px
}

.scroll-lbl {
	font-size: .65rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .28);
	writing-mode: vertical-lr
}

.scroll-bar {
	width: 1px;
	height: 56px;
	background: linear-gradient(to bottom, rgba(0, 153, 203, .8), transparent);
	animation: drip 2s ease-in-out infinite
}

@keyframes drip {
	0% {
		opacity: 0;
		transform: scaleY(0);
		transform-origin: top
	}

	50% {
		opacity: 1
	}

	100% {
		opacity: 0;
		transform: scaleY(1);
		transform-origin: top
	}
}

/* TRUST BAR */
.trust-bar {
	background: var(--white);
	border-bottom: 1px solid var(--g200)
}

.trust-bar-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-left: 1px solid var(--g200)
}

.trust-item {
	padding: 30px 26px;
	border-right: 1px solid var(--g200);
	display: flex;
	align-items: flex-start;
	gap: 15px;
	transition: var(--tr)
}

.trust-item:hover {
	background: var(--blue-mist)
}

.t-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--r-sm);
	background: var(--blue-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.t-icon svg {
	width: 20px;
	height: 20px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.8
}

.t-label {
	font-size: .91rem;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.3
}

.t-sub {
	font-size: .76rem;
	color: var(--g400);
	margin-top: 3px
}

/* ABOUT */
.about {
	background: var(--white)
}

.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center
}

.about-img-wrap {
	position: relative
}

.about-img-main {
	width: 100%;
	border-radius: var(--r-xl);
	overflow: hidden;
	aspect-ratio: 4/5;
	background: var(--g100);
	box-shadow: var(--shadow-lg)
}

.about-img-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.about-float {
	position: absolute;
	bottom: -20px;
	right: -20px;
	background: var(--blue);
	color: #fff;
	border-radius: var(--r-lg);
	padding: 22px 26px;
	box-shadow: var(--shadow-md);
	text-align: center;
	min-width: 155px
}

.float-num {
	font-family: var(--serif);
	font-size: 3rem;
	line-height: 1;
	display: block
}

.float-txt {
	font-size: .76rem;
	opacity: .85;
	margin-top: 4px;
	font-weight: 500;
	line-height: 1.4
}

.dot-pattern {
	position: absolute;
	top: -24px;
	left: -24px;
	width: 120px;
	height: 120px;
	background-image: radial-gradient(circle, var(--blue-pale) 1.5px, transparent 1.5px);
	background-size: 16px 16px;
	border-radius: var(--r-md);
	z-index: -1
}

.pillars {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 32px 0
}

.pillar {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 20px;
	background: var(--off-white);
	border-radius: var(--r-md);
	border-left: 3px solid var(--blue);
	transition: var(--tr)
}

.pillar:hover {
	background: var(--blue-mist);
	transform: translateX(4px)
}

.p-icon {
	width: 36px;
	height: 36px;
	background: var(--blue-pale);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.p-icon svg {
	width: 17px;
	height: 17px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2
}

.p-title {
	font-size: .92rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 3px
}

.p-desc {
	font-size: .82rem;
	color: var(--g600);
	line-height: 1.55
}

.about-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--g200);
	border-radius: var(--r-md);
	overflow: hidden;
	margin-top: 32px
}

.astat {
	background: var(--white);
	padding: 22px 18px;
	text-align: center
}

.astat-num {
	font-family: var(--serif);
	font-size: 2rem;
	color: var(--blue);
	font-weight: 600;
	display: block
}

.astat-lbl {
	font-size: .74rem;
	color: var(--g600);
	margin-top: 4px;
	line-height: 1.35
}

/* SUPPORT */
.support {
	background: var(--g100)
}

.support-hdr {
	text-align: center;
	max-width: 660px;
	margin: 0 auto 60px
}

.support-hdr .section-sub {
	margin: 0 auto
}

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

.s-card {
	background: var(--white);
	border-radius: var(--r-lg);
	padding: 34px 26px;
	border: 1.5px solid var(--g200);
	transition: var(--tr);
	text-align: center;
	position: relative;
	overflow: hidden
}

.s-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--blue);
	transform: scaleX(0);
	transition: transform .28s ease;
	transform-origin: left
}

.s-card:hover {
	border-color: var(--blue);
	transform: translateY(-6px);
	box-shadow: var(--shadow-md)
}

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

.s-card-icon {
	width: 58px;
	height: 58px;
	background: var(--blue-pale);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	transition: var(--tr)
}

.s-card:hover .s-card-icon {
	background: var(--blue)
}

.s-card-icon svg {
	width: 26px;
	height: 26px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.7;
	transition: stroke .25s
}

.s-card:hover .s-card-icon svg {
	stroke: #fff
}

.s-card h3 {
	font-size: .98rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 10px
}

.s-card p {
	font-size: .83rem;
	color: var(--g600);
	line-height: 1.6
}

/* SERVICES */
.services-sub {
	margin-top: 80px
}

.srv-hdr {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 36px;
	flex-wrap: wrap;
	gap: 16px
}

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

.srv-card {
	background: var(--white);
	border-radius: var(--r-lg);
	border: 1.5px solid var(--g200);
	padding: 34px 30px;
	transition: var(--tr);
	display: flex;
	gap: 22px;
	align-items: flex-start
}

.srv-card:hover {
	border-color: var(--blue);
	box-shadow: var(--shadow-md);
	transform: translateY(-4px)
}

.srv-num {
	font-family: var(--serif);
	font-size: 1.4rem;
	color: var(--blue-pale);
	font-weight: 600;
	min-width: 38px;
	line-height: 1;
	transition: color .25s
}

.srv-card:hover .srv-num {
	color: var(--blue)
}

.srv-icon {
	width: 46px;
	height: 46px;
	background: var(--blue-pale);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	transition: background .25s
}

.srv-card:hover .srv-icon {
	background: var(--blue)
}

.srv-icon svg {
	width: 22px;
	height: 22px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.7;
	transition: stroke .25s
}

.srv-card:hover .srv-icon svg {
	stroke: #fff
}

.srv-card h3 {
	font-size: 1.03rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 10px
}

.srv-card p {
	font-size: .85rem;
	color: var(--g600);
	line-height: 1.65
}

.srv-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-size: .83rem;
	font-weight: 700;
	color: var(--blue);
	transition: gap .2s
}

.srv-link:hover {
	gap: 10px
}

.srv-link svg {
	width: 12px;
	height: 12px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5
}

.w-50 {
	width: 50%;
}

/* WHY */
.why {
	background: var(--navy);
	overflow: hidden;
	position: relative
}

.why::before {
	content: '';
	position: absolute;
	top: -80px;
	right: -80px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 153, 203, .12) 0%, transparent 70%)
}

.why::after {
	content: '';
	position: absolute;
	bottom: -60px;
	left: -60px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 153, 203, .08) 0%, transparent 70%)
}

.why-inner {
	position: relative;
	z-index: 2
}

.why-hdr {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 60px
}

.why .section-title {
	color: #fff
}

.why .section-sub {
	color: rgba(255, 255, 255, .55);
	margin: 0 auto
}

.why .section-label {
	color: #6dd6f0
}

.why .section-label::before {
	background: #6dd6f0
}

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

.why-card {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--r-xl);
	padding: 44px 36px;
	transition: var(--tr);
	position: relative;
	overflow: hidden
}

.why-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--blue), transparent);
	opacity: 0;
	transition: opacity .3s
}

.why-card:hover {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(0, 153, 203, .3);
	transform: translateY(-5px)
}

.why-card:hover::after {
	opacity: 1
}

.why-card-icon {
	width: 56px;
	height: 56px;
	background: linear-gradient(135deg, var(--blue), var(--blue-dark));
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 26px;
	box-shadow: 0 8px 24px rgba(0, 153, 203, .3)
}

.why-card-icon svg {
	width: 26px;
	height: 26px;
	stroke: #fff;
	fill: none;
	stroke-width: 1.8
}

.why-bg-num {
	position: absolute;
	top: 24px;
	right: 24px;
	font-family: var(--serif);
	font-size: 5rem;
	color: rgba(255, 255, 255, .04);
	line-height: 1;
	font-weight: 600;
	user-select: none
}

.why-card h3 {
	font-size: 1.12rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 12px
}

.why-card p {
	font-size: .87rem;
	color: rgba(255, 255, 255, .52);
	line-height: 1.72;
	margin-bottom: 16px
}

.why-card ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.why-card ul li {
	font-size: .83rem;
	color: rgba(255, 255, 255, .45);
	padding-left: 16px;
	position: relative
}

.why-card ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	color: var(--blue);
	font-size: .78rem;
	background-color: var(--blue);
	width: 7px;
	height: 7px;
	border-radius: 100px;
}

/* COMPLIANCE */
.compliance {
	background: var(--off-white)
}

.comp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center
}

.comp-cards {
	display: flex;
	flex-direction: column;
	gap: 18px
}

.comp-card {
	background: var(--white);
	border-radius: var(--r-md);
	border: 1.5px solid var(--g200);
	padding: 24px 26px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	transition: var(--tr)
}

.comp-card:hover {
	border-color: var(--blue);
	box-shadow: var(--shadow-sm)
}

.ci {
	width: 44px;
	height: 44px;
	background: var(--blue-pale);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.ci svg {
	width: 21px;
	height: 21px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.8
}

.ci-title {
	font-size: .93rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 5px
}

.ci-desc {
	font-size: .83rem;
	color: var(--g600);
	line-height: 1.6
}

.comp-visual {
	position: relative
}

.comp-img {
	width: 100%;
	border-radius: var(--r-xl);
	overflow: hidden;
	aspect-ratio: 3/4;
	background: var(--g100);
	box-shadow: var(--shadow-lg)
}

.comp-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.comp-float {
	position: absolute;
	top: 40px;
	left: -28px;
	background: var(--white);
	border-radius: var(--r-md);
	padding: 18px 22px;
	box-shadow: var(--shadow-md);
	border-left: 4px solid var(--blue)
}

.cf-num {
	font-family: var(--serif);
	font-size: 1.8rem;
	color: var(--blue);
	font-weight: 600
}

.cf-txt {
	font-size: .75rem;
	color: var(--g600);
	margin-top: 3px;
	line-height: 1.4
}

/* CTA */
.cta-section {
	background: linear-gradient(130deg, var(--blue-deeper) 0%, var(--blue) 50%, #00b8e0 100%);
	padding: 96px 0;
	position: relative;
	overflow: hidden
}

.cta-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
	background-size: 32px 32px
}

.cta-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: center
}

.cta-title {
	font-family: var(--serif);
	font-size: clamp(2rem, 3.5vw, 2.8rem);
	color: #fff;
	line-height: 1.15;
	font-weight: 600;
	margin-bottom: 12px
}

.cta-sub {
	font-size: 1rem;
	color: rgba(255, 255, 255, .72);
	max-width: 500px;
	line-height: 1.75
}

.cta-actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-end
}

.cta-phone {
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 9px
}

.cta-phone svg {
	width: 18px;
	height: 18px;
	stroke: rgba(255, 255, 255, .7);
	fill: none;
	stroke-width: 2
}

/* TESTIMONIALS */
.testi {
	background: var(--white)
}

.testi-hdr {
	text-align: center;
	max-width: 560px;
	margin: 0 auto 56px
}

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

.tcard {
	background: var(--white);
	border: 1.5px solid var(--g200);
	border-radius: var(--r-xl);
	padding: 34px 30px;
	transition: var(--tr)
}

.tcard:hover {
	border-color: var(--blue);
	box-shadow: var(--shadow-md);
	transform: translateY(-4px)
}

.stars {
	display: flex;
	gap: 4px;
	margin-bottom: 18px
}

.star {
	width: 15px;
	height: 15px;
	fill: #f5a623;
	color: #f5a623
}

.tquote {
	font-size: 2.6rem;
	color: var(--blue-pale);
	font-family: var(--serif);
	line-height: .7;
	margin-bottom: 12px;
	display: block
}

.ttext {
	font-size: .9rem;
	color: var(--g600);
	line-height: 1.75;
	font-style: italic;
	margin-bottom: 26px
}

.tauthor {
	display: flex;
	align-items: center;
	gap: 12px;
	border-top: 1px solid var(--g200);
	padding-top: 20px
}

.tavatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--blue), var(--navy-light));
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	color: #fff;
	font-size: .95rem
}

.tname {
	font-size: .88rem;
	font-weight: 700;
	color: var(--navy)
}

.trole {
	font-size: .75rem;
	color: var(--g400);
	margin-top: 2px
}

/* BLOG */
.blog {
	background: var(--g100)
}

.blog-hdr {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 44px;
	flex-wrap: wrap;
	gap: 20px
}

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

.bcard {
	background: var(--white);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: var(--tr);
	border: 1.5px solid var(--g200)
}

.bcard:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: var(--blue)
}

.bcard-img {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--blue-pale);
	position: relative
}

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

.bcard:hover .bcard-img img {
	transform: scale(1.05)
}

.bcat {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--blue);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 100px
}

.bcard-body {
	padding: 26px
}

.bmeta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	font-size: .76rem;
	color: var(--g400)
}

.bdot {
	width: 4px;
	height: 4px;
	background: var(--g400);
	border-radius: 50%
}

.bcard h3 {
	font-size: .98rem;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.4;
	margin-bottom: 10px;
	transition: color .2s
}

.bcard:hover h3 {
	color: var(--blue)
}

.bcard p {
	font-size: .83rem;
	color: var(--g600);
	line-height: 1.65;
	margin-bottom: 18px
}

.bread {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	font-weight: 700;
	color: var(--blue);
	transition: gap .2s
}

.bread:hover {
	gap: 10px
}

.bread svg {
	width: 12px;
	height: 12px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5
}

/* FOOTER */
footer {
	background: var(--navy);
	color: rgba(255, 255, 255, .5)
}

.footer-top {
	padding: 72px 0 48px
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 52px
}

.fb .logo {
	margin-bottom: 18px
}

.fb .logo img {
	width: 180px;
}

.fb .logo-text {
	color: #fff
}

.fb p {
	font-size: .85rem;
	line-height: 1.72;
	max-width: 280px
}

.fb-contacts {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px
}

.fcontact {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: .83rem
}

.fcontact svg {
	width: 14px;
	height: 14px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0
}

.fcontact a {
	color: rgba(255, 255, 255, .6);
	transition: color .2s
}

.fcontact a:hover {
	color: var(--blue)
}

.fcol h4 {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 20px
}

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

.fcol a {
	font-size: .85rem;
	color: rgba(255, 255, 255, .44);
	transition: color .2s
}

.fcol a:hover {
	color: var(--blue)
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .07);
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: .79rem;
	flex-wrap: wrap;
	gap: 12px
}

.fb-links {
	display: flex;
	gap: 20px
}

.fb-links a {
	color: rgba(255, 255, 255, .34);
	transition: color .2s
}

.fb-links a:hover {
	color: var(--blue)
}

.social {
	display: flex;
	gap: 10px;
	margin-top: 20px
}

.sbtn {
	width: 36px;
	height: 36px;
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--tr)
}

.sbtn:hover {
	background: var(--blue);
	border-color: var(--blue)
}

.sbtn svg {
	width: 14px;
	height: 14px;
	stroke: rgba(255, 255, 255, .6);
	fill: none;
	stroke-width: 2;
	transition: stroke .2s
}

.sbtn:hover svg {
	stroke: #fff
}

/* ANIMATIONS */
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(24px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

@keyframes fadeRight {
	from {
		opacity: 0;
		transform: translateX(-20px)
	}

	to {
		opacity: 1;
		transform: translateX(0)
	}
}



/* RESPONSIVE */
@media(max-width:1024px) {

	.trust-bar-inner,
	.support-cards {
		grid-template-columns: repeat(2, 1fr)
	}

	.about-grid,
	.comp-grid {
		grid-template-columns: 1fr;
		gap: 48px
	}

	.about-img-wrap {
		max-width: 460px
	}

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

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}
}

@media(max-width:768px) {
	.section {
		padding: 64px 0
	}

	.nav-menu {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 74px;
		left: 0;
		right: 0;
		background: #fff;
		padding: 16px;
		box-shadow: var(--shadow-md);
		z-index: 100
	}

	.nav-menu.open {
		display: flex
	}

	.hamburger {
		display: flex
	}

	.hero-chips {
		display: none
	}

	.trust-bar-inner,
	.support-cards,
	.srv-grid,
	.why-grid,
	.testi-grid,
	.blog-grid {
		grid-template-columns: 1fr
	}

	.cta-inner {
		grid-template-columns: 1fr;
		text-align: center
	}

	.cta-actions {
		align-items: center
	}

	.footer-grid {
		grid-template-columns: 1fr
	}

	.topbar,
	.hero-scroll {
		display: none
	}

	.about-float,
	.comp-float {
		position: static;
		margin-top: 16px;
		display: inline-block
	}
}

/* About Us page */
/* ── PAGE HERO / BANNER ── */
.page-hero {
	position: relative;
	padding: 80px 0 72px;
	background: var(--navy);
	overflow: hidden
}

.page-hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=1600&q=80&auto=format&fit=crop&crop=center');
	background-size: cover;
	background-position: center;
	opacity: .18
}

.page-hero-ov {
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(10, 30, 53, .96) 0%, rgba(10, 30, 53, .80) 60%, rgba(0, 100, 160, .5) 100%)
}

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


.page-hero h1 {
	font-family: var(--serif);
	font-size: clamp(2.4rem, 5vw, 4rem);
	color: #fff;
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -.02em;
	margin-bottom: 20px
}

.page-hero h1 em {
	font-style: italic;
	color: #6dd6f0
}

.page-hero-sub {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, .62);
	max-width: 560px;
	line-height: 1.8;
	font-weight: 300
}

.page-hero-line {
	width: 52px;
	height: 3px;
	background: var(--blue);
	border-radius: 2px;
	margin: 24px 0
}

.page-hero-chips {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 40px
}

.ph-chip {
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-md);
	padding: 14px 22px;
	display: flex;
	align-items: center;
	gap: 12px
}

.ph-chip-icon {
	width: 36px;
	height: 36px;
	background: rgba(0, 153, 203, .25);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.ph-chip-icon svg {
	width: 18px;
	height: 18px;
	stroke: #6dd6f0;
	fill: none;
	stroke-width: 1.8
}

.ph-chip-num {
	font-family: var(--serif);
	font-size: 1.4rem;
	color: #fff;
	line-height: 1
}

.ph-chip-lbl {
	font-size: .74rem;
	color: rgba(255, 255, 255, .5);
	margin-top: 2px
}

/* ── WHO WE ARE — MAIN INTRO ── */
.intro {
	background: var(--white)
}

.intro-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center
}

.intro-img-wrap {
	position: relative
}

.dot-pattern {
	position: absolute;
	top: -24px;
	left: -24px;
	width: 120px;
	height: 120px;
	background-image: radial-gradient(circle, var(--blue-pale) 1.5px, transparent 1.5px);
	background-size: 16px 16px;
	border-radius: var(--r-md);
	z-index: -1
}

.intro-img {
	width: 100%;
	border-radius: var(--r-xl);
	overflow: hidden;
	aspect-ratio: 4/5;
	background: var(--g100);
	box-shadow: var(--shadow-lg)
}

.intro-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.intro-float {
	position: absolute;
	bottom: -20px;
	right: -20px;
	background: var(--blue);
	color: #fff;
	border-radius: var(--r-lg);
	padding: 22px 26px;
	box-shadow: var(--shadow-md);
	text-align: center;
	min-width: 160px
}

.intro-content {}

.intro-body {
	font-size: 1.02rem;
	color: var(--g600);
	line-height: 1.8;
	margin-bottom: 28px
}

.benefit-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 36px
}

.benefit-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 18px;
	background: var(--off-white);
	border-radius: var(--r-md);
	border-left: 3px solid var(--blue);
	font-size: .9rem;
	font-weight: 500;
	color: var(--navy);
	transition: var(--tr)
}

.benefit-item:hover {
	background: var(--blue-mist);
	transform: translateX(4px)
}

.benefit-check {
	width: 22px;
	height: 22px;
	background: var(--blue-pale);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.benefit-check svg {
	width: 11px;
	height: 11px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 3
}

/* ── 3 PILLARS / WIDGETS ── */
.pillars-section {
	background: var(--g100)
}

.pillars-hdr {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 60px
}

.pillars-hdr .section-sub {
	margin: 0 auto
}

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

.pillar-card {
	background: var(--white);
	border-radius: var(--r-xl);
	padding: 44px 36px;
	border: 1.5px solid var(--g200);
	transition: var(--tr);
	position: relative;
	overflow: hidden
}

.pillar-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--blue);
	transform: scaleX(0);
	transition: transform .3s ease;
	transform-origin: left
}

.pillar-card:hover {
	border-color: var(--blue);
	transform: translateY(-6px);
	box-shadow: var(--shadow-md)
}

.pillar-card:hover::after {
	transform: scaleX(1)
}

.pillar-card-icon {
	width: 58px;
	height: 58px;
	background: var(--blue-pale);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	transition: var(--tr)
}

.pillar-card:hover .pillar-card-icon {
	background: var(--blue)
}

.pillar-card-icon svg {
	width: 28px;
	height: 28px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.7;
	transition: stroke .25s
}

.pillar-card:hover .pillar-card-icon svg {
	stroke: #fff
}

.pillar-card-num {
	position: absolute;
	bottom: 20px;
	right: 24px;
	font-family: var(--serif);
	font-size: 4.5rem;
	color: var(--g200);
	line-height: 1;
	font-weight: 600;
	user-select: none;
	transition: color .3s
}

.pillar-card:hover .pillar-card-num {
	color: var(--blue-pale)
}

.pillar-card h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 14px;
	line-height: 1.3
}

.pillar-card p {
	font-size: .88rem;
	color: var(--g600);
	line-height: 1.72
}

/* ── PURPOSE STATEMENT ── */
.purpose {
	background: var(--navy);
	position: relative;
	overflow: hidden
}

.purpose::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1.5px, transparent 1.5px);
	background-size: 32px 32px
}

.purpose::after {
	content: '';
	position: absolute;
	top: -100px;
	right: -100px;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 153, 203, .12) 0%, transparent 65%)
}

.purpose-inner {
	position: relative;
	z-index: 2
}

.purpose-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center
}

.purpose-content .section-label {
	color: #6dd6f0
}

.purpose-content .section-label::before {
	background: #6dd6f0
}

.purpose-inner .section-title {
	color: #fff
}

.purpose-content .section-sub {
	color: rgba(255, 255, 255, .6);
	margin-bottom: 36px
}

.purpose-img-wrap {
	position: relative
}

.purpose-img {
	border-radius: var(--r-xl);
	overflow: hidden;
	aspect-ratio: 3/4;
	background: var(--navy-light);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .3)
}

.purpose-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: .9
}

.purpose-float {
	position: absolute;
	bottom: 30px;
	left: -28px;
	background: var(--white);
	border-radius: var(--r-md);
	padding: 18px 22px;
	box-shadow: var(--shadow-lg);
	border-left: 4px solid var(--blue);
	min-width: 180px;
	z-index: 9;
}

.pf-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 4px
}

.pf-text {
	font-size: .88rem;
	font-weight: 600;
	color: var(--navy);
	line-height: 1.4
}

.purpose-promise {
	background: rgba(0, 153, 203, .12);
	border: 1px solid rgba(0, 153, 203, .25);
	border-radius: var(--r-md);
	padding: 24px 28px;
	margin-top: 28px
}

.promise-title {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6dd6f0;
	margin-bottom: 10px
}

.promise-text {
	font-size: .95rem;
	color: rgba(255, 255, 255, .75);
	line-height: 1.72;
	font-style: italic
}

/* ── OUR APPROACH — 4 PILLARS ── */
.approach {
	background: var(--white)
}

.approach-hdr {
	max-width: 600px;
	margin-bottom: 60px
}

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

.approach-card {
	background: var(--off-white);
	border-radius: var(--r-lg);
	padding: 36px 28px;
	border: 1.5px solid var(--g200);
	transition: var(--tr);
	text-align: center
}

.approach-card:hover {
	border-color: var(--blue);
	background: var(--blue-mist);
	transform: translateY(-5px);
	box-shadow: var(--shadow-md)
}

.approach-icon {
	width: 54px;
	height: 54px;
	background: var(--blue-pale);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	transition: var(--tr)
}

.approach-card:hover .approach-icon {
	background: var(--blue)
}

.approach-icon svg {
	width: 24px;
	height: 24px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.8;
	transition: stroke .25s
}

.approach-card:hover .approach-icon svg {
	stroke: #fff
}

.approach-card h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 12px
}

.approach-card p {
	font-size: .84rem;
	color: var(--g600);
	line-height: 1.65
}

/* ── EXPERTISE ── */
.expertise {
	background: var(--g100)
}

.expertise-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 80px;
	align-items: center
}

.expertise-img-wrap {
	position: relative
}

.expertise-img {
	border-radius: var(--r-xl);
	overflow: hidden;
	aspect-ratio: 4/7;
	background: var(--g200);
	box-shadow: var(--shadow-lg)
}

.expertise-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.expertise-badge {
	position: absolute;
	top: 30px;
	right: -20px;
	background: var(--blue);
	color: #fff;
	border-radius: var(--r-lg);
	padding: 18px 24px;
	box-shadow: var(--shadow-md);
	text-align: center
}

.eb-num {
	font-family: var(--serif);
	font-size: 2.2rem;
	line-height: 1;
	display: block
}

.eb-txt {
	font-size: .72rem;
	opacity: .85;
	font-weight: 500;
	margin-top: 4px
}

.expertise-items {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 8px
}

.expertise-item {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 22px 24px;
	background: var(--white);
	border-radius: var(--r-md);
	border: 1.5px solid var(--g200);
	transition: var(--tr)
}

.expertise-item:hover {
	border-color: var(--blue);
	box-shadow: var(--shadow-sm);
	transform: translateX(4px)
}

.ei-icon {
	width: 42px;
	height: 42px;
	background: var(--blue-pale);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: var(--tr)
}

.expertise-item:hover .ei-icon {
	background: var(--blue)
}

.ei-icon svg {
	width: 20px;
	height: 20px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.8;
	transition: stroke .25s
}

.expertise-item:hover .ei-icon svg {
	stroke: #fff
}

.ei-title {
	font-size: .95rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 5px
}

.ei-desc {
	font-size: .84rem;
	color: var(--g600);
	line-height: 1.6
}

/* ── COMMITMENT / STATEMENTS ── */
.commitment {
	background: var(--white)
}

.commitment-hdr {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 60px
}

.commitment-hdr .section-sub {
	margin: 0 auto
}

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

.commit-card {
	border-radius: var(--r-xl);
	padding: 44px 36px;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: var(--tr)
}

.commit-card.card-1 {
	background: var(--navy)
}

.commit-card.card-2 {
	background: var(--blue)
}

.commit-card.card-3 {
	background: var(--navy-light)
}

.commit-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg)
}

.commit-card::before {
	content: '';
	position: absolute;
	bottom: -40px;
	right: -40px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .05)
}

.commit-icon {
	width: 58px;
	height: 58px;
	background: rgba(255, 255, 255, .12);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 22px
}

.commit-icon svg {
	width: 28px;
	height: 28px;
	stroke: #fff;
	fill: none;
	stroke-width: 1.7
}

.commit-card h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 14px
}

.commit-card p {
	font-size: .87rem;
	color: rgba(255, 255, 255, .68);
	line-height: 1.72
}

/* ── STATS BAND ── */
.stats-band {
	background: var(--blue);
	padding: 56px 0
}

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

.stat-block {
	background: var(--blue);
	padding: 32px 28px;
	text-align: center;
	transition: var(--tr)
}

.stat-block:hover {
	background: var(--blue-dark)
}

.stat-num {
	font-family: var(--serif);
	font-size: 3rem;
	color: #fff;
	line-height: 1;
	font-weight: 600;
	display: block
}

.stat-lbl {
	font-size: .82rem;
	color: rgba(255, 255, 255, .7);
	margin-top: 8px;
	display: block;
	line-height: 1.4
}

/* ── CTA ── */
.cta-section {
	background: linear-gradient(130deg, var(--blue-deeper) 0%, var(--blue) 50%, #00b8e0 100%);
	padding: 96px 0;
	position: relative;
	overflow: hidden
}

.cta-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
	background-size: 32px 32px
}

.cta-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: center
}

.cta-title {
	font-family: var(--serif);
	font-size: clamp(2rem, 3.5vw, 2.8rem);
	color: #fff;
	line-height: 1.15;
	font-weight: 600;
	margin-bottom: 12px
}

.cta-sub {
	font-size: 1rem;
	color: rgba(255, 255, 255, .72);
	max-width: 500px;
	line-height: 1.75
}

.cta-actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-end
}

.cta-phone {
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 9px
}

.cta-phone svg {
	width: 18px;
	height: 18px;
	stroke: rgba(255, 255, 255, .7);
	fill: none;
	stroke-width: 2
}

/* Services Page */
/* ── PAGE HERO ── */
.page-hero {
	position: relative;
	padding: 88px 0 80px;
	background: var(--navy);
	overflow: hidden
}

.service .page-hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1600&q=80&auto=format&fit=crop&crop=center');
	background-size: cover;
	background-position: center;
	opacity: .15
}

.service .page-hero-ov {
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(10, 30, 53, .97) 0%, rgba(10, 30, 53, .82) 58%, rgba(0, 100, 160, .45) 100%)
}

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

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .78rem;
	color: rgba(255, 255, 255, .4);
	margin-bottom: 28px
}

.breadcrumb a {
	color: rgba(255, 255, 255, .4);
	transition: color .2s
}

.breadcrumb a:hover {
	color: var(--blue)
}

.breadcrumb-sep {
	color: rgba(255, 255, 255, .2)
}

.breadcrumb-current {
	color: rgba(255, 255, 255, .7)
}

.page-hero h1 {
	font-family: var(--serif);
	font-size: clamp(2.4rem, 5vw, 4.2rem);
	color: #fff;
	line-height: 1.06;
	font-weight: 600;
	letter-spacing: -.02em;
	margin-bottom: 22px
}

.page-hero h1 em {
	font-style: italic;
	color: #6dd6f0
}

.page-hero-line {
	width: 52px;
	height: 3px;
	background: var(--blue);
	border-radius: 2px;
	margin: 24px 0
}

.page-hero-sub {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, .62);
	max-width: 600px;
	line-height: 1.8;
	font-weight: 300;
	margin-bottom: 40px
}

/* Service nav pills in hero */
.hero-service-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px
}

.hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border-radius: 100px;
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, .12);
	font-size: .78rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .7);
	transition: var(--tr);
	cursor: pointer
}

.hero-pill:hover,
.hero-pill.active {
	background: rgba(0, 153, 203, .25);
	border-color: rgba(0, 153, 203, .5);
	color: #fff
}

.hero-pill svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2
}

/* ── INTRO / TRUST LEAD ── */
.intro-band {
	background: var(--white);
	padding: 56px 0;
	border-bottom: 1px solid var(--g200)
}

.intro-band-inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 72px;
	align-items: center
}

.intro-text .section-sub {
	margin-bottom: 28px
}

.intro-text p+p {
	margin-top: 14px
}

.intro-highlights {
	display: flex;
	flex-direction: column;
	gap: 0
}

.highlight-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--g200)
}

.highlight-row:last-child {
	border-bottom: none
}

.hl-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--r-sm);
	background: var(--blue-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.hl-icon svg {
	width: 19px;
	height: 19px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.8
}

.hl-title {
	font-size: .93rem;
	font-weight: 700;
	color: var(--navy)
}

.hl-sub {
	font-size: .8rem;
	color: var(--g400);
	margin-top: 2px
}

/* ── SERVICES OVERVIEW GRID ── */
.services-overview {
	background: var(--g100)
}

.services-hdr {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 64px
}

.services-hdr .section-sub {
	margin: 0 auto
}

/* Specialty tag above heading */
.services-filter-bar {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 52px
}

.filter-btn {
	padding: 9px 20px;
	border-radius: 100px;
	background: var(--white);
	border: 1.5px solid var(--g200);
	font-size: .82rem;
	font-weight: 600;
	color: var(--g600);
	cursor: pointer;
	transition: var(--tr)
}

.filter-btn:hover,
.filter-btn.active {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff
}

/* Service card grid */
.srv-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px
}

.srv-card {
	background: var(--white);
	border-radius: var(--r-xl);
	border: 1.5px solid var(--g200);
	overflow: hidden;
	transition: var(--tr);
	display: flex;
	flex-direction: column;
	position: relative;
}

.services-overview .srv-card {
	padding: 0;
	gap: 0;
	align-items: normal;
}

.srv-card:hover {
	border-color: var(--blue);
	transform: translateY(-6px);
	box-shadow: var(--shadow-md)
}

.services-overview .reveal.visible {
	padding: 0;
}

.srv-card-accent {
	height: 4px;
	background: linear-gradient(90deg, var(--blue), var(--blue-dark));
	transform: scaleX(0);
	transition: transform .3s ease;
	transform-origin: left
}

.srv-card:hover .srv-card-accent {
	transform: scaleX(1)
}

.srv-card-body {
	padding: 36px 30px;
	display: flex;
	flex-direction: column;
	flex: 1
}

.srv-card-icon-wrap {
	width: 60px;
	height: 60px;
	border-radius: var(--r-md);
	background: var(--blue-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	transition: var(--tr)
}

.srv-card:hover .srv-card-icon-wrap {
	background: var(--blue)
}

.srv-card-icon-wrap svg {
	width: 28px;
	height: 28px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.6;
	transition: stroke .25s
}

.srv-card:hover .srv-card-icon-wrap svg {
	stroke: #fff
}

.srv-card-tag {
	font-size: .67rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 10px;
	display: block
}

.srv-card h3 {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 12px;
	line-height: 1.3
}

.srv-card p {
	font-size: .86rem;
	color: var(--g600);
	line-height: 1.68;
	flex: 1;
	margin-bottom: 22px
}

.srv-card-includes {
	margin-bottom: 24px
}

.srv-card-includes-title {
	font-size: .73rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--g400);
	margin-bottom: 10px
}

.srv-card-includes ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px
}

.srv-card-includes li {
	font-size: .82rem;
	color: var(--g600);
	display: flex;
	align-items: flex-start;
	gap: 8px
}

.srv-card-includes li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--blue);
	flex-shrink: 0;
	margin-top: 5px
}

.srv-card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .84rem;
	font-weight: 700;
	color: var(--blue);
	transition: gap .2s;
	margin-top: auto
}

.srv-card-link:hover {
	gap: 10px
}

.srv-card-link svg {
	width: 13px;
	height: 13px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5
}

/* Featured card (full width, horizontal) */
.srv-card-featured {
	grid-column: 1/-1;
	flex-direction: row;
	gap: 0;
	align-items: stretch
}

.srv-card-featured .srv-card-img {
	width: 340px;
	flex-shrink: 0;
	background: var(--navy);
	overflow: hidden;
	position: relative
}

.srv-card-featured .srv-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: .75
}

.srv-card-featured .srv-card-img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 40%, rgba(10, 30, 53, .6) 100%)
}

.srv-card-featured .srv-card-body {
	padding: 44px 40px
}

/* ── INTEGRATED MODEL ── */
.integrated {
	background: var(--navy);
	overflow: hidden;
	position: relative
}

.integrated::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1.5px, transparent 1.5px);
	background-size: 30px 30px
}

.integrated::after {
	content: '';
	position: absolute;
	top: -80px;
	right: -80px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 153, 203, .13) 0%, transparent 65%)
}

.integrated-inner {
	position: relative;
	z-index: 2
}

.integrated-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center
}

.integrated .section-title {
	color: #fff
}

.integrated .section-label {
	color: #6dd6f0
}

.integrated .section-label::before {
	background: #6dd6f0
}

.integrated .section-sub {
	color: rgba(255, 255, 255, .6);
	max-width: 500px;
	margin-bottom: 36px
}

.service-flow {
	display: flex;
	flex-direction: column;
	gap: 0
}

.flow-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 22px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	transition: var(--tr)
}

.flow-item:last-child {
	border-bottom: none
}

.flow-item:hover {
	transform: translateX(6px)
}

.flow-num {
	font-family: var(--serif);
	font-size: 1.6rem;
	color: rgba(0, 153, 203, .4);
	font-weight: 600;
	min-width: 36px;
	line-height: 1;
	transition: color .25s
}

.flow-item:hover .flow-num {
	color: var(--blue)
}

.flow-icon {
	width: 40px;
	height: 40px;
	background: rgba(0, 153, 203, .15);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .25s
}

.flow-item:hover .flow-icon {
	background: rgba(0, 153, 203, .3)
}

.flow-icon svg {
	width: 18px;
	height: 18px;
	stroke: #6dd6f0;
	fill: none;
	stroke-width: 1.8
}

.flow-title {
	font-size: .95rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4px
}

.flow-desc {
	font-size: .83rem;
	color: rgba(255, 255, 255, .5);
	line-height: 1.6
}

/* Visual arrows between flow items */
.integrated-visual {
	display: flex;
	flex-direction: column;
	gap: 16px
}

.iv-card {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: var(--r-lg);
	padding: 26px 28px;
	transition: var(--tr)
}

.iv-card:hover {
	background: rgba(0, 153, 203, .12);
	border-color: rgba(0, 153, 203, .3)
}

.iv-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px
}

.iv-dot {
	width: 36px;
	height: 36px;
	border-radius: var(--r-sm);
	background: linear-gradient(135deg, var(--blue), var(--blue-dark));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.iv-dot svg {
	width: 16px;
	height: 16px;
	stroke: #fff;
	fill: none;
	stroke-width: 2
}

.iv-card-title {
	font-size: .93rem;
	font-weight: 700;
	color: #fff
}

.iv-card-desc {
	font-size: .82rem;
	color: rgba(255, 255, 255, .48);
	line-height: 1.6
}

.iv-connector {
	width: 2px;
	height: 20px;
	background: linear-gradient(to bottom, rgba(0, 153, 203, .5), rgba(0, 153, 203, .1));
	margin: 0 auto;
	border-radius: 2px
}

/* ── STATS BAND ── */
.stats-band {
	background: var(--blue);
	padding: 52px 0
}

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

.stat-block {
	background: var(--blue);
	padding: 28px 24px;
	text-align: center;
	transition: var(--tr)
}

.stat-block:hover {
	background: var(--blue-dark)
}

.stat-num {
	font-family: var(--serif);
	font-size: 2.8rem;
	color: #fff;
	line-height: 1;
	font-weight: 600;
	display: block
}

.stat-lbl {
	font-size: .8rem;
	color: rgba(255, 255, 255, .7);
	margin-top: 7px;
	display: block;
	line-height: 1.4
}

/* ── CONSULTATION FORM ── */
.consult {
	background: var(--off-white)
}

.consult-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 72px;
	align-items: start
}

.consult-info {}

.consult-info .section-sub {
	margin-bottom: 36px
}

.consult-promise {
	background: var(--white);
	border-radius: var(--r-lg);
	padding: 28px;
	border: 1.5px solid var(--g200);
	margin-bottom: 24px
}

.cp-title {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 14px
}

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

.cp-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .88rem;
	color: var(--g800);
	font-weight: 500
}

.cp-check {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--blue-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.cp-check svg {
	width: 10px;
	height: 10px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 3
}

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

.cc-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .9rem;
	color: var(--g600)
}

.cc-item a {
	color: var(--blue);
	font-weight: 600;
	transition: color .2s
}

.cc-item a:hover {
	color: var(--blue-dark)
}

.cc-item svg {
	width: 18px;
	height: 18px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0
}

/* Form */
.consult-form-wrap {
	background: var(--white);
	border-radius: var(--r-xl);
	padding: 44px;
	box-shadow: var(--shadow-lg);
	border: 1.5px solid var(--g200)
}


/* ── SPECIALTIES MARQUEE ── */
.specialties-band {
	background: var(--g100);
	padding: 36px 0;
	border-top: 1px solid var(--g200);
	border-bottom: 1px solid var(--g200);
	overflow: hidden
}

.marquee-track {
	display: flex;
	gap: 0;
	animation: marquee 30s linear infinite;
	width: max-content
}

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

.marquee-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 32px;
	white-space: nowrap;
	font-size: .83rem;
	font-weight: 600;
	color: var(--g600)
}

.marquee-item span {
	color: var(--g400);
	font-weight: 400
}

.marquee-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--blue);
	opacity: .4;
	flex-shrink: 0
}

@keyframes marquee {
	from {
		transform: translateX(0)
	}

	to {
		transform: translateX(-50%)
	}
}

/* ── CTA BAND ── */
.cta-section {
	background: linear-gradient(130deg, var(--blue-deeper) 0%, var(--blue) 50%, #00b8e0 100%);
	padding: 96px 0;
	position: relative;
	overflow: hidden
}

.cta-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
	background-size: 32px 32px
}

.cta-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: center
}

.cta-title {
	font-family: var(--serif);
	font-size: clamp(2rem, 3.5vw, 2.8rem);
	color: #fff;
	line-height: 1.15;
	font-weight: 600;
	margin-bottom: 12px
}

.cta-sub {
	font-size: 1rem;
	color: rgba(255, 255, 255, .72);
	max-width: 500px;
	line-height: 1.75
}

.cta-actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-end
}

.cta-phone {
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 9px
}

.cta-phone svg {
	width: 18px;
	height: 18px;
	stroke: rgba(255, 255, 255, .7);
	fill: none;
	stroke-width: 2
}

/* ── ANIMATIONS ── */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .72s ease, transform .72s ease
}

.reveal.visible {
	opacity: 1;
	transform: none
}

.reveal-delay-1 {
	transition-delay: .1s
}

.reveal-delay-2 {
	transition-delay: .2s
}

.reveal-delay-3 {
	transition-delay: .3s
}

.reveal-delay-4 {
	transition-delay: .4s
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
	.srv-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.srv-card-featured {
		grid-column: auto;
		flex-direction: column
	}

	.srv-card-featured .srv-card-img {
		width: 100%;
		height: 220px
	}

	.integrated-grid,
	.consult-grid,
	.intro-band-inner {
		grid-template-columns: 1fr;
		gap: 48px
	}

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

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}
}

@media(max-width:768px) {

	.section,
	.section-sm {
		padding: 64px 0
	}

	.hamburger {
		display: flex
	}

	.srv-grid {
		grid-template-columns: 1fr
	}

	.form-row {
		grid-template-columns: 1fr
	}

	.cta-inner {
		grid-template-columns: 1fr;
		text-align: center
	}

	.cta-actions {
		align-items: center
	}

	.footer-grid {
		grid-template-columns: 1fr
	}

	.topbar {
		display: none
	}

	.hero-service-nav {
		display: none
	}
}

/* ── Why P7 PAGE HERO ── */
.page-hero {
	position: relative;
	padding: 88px 0 80px;
	background: var(--navy);
	overflow: hidden
}

.whyp7 .hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1600&q=80&auto=format&fit=crop&crop=center');
	background-size: cover;
	background-position: center;
	opacity: .14
}

.hero-ov {
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(10, 30, 53, .97) 0%, rgba(10, 30, 53, .82) 55%, rgba(0, 100, 160, .45) 100%)
}

.hero-dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1.5px, transparent 1.5px);
	background-size: 30px 30px
}

.hero-glow {
	position: absolute;
	top: -100px;
	right: -80px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 153, 203, .14) 0%, transparent 65%)
}

.hero-inner {
	position: relative;
	z-index: 3
}


.hero-layout {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 72px;
	align-items: center
}

.hero-content h1 {
	font-family: var(--serif);
	font-size: clamp(2.4rem, 4.8vw, 3.2rem);
	color: #fff;
	line-height: 1.06;
	font-weight: 600;
	letter-spacing: -.02em;
	margin-bottom: 22px
}

.hero-content h1 em {
	font-style: italic;
	color: #6dd6f0
}

.hero-line {
	width: 52px;
	height: 3px;
	background: var(--blue);
	border-radius: 2px;
	margin: 24px 0
}

.hero-sub {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, .62);
	line-height: 1.8;
	font-weight: 300;
	margin-bottom: 38px
}

.hero-ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap
}

/* Hero right — quick-reason chips */
.hero-reasons {
	display: flex;
	flex-direction: column;
	gap: 14px
}

.reason-chip {
	display: flex;
	align-items: center;
	gap: 16px;
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-md);
	padding: 18px 22px;
	transition: var(--tr);
	cursor: default
}

.reason-chip:hover {
	background: rgba(0, 153, 203, .14);
	border-color: rgba(0, 153, 203, .35);
	transform: translateX(6px)
}

.rc-icon {
	width: 40px;
	height: 40px;
	background: rgba(0, 153, 203, .2);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.rc-icon svg {
	width: 19px;
	height: 19px;
	stroke: #6dd6f0;
	fill: none;
	stroke-width: 1.9
}

.rc-title {
	font-size: .93rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 2px
}

.rc-sub {
	font-size: .77rem;
	color: rgba(255, 255, 255, .48)
}

/* ── DIFFERENTIATOR BAND ── */
.diff-band {
	background: var(--white);
	border-bottom: 1px solid var(--g200);
	padding: 56px 0
}

.diff-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center
}

.diff-text .section-sub {
	max-width: 500px
}

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

.strength-card {
	background: var(--off-white);
	border: 1.5px solid var(--g200);
	border-radius: var(--r-lg);
	padding: 26px 22px;
	transition: var(--tr)
}

.strength-card:hover {
	border-color: var(--blue);
	background: var(--blue-mist);
	transform: translateY(-4px);
	box-shadow: var(--shadow-md)
}

.sc-icon {
	width: 44px;
	height: 44px;
	background: var(--blue-pale);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	transition: var(--tr)
}

.strength-card:hover .sc-icon {
	background: var(--blue)
}

.sc-icon svg {
	width: 21px;
	height: 21px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.8;
	transition: stroke .25s
}

.strength-card:hover .sc-icon svg {
	stroke: #fff
}

.sc-title {
	font-size: .95rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 7px
}

.sc-desc {
	font-size: .83rem;
	color: var(--g600);
	line-height: 1.6
}

/* ── COMPLETE SYSTEM ── */
.complete-system {
	background: var(--g100)
}

.cs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center
}

.cs-img-wrap {
	position: relative
}

.cs-img {
	border-radius: var(--r-xl);
	overflow: hidden;
	aspect-ratio: 4/5;
	background: var(--g200);
	box-shadow: var(--shadow-lg)
}

.cs-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.cs-float {
	position: absolute;
	bottom: -20px;
	right: -20px;
	background: var(--blue);
	color: #fff;
	border-radius: var(--r-lg);
	padding: 22px 26px;
	box-shadow: var(--shadow-md);
	text-align: center;
	min-width: 160px
}

.complete-system .cf-num {
	font-family: var(--serif);
	font-size: 2.8rem;
	line-height: 1;
	display: block;
	color: var(--white);
}

.complete-system .cf-txt {
	font-size: .76rem;
	opacity: .85;
	margin-top: 4px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--white);
}

.dot-pattern {
	position: absolute;
	top: -24px;
	left: -24px;
	width: 120px;
	height: 120px;
	background-image: radial-gradient(circle, var(--blue-pale) 1.5px, transparent 1.5px);
	background-size: 16px 16px;
	border-radius: var(--r-md);
	z-index: -1
}

/* Feature list */
.feature-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 8px
}

.feature-row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 20px 0;
	border-bottom: 1px solid var(--g200);
	transition: var(--tr)
}

.feature-row:last-child {
	border-bottom: none
}

.feature-row:hover {
	transform: translateX(4px)
}

.fr-icon {
	width: 38px;
	height: 38px;
	background: var(--blue-pale);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: var(--tr)
}

.feature-row:hover .fr-icon {
	background: var(--blue)
}

.fr-icon svg {
	width: 17px;
	height: 17px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2;
	transition: stroke .25s
}

.feature-row:hover .fr-icon svg {
	stroke: #fff
}

.fr-title {
	font-size: .93rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 3px
}

.fr-desc {
	font-size: .83rem;
	color: var(--g600);
	line-height: 1.58
}

/* ── REASONS / VALUE PROPS GRID ── */
.reasons {
	background: var(--white)
}

.reasons-hdr {
	text-align: center;
	max-width: 660px;
	margin: 0 auto 64px
}

.reasons-hdr .section-sub {
	margin: 0 auto
}

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

.reason-card {
	background: var(--white);
	border: 1.5px solid var(--g200);
	border-radius: var(--r-xl);
	padding: 42px 34px;
	transition: var(--tr);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column
}

.reason-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--blue);
	transform: scaleX(0);
	transition: transform .3s ease;
	transform-origin: left
}

.reason-card:hover {
	border-color: var(--blue);
	transform: translateY(-6px);
	box-shadow: var(--shadow-md)
}

.reason-card:hover::after {
	transform: scaleX(1)
}

.rc-bg-num {
	position: absolute;
	bottom: 16px;
	right: 20px;
	font-family: var(--serif);
	font-size: 5rem;
	color: var(--g200);
	line-height: 1;
	user-select: none;
	transition: color .3s
}

.reason-card:hover .rc-bg-num {
	color: var(--blue-pale)
}

.reason-card-icon {
	width: 56px;
	height: 56px;
	background: var(--blue-pale);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	transition: var(--tr)
}

.reason-card:hover .reason-card-icon {
	background: var(--blue)
}

.reason-card-icon svg {
	width: 26px;
	height: 26px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.7;
	transition: stroke .25s
}

.reason-card:hover .reason-card-icon svg {
	stroke: #fff
}

.reason-card h3 {
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 12px;
	line-height: 1.3
}

.reason-card p {
	font-size: .87rem;
	color: var(--g600);
	line-height: 1.7;
	flex: 1
}

/* ── DARK FEATURES — data mgmt etc ── */
.dark-features {
	background: var(--navy);
	overflow: hidden;
	position: relative
}

.dark-features::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .035) 1.5px, transparent 1.5px);
	background-size: 30px 30px
}

.dark-features::after {
	content: '';
	position: absolute;
	top: -80px;
	right: -80px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 153, 203, .11) 0%, transparent 65%)
}

.df-inner {
	position: relative;
	z-index: 2
}

.df-hdr {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 64px
}

.df-hdr .section-title {
	color: #fff
}

.df-hdr .section-label {
	color: #6dd6f0
}

.df-hdr .section-label::before {
	background: #6dd6f0
}

.df-hdr .section-sub {
	color: rgba(255, 255, 255, .55);
	margin: 0 auto
}

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

.df-card {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--r-xl);
	padding: 38px 30px;
	transition: var(--tr);
	position: relative;
	overflow: hidden
}

.df-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--blue), transparent);
	opacity: 0;
	transition: opacity .3s
}

.df-card:hover {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(0, 153, 203, .3);
	transform: translateY(-5px)
}

.df-card:hover::after {
	opacity: 1
}

.df-icon {
	width: 52px;
	height: 52px;
	background: linear-gradient(135deg, var(--blue), var(--blue-dark));
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	box-shadow: 0 8px 20px rgba(0, 153, 203, .28)
}

.df-icon svg {
	width: 24px;
	height: 24px;
	stroke: #fff;
	fill: none;
	stroke-width: 1.8
}

.df-card h3 {
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 12px
}

.df-card p {
	font-size: .86rem;
	color: rgba(255, 255, 255, .52);
	line-height: 1.7;
	margin-bottom: 16px
}

.df-bullets {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.df-bullets li {
	font-size: .81rem;
	color: rgba(255, 255, 255, .44);
	display: flex;
	align-items: flex-start;
	gap: 9px;
	line-height: 1.5
}

.df-bullets li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--blue);
	flex-shrink: 0;
	margin-top: 5px
}

/* ── HOW WE ADD VALUE ── */
.value {
	background: var(--off-white)
}

.value-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center
}

.value-visual {
	position: relative
}

.value-img {
	border-radius: var(--r-xl);
	overflow: hidden;
	aspect-ratio: 3/4;
	box-shadow: var(--shadow-lg);
	background: var(--g200)
}

.value-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.value-float {
	position: absolute;
	top: 32px;
	left: -28px;
	background: var(--white);
	border-radius: var(--r-md);
	padding: 18px 22px;
	box-shadow: var(--shadow-md);
	border-left: 4px solid var(--blue)
}

.vf-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 4px
}

.vf-text {
	font-size: .88rem;
	font-weight: 600;
	color: var(--navy);
	line-height: 1.4
}

.value-items {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 8px
}

.value-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 24px;
	background: var(--white);
	border-radius: var(--r-lg);
	border: 1.5px solid var(--g200);
	transition: var(--tr)
}

.value-item:hover {
	border-color: var(--blue);
	box-shadow: var(--shadow-sm);
	transform: translateX(5px)
}

.vi-num {
	font-family: var(--serif);
	font-size: 2rem;
	color: var(--blue-pale);
	font-weight: 600;
	min-width: 42px;
	line-height: 1;
	transition: color .25s
}

.value-item:hover .vi-num {
	color: var(--blue)
}

.vi-icon {
	width: 44px;
	height: 44px;
	background: var(--blue-pale);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: 12px;
	transition: var(--tr)
}

.value-item:hover .vi-icon {
	background: var(--blue)
}

.vi-icon svg {
	width: 20px;
	height: 20px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.9;
	transition: stroke .25s
}

.value-item:hover .vi-icon svg {
	stroke: #fff
}

.vi-title {
	font-size: .97rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 6px
}

.vi-desc {
	font-size: .85rem;
	color: var(--g600);
	line-height: 1.65
}

/* ── COMPARISON TABLE ── */
.comparison {
	background: var(--g100)
}

.comparison-hdr {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 56px
}

.comparison-hdr .section-sub {
	margin: 0 auto
}

.compare-table {
	background: var(--white);
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	border: 1.5px solid var(--g200)
}

.compare-head {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	background: var(--navy)
}

.ch-cell {
	padding: 22px 28px;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase
}

.ch-cell:first-child {
	color: rgba(255, 255, 255, .4)
}

.ch-cell.p7 {
	color: #fff;
	text-align: center;
	position: relative
}

.ch-cell.p7::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--blue)
}

.ch-cell.others {
	color: rgba(255, 255, 255, .35);
	text-align: center
}

.compare-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border-bottom: 1px solid var(--g200);
	transition: background .2s
}

.compare-row:last-child {
	border-bottom: none
}

.compare-row:hover {
	background: var(--blue-mist)
}

.cr-label {
	padding: 18px 28px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--navy);
	display: flex;
	align-items: center;
	gap: 10px
}

.cr-label svg {
	width: 16px;
	height: 16px;
	stroke: var(--g400);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0
}

.cr-val {
	padding: 18px 28px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center
}

.check-yes {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0, 153, 203, .1);
	display: flex;
	align-items: center;
	justify-content: center
}

.check-yes svg {
	width: 14px;
	height: 14px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 3
}

.check-no {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(154, 170, 184, .1);
	display: flex;
	align-items: center;
	justify-content: center
}

.check-no svg {
	width: 14px;
	height: 14px;
	stroke: var(--g400);
	fill: none;
	stroke-width: 3
}

.check-partial {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(245, 166, 35, .1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .68rem;
	font-weight: 700;
	color: #d49120
}

/* ── STATS BAND ── */
.stats-band {
	background: var(--blue);
	padding: 52px 0
}

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

.stat-block {
	background: var(--blue);
	padding: 28px 24px;
	text-align: center;
	transition: var(--tr)
}

.stat-block:hover {
	background: var(--blue-dark)
}

.stat-num {
	font-family: var(--serif);
	font-size: 2.8rem;
	color: #fff;
	line-height: 1;
	font-weight: 600;
	display: block
}

.stat-lbl {
	font-size: .8rem;
	color: rgba(255, 255, 255, .7);
	margin-top: 7px;
	display: block;
	line-height: 1.4
}

/* ── CONTACT FORM ── */
.contact-section {
	background: var(--white)
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 72px;
	align-items: start
}

.contact-info .section-sub {
	margin-bottom: 36px
}

.contact-promise {
	background: var(--off-white);
	border-radius: var(--r-lg);
	padding: 28px;
	border: 1.5px solid var(--g200);
	margin-bottom: 24px
}

.cp-title {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 14px
}

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

.cp-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .88rem;
	color: var(--g800);
	font-weight: 500
}

.cp-check {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--blue-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.cp-check svg {
	width: 11px;
	height: 11px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 3
}

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

.cw-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .9rem;
	color: var(--g600)
}

.cw-item a {
	color: var(--blue);
	font-weight: 600;
	transition: color .2s
}

.cw-item a:hover {
	color: var(--blue-dark)
}

.cw-item svg {
	width: 18px;
	height: 18px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0
}

/* Form */
.form-wrap {
	background: var(--white);
	border-radius: var(--r-xl);
	padding: 44px;
	box-shadow: var(--shadow-lg);
	border: 1.5px solid var(--g200)
}

/* ── CTA BAND ── */
.cta-section {
	background: linear-gradient(130deg, var(--blue-deeper) 0%, var(--blue) 50%, #00b8e0 100%);
	padding: 96px 0;
	position: relative;
	overflow: hidden
}

.cta-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
	background-size: 32px 32px
}

.cta-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: center
}

.cta-title {
	font-family: var(--serif);
	font-size: clamp(2rem, 3.5vw, 2.8rem);
	color: #fff;
	line-height: 1.15;
	font-weight: 600;
	margin-bottom: 12px
}

.cta-sub {
	font-size: 1rem;
	color: rgba(255, 255, 255, .72);
	max-width: 500px;
	line-height: 1.75
}

.cta-actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-end
}

.cta-phone {
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 9px
}

.cta-phone svg {
	width: 18px;
	height: 18px;
	stroke: rgba(255, 255, 255, .7);
	fill: none;
	stroke-width: 2
}


/* ── RESPONSIVE ── */
@media(max-width:1024px) {

	.hero-layout,
	.cs-grid,
	.value-grid,
	.contact-grid,
	.diff-inner {
		grid-template-columns: 1fr;
		gap: 48px
	}

	.hero-reasons {
		display: none
	}

	.cs-img-wrap {
		max-width: 460px
	}

	.diff-strengths {
		grid-template-columns: 1fr
	}

	.df-grid,
	.reasons-grid {
		grid-template-columns: repeat(2, 1fr)
	}

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

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}

	.cta-inner {
		grid-template-columns: 1fr;
		text-align: center
	}

	.cta-actions {
		align-items: center
	}
}

@media(max-width:768px) {
	.section {
		padding: 64px 0
	}

	.nav-menu {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 74px;
		left: 0;
		right: 0;
		background: #fff;
		padding: 16px;
		box-shadow: var(--shadow-md);
		z-index: 100
	}

	.nav-menu.open {
		display: flex
	}

	.hamburger {
		display: flex
	}

	.df-grid,
	.reasons-grid {
		grid-template-columns: 1fr
	}

	.form-row {
		grid-template-columns: 1fr
	}

	.compare-head,
	.compare-row {
		grid-template-columns: 1.5fr 1fr 1fr
	}

	.footer-grid {
		grid-template-columns: 1fr
	}

	.topbar {
		display: none
	}

	.cs-float,
	.value-float {
		position: static;
		margin-top: 16px;
		display: inline-block
	}
}

/* Contact Us Page */
.contact.page-hero {
	position: relative;
	padding: 80px 0 72px;
	background: var(--navy);
	overflow: hidden
}

.contact .hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=1600&q=80&auto=format&fit=crop&crop=center');
	background-size: cover;
	background-position: center;
	opacity: .13
}

.contact .hero-ov {
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(10, 30, 53, .97) 0%, rgba(10, 30, 53, .85) 55%, rgba(0, 100, 160, .45) 100%)
}

.hero-dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1.5px, transparent 1.5px);
	background-size: 30px 30px
}

.hero-glow {
	position: absolute;
	top: -80px;
	right: -80px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 153, 203, .13) 0%, transparent 65%)
}

.hero-inner {
	position: relative;
	z-index: 3
}

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .78rem;
	color: rgba(255, 255, 255, .4);
	margin-bottom: 28px
}

.breadcrumb a {
	color: rgba(255, 255, 255, .4);
	transition: color .2s
}

.breadcrumb a:hover {
	color: var(--blue)
}

.breadcrumb-sep {
	color: rgba(255, 255, 255, .2)
}

.breadcrumb-current {
	color: rgba(255, 255, 255, .7)
}

.hero-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center
}

.hero-ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap
}

/* Quick contact cards in hero */
.hero-contact-cards {
	display: flex;
	flex-direction: column;
	gap: 14px
}

.hcc {
	display: flex;
	align-items: center;
	gap: 18px;
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-lg);
	padding: 20px 24px;
	transition: var(--tr)
}

.hcc:hover {
	background: rgba(0, 153, 203, .14);
	border-color: rgba(0, 153, 203, .35);
	transform: translateX(6px)
}

.hcc-icon {
	width: 44px;
	height: 44px;
	background: rgba(0, 153, 203, .2);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.hcc-icon svg {
	width: 20px;
	height: 20px;
	stroke: #6dd6f0;
	fill: none;
	stroke-width: 1.9
}

.hcc-label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	margin-bottom: 4px
}

.hcc-value {
	font-size: .97rem;
	font-weight: 600;
	color: #fff
}

.hcc-value a {
	color: #fff;
	transition: color .2s
}

.hcc-value a:hover {
	color: #6dd6f0
}

.hcc-sub {
	font-size: .76rem;
	color: rgba(255, 255, 255, .42);
	margin-top: 2px
}

/* ── MAIN CONTACT SECTION ── */
.contact-main {
	background: var(--g100)
}

.contact-grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 48px;
	align-items: start
}

/* Left: info panel */
.contact-info-panel {
	display: flex;
	flex-direction: column;
	gap: 20px
}

.cip-card {
	background: var(--white);
	border-radius: var(--r-xl);
	border: 1.5px solid var(--g200);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: var(--tr)
}

.cip-card:hover {
	border-color: var(--blue);
	box-shadow: var(--shadow-md)
}

.cip-card-head {
	padding: 24px 28px;
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
	display: flex;
	align-items: center;
	gap: 14px
}

.cip-head-icon {
	width: 40px;
	height: 40px;
	background: rgba(0, 153, 203, .2);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.cip-head-icon svg {
	width: 19px;
	height: 19px;
	stroke: #6dd6f0;
	fill: none;
	stroke-width: 1.9
}

.cip-head-title {
	font-size: .85rem;
	font-weight: 700;
	color: #fff
}

.cip-head-sub {
	font-size: .74rem;
	color: rgba(255, 255, 255, .45);
	margin-top: 2px
}

.cip-card-body {
	padding: 24px 28px
}

/* Detail rows inside info cards */
.detail-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--g200)
}

.detail-row:last-child {
	border-bottom: none
}

.dr-icon {
	width: 34px;
	height: 34px;
	background: var(--blue-pale);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px
}

.dr-icon svg {
	width: 15px;
	height: 15px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2
}

.dr-label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--g400);
	margin-bottom: 3px
}

.dr-value {
	font-size: .93rem;
	font-weight: 600;
	color: var(--navy);
	line-height: 1.4
}

.dr-value a {
	color: var(--navy);
	transition: color .2s
}

.dr-value a:hover {
	color: var(--blue)
}

.dr-sub {
	font-size: .78rem;
	color: var(--g600);
	margin-top: 2px
}

/* Hours grid */
.hours-grid {
	display: flex;
	flex-direction: column;
	gap: 0
}

.hour-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--g200);
	font-size: .87rem
}

.hour-row:last-child {
	border-bottom: none
}

.hour-day {
	color: var(--g600);
	font-weight: 500
}

.hour-time {
	color: var(--navy);
	font-weight: 700
}

.hour-closed {
	color: var(--g400);
	font-weight: 500;
	font-style: italic
}

.status-open {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .72rem;
	font-weight: 700;
	color: var(--green);
	padding: 4px 10px;
	background: var(--green-pale);
	border-radius: 100px;
	margin-bottom: 16px
}

.status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
	animation: pulse-green 2s ease infinite
}

@keyframes pulse-green {

	0%,
	100% {
		opacity: 1;
		transform: scale(1)
	}

	50% {
		opacity: .4;
		transform: scale(.7)
	}
}

/* Social links */
.social-row {
	display: flex;
	gap: 10px;
	margin-top: 4px
}

.social-link {
	width: 40px;
	height: 40px;
	border-radius: var(--r-sm);
	background: var(--g100);
	border: 1.5px solid var(--g200);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--tr)
}

.social-link:hover {
	background: var(--blue);
	border-color: var(--blue)
}

.social-link svg {
	width: 20px;
	height: 20px;
	stroke: var(--g600);
	fill: none;
	stroke-width: 2;
	transition: stroke .2s
}

.social-link:hover svg {
	stroke: #fff
}

/* Right: Form card */
.contact-form-card {
	background: var(--white);
	border-radius: var(--r-xl);
	padding: 48px;
	box-shadow: var(--shadow-lg);
	border: 1.5px solid var(--g200);
	position: sticky;
	top: 96px
}

.form-header {
	margin-bottom: 36px
}

.form-title {
	font-family: var(--serif);
	font-size: 1.9rem;
	color: var(--navy);
	font-weight: 600;
	margin-bottom: 8px
}

.form-title em {
	font-style: italic;
	color: var(--blue)
}

.form-sub {
	font-size: .9rem;
	color: var(--g600);
	line-height: 1.65
}

/* Form fields */
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px
}

.form-group {
	margin-bottom: 18px
}

.form-group label {
	display: block;
	font-size: .82rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 8px;
	letter-spacing: .01em
}

.form-group label .req {
	color: var(--blue);
	margin-left: 2px
}

.form-control {
	width: 100%;
	padding: 14px 16px;
	border: 1.5px solid var(--g300);
	border-radius: var(--r-sm);
	font-family: var(--sans);
	font-size: .92rem;
	color: var(--text);
	background: var(--white);
	transition: var(--tr);
	outline: none;
	appearance: none
}

.form-control:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(0, 153, 203, .1)
}

.form-control::placeholder {
	color: var(--g400)
}

select.form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aaab8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center
}

textarea.form-control {
	resize: vertical;
	min-height: 130px;
	line-height: 1.6
}

/* Service checkboxes */
.service-checkboxes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px
}

.svc-check {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 13px;
	border: 1.5px solid var(--g200);
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: var(--tr);
	font-size: .83rem;
	color: var(--g800);
	font-weight: 500;
	user-select: none
}

.svc-check:hover {
	border-color: var(--blue);
	background: var(--blue-mist)
}

.svc-check.selected {
	border-color: var(--blue);
	background: var(--blue-pale);
	color: var(--navy)
}

.svc-check input {
	position: absolute;
	opacity: 0;
	pointer-events: none
}

.svc-check-box {
	width: 16px;
	height: 16px;
	border: 2px solid var(--g200);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: var(--tr)
}

.svc-check.selected .svc-check-box {
	background: var(--blue);
	border-color: var(--blue)
}

.svc-check.selected .svc-check-box svg {
	display: block
}

.svc-check-box svg {
	width: 9px;
	height: 9px;
	stroke: #fff;
	fill: none;
	stroke-width: 3;
	display: none
}

.form-submit {
	width: 100%;
	padding: 17px;
	font-size: 1rem;
	font-weight: 700;
	background: var(--blue);
	color: #fff;
	border: none;
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: var(--tr);
	font-family: var(--sans);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
	letter-spacing: .01em
}

.form-submit:hover {
	background: var(--blue-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 153, 203, .38)
}

.form-submit svg {
	transition: transform .22s
}

.form-submit:hover svg {
	transform: translateX(4px)
}

.form-note {
	font-size: .74rem;
	color: var(--g400);
	text-align: center;
	margin-top: 14px;
	line-height: 1.5
}

/* Success message */
.form-success {
	display: none;
	text-align: center;
	padding: 32px;
	background: var(--green-pale);
	border-radius: var(--r-lg);
	border: 1.5px solid rgba(22, 163, 74, .2)
}

.success-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--green);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px
}

.success-icon svg {
	width: 26px;
	height: 26px;
	stroke: #fff;
	fill: none;
	stroke-width: 2.5
}

.success-title {
	font-family: var(--serif);
	font-size: 1.4rem;
	color: var(--green);
	font-weight: 600;
	margin-bottom: 8px
}

.success-sub {
	font-size: .9rem;
	color: var(--g600)
}

/* ── MAP SECTION ── */
.map-section {
	background: var(--white);
	padding: 0
}

.map-wrap {
	position: relative;
	height: 460px;
	background: var(--g200);
	overflow: hidden
}

.map-wrap iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
	filter: grayscale(15%)
}

/* Floating info card over map */
.map-overlay-card {
	position: absolute;
	top: 32px;
	left: 32px;
	background: var(--white);
	border-radius: var(--r-lg);
	padding: 24px 28px;
	box-shadow: var(--shadow-lg);
	border: 1.5px solid var(--g200);
	min-width: 280px;
	max-width: 340px;
	z-index: 10
}

.moc-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 12px
}

.moc-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--blue);
	animation: pulse-blue 2s ease infinite
}

@keyframes pulse-blue {

	0%,
	100% {
		opacity: 1;
		transform: scale(1)
	}

	50% {
		opacity: .4;
		transform: scale(.7)
	}
}

.moc-title {
	font-family: var(--serif);
	font-size: 1.1rem;
	color: var(--navy);
	font-weight: 600;
	margin-bottom: 10px
}

.moc-detail {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .85rem;
	color: var(--g600);
	margin-bottom: 8px
}

.moc-detail:last-of-type {
	margin-bottom: 16px
}

.moc-detail svg {
	width: 15px;
	height: 15px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0;
	margin-top: 2px
}

.moc-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .82rem;
	font-weight: 700;
	color: var(--blue);
	transition: gap .2s
}

.moc-cta:hover {
	gap: 11px
}

.moc-cta svg {
	width: 12px;
	height: 12px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5
}

/* ── NEWSLETTER ── */
.newsletter {
	background: var(--navy);
	padding: 64px 0;
	position: relative;
	overflow: hidden
}

.newsletter::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1.5px, transparent 1.5px);
	background-size: 28px 28px
}

.newsletter::after {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 153, 203, .12) 0%, transparent 65%)
}

.nl-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center
}

.nl-text {}

.nl-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6dd6f0;
	margin-bottom: 14px
}

.nl-label::before {
	content: '';
	display: block;
	width: 24px;
	height: 2px;
	background: #6dd6f0;
	border-radius: 2px
}

.nl-title {
	font-family: var(--serif);
	font-size: clamp(1.7rem, 2.8vw, 2.4rem);
	color: #fff;
	font-weight: 600;
	margin-bottom: 12px
}

.nl-title em {
	font-style: italic;
	color: #6dd6f0
}

.nl-sub {
	font-size: .92rem;
	color: rgba(255, 255, 255, .55);
	line-height: 1.72
}

.nl-form-wrap {}

.nl-form {
	display: flex;
	flex-direction: column;
	gap: 14px
}

.nl-input-row {
	display: flex;
	gap: 0;
	border-radius: var(--r-sm);
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .2)
}

.nl-input {
	flex: 1;
	padding: 16px 20px;
	border: none;
	font-family: var(--sans);
	font-size: .92rem;
	color: var(--text);
	background: #fff;
	outline: none
}

.nl-input::placeholder {
	color: var(--g400)
}

.nl-btn {
	padding: 16px 28px;
	background: var(--blue);
	color: #fff;
	border: none;
	font-family: var(--sans);
	font-weight: 700;
	font-size: .88rem;
	cursor: pointer;
	transition: background .2s;
	white-space: nowrap
}

.nl-btn:hover {
	background: var(--blue-dark)
}

.nl-name-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px
}

.nl-field {
	padding: 14px 16px;
	border: 1.5px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-sm);
	font-family: var(--sans);
	font-size: .88rem;
	color: rgba(255, 255, 255, .9);
	background: rgba(255, 255, 255, .06);
	outline: none;
	transition: var(--tr)
}

.nl-field::placeholder {
	color: rgba(255, 255, 255, .3)
}

.nl-field:focus {
	border-color: rgba(0, 153, 203, .5);
	background: rgba(255, 255, 255, .09)
}

.nl-note {
	font-size: .74rem;
	color: rgba(255, 255, 255, .3);
	line-height: 1.5
}

/* ── STATS BAND ── */
.stats-band {
	background: var(--blue);
	padding: 48px 0
}

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

.stat-block {
	background: var(--blue);
	padding: 26px 24px;
	text-align: center;
	transition: var(--tr)
}

.stat-block:hover {
	background: var(--blue-dark)
}

.stat-num {
	font-family: var(--serif);
	font-size: 2.6rem;
	color: #fff;
	line-height: 1;
	font-weight: 600;
	display: block
}

.stat-lbl {
	font-size: .78rem;
	color: rgba(255, 255, 255, .7);
	margin-top: 7px;
	display: block;
	line-height: 1.4
}

/* ── CTA ── */
.cta-section {
	background: linear-gradient(130deg, var(--blue-deeper) 0%, var(--blue) 50%, #00b8e0 100%);
	padding: 88px 0;
	position: relative;
	overflow: hidden
}

.cta-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
	background-size: 32px 32px
}

.cta-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: center
}

.cta-title {
	font-family: var(--serif);
	font-size: clamp(2rem, 3.5vw, 2.8rem);
	color: #fff;
	line-height: 1.15;
	font-weight: 600;
	margin-bottom: 12px
}

.cta-sub {
	font-size: 1rem;
	color: rgba(255, 255, 255, .72);
	max-width: 500px;
	line-height: 1.75
}

.cta-actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-end
}

.cta-phone {
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 9px
}

.cta-phone svg {
	width: 18px;
	height: 18px;
	stroke: rgba(255, 255, 255, .7);
	fill: none;
	stroke-width: 2
}


/* ── RESPONSIVE ── */
@media(max-width:1024px) {
	.hero-layout {
		grid-template-columns: 1fr;
		gap: 40px
	}

	.hero-contact-cards {
		flex-direction: row;
		flex-wrap: wrap
	}

	.hcc {
		flex: 1;
		min-width: 220px
	}

	.contact-grid {
		grid-template-columns: 1fr;
		gap: 40px
	}

	.contact-form-card {
		position: static
	}

	.nl-inner {
		grid-template-columns: 1fr;
		gap: 40px
	}

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

	.cta-inner {
		grid-template-columns: 1fr;
		text-align: center
	}

	.cta-actions {
		align-items: center
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}

	.map-overlay-card {
		left: 16px;
		top: 16px;
		min-width: 240px
	}
}

@media(max-width:768px) {
	.section {
		padding: 64px 0
	}

	.nav-menu {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 74px;
		left: 0;
		right: 0;
		background: #fff;
		padding: 16px;
		box-shadow: var(--shadow-md);
		z-index: 100
	}

	.nav-menu.open {
		display: flex
	}

	.hamburger {
		display: flex
	}

	.form-row {
		grid-template-columns: 1fr
	}

	.service-checkboxes {
		grid-template-columns: 1fr
	}

	.nl-name-row {
		grid-template-columns: 1fr
	}

	.footer-grid {
		grid-template-columns: 1fr
	}

	.topbar {
		display: none
	}

	.map-overlay-card {
		position: static;
		border-radius: 0;
		box-shadow: none;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: 1px solid var(--g200);
		max-width: 100%
	}

	.map-wrap {
		height: 300px
	}
}

/* ── ICD Code PAGE HERO ── */
.icd-hero.page-hero {
	position: relative;
	padding: 88px 0 80px;
	background: var(--navy);
	overflow: hidden
}

.icd-hero .hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=1600&q=80&auto=format&fit=crop');
	background-size: cover;
	background-position: center;
	opacity: .13
}

/* ── ICD SEARCH TOOL — the core feature of the page ── */
.search-section {
	background: var(--g100);
	padding: 72px 0
}

.search-section-inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center
}

.search-card {
	background: var(--white);
	border-radius: var(--r-xl);
	border: 1.5px solid var(--g200);
	padding: 52px 48px;
	box-shadow: var(--shadow-lg)
}

.search-card-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 16px
}

.search-card-label::before {
	content: '';
	display: block;
	width: 24px;
	height: 2px;
	background: var(--blue);
	border-radius: 2px
}

.search-card h2 {
	font-family: var(--serif);
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	color: var(--navy);
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 12px
}

.search-card h2 em {
	font-style: italic;
	color: var(--blue)
}

.search-card p {
	font-size: .95rem;
	color: var(--g600);
	line-height: 1.72;
	margin-bottom: 32px
}

/* Search input */
.icd-search-wrap {
	display: flex;
	gap: 0;
	border: 2px solid var(--g200);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color .25s;
	box-shadow: var(--shadow-sm)
}

.icd-search-wrap:focus-within {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(0, 153, 203, .1)
}

.icd-input {
	flex: 1;
	padding: 16px 20px;
	border: none;
	font-family: var(--sans);
	font-size: 1rem;
	color: var(--text);
	background: var(--white);
	outline: none
}

.icd-input::placeholder {
	color: var(--g400)
}

.icd-btn {
	padding: 16px 28px;
	background: var(--blue);
	border: none;
	color: #fff;
	font-family: var(--sans);
	font-weight: 700;
	font-size: .92rem;
	cursor: pointer;
	transition: background .2s;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap
}

.icd-btn:hover {
	background: var(--blue-dark)
}

.icd-btn svg {
	width: 16px;
	height: 16px;
	stroke: #fff;
	fill: none;
	stroke-width: 2.5
}

/* Search results area */
.icd-results {
	margin-top: 24px;
	text-align: left;
	display: none
}

.icd-results.visible {
	display: block
}

.icd-results-head {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--g400);
	margin-bottom: 12px
}

.icd-result-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 18px;
	background: var(--off-white);
	border: 1.5px solid var(--g200);
	border-radius: var(--r-md);
	margin-bottom: 8px;
	transition: var(--tr)
}

.icd-result-item:hover {
	border-color: var(--blue);
	background: var(--blue-mist)
}

.icd-code {
	font-size: .88rem;
	font-weight: 700;
	color: var(--blue);
	min-width: 80px;
	font-family: monospace;
	letter-spacing: .05em
}

.icd-desc {
	font-size: .87rem;
	color: var(--g800);
	line-height: 1.45
}

.icd-no-results {
	padding: 18px;
	text-align: center;
	font-size: .9rem;
	color: var(--g600);
	background: var(--off-white);
	border-radius: var(--r-md);
	border: 1.5px solid var(--g200);
	display: none
}

.icd-no-results.visible {
	display: block
}

.icd-loading {
	padding: 18px;
	text-align: center;
	font-size: .9rem;
	color: var(--g400);
	display: none
}

.icd-loading.visible {
	display: block
}

/* ── INFO SECTIONS (from docx) ── */
.info-section {
	background: var(--white)
}

.info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start
}

/* Coding approach items */
.approach-items {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 8px
}

.approach-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 22px;
	background: var(--off-white);
	border-radius: var(--r-lg);
	border: 1.5px solid var(--g200);
	transition: var(--tr)
}

.approach-item:hover {
	border-color: var(--blue);
	background: var(--blue-mist);
	transform: translateX(4px)
}

.ai-icon {
	width: 40px;
	height: 40px;
	background: var(--blue-pale);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: var(--tr)
}

.approach-item:hover .ai-icon {
	background: var(--blue)
}

.ai-icon svg {
	width: 18px;
	height: 18px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2;
	transition: stroke .25s
}

.approach-item:hover .ai-icon svg {
	stroke: #fff
}

.ai-title {
	font-size: .94rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 0
}

/* Benefits — exactly as listed in docx */
.benefits-section {
	background: var(--g100)
}

.benefits-hdr {
	text-align: center;
	max-width: 560px;
	margin: 0 auto 52px
}

.benefits-hdr .section-sub {
	margin: 0 auto
}

.benefits-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	max-width: 800px;
	margin: 0 auto
}

.benefit-card {
	background: var(--white);
	border: 1.5px solid var(--g200);
	border-radius: var(--r-xl);
	padding: 36px 32px;
	transition: var(--tr);
	display: flex;
	gap: 18px;
	align-items: flex-start
}

.benefit-card:hover {
	border-color: var(--blue);
	transform: translateY(-4px);
	box-shadow: var(--shadow-md)
}

.bc-icon {
	width: 48px;
	height: 48px;
	background: var(--blue-pale);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: var(--tr)
}

.benefit-card:hover .bc-icon {
	background: var(--blue)
}

.bc-icon svg {
	width: 22px;
	height: 22px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.8;
	transition: stroke .25s
}

.benefit-card:hover .bc-icon svg {
	stroke: #fff
}

.bc-text {
	font-size: .98rem;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.4
}

/* ── SUPPORT CTA CARD ── */
.support-section {
	background: var(--white);
	padding: 72px 0
}

.support-card {
	background: linear-gradient(135deg, var(--navy), var(--navy-light));
	border-radius: var(--r-xl);
	padding: 52px 48px;
	text-align: center;
	position: relative;
	overflow: hidden;
	max-width: 720px;
	margin: 0 auto
}

.support-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1.5px, transparent 1.5px);
	background-size: 26px 26px
}

.support-card::after {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 153, 203, .15) 0%, transparent 65%)
}

.support-card-inner {
	position: relative;
	z-index: 2
}

.support-icon {
	width: 56px;
	height: 56px;
	background: rgba(0, 153, 203, .2);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px
}

.support-icon svg {
	width: 26px;
	height: 26px;
	stroke: #6dd6f0;
	fill: none;
	stroke-width: 1.8
}

.support-card h2 {
	font-family: var(--serif);
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	color: #fff;
	font-weight: 600;
	margin-bottom: 12px
}

.support-card p {
	font-size: .95rem;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 28px;
	line-height: 1.7
}

.support-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap
}

/* ── CTA ── */
.cta-section {
	background: linear-gradient(130deg, var(--blue-deeper) 0%, var(--blue) 50%, #00b8e0 100%);
	padding: 96px 0;
	position: relative;
	overflow: hidden
}

.cta-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
	background-size: 32px 32px
}

.cta-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: center
}

.cta-title {
	font-family: var(--serif);
	font-size: clamp(2rem, 3.5vw, 2.8rem);
	color: #fff;
	line-height: 1.15;
	font-weight: 600;
	margin-bottom: 12px
}

.cta-sub {
	font-size: 1rem;
	color: rgba(255, 255, 255, .72);
	max-width: 500px;
	line-height: 1.75
}

.cta-actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-end
}

.cta-phone {
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 9px
}

.cta-phone svg {
	width: 18px;
	height: 18px;
	stroke: rgba(255, 255, 255, .7);
	fill: none;
	stroke-width: 2
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
	.info-grid {
		grid-template-columns: 1fr;
		gap: 48px
	}

	.cta-inner {
		grid-template-columns: 1fr;
		text-align: center
	}

	.cta-actions {
		align-items: center
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}

	.search-card {
		padding: 36px 28px
	}
}

@media(max-width:768px) {
	.section {
		padding: 64px 0
	}

	.nav-menu {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 74px;
		left: 0;
		right: 0;
		background: #fff;
		padding: 16px;
		box-shadow: var(--shadow-md);
		z-index: 100
	}

	.nav-menu.open {
		display: flex
	}

	.hamburger {
		display: flex
	}

	.benefits-grid {
		grid-template-columns: 1fr
	}

	.icd-search-wrap {
		flex-direction: column
	}

	.icd-btn {
		width: 100%;
		justify-content: center
	}

	.footer-grid {
		grid-template-columns: 1fr
	}

	.topbar {
		display: none
	}

	.support-actions {
		flex-direction: column;
		align-items: center
	}
}

/* ── BLOG PAGE HERO ── */
.blog-hero.page-hero {
	position: relative;
	padding: 80px 0 72px;
	background: var(--navy);
	overflow: hidden
}

.blog-hero .hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=1600&q=80&auto=format&fit=crop');
	background-size: cover;
	background-position: center;
	opacity: .12
}

/* Search in hero */
.hero-search {
	display: flex;
	gap: 0;
	background: #fff;
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
	max-width: 480px
}

.hs-input {
	flex: 1;
	padding: 16px 20px;
	border: none;
	font-family: var(--sans);
	font-size: .95rem;
	color: var(--text);
	outline: none
}

.hs-input::placeholder {
	color: var(--g400)
}

.hs-btn {
	padding: 16px 24px;
	background: var(--blue);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
	flex-shrink: 0
}

.hs-btn:hover {
	background: var(--blue-dark)
}

.hs-btn svg {
	width: 18px;
	height: 18px;
	stroke: #fff;
	fill: none;
	stroke-width: 2.5
}

/* Hero stat chips */
.hero-blog-stats {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 32px
}

.hbs-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: .8rem;
	color: rgba(255, 255, 255, .55);
	font-weight: 500
}

.hbs-chip svg {
	width: 15px;
	height: 15px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0
}

/* Hero right: latest post preview */
.hero-latest-preview {
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-xl);
	overflow: hidden
}

.hlp-img {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--navy-light)
}

.hlp-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease
}

.hero-latest-preview:hover .hlp-img img {
	transform: scale(1.04)
}

.hlp-body {
	padding: 24px
}

.hlp-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: rgba(0, 153, 203, .25);
	color: #6dd6f0;
	padding: 4px 12px;
	border-radius: 100px;
	margin-bottom: 12px
}

.hlp-title {
	font-family: var(--serif);
	font-size: 1.15rem;
	color: #fff;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 10px;
	transition: color .2s
}

.hero-latest-preview:hover .hlp-title {
	color: #6dd6f0
}

.hlp-excerpt {
	font-size: .83rem;
	color: rgba(255, 255, 255, .5);
	line-height: 1.65;
	margin-bottom: 16px
}

.hlp-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: .76rem;
	color: rgba(255, 255, 255, .38)
}

.hlp-meta-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .3)
}

.hlp-read {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .8rem;
	font-weight: 700;
	color: #6dd6f0;
	margin-top: 12px;
	transition: gap .2s
}

.hlp-read:hover {
	gap: 9px
}

.hlp-read svg {
	width: 12px;
	height: 12px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5
}

/* ── CATEGORY FILTER BAR ── */
.filter-bar {
	background: var(--white);
	border-bottom: 1px solid var(--g200);
	padding: 20px 0;
	position: sticky;
	top: 74px;
	z-index: 100;
	box-shadow: var(--shadow-sm)
}

.filter-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: space-between
}

.filter-cats {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center
}

.filter-label-txt {
	font-size: .78rem;
	font-weight: 700;
	color: var(--g400);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-right: 4px
}

.cat-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 100px;
	border: 1.5px solid var(--g200);
	font-size: .8rem;
	font-weight: 600;
	color: var(--g600);
	cursor: pointer;
	transition: var(--tr);
	background: var(--white);
	font-family: var(--sans)
}

.cat-btn:hover {
	border-color: var(--blue);
	color: var(--blue)
}

.cat-btn.active {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff
}

.cat-btn .cat-count {
	background: rgba(255, 255, 255, .25);
	border-radius: 100px;
	padding: 1px 7px;
	font-size: .7rem;
	margin-left: 2px
}

.cat-btn:not(.active) .cat-count {
	background: var(--g100);
	color: var(--g400)
}

.filter-sort {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .82rem;
	color: var(--g600)
}

.filter-sort select {
	padding: 8px 32px 8px 12px;
	border: 1.5px solid var(--g200);
	border-radius: var(--r-sm);
	font-family: var(--sans);
	font-size: .82rem;
	color: var(--g600);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aaab8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
	appearance: none;
	cursor: pointer;
	outline: none
}

/* ── MAIN BLOG LAYOUT ── */
.blog-layout {
	background: var(--g100)
}

.blog-main-grid {
	display: block
}

/* ── FEATURED POST (full width) ── */
.featured-post {
	background: var(--white);
	border-radius: var(--r-xl);
	overflow: hidden;
	border: 1.5px solid var(--g200);
	box-shadow: var(--shadow-sm);
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	margin-bottom: 32px;
	transition: var(--tr)
}

.featured-post:hover {
	border-color: var(--blue);
	box-shadow: var(--shadow-md)
}

.fp-img {
	overflow: hidden;
	background: var(--g200);
	position: relative;
	min-height: 340px
}

.fp-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease
}

.featured-post:hover .fp-img img {
	transform: scale(1.04)
}

.fp-badge {
	position: absolute;
	top: 20px;
	left: 20px;
	background: var(--blue);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 100px;
	display: flex;
	align-items: center;
	gap: 6px
}

.fp-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	opacity: .7
}

.fp-body {
	padding: 40px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center
}

.fp-cat {
	display: inline-flex;
	align-items: center;
	font-size: .69rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 100px;
	margin-bottom: 16px
}

.fp-cat.billing {
	background: var(--cat-billing-pale);
	color: var(--cat-billing)
}

.fp-cat.rcm {
	background: var(--cat-rcm-pale);
	color: var(--cat-rcm)
}

.fp-cat.hipaa {
	background: var(--cat-hipaa-pale);
	color: var(--cat-hipaa)
}

.fp-cat.coding {
	background: var(--cat-coding-pale);
	color: var(--cat-coding)
}

.fp-cat.career {
	background: var(--cat-career-pale);
	color: var(--cat-career)
}

.fp-cat.industry {
	background: var(--cat-industry-pale);
	color: var(--cat-industry)
}

.fp-title {
	font-family: var(--serif);
	font-size: 1.65rem;
	color: var(--navy);
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 14px;
	transition: color .2s
}

.featured-post:hover .fp-title {
	color: var(--blue)
}

.fp-excerpt {
	font-size: .9rem;
	color: var(--g600);
	line-height: 1.72;
	margin-bottom: 22px
}

.fp-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: .78rem;
	color: var(--g400);
	margin-bottom: 22px
}

.fp-meta-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--g400)
}

.fp-read {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .86rem;
	font-weight: 700;
	color: var(--blue);
	transition: gap .2s
}

.fp-read:hover {
	gap: 12px
}

.fp-read svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5
}

/* ── POST GRID ── */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px
}

.post-card {
	background: var(--white);
	border-radius: var(--r-lg);
	border: 1.5px solid var(--g200);
	overflow: hidden;
	transition: var(--tr);
	display: flex;
	flex-direction: column;
	position: relative
}

.post-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--blue);
	transform: scaleX(0);
	transition: transform .3s ease;
	transform-origin: left
}

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

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

.pc-img {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--g100);
	flex-shrink: 0
}

.pc-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease
}

.post-card:hover .pc-img img {
	transform: scale(1.06)
}

.pc-body {
	padding: 22px 22px 18px;
	display: flex;
	flex-direction: column;
	flex: 1
}

.pc-cat {
	display: inline-flex;
	align-items: center;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 100px;
	margin-bottom: 10px;
	width: fit-content
}

.pc-cat.billing {
	background: var(--cat-billing-pale);
	color: var(--cat-billing)
}

.pc-cat.rcm {
	background: var(--cat-rcm-pale);
	color: var(--cat-rcm)
}

.pc-cat.hipaa {
	background: var(--cat-hipaa-pale);
	color: var(--cat-hipaa)
}

.pc-cat.coding {
	background: var(--cat-coding-pale);
	color: var(--cat-coding)
}

.pc-cat.career {
	background: var(--cat-career-pale);
	color: var(--cat-career)
}

.pc-cat.industry {
	background: var(--cat-industry-pale);
	color: var(--cat-industry)
}

.pc-title {
	font-family: var(--serif);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--navy);
	line-height: 1.35;
	margin-bottom: 9px;
	transition: color .2s
}

.post-card:hover .pc-title {
	color: var(--blue)
}

.pc-excerpt {
	font-size: .83rem;
	color: var(--g600);
	line-height: 1.65;
	flex: 1;
	margin-bottom: 16px
}

.pc-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	border-top: 1px solid var(--g200)
}

.pc-meta {
	font-size: .74rem;
	color: var(--g400);
	display: flex;
	align-items: center;
	gap: 8px
}

.pc-meta-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--g400)
}

.pc-read {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .79rem;
	font-weight: 700;
	color: var(--blue);
	transition: gap .2s
}

.pc-read:hover {
	gap: 9px
}

.pc-read svg {
	width: 11px;
	height: 11px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5
}

/* ── LOAD MORE / PAGINATION ── */
.load-more-wrap {
	margin-top: 40px;
	text-align: center;
	padding-bottom: 8px
}

.load-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 36px;
	background: var(--white);
	border: 1.5px solid var(--g200);
	border-radius: var(--r-md);
	font-family: var(--sans);
	font-size: .9rem;
	font-weight: 600;
	color: var(--navy);
	cursor: pointer;
	transition: var(--tr)
}

.load-more-btn:hover {
	border-color: var(--blue);
	color: var(--blue);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm)
}

.load-more-btn svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	transition: transform .3s
}

.load-more-btn:hover svg {
	transform: rotate(180deg)
}

.load-more-btn.loading svg {
	animation: spin .8s linear infinite
}

@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 20px
}

.pag-btn {
	width: 38px;
	height: 38px;
	border-radius: var(--r-sm);
	border: 1.5px solid var(--g200);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .86rem;
	font-weight: 600;
	color: var(--g600);
	cursor: pointer;
	transition: var(--tr);
	font-family: var(--sans)
}

.pag-btn:hover {
	border-color: var(--blue);
	color: var(--blue)
}

.pag-btn.active {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff
}

.pag-btn.arrow {
	background: transparent
}

.pag-btn svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5
}

.pag-dots {
	color: var(--g400);
	font-size: .9rem;
	padding: 0 4px
}

.page-info {
	font-size: .82rem;
	color: var(--g400);
	text-align: center;
	margin-top: 12px
}

/* sidebar removed — moved to single blog page */

/* ── HIDDEN POSTS (shown via Load More) ── */
.post-card.hidden-post {
	display: none
}

.post-card.hidden-post.shown {
	display: flex
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
	.hero-layout {
		grid-template-columns: 1fr;
		gap: 36px
	}

	.hero-latest-preview {
		display: none
	}

	.featured-post {
		grid-template-columns: 1fr
	}

	.fp-img {
		min-height: 240px
	}

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

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}

	.cta-inner {
		grid-template-columns: 1fr;
		text-align: center
	}

	.cta-actions {
		align-items: center
	}
}

@media(max-width:768px) {
	.section {
		padding: 60px 0
	}

	.nav-menu {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 74px;
		left: 0;
		right: 0;
		background: #fff;
		padding: 16px;
		box-shadow: var(--shadow-md);
		z-index: 100
	}

	.nav-menu.open {
		display: flex
	}

	.hamburger {
		display: flex
	}

	.posts-grid {
		grid-template-columns: 1fr
	}

	.filter-bar {
		position: static
	}

	.footer-grid {
		grid-template-columns: 1fr
	}

	.topbar {
		display: none
	}
}

/* ── PAGE HERO / POST BANNER ── */
.post-hero {
	background: var(--navy);
	padding: 60px 0 0;
	position: relative;
	overflow: hidden
}

.post-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .03) 1.5px, transparent 1.5px);
	background-size: 28px 28px
}

.post-hero-glow {
	position: absolute;
	top: -80px;
	right: -80px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 153, 203, .12) 0%, transparent 65%)
}

.post-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 860px;
	margin: 0 auto;
	padding: 0 28px
}

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .78rem;
	color: rgba(255, 255, 255, .4);
	margin-bottom: 28px;
	flex-wrap: wrap
}

.breadcrumb a {
	color: rgba(255, 255, 255, .4);
	transition: color .2s
}

.breadcrumb a:hover {
	color: var(--blue)
}

.breadcrumb-sep {
	color: rgba(255, 255, 255, .2)
}

.breadcrumb-current {
	color: rgba(255, 255, 255, .65);
	max-width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.post-cat {
	display: inline-flex;
	align-items: center;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 100px;
	background: rgba(0, 153, 203, .2);
	color: #6dd6f0;
	margin-bottom: 20px
}

.post-hero h1 {
	font-family: var(--serif);
	font-size: clamp(1.9rem, 4vw, 3.2rem);
	color: #fff;
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -.01em;
	margin-bottom: 24px
}

/* Author + meta row */
.post-meta {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 36px;
	padding-bottom: 36px;
	border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.post-author {
	display: flex;
	align-items: center;
	gap: 10px
}

.author-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--blue), var(--navy-light));
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-size: .95rem;
	color: #fff;
	flex-shrink: 0
}

.author-name {
	font-size: .86rem;
	font-weight: 700;
	color: #fff
}

.author-role {
	font-size: .74rem;
	color: rgba(255, 255, 255, .45);
	margin-top: 1px
}

.meta-divider {
	width: 1px;
	height: 28px;
	background: rgba(255, 255, 255, .15)
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .8rem;
	color: rgba(255, 255, 255, .5)
}

.meta-item svg {
	width: 14px;
	height: 14px;
	stroke: rgba(255, 255, 255, .4);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0
}

/* Featured image below hero */
.post-featured-img {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 28px
}

.post-featured-img img {
	width: 100%;
	border-radius: var(--r-xl) var(--r-xl) 0 0;
	display: block;
	aspect-ratio: 16/7;
	object-fit: cover;
	box-shadow: var(--shadow-lg)
}

/* ── MAIN BLOG LAYOUT ── */
.blog-page {
	background: var(--g100);
	padding: 0 0 96px
}

.blog-page-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 48px;
	align-items: start
}

/* Content card lifts off the image */
.blog-content-wrap {
	background: var(--white);
	border-radius: 0 0 var(--r-xl) var(--r-xl);
	border: 1.5px solid var(--g200);
	border-top: none;
	box-shadow: var(--shadow-md);
	margin-bottom: 28px
}

/* ── ARTICLE TYPOGRAPHY ── */
.article-body {
	padding: 48px 56px;
	max-width: var(--reading-max);
	margin: 0 auto
}

.article-body p {
	font-size: var(--body-font-size);
	line-height: var(--body-line-height);
	color: var(--g800);
	margin-bottom: 24px
}

.article-body p:last-child {
	margin-bottom: 0
}

.article-body h2 {
	font-family: var(--serif);
	font-size: 1.65rem;
	color: var(--navy);
	font-weight: 600;
	line-height: 1.25;
	margin: 40px 0 16px
}

.article-body h3 {
	font-family: var(--serif);
	font-size: 1.25rem;
	color: var(--navy);
	font-weight: 600;
	line-height: 1.3;
	margin: 32px 0 12px
}

.article-body strong {
	color: var(--navy);
	font-weight: 700
}

.article-body a {
	color: var(--blue);
	font-weight: 600;
	transition: color .2s;
	text-decoration: underline;
	text-decoration-color: rgba(0, 153, 203, .3);
	text-underline-offset: 3px
}

.article-body a:hover {
	color: var(--blue-dark)
}

.article-body ul,
.article-body ol {
	padding-left: 24px;
	margin-bottom: 24px
}

.article-body li {
	font-size: var(--body-font-size);
	line-height: var(--body-line-height);
	color: var(--g800);
	margin-bottom: 10px
}

.article-body blockquote {
	border-left: 4px solid var(--blue);
	margin: 32px 0;
	padding: 20px 28px;
	background: var(--blue-mist);
	border-radius: 0 var(--r-md) var(--r-md) 0
}

.article-body blockquote p {
	font-family: var(--serif);
	font-size: 1.1rem;
	font-style: italic;
	color: var(--navy);
	margin-bottom: 0;
	line-height: 1.65
}

/* Pull quote callout */
.pull-quote {
	background: linear-gradient(135deg, var(--navy), var(--navy-light));
	border-radius: var(--r-xl);
	padding: 36px 40px;
	margin: 36px 0;
	position: relative;
	overflow: hidden
}

.pull-quote::before {
	content: '"';
	position: absolute;
	top: -10px;
	left: 20px;
	font-family: var(--serif);
	font-size: 8rem;
	color: rgba(0, 153, 203, .2);
	line-height: 1
}

.pull-quote p {
	font-family: var(--serif);
	font-size: 1.15rem;
	color: #fff;
	font-style: italic;
	line-height: 1.7;
	position: relative;
	z-index: 1;
	margin: 0
}

/* Key point highlight */
.key-point {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 20px 24px;
	background: var(--blue-mist);
	border: 1.5px solid var(--blue-pale);
	border-radius: var(--r-md);
	margin: 20px 0
}

.kp-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--blue-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px
}

.kp-icon svg {
	width: 14px;
	height: 14px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2.5
}

.kp-title {
	font-size: .92rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 4px
}

.kp-desc {
	font-size: .88rem;
	color: var(--g600);
	line-height: 1.6
}

/* Tags at bottom of article */
.article-tags {
	padding: 0 56px 36px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	border-top: 1px solid var(--g200);
	padding-top: 28px;
	margin: 0 0 0
}

.tags-label {
	font-size: .78rem;
	font-weight: 700;
	color: var(--g400);
	text-transform: uppercase;
	letter-spacing: .08em
}

.article-tag {
	padding: 6px 14px;
	border-radius: 100px;
	border: 1.5px solid var(--g200);
	font-size: .78rem;
	font-weight: 600;
	color: var(--g600);
	transition: var(--tr)
}

.article-tag:hover {
	border-color: var(--blue);
	color: var(--blue);
	background: var(--blue-mist)
}

/* Social share bar */
.share-bar {
	padding: 0 56px 40px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap
}

.share-label {
	font-size: .8rem;
	font-weight: 700;
	color: var(--g400);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-right: 4px
}

.share-btn {
	width: 38px;
	height: 38px;
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--g200);
	transition: var(--tr);
	cursor: pointer
}

.share-btn svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke-width: 2;
	transition: stroke .2s
}

.share-btn.fb {
	border-color: rgba(24, 119, 242, .3);
	background: rgba(24, 119, 242, .04)
}

.share-btn.fb svg {
	stroke: #1877f2
}

.share-btn.fb:hover {
	background: #1877f2;
	border-color: #1877f2
}

.share-btn.fb:hover svg {
	stroke: #fff
}

.share-btn.tw {
	border-color: rgba(29, 155, 240, .3);
	background: rgba(29, 155, 240, .04)
}

.share-btn.tw svg {
	stroke: #1d9bf0
}

.share-btn.tw:hover {
	background: #1d9bf0;
	border-color: #1d9bf0
}

.share-btn.tw:hover svg {
	stroke: #fff
}

.share-btn.li {
	border-color: rgba(0, 119, 181, .3);
	background: rgba(0, 119, 181, .04)
}

.share-btn.li svg {
	stroke: #0077b5
}

.share-btn.li:hover {
	background: #0077b5;
	border-color: #0077b5
}

.share-btn.li:hover svg {
	stroke: #fff
}

.share-btn.cp {
	border-color: var(--g200);
	background: var(--g100)
}

.share-btn.cp svg {
	stroke: var(--g600)
}

.share-btn.cp:hover {
	background: var(--blue);
	border-color: var(--blue)
}

.share-btn.cp:hover svg {
	stroke: #fff
}

.copy-toast {
	font-size: .75rem;
	color: var(--green, #16a34a);
	font-weight: 600;
	opacity: 0;
	transition: opacity .3s
}

.copy-toast.show {
	opacity: 1
}

/* ── STICKY SIDEBAR ── */
.blog-sidebar {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 20px
}

/* TOC */
.sb-toc {
	background: var(--white);
	border-radius: var(--r-lg);
	border: 1.5px solid var(--g200);
	overflow: hidden;
	box-shadow: var(--shadow-sm)
}

.sb-head {
	padding: 16px 20px;
	background: var(--navy);
	display: flex;
	align-items: center;
	gap: 10px
}

.sb-head svg {
	width: 15px;
	height: 15px;
	stroke: #6dd6f0;
	fill: none;
	stroke-width: 2;
	flex-shrink: 0
}

.sb-head-title {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff
}

.toc-list {
	padding: 12px 8px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px
}

.toc-item a {
	display: block;
	padding: 8px 14px;
	font-size: .84rem;
	color: var(--g600);
	border-radius: var(--r-sm);
	transition: var(--tr);
	font-weight: 500;
	line-height: 1.4
}

.toc-item a:hover,
.toc-item a.toc-active {
	color: var(--blue);
	background: var(--blue-mist);
	font-weight: 600
}

.toc-item.toc-h3 a {
	padding-left: 24px;
	font-size: .8rem;
	color: var(--g400)
}

.toc-item.toc-h3 a:hover {
	color: var(--blue);
	background: var(--blue-mist)
}

/* Categories */
.sb-card {
	background: var(--white);
	border-radius: var(--r-lg);
	border: 1.5px solid var(--g200);
	overflow: hidden;
	box-shadow: var(--shadow-sm)
}

.sb-cats {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 6px 8px
}

.sb-cat-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: var(--tr)
}

.sb-cat-item:hover {
	background: var(--blue-mist)
}

.sb-cat-left {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: .86rem;
	font-weight: 500;
	color: var(--navy)
}

.sb-cat-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0
}

.sb-cat-count {
	font-size: .72rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 100px
}

/* Recent posts */
.sb-recent {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 8px 8px
}

.sb-post {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 8px;
	border-radius: var(--r-sm);
	transition: var(--tr);
	text-decoration: none
}

.sb-post:hover {
	background: var(--blue-mist)
}

.sb-post-img {
	width: 62px;
	height: 52px;
	border-radius: var(--r-sm);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--g100)
}

.sb-post-img img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.sb-post-cat {
	font-size: .63rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 3px
}

.sb-post-title {
	font-size: .81rem;
	font-weight: 600;
	color: var(--navy);
	line-height: 1.35;
	transition: color .2s
}

.sb-post:hover .sb-post-title {
	color: var(--blue)
}

.sb-post-date {
	font-size: .71rem;
	color: var(--g400);
	margin-top: 3px
}

/* Newsletter sidebar */
.sb-newsletter {
	background: linear-gradient(135deg, var(--navy), var(--navy-light));
	border-radius: var(--r-lg);
	padding: 24px;
	border: 1.5px solid rgba(255, 255, 255, .06)
}

.sbn-icon {
	width: 40px;
	height: 40px;
	background: rgba(0, 153, 203, .2);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px
}

.sbn-icon svg {
	width: 18px;
	height: 18px;
	stroke: #6dd6f0;
	fill: none;
	stroke-width: 1.8
}

.sbn-title {
	font-family: var(--serif);
	font-size: 1rem;
	color: #fff;
	font-weight: 600;
	margin-bottom: 8px
}

.sbn-sub {
	font-size: .78rem;
	color: rgba(255, 255, 255, .5);
	line-height: 1.6;
	margin-bottom: 14px
}

.sbn-input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-sm);
	font-family: var(--sans);
	font-size: .85rem;
	background: rgba(255, 255, 255, .07);
	color: #fff;
	outline: none;
	margin-bottom: 10px;
	transition: border-color .2s
}

.sbn-input::placeholder {
	color: rgba(255, 255, 255, .3)
}

.sbn-input:focus {
	border-color: rgba(0, 153, 203, .5)
}

.sbn-btn {
	width: 100%;
	padding: 11px;
	background: var(--blue);
	color: #fff;
	border: none;
	border-radius: var(--r-sm);
	font-family: var(--sans);
	font-weight: 700;
	font-size: .83rem;
	cursor: pointer;
	transition: background .2s
}

.sbn-btn:hover {
	background: var(--blue-dark)
}

/* Sidebar CTA */
.sb-cta {
	background: linear-gradient(135deg, var(--blue), var(--blue-dark));
	border-radius: var(--r-lg);
	padding: 24px;
	text-align: center
}

.sb-cta-icon {
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, .15);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px
}

.sb-cta-icon svg {
	width: 20px;
	height: 20px;
	stroke: #fff;
	fill: none;
	stroke-width: 1.8
}

.sb-cta-title {
	font-family: var(--serif);
	font-size: 1.05rem;
	color: #fff;
	font-weight: 600;
	margin-bottom: 8px;
	line-height: 1.3
}

.sb-cta-sub {
	font-size: .77rem;
	color: rgba(255, 255, 255, .65);
	margin-bottom: 14px;
	line-height: 1.6
}

.sb-cta-btn {
	display: block;
	padding: 11px;
	background: #fff;
	color: var(--blue);
	border-radius: var(--r-sm);
	font-family: var(--sans);
	font-weight: 700;
	font-size: .83rem;
	transition: var(--tr)
}

.sb-cta-btn:hover {
	background: var(--blue-pale)
}

/* ── RELATED POSTS ── */
.related-blog {
	padding: 72px 0;
	background: var(--white)
}

.related-blog .related-hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 36px;
	flex-wrap: wrap;
	gap: 12px
}

.related-blog .related-hdr h2 {
	font-family: var(--serif);
	font-size: 1.8rem;
	color: var(--navy);
	font-weight: 600
}

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

.related-blog .rel-card {
	background: var(--white);
	border-radius: var(--r-lg);
	border: 1.5px solid var(--g200);
	overflow: hidden;
	transition: var(--tr);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	padding: 0;
}

.related-blog .rel-card:hover {
	border-color: var(--blue);
	transform: translateY(-5px);
	box-shadow: var(--shadow-md)
}

.related-blog .rel-card-img {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--g100);
	position: relative
}

.related-blog .rel-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease
}

.related-blog .rel-card:hover .rel-card-img img {
	transform: scale(1.06)
}

.related-blog .rel-cat {
	position: absolute;
	top: 12px;
	left: 12px;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 100px;
	background: var(--blue);
	color: #fff
}

.related-blog .rel-card-body {
	padding: 20px 22px;
	flex: 1;
	display: flex;
	flex-direction: column
}

.related-blog .rel-card-date {
	font-size: .74rem;
	color: var(--g400);
	margin-bottom: 8px
}

.related-blog .rel-card-title {
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 600;
	color: var(--navy);
	line-height: 1.35;
	flex: 1;
	transition: color .2s;
	margin-bottom: 14px
}

.related-blog .rel-card:hover .rel-card-title {
	color: var(--blue)
}

.related-blog .rel-read {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .79rem;
	font-weight: 700;
	color: var(--blue);
	transition: gap .2s
}

.related-blog .rel-read:hover {
	gap: 9px
}

.related-blog .rel-read svg {
	width: 11px;
	height: 11px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
	.blog-page-inner {
		grid-template-columns: 1fr
	}

	.blog-sidebar {
		position: static
	}

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

	.sb-newsletter,
	.sb-cta {
		grid-column: 1/-1
	}

	.related-blog .related-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}

	.cta-inner {
		grid-template-columns: 1fr;
		text-align: center
	}

	.cta-actions {
		align-items: center
	}
}

@media(max-width:768px) {
	.nav-menu {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 74px;
		left: 0;
		right: 0;
		background: #fff;
		padding: 16px;
		box-shadow: var(--shadow-md);
		z-index: 100
	}

	.nav-menu.open {
		display: flex
	}

	.hamburger {
		display: flex
	}

	.article-body,
	.share-bar,
	.article-tags {
		padding-left: 24px;
		padding-right: 24px
	}

	.related-grid {
		grid-template-columns: 1fr
	}

	.blog-sidebar {
		grid-template-columns: 1fr
	}

	.footer-grid {
		grid-template-columns: 1fr
	}

	.topbar {
		display: none
	}

	.post-hero-inner,
	.post-featured-img {
		padding: 0 20px
	}

	.pull-quote {
		padding: 24px 28px
	}
}

/* ── SINGLE SERVICE PAGE HERO ── */
.single-service.page-hero {
	position: relative;
	padding: 88px 0 80px;
	background: var(--navy);
	overflow: hidden
}

.single-service .hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('https://precision7usa.com/img/services/credentialing-service.jpg');
	background-size: cover;
	background-position: center;
	opacity: .15
}

.single-service .hero-layout {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 80px;
	align-items: center;
}

/* Service badge */
.service-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(0, 153, 203, .15);
	border: 1px solid rgba(0, 153, 203, .35);
	color: #6dd6f0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 7px 16px;
	border-radius: 100px;
	margin-bottom: 24px
}

.service-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--blue);
	animation: pulse 2.2s ease infinite
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1)
	}

	50% {
		opacity: .35;
		transform: scale(.65)
	}
}

/* Hero right: service image + quick stats */
.hero-visual {}

.hero-img-card {
	border-radius: var(--r-xl);
	overflow: hidden;
	aspect-ratio: 4/3;
	background: var(--navy-light);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
	position: relative
}

.hero-img-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: .85
}

.hero-img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 30, 53, .6) 0%, transparent 50%)
}

.hero-img-stat {
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
	display: flex;
	gap: 12px
}

.his {
	background: rgba(255, 255, 255, .1);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: var(--r-md);
	padding: 14px 18px;
	flex: 1;
	text-align: center
}

.his-num {
	font-family: var(--serif);
	font-size: 1.5rem;
	color: #fff;
	line-height: 1;
	display: block
}

.his-lbl {
	font-size: .7rem;
	color: rgba(255, 255, 255, .5);
	margin-top: 4px;
	display: block
}

/* ── SIDEBAR LAYOUT (content + sticky sidebar) ── */
.service-layout {
	background: var(--g100)
}

.service-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 40px;
	align-items: start
}

/* ── STICKY SIDEBAR ── */
.service-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 96px
}

/* Sidebar: quick CTA card */
.ss-cta {
	background: linear-gradient(135deg, var(--navy), var(--navy-light));
	border-radius: var(--r-xl);
	padding: 32px;
	border: 1.5px solid rgba(255, 255, 255, .06);
	overflow: hidden;
	position: relative
}

.ss-cta::before {
	content: '';
	position: absolute;
	bottom: -40px;
	right: -40px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: rgba(0, 153, 203, .12)
}

.ss-cta-inner {
	position: relative;
	z-index: 2
}

.ss-cta-icon {
	width: 48px;
	height: 48px;
	background: rgba(0, 153, 203, .2);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px
}

.ss-cta-icon svg {
	width: 22px;
	height: 22px;
	stroke: #6dd6f0;
	fill: none;
	stroke-width: 1.8
}

.ss-cta-title {
	font-family: var(--serif);
	font-size: 1.3rem;
	color: #fff;
	font-weight: 600;
	margin-bottom: 10px;
	line-height: 1.3
}

.ss-cta-sub {
	font-size: .84rem;
	color: rgba(255, 255, 255, .55);
	line-height: 1.65;
	margin-bottom: 20px
}

.ss-cta-btn {
	display: block;
	padding: 13px;
	background: var(--blue);
	color: #fff;
	border-radius: var(--r-sm);
	font-family: var(--sans);
	font-weight: 700;
	font-size: .88rem;
	text-align: center;
	transition: var(--tr)
}

.ss-cta-btn:hover {
	background: var(--blue-dark);
	transform: translateY(-1px)
}

.ss-cta-phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 12px;
	font-size: .83rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .6)
}

.ss-cta-phone svg {
	width: 14px;
	height: 14px;
	stroke: rgba(255, 255, 255, .5);
	fill: none;
	stroke-width: 2
}

.ss-cta-phone a {
	color: rgba(255, 255, 255, .7);
	transition: color .2s
}

.ss-cta-phone a:hover {
	color: #fff
}

/* Sidebar: pricing card */
.ss-pricing {
	background: var(--white);
	border-radius: var(--r-xl);
	border: 1.5px solid var(--g200);
	overflow: hidden;
	box-shadow: var(--shadow-sm)
}

.ss-pricing-head {
	padding: 20px 24px;
	background: var(--blue);
	display: flex;
	align-items: center;
	gap: 12px
}

.ss-ph-icon {
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, .15);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center
}

.ss-ph-icon svg {
	width: 17px;
	height: 17px;
	stroke: #fff;
	fill: none;
	stroke-width: 2
}

.ss-ph-title {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff
}

.ss-pricing-body {
	padding: 20px 24px
}

.ss-price-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 12px 0;
	border-bottom: 1px solid var(--g200);
	font-size: .87rem
}

.ss-price-row:last-child {
	border-bottom: none
}

.ss-price-name {
	color: var(--g800);
	font-weight: 500;
	line-height: 1.35;
	flex: 1;
	padding-right: 12px
}

.ss-price-val {
	color: var(--blue);
	font-weight: 700;
	white-space: nowrap;
	font-size: .84rem
}

/* Sidebar: other services */
.ss-card {
	background: var(--white);
	border-radius: var(--r-lg);
	border: 1.5px solid var(--g200);
	overflow: hidden;
	box-shadow: var(--shadow-sm)
}

.ss-card-head {
	padding: 16px 20px;
	background: var(--navy);
	display: flex;
	align-items: center;
	gap: 10px
}

.ss-card-head svg {
	width: 16px;
	height: 16px;
	stroke: #6dd6f0;
	fill: none;
	stroke-width: 2;
	flex-shrink: 0
}

.ss-card-title {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff
}

.ss-card-body {
	padding: 12px 6px
}

.ss-service-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: var(--r-sm);
	font-size: .86rem;
	font-weight: 500;
	color: var(--g600);
	transition: var(--tr)
}

.ss-service-link:hover {
	background: var(--blue-mist);
	color: var(--blue)
}

.ss-service-link.active-link {
	background: var(--blue-pale);
	color: var(--blue);
	font-weight: 700
}

.ss-service-link svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	flex-shrink: 0;
	opacity: .5
}

.ss-service-link:hover svg,
.ss-service-link.active-link svg {
	opacity: 1
}

/* ── MAIN CONTENT COLUMN ── */
.service-content {
	display: flex;
	flex-direction: column;
	gap: 28px
}

/* Content block card */
.content-card {
	background: var(--white);
	border-radius: var(--r-xl);
	border: 1.5px solid var(--g200);
	overflow: hidden;
	box-shadow: var(--shadow-sm)
}

.cc-head {
	padding: 28px 36px 0
}

.cc-body {
	padding: 28px 36px 36px
}

.cc-title {
	font-family: var(--serif);
	font-size: 1.5rem;
	color: var(--navy);
	font-weight: 600;
	margin-bottom: 14px
}

.cc-title em {
	font-style: italic;
	color: var(--blue)
}

.cc-text {
	font-size: .95rem;
	color: var(--g600);
	line-height: 1.8
}

.cc-text+.cc-text {
	margin-top: 14px
}

/* Overview highlight band inside card */
.overview-highlight {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--g200);
	margin: 24px 0 0
}

.oh-item {
	background: var(--off-white);
	padding: 22px 20px;
	text-align: center
}

.oh-num {
	font-family: var(--serif);
	font-size: 2rem;
	color: var(--blue);
	font-weight: 600;
	display: block
}

.oh-lbl {
	font-size: .76rem;
	color: var(--g600);
	margin-top: 4px;
	line-height: 1.4
}

/* What's Included checklist */
.includes-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 4px
}

.inc-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 13px 16px;
	background: var(--off-white);
	border-radius: var(--r-md);
	border: 1.5px solid var(--g200);
	transition: var(--tr)
}

.inc-item:hover {
	border-color: var(--blue);
	background: var(--blue-mist)
}

.inc-check {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--blue-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px
}

.inc-check svg {
	width: 10px;
	height: 10px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 3
}

.inc-text {
	font-size: .86rem;
	font-weight: 500;
	color: var(--navy);
	line-height: 1.4
}

/* Process / How It Works timeline */
.process-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 4px
}

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

.process-step:last-child {
	padding-bottom: 0
}

.process-step:last-child .ps-line {
	display: none
}

.ps-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 44px
}

.ps-num {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-size: 1rem;
	color: #fff;
	font-weight: 600;
	flex-shrink: 0;
	box-shadow: 0 4px 16px rgba(0, 153, 203, .25);
	z-index: 1
}

.ps-line {
	width: 2px;
	flex: 1;
	background: linear-gradient(to bottom, var(--blue), var(--g200));
	min-height: 32px;
	margin-top: 4px;
	border-radius: 2px
}

.ps-right {
	padding-top: 10px;
	flex: 1
}

.ps-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 6px
}

.ps-desc {
	font-size: .88rem;
	color: var(--g600);
	line-height: 1.68
}

.ps-tag {
	display: inline-block;
	margin-top: 8px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--blue);
	padding: 3px 10px;
	background: var(--blue-pale);
	border-radius: 100px
}

/* Benefits grid */
.benefits-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 4px
}

.benefit-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 20px;
	background: var(--off-white);
	border-radius: var(--r-lg);
	border: 1.5px solid var(--g200);
	transition: var(--tr)
}

.benefit-item:hover {
	border-color: var(--blue);
	background: var(--blue-mist)
}

.bi-icon {
	width: 40px;
	height: 40px;
	background: var(--blue-pale);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: var(--tr)
}

.benefit-item:hover .bi-icon {
	background: var(--blue)
}

.bi-icon svg {
	width: 18px;
	height: 18px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.9;
	transition: stroke .25s
}

.benefit-item:hover .bi-icon svg {
	stroke: #fff
}

.bi-title {
	font-size: .93rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 4px
}

.bi-desc {
	font-size: .83rem;
	color: var(--g600);
	line-height: 1.6
}

/* Payer types / compatibility tags */
.payer-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px
}

.payer-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 100px;
	border: 1.5px solid var(--g200);
	font-size: .81rem;
	font-weight: 600;
	color: var(--g800);
	background: var(--white);
	transition: var(--tr)
}

.payer-tag:hover {
	border-color: var(--blue);
	color: var(--blue);
	background: var(--blue-mist)
}

.payer-tag svg {
	width: 13px;
	height: 13px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2
}

/* Pricing table inside content */
.pricing-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 4px
}

.pricing-table th {
	text-align: left;
	padding: 12px 16px;
	font-size: .77rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--g400);
	background: var(--g100);
	border-bottom: 2px solid var(--g200)
}

.pricing-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--g200);
	font-size: .88rem
}

.pricing-table tr:last-child td {
	border-bottom: none
}

.pricing-table tr:hover td {
	background: var(--blue-mist)
}

.pt-service {
	color: var(--navy);
	font-weight: 600
}

.pt-price {
	color: var(--blue);
	font-weight: 700;
	white-space: nowrap
}

.pt-note {
	color: var(--g400);
	font-size: .78rem
}

/* FAQ accordion inside content */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 4px
}

.faq-item {
	border: 1.5px solid var(--g200);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: border-color .25s
}

.faq-item:hover,
.faq-item.open {
	border-color: var(--blue)
}

.faq-q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 22px;
	cursor: pointer;
	font-size: .93rem;
	font-weight: 700;
	color: var(--navy);
	gap: 12px;
	user-select: none
}

.faq-q svg {
	width: 18px;
	height: 18px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0;
	transition: transform .3s
}

.faq-item.open .faq-q svg {
	transform: rotate(45deg)
}

.faq-item.open .faq-q {
	color: var(--blue)
}

.faq-a {
	padding: 0 22px;
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s ease, padding .3s ease;
	font-size: .88rem;
	color: var(--g600);
	line-height: 1.72
}

.faq-item.open .faq-a {
	max-height: 300px;
	padding: 0 22px 20px
}

/* Related services strip */
.related-strip {
	background: var(--navy);
	overflow: hidden;
	position: relative
}

.related-strip::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1.5px, transparent 1.5px);
	background-size: 28px 28px
}

.related-inner {
	position: relative;
	z-index: 2;
	padding: 56px 0
}

.related-hdr {
	text-align: center;
	margin-bottom: 40px
}

.related-hdr h2 {
	font-family: var(--serif);
	font-size: 1.8rem;
	color: #fff;
	font-weight: 600;
	margin-bottom: 8px
}

.related-hdr p {
	font-size: .9rem;
	color: rgba(255, 255, 255, .5)
}

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

.related-services .rel-card {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--r-lg);
	padding: 24px 20px;
	transition: var(--tr);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 12px
}

.related-services .rel-card:hover {
	background: rgba(0, 153, 203, .12);
	border-color: rgba(0, 153, 203, .3);
	transform: translateY(-4px)
}

.related-services .rel-icon {
	width: 40px;
	height: 40px;
	background: rgba(0, 153, 203, .15);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center
}

.related-services .rel-icon svg {
	width: 18px;
	height: 18px;
	stroke: #6dd6f0;
	fill: none;
	stroke-width: 1.8
}

.related-services .rel-name {
	font-size: .92rem;
	font-weight: 700;
	color: #fff
}

.related-services .rel-desc {
	font-size: .78rem;
	color: rgba(255, 255, 255, .45);
	line-height: 1.55;
	flex: 1
}

.related-services .rel-link {
	font-size: .75rem;
	font-weight: 700;
	color: var(--blue);
	display: flex;
	align-items: center;
	gap: 5px;
	transition: gap .2s
}

.related-services .rel-card:hover .rel-link {
	gap: 9px
}

.related-services .rel-link svg {
	width: 11px;
	height: 11px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5
}

/* ── STATS BAND ── */
.stats-band {
	background: var(--blue);
	padding: 48px 0
}

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

.stat-block {
	background: var(--blue);
	padding: 26px 24px;
	text-align: center;
	transition: var(--tr)
}

.stat-block:hover {
	background: var(--blue-dark)
}

.stat-num {
	font-family: var(--serif);
	font-size: 2.6rem;
	color: #fff;
	line-height: 1;
	font-weight: 600;
	display: block
}

.stat-lbl {
	font-size: .78rem;
	color: rgba(255, 255, 255, .7);
	margin-top: 7px;
	display: block;
	line-height: 1.4
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
	.hero-layout {
		grid-template-columns: 1fr;
		gap: 40px
	}

	.hero-visual {
		display: none
	}

	.service-grid {
		grid-template-columns: 1fr
	}

	.service-sidebar {
		position: static
	}

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

	.stats-grid,
	.footer-grid {
		grid-template-columns: 1fr 1fr
	}

	.cta-inner {
		grid-template-columns: 1fr;
		text-align: center
	}

	.cta-actions {
		align-items: center
	}
}

@media(max-width:768px) {
	.section {
		padding: 64px 0
	}

	.nav-menu {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 74px;
		left: 0;
		right: 0;
		background: #fff;
		padding: 16px;
		box-shadow: var(--shadow-md);
		z-index: 100
	}

	.nav-menu.open {
		display: flex
	}

	.hamburger {
		display: flex
	}

	.includes-grid,
	.benefits-grid {
		grid-template-columns: 1fr
	}

	.related-grid {
		grid-template-columns: 1fr
	}

	.pricing-table {
		font-size: .8rem
	}

	.overview-highlight {
		grid-template-columns: 1fr
	}

	.footer-grid {
		grid-template-columns: 1fr
	}

	.topbar {
		display: none
	}
}

/* ── PRICING PAGE HERO ── */
.pricin-hero.page-hero {
	position: relative;
	padding: 88px 0 80px;
	background: var(--navy);
	overflow: hidden
}

.pricin-hero .hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('https://images.unsplash.com/photo-1563986768494-4dee2763ff3f?w=1600&q=80&auto=format&fit=crop');
	background-size: cover;
	background-position: center;
	opacity: .12
}

.pricin-hero .hero-content {
	max-width: 720px;
}

/* Trust chips row */
.hero-trust {
	display: flex;
	gap: 20px;
	flex-wrap: wrap
}

.trust-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .8rem;
	color: rgba(255, 255, 255, .55);
	font-weight: 500
}

.trust-chip svg {
	width: 16px;
	height: 16px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0
}

/* ── PRICING MODEL EXPLAINER ── */
.model-band {
	background: var(--white);
	border-bottom: 1px solid var(--g200);
	padding: 52px 0
}

.model-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center
}

.model-text .section-sub {
	max-width: 480px;
	margin-bottom: 24px
}

.model-highlights {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px
}

.mh-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	background: var(--off-white);
	border-radius: var(--r-md);
	border: 1.5px solid var(--g200);
	transition: var(--tr)
}

.mh-item:hover {
	border-color: var(--blue);
	background: var(--blue-mist)
}

.mh-icon {
	width: 34px;
	height: 34px;
	background: var(--blue-pale);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.mh-icon svg {
	width: 16px;
	height: 16px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2
}

.mh-title {
	font-size: .86rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 2px
}

.mh-sub {
	font-size: .76rem;
	color: var(--g600)
}

/* ── BILLING PLANS GRID ── */
.plans-section {
	background: var(--g100)
}

.plans-hdr {
	text-align: center;
	max-width: 660px;
	margin: 0 auto 16px
}

.plans-hdr .section-sub {
	margin: 0 auto
}

/* Toggle */
.billing-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 56px
}

.toggle-label {
	font-size: .88rem;
	font-weight: 600;
	color: var(--g600)
}

.toggle-label.active {
	color: var(--navy)
}

.toggle-track {
	width: 52px;
	height: 28px;
	background: var(--blue);
	border-radius: 100px;
	cursor: pointer;
	position: relative;
	transition: background .25s;
	flex-shrink: 0
}

.toggle-thumb {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	transition: transform .25s;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15)
}

.toggle-track.annual .toggle-thumb {
	transform: translateX(24px)
}

.badge-save {
	background: var(--blue);
	color: #fff;
	font-size: .67rem;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 100px;
	letter-spacing: .06em
}

/* Plans grid */
.plans-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: start
}

.plan-card {
	background: var(--white);
	border-radius: var(--r-xl);
	border: 1.5px solid var(--g200);
	overflow: hidden;
	transition: var(--tr);
	position: relative;
	display: flex;
	flex-direction: column
}

.plan-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg)
}

/* Card tiers */
.plan-card.basic .plan-top {
	background: var(--g100);
	border-bottom: 1px solid var(--g200)
}

.plan-card.silver .plan-top {
	background: var(--silver-pale);
	border-bottom: 2px solid var(--silver)
}

.plan-card.gold .plan-top {
	background: var(--gold-pale);
	border-bottom: 2px solid var(--gold)
}

.plan-card.platinum .plan-top {
	background: var(--navy);
	border-bottom: 2px solid var(--blue)
}

.plan-card.featured {
	border: 2px solid var(--blue);
	box-shadow: var(--shadow-md);
	transform: translateY(-8px)
}

.plan-card.featured:hover {
	transform: translateY(-14px)
}

.plan-badge-wrap {
	position: absolute;
	top: 16px;
	right: 16px
}

.plan-badge {
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 100px;
	background: var(--blue);
	color: #fff
}

.plan-badge.gold-badge {
	background: var(--gold)
}

.plan-badge.popular-badge {
	background: var(--blue);
	color: #fff;
	animation: badge-pulse 2.5s ease infinite
}

@keyframes badge-pulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(0, 153, 203, .4)
	}

	50% {
		box-shadow: 0 0 0 6px rgba(0, 153, 203, 0)
	}
}

.plan-top {
	padding: 32px 28px 28px
}

.plan-tier-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px
}

.basic .plan-tier-icon {
	background: rgba(154, 170, 184, .15)
}

.silver .plan-tier-icon {
	background: rgba(107, 127, 148, .12)
}

.gold .plan-tier-icon {
	background: rgba(201, 146, 42, .12)
}

.platinum .plan-tier-icon {
	background: rgba(0, 153, 203, .2)
}

.plan-tier-icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke-width: 1.8
}

.basic .plan-tier-icon svg {
	stroke: var(--g600)
}

.silver .plan-tier-icon svg {
	stroke: var(--silver)
}

.gold .plan-tier-icon svg {
	stroke: var(--gold)
}

.platinum .plan-tier-icon svg {
	stroke: #6dd6f0
}

.plan-name {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 6px
}

.basic .plan-name {
	color: var(--g600)
}

.silver .plan-name {
	color: var(--silver)
}

.gold .plan-name {
	color: var(--gold)
}

.platinum .plan-name {
	color: #6dd6f0
}

.plan-rate {
	font-family: var(--serif);
	font-size: 3.4rem;
	line-height: 1;
	font-weight: 600;
	margin-bottom: 0
}

.basic .plan-rate {
	color: var(--navy)
}

.silver .plan-rate {
	color: var(--g800)
}

.gold .plan-rate {
	color: var(--gold)
}

.platinum .plan-rate {
	color: #fff
}

.plan-rate-unit {
	font-size: .85rem;
	font-weight: 500;
	font-family: var(--sans);
	margin-left: 2px
}

.basic .plan-rate-unit {
	color: var(--g600)
}

.silver .plan-rate-unit {
	color: var(--g600)
}

.gold .plan-rate-unit {
	color: var(--gold)
}

.platinum .plan-rate-unit {
	color: rgba(255, 255, 255, .6)
}

.plan-rate-desc {
	font-size: .78rem;
	margin-top: 8px
}

.basic .plan-rate-desc {
	color: var(--g400)
}

.silver .plan-rate-desc {
	color: var(--g600)
}

.gold .plan-rate-desc {
	color: var(--gold)
}

.platinum .plan-rate-desc {
	color: rgba(255, 255, 255, .5)
}

.plan-tagline {
	font-size: .85rem;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid;
	line-height: 1.5
}

.basic .plan-tagline {
	color: var(--g600);
	border-color: var(--g200)
}

.silver .plan-tagline {
	color: var(--g600);
	border-color: rgba(107, 127, 148, .2)
}

.gold .plan-tagline {
	color: var(--g600);
	border-color: rgba(201, 146, 42, .2)
}

.platinum .plan-tagline {
	color: rgba(255, 255, 255, .55);
	border-color: rgba(255, 255, 255, .1)
}

.plan-body {
	padding: 24px 28px;
	flex: 1;
	display: flex;
	flex-direction: column
}

.plan-features-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--g400);
	margin-bottom: 14px
}

.plan-features {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1
}

.pf-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .84rem;
	color: var(--g800);
	line-height: 1.45
}

.pf-item span {}

.pf-check {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px
}

.pf-check.yes {
	background: var(--blue-pale)
}

.pf-check.yes svg {
	width: 9px;
	height: 9px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 3
}

.pf-check.gold-c {
	background: rgba(201, 146, 42, .12)
}

.pf-check.gold-c svg {
	width: 9px;
	height: 9px;
	stroke: var(--gold);
	fill: none;
	stroke-width: 3
}

.pf-check.plat-c {
	background: rgba(0, 153, 203, .15)
}

.pf-check.plat-c svg {
	width: 9px;
	height: 9px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 3
}

.pf-section-head {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--blue);
	padding: 10px 0 4px;
	border-bottom: 1px solid var(--g200);
	margin-bottom: 2px
}

.plan-note {
	font-size: .75rem;
	color: var(--g400);
	background: var(--g100);
	border-radius: var(--r-sm);
	padding: 10px 12px;
	margin-top: 16px;
	line-height: 1.5
}

.plan-cta {
	padding: 0 28px 28px;
	margin-top: auto
}

.plan-btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 14px;
	border-radius: var(--r-sm);
	font-weight: 700;
	font-size: .9rem;
	transition: var(--tr)
}

.basic .plan-btn {
	background: var(--g100);
	color: var(--navy);
	border: 1.5px solid var(--g200)
}

.basic .plan-btn:hover {
	background: var(--g200)
}

.silver .plan-btn {
	background: var(--silver-pale);
	color: var(--silver);
	border: 1.5px solid rgba(107, 127, 148, .3)
}

.silver .plan-btn:hover {
	background: var(--silver);
	color: #fff
}

.gold .plan-btn {
	background: var(--gold-pale);
	color: var(--gold);
	border: 1.5px solid rgba(201, 146, 42, .35)
}

.gold .plan-btn:hover {
	background: var(--gold);
	color: #fff
}

.platinum .plan-btn {
	background: var(--blue);
	color: #fff
}

.platinum .plan-btn:hover {
	background: var(--blue-dark);
	box-shadow: 0 8px 24px rgba(0, 153, 203, .35)
}

/* ── COMPARISON TABLE ── */
.compare-section {
	background: var(--white)
}

.compare-hdr {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 52px
}

.compare-hdr .section-sub {
	margin: 0 auto
}

.compare-wrap {
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	border: 1.5px solid var(--g200)
}

.compare-head {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	background: var(--navy)
}

.ch-cell {
	padding: 20px 18px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase
}

.ch-cell:first-child {
	color: rgba(255, 255, 255, .4)
}

.ch-plan {
	text-align: center;
	position: relative
}

.ch-plan.basic {
	color: var(--g400)
}

.ch-plan.silver {
	color: rgba(200, 210, 220, .8)
}

.ch-plan.gold {
	color: rgba(201, 146, 42, .9)
}

.ch-plan.platinum {
	color: #6dd6f0
}

.ch-plan.platinum::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--blue)
}

.compare-group-hd {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	background: var(--g100);
	border-bottom: 1px solid var(--g200)
}

.cgh-label {
	padding: 12px 18px;
	font-size: .73rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--blue);
	grid-column: 1/-1;
	display: flex;
	align-items: center;
	gap: 8px
}

.cgh-label svg {
	width: 14px;
	height: 14px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2
}

.compare-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	border-bottom: 1px solid var(--g200);
	transition: background .2s
}

.compare-row:last-child {
	border-bottom: none
}

.compare-row:hover {
	background: var(--blue-mist)
}

.cr-feat {
	padding: 14px 18px;
	font-size: .88rem;
	font-weight: 500;
	color: var(--navy);
	display: flex;
	align-items: center
}

.cr-val {
	padding: 14px 18px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center
}

.ci-yes {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--blue-pale);
	display: flex;
	align-items: center;
	justify-content: center
}

.ci-yes svg {
	width: 11px;
	height: 11px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 3
}

.ci-no {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--g100);
	display: flex;
	align-items: center;
	justify-content: center
}

.ci-no svg {
	width: 10px;
	height: 10px;
	stroke: var(--g400);
	fill: none;
	stroke-width: 2.5
}

.ci-gold {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(201, 146, 42, .1);
	display: flex;
	align-items: center;
	justify-content: center
}

.ci-gold svg {
	width: 11px;
	height: 11px;
	stroke: var(--gold);
	fill: none;
	stroke-width: 3
}

.ci-text {
	font-size: .8rem;
	font-weight: 600;
	color: var(--blue)
}

.ci-text.gold {
	color: var(--gold)
}

/* ── OTHER SERVICES ── */
.other-services {
	background: var(--g100)
}

.other-hdr {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 60px
}

.other-hdr .section-sub {
	margin: 0 auto
}

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

.other-card {
	background: var(--white);
	border-radius: var(--r-xl);
	border: 1.5px solid var(--g200);
	overflow: hidden;
	transition: var(--tr)
}

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

.other-card-top {
	padding: 28px 28px 0
}

.other-card-top-accent {
	height: 3px;
	background: var(--blue);
	border-radius: 2px;
	transform: scaleX(0);
	transition: transform .3s ease;
	transform-origin: left;
	margin-bottom: 28px
}

.other-card:hover .other-card-top-accent {
	transform: scaleX(1)
}

.oc-icon {
	width: 52px;
	height: 52px;
	background: var(--blue-pale);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	transition: var(--tr)
}

.other-card:hover .oc-icon {
	background: var(--blue)
}

.oc-icon svg {
	width: 24px;
	height: 24px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.7;
	transition: stroke .25s
}

.other-card:hover .oc-icon svg {
	stroke: #fff
}

.other-card h3 {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 8px
}

.other-card-body {
	padding: 0 28px 28px
}

.oc-items {
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px
}

.oc-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--g200);
	font-size: .84rem
}

.oc-item:last-child {
	border-bottom: none
}

.oc-name {
	color: var(--g800);
	font-weight: 500;
	flex: 1;
	line-height: 1.4
}

.oc-price {
	color: var(--blue);
	font-weight: 700;
	white-space: nowrap;
	font-size: .83rem
}

.oc-note {
	font-size: .76rem;
	color: var(--g400);
	margin-top: 14px;
	padding: 10px 12px;
	background: var(--g100);
	border-radius: var(--r-sm);
	line-height: 1.5
}

.oc-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 18px;
	font-size: .83rem;
	font-weight: 700;
	color: var(--blue);
	transition: gap .2s
}

.oc-cta:hover {
	gap: 10px
}

.oc-cta svg {
	width: 12px;
	height: 12px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5
}

/* Transcription special */
.transcription-items {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.ti {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: .83rem;
	color: var(--g800)
}

.ti::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--blue);
	flex-shrink: 0
}

.transcription-rate {
	margin-top: 16px;
	background: linear-gradient(135deg, var(--blue), var(--blue-dark));
	border-radius: var(--r-md);
	padding: 16px 18px;
	color: #fff;
	text-align: center
}

.tr-rate-num {
	font-family: var(--serif);
	font-size: 2rem;
	display: block;
	line-height: 1
}

.tr-rate-desc {
	font-size: .76rem;
	opacity: .8;
	margin-top: 4px
}

/* ── FAQ ── */
.faq-section {
	background: var(--white)
}

.faq-hdr {
	text-align: center;
	max-width: 580px;
	margin: 0 auto 52px
}

.faq-hdr .section-sub {
	margin: 0 auto
}

.faq-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 960px;
	margin: 0 auto
}

.faq-item {
	border: 1.5px solid var(--g200);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: var(--tr)
}

.faq-item:hover {
	border-color: var(--blue)
}

.faq-q {
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	font-size: .92rem;
	font-weight: 700;
	color: var(--navy);
	gap: 12px
}

.faq-q svg {
	width: 18px;
	height: 18px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 2;
	flex-shrink: 0;
	transition: transform .3s
}

.faq-item.open .faq-q svg {
	transform: rotate(45deg)
}

.faq-a {
	padding: 0 24px;
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s ease, padding .3s ease;
	font-size: .87rem;
	color: var(--g600);
	line-height: 1.7
}

.faq-item.open .faq-a {
	max-height: 200px;
	padding: 0 24px 20px
}

/* ── STATS BAND ── */
.stats-band {
	background: var(--blue);
	padding: 52px 0
}

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

.stat-block {
	background: var(--blue);
	padding: 28px 24px;
	text-align: center;
	transition: var(--tr)
}

.stat-block:hover {
	background: var(--blue-dark)
}

.stat-num {
	font-family: var(--serif);
	font-size: 2.8rem;
	color: #fff;
	line-height: 1;
	font-weight: 600;
	display: block
}

.stat-lbl {
	font-size: .8rem;
	color: rgba(255, 255, 255, .7);
	margin-top: 7px;
	display: block;
	line-height: 1.4
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
	.plans-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.plan-card.featured {
		transform: none
	}

	.plan-card.featured:hover {
		transform: translateY(-6px)
	}

	.compare-head,
	.compare-group-hd,
	.compare-row {
		grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
		font-size: .8rem
	}

	.model-inner {
		grid-template-columns: 1fr;
		gap: 40px
	}

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

}

@media(max-width:768px) {
	.section {
		padding: 64px 0
	}

	.nav-menu.open {
		display: flex
	}

	.hamburger {
		display: flex
	}

	.plans-grid {
		grid-template-columns: 1fr
	}

	.plan-card.featured {
		transform: none
	}

	.other-grid {
		grid-template-columns: 1fr
	}

	.model-highlights {
		grid-template-columns: 1fr
	}

	.compare-wrap {
		overflow-x: auto
	}

	.compare-head,
	.compare-group-hd,
	.compare-row {
		min-width: 640px
	}
}

/* ── Specialties PAGE HERO ── */
.specialty.page-hero {
	position: relative;
	padding: 88px 0 80px;
	background: var(--navy);
	overflow: hidden
}

.specialty .hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('https://images.unsplash.com/photo-1551601651-2a8555f1a136?w=1600&q=80&auto=format&fit=crop&crop=center');
	background-size: cover;
	background-position: center;
	opacity: .13
}

.specialty .hero-ov {
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(10, 30, 53, .97) 0%, rgba(10, 30, 53, .85) 55%, rgba(0, 100, 160, .45) 100%)
}

.hero-dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1.5px, transparent 1.5px);
	background-size: 30px 30px
}

.hero-glow {
	position: absolute;
	top: -80px;
	right: -80px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 153, 203, .13) 0%, transparent 65%)
}

/* Specialty count chips */
.hero-spec-chips {
	display: flex;
	gap: 12px;
	flex-wrap: wrap
}

.hsc {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-md);
	padding: 14px 18px;
	transition: var(--tr);
	cursor: default
}

.hsc:hover {
	background: rgba(0, 153, 203, .14);
	border-color: rgba(0, 153, 203, .35)
}

.hsc-num {
	font-family: var(--serif);
	font-size: 1.5rem;
	color: #fff;
	line-height: 1;
	font-weight: 600
}

.hsc-text {
	font-size: .76rem;
	color: rgba(255, 255, 255, .5);
	line-height: 1.3
}

/* ── SEARCH + FILTER BAR ── */
.spec-filter-bar {
	background: var(--white);
	border-bottom: 1px solid var(--g200);
	padding: 20px 0;
	position: sticky;
	top: 74px;
	z-index: 100;
	box-shadow: var(--shadow-sm)
}

.sfb-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: space-between
}

.spec-search-wrap {
	display: flex;
	gap: 0;
	background: var(--g100);
	border: 1.5px solid var(--g200);
	border-radius: var(--r-md);
	overflow: hidden;
	flex: 1;
	max-width: 400px;
	transition: border-color .2s
}

.spec-search-wrap:focus-within {
	border-color: var(--blue)
}

.spec-search-wrap input {
	flex: 1;
	padding: 11px 16px;
	border: none;
	background: transparent;
	font-family: var(--sans);
	font-size: .88rem;
	color: var(--text);
	outline: none
}

.spec-search-wrap input::placeholder {
	color: var(--g400)
}

.spec-search-btn {
	padding: 11px 14px;
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center
}

.spec-search-btn svg {
	width: 15px;
	height: 15px;
	stroke: var(--g400);
	fill: none;
	stroke-width: 2.5;
	transition: stroke .2s
}

.spec-search-wrap:focus-within .spec-search-btn svg {
	stroke: var(--blue)
}

.cat-pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap
}

.cat-pill {
	padding: 8px 16px;
	border-radius: 100px;
	border: 1.5px solid var(--g200);
	font-size: .79rem;
	font-weight: 600;
	color: var(--g600);
	cursor: pointer;
	transition: var(--tr);
	background: var(--white);
	font-family: var(--sans)
}

.cat-pill:hover {
	border-color: var(--blue);
	color: var(--blue)
}

.cat-pill.active {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff
}

.spec-count-display {
	font-size: .82rem;
	color: var(--g400);
	white-space: nowrap
}

.spec-count-display span {
	color: var(--blue);
	font-weight: 700
}

/* ── TRUST BAND ── */
.trust-band {
	background: var(--white);
	border-bottom: 1px solid var(--g200);
	padding: 32px 0
}

.trust-band-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-left: 1px solid var(--g200)
}

.tb-item {
	padding: 24px 28px;
	border-right: 1px solid var(--g200);
	display: flex;
	align-items: flex-start;
	gap: 14px;
	transition: var(--tr)
}

.tb-item:hover {
	background: var(--blue-mist)
}

.tb-icon {
	width: 42px;
	height: 42px;
	border-radius: var(--r-sm);
	background: var(--blue-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.tb-icon svg {
	width: 20px;
	height: 20px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.8
}

.tb-title {
	font-size: .92rem;
	font-weight: 700;
	color: var(--navy)
}

.tb-sub {
	font-size: .77rem;
	color: var(--g400);
	margin-top: 2px
}

/* ── SPECIALTIES SECTION ── */
.specs-section {
	background: var(--g100)
}

/* Category section heading */
.cat-section {
	margin-bottom: 56px
}

.cat-section:last-child {
	margin-bottom: 0
}

.cat-heading {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--g200)
}

.cat-heading-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.cat-heading-icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke-width: 1.8
}

.cat-heading-label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 3px
}

.cat-heading-title {
	font-family: var(--serif);
	font-size: 1.35rem;
	color: var(--navy);
	font-weight: 600
}

.cat-heading-count {
	margin-left: auto;
	font-size: .78rem;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: 100px
}

/* Specialty cards grid */
.specs-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px
}

/* The specialty card */
.spec-card {
	background: var(--white);
	border-radius: var(--r-xl);
	border: 1.5px solid var(--g200);
	overflow: hidden;
	transition: var(--tr);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	position: relative
}

.spec-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	transform: scaleX(0);
	transition: transform .3s ease;
	transform-origin: left
}

.spec-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md)
}

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

.spec-card.surgical::before {
	background: var(--col-surgical)
}

.spec-card.primary::before {
	background: var(--col-primary)
}

.spec-card.cardio::before {
	background: var(--col-cardio)
}

.spec-card.neuro::before {
	background: var(--col-neuro)
}

.spec-card.musculo::before {
	background: var(--col-musculo)
}

.spec-card.womens::before {
	background: var(--col-womens)
}

.spec-card.other::before {
	background: var(--col-other)
}

.serv-col-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(422px, 2fr));
	gap: 28px
}

.sp-card {
	background: var(--g100);
	border-radius: var(--r-lg);
	padding: 36px;
}

.compliance-sec {
	background: var(--navy);
	position: relative;
	overflow: hidden
}

.compliance-sec .overlay {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .03) 1.5px, transparent 1.5px);
	background-size: 30px 30px
}

.compliance-sec .overlay2 {
	position: absolute;
	top: -100px;
	right: -100px;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 153, 203, .12) 0%, transparent 65%)
}

.comp-icon {
	width: 48px;
	height: 48px;
	background: rgba(0, 153, 203, .2);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px
}

/* Photo area */
.sc-img {
	aspect-ratio: 3/2;
	overflow: hidden;
	background: var(--g100);
	position: relative;
	flex-shrink: 0
}

.sc-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease
}

.spec-card:hover .sc-img img {
	transform: scale(1.07)
}

/* Category badge on image */
.sc-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 100px
}

.spec-card.surgical .sc-badge {
	background: var(--col-surgical-pale);
	color: var(--col-surgical)
}

.spec-card.primary .sc-badge {
	background: var(--col-primary-pale);
	color: var(--col-primary)
}

.spec-card.cardio .sc-badge {
	background: var(--col-cardio-pale);
	color: var(--col-cardio)
}

.spec-card.neuro .sc-badge {
	background: var(--col-neuro-pale);
	color: var(--col-neuro)
}

.spec-card.musculo .sc-badge {
	background: var(--col-musculo-pale);
	color: var(--col-musculo)
}

.spec-card.womens .sc-badge {
	background: var(--col-womens-pale);
	color: var(--col-womens)
}

.spec-card.other .sc-badge {
	background: var(--col-other-pale);
	color: var(--col-other)
}

/* Card body */
.sc-body {
	padding: 20px 20px 18px;
	flex: 1;
	display: flex;
	flex-direction: column
}

.sc-icon-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px
}

.sc-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: var(--tr)
}

.spec-card.surgical .sc-icon {
	background: var(--col-surgical-pale)
}

.spec-card.primary .sc-icon {
	background: var(--col-primary-pale)
}

.spec-card.cardio .sc-icon {
	background: var(--col-cardio-pale)
}

.spec-card.neuro .sc-icon {
	background: var(--col-neuro-pale)
}

.spec-card.musculo .sc-icon {
	background: var(--col-musculo-pale)
}

.spec-card.womens .sc-icon {
	background: var(--col-womens-pale)
}

.spec-card.other .sc-icon {
	background: var(--col-other-pale)
}

.spec-card.surgical:hover .sc-icon {
	background: var(--col-surgical)
}

.spec-card.primary:hover .sc-icon {
	background: var(--col-primary)
}

.spec-card.cardio:hover .sc-icon {
	background: var(--col-cardio)
}

.spec-card.neuro:hover .sc-icon {
	background: var(--col-neuro)
}

.spec-card.musculo:hover .sc-icon {
	background: var(--col-musculo)
}

.spec-card.womens:hover .sc-icon {
	background: var(--col-womens)
}

.spec-card.other:hover .sc-icon {
	background: var(--col-other)
}

.sc-icon svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke-width: 2;
	transition: stroke .25s
}

.spec-card.surgical .sc-icon svg {
	stroke: var(--col-surgical)
}

.spec-card.primary .sc-icon svg {
	stroke: var(--col-primary)
}

.spec-card.cardio .sc-icon svg {
	stroke: var(--col-cardio)
}

.spec-card.neuro .sc-icon svg {
	stroke: var(--col-neuro)
}

.spec-card.musculo .sc-icon svg {
	stroke: var(--col-musculo)
}

.spec-card.womens .sc-icon svg {
	stroke: var(--col-womens)
}

.spec-card.other .sc-icon svg {
	stroke: var(--col-other)
}

.spec-card:hover .sc-icon svg {
	stroke: #fff
}

.sc-arrow {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--g100);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--tr);
	flex-shrink: 0
}

.sc-arrow svg {
	width: 12px;
	height: 12px;
	stroke: var(--g400);
	fill: none;
	stroke-width: 2.5;
	transition: var(--tr)
}

.spec-card:hover .sc-arrow {
	background: var(--blue);
	transform: translateX(4px)
}

.spec-card:hover .sc-arrow svg {
	stroke: #fff
}

.sc-name {
	font-size: 1rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 6px;
	line-height: 1.3;
	transition: color .2s
}

.spec-card:hover .sc-name {
	color: var(--blue)
}

.sc-desc {
	font-size: .8rem;
	color: var(--g600);
	line-height: 1.6;
	flex: 1;
	margin-bottom: 14px
}

.sc-footer {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .76rem;
	font-weight: 600;
	padding-top: 12px;
	border-top: 1px solid var(--g200);
	transition: var(--tr)
}

.spec-card.surgical .sc-footer {
	color: var(--col-surgical)
}

.spec-card.primary .sc-footer {
	color: var(--col-primary)
}

.spec-card.cardio .sc-footer {
	color: var(--col-cardio)
}

.spec-card.neuro .sc-footer {
	color: var(--col-neuro)
}

.spec-card.musculo .sc-footer {
	color: var(--col-musculo)
}

.spec-card.womens .sc-footer {
	color: var(--col-womens)
}

.spec-card.other .sc-footer {
	color: var(--col-other)
}

.sc-footer svg {
	width: 11px;
	height: 11px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5;
	transition: transform .22s
}

.spec-card:hover .sc-footer svg {
	transform: translateX(4px)
}

/* Hidden cards for search/filter */
.spec-card.filtered-out {
	display: none
}

/* No results */
.no-results {
	text-align: center;
	padding: 80px 24px;
	display: none
}

.no-results.visible {
	display: block
}

.no-results-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--g100);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px
}

.no-results-icon svg {
	width: 28px;
	height: 28px;
	stroke: var(--g400);
	fill: none;
	stroke-width: 1.8
}

.no-results h3 {
	font-family: var(--serif);
	font-size: 1.4rem;
	color: var(--navy);
	margin-bottom: 10px
}

.no-results p {
	font-size: .9rem;
	color: var(--g600)
}

/* ── PAYER TYPES SECTION ── */
.payers {
	background: var(--white)
}

.payers-hdr {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 56px
}

.payers-hdr .section-sub {
	margin: 0 auto
}

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

.payer-card {
	background: var(--off-white);
	border: 1.5px solid var(--g200);
	border-radius: var(--r-lg);
	padding: 32px 28px;
	transition: var(--tr)
}

.payer-card:hover {
	border-color: var(--blue);
	background: var(--blue-mist);
	transform: translateY(-4px);
	box-shadow: var(--shadow-md)
}

.payer-icon {
	width: 50px;
	height: 50px;
	background: var(--blue-pale);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	transition: var(--tr)
}

.payer-card:hover .payer-icon {
	background: var(--blue)
}

.payer-icon svg {
	width: 24px;
	height: 24px;
	stroke: var(--blue);
	fill: none;
	stroke-width: 1.8;
	transition: stroke .25s
}

.payer-card:hover .payer-icon svg {
	stroke: #fff
}

.payer-card h3 {
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 10px
}

.payer-card p {
	font-size: .86rem;
	color: var(--g600);
	line-height: 1.65
}

/* ── ADD NEW SPECIALTY — SCALABILITY BANNER ── */
.scalability {
	background: var(--navy);
	padding: 52px 0;
	position: relative;
	overflow: hidden
}

.scalability::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1.5px, transparent 1.5px);
	background-size: 28px 28px
}

.scalability::after {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 153, 203, .12) 0%, transparent 65%)
}

.scalability-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: center
}

.scalability-text {}

.scalability-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6dd6f0;
	margin-bottom: 14px
}

.scalability-label::before {
	content: '';
	display: block;
	width: 24px;
	height: 2px;
	background: #6dd6f0;
	border-radius: 2px
}

.scalability-title {
	font-family: var(--serif);
	font-size: clamp(1.6rem, 2.8vw, 2.3rem);
	color: #fff;
	font-weight: 600;
	margin-bottom: 10px
}

.scalability-sub {
	font-size: .92rem;
	color: rgba(255, 255, 255, .55);
	max-width: 520px;
	line-height: 1.72
}

.scalability-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-end;
	flex-shrink: 0
}

.scalability-note {
	font-size: .75rem;
	color: rgba(255, 255, 255, .35);
	text-align: right;
	margin-top: 4px
}

/* ── STATS BAND ── */
.stats-band {
	background: var(--blue);
	padding: 48px 0
}

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

.stat-block {
	background: var(--blue);
	padding: 26px 24px;
	text-align: center;
	transition: var(--tr)
}

.stat-block:hover {
	background: var(--blue-dark)
}

.stat-num {
	font-family: var(--serif);
	font-size: 2.6rem;
	color: #fff;
	line-height: 1;
	font-weight: 600;
	display: block
}

.stat-lbl {
	font-size: .78rem;
	color: rgba(255, 255, 255, .7);
	margin-top: 7px;
	display: block;
	line-height: 1.4
}


/* ── RESPONSIVE ── */
@media(max-width:1024px) {
	.specs-grid {
		grid-template-columns: repeat(3, 1fr)
	}

	.trust-band-inner {
		grid-template-columns: repeat(2, 1fr)
	}

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

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

	.hero-spec-chips {
		flex-direction: row;
		flex-wrap: wrap
	}

	.scalability-inner,
	.cta-inner {
		grid-template-columns: 1fr;
		text-align: center
	}

	.scalability-actions,
	.cta-actions {
		align-items: center
	}

}

@media(max-width:768px) {

	.hamburger {
		display: flex
	}

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

	.payers-grid {
		grid-template-columns: 1fr
	}

	.trust-band-inner {
		grid-template-columns: 1fr
	}

	.sfb-inner {
		flex-direction: column;
		align-items: flex-start
	}

	.spec-search-wrap {
		max-width: 100%;
		width: 100%
	}

	.spec-filter-bar {
		position: static
	}

}

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

/* ── Single Specialty ── */
.sspage.page-hero {
	position: relative;
	min-height: 80vh;
	display: flex;
	align-items: center;
	background: var(--navy);
	overflow: hidden
}

.sspage .hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('https://images.unsplash.com/photo-1559757175-5700dde675bc?w=1600&q=80&auto=format&fit=crop');
	background-size: cover;
	background-position: center;
	opacity: .15
}

.sspage .hero-content {
	max-width: 880px;
}


/* Specialty badge */
.spec-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(220, 38, 38, .15);
	border: 1px solid rgba(220, 38, 38, .3);
	color: #fca5a5;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 7px 16px;
	border-radius: 100px;
	margin-bottom: 24px
}

.spec-badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	flex-shrink: 0;
	animation: pulse 2.2s ease infinite
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1)
	}

	50% {
		opacity: .35;
		transform: scale(.65)
	}
}


/* Hero stat chips */
.hero-chips {
	display: flex;
	gap: 14px;
	flex-wrap: wrap
}

.hero-chip {
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-md);
	padding: 16px 20px;
	transition: var(--tr);
	min-width: 130px
}

.hero-chip:hover {
	background: rgba(220, 38, 38, .12);
	border-color: rgba(220, 38, 38, .3);
	transform: translateY(-2px)
}

.chip-num {
	font-family: var(--serif);
	font-size: 1.8rem;
	color: #fff;
	line-height: 1;
	display: block
}

.chip-label {
	font-size: .74rem;
	color: rgba(255, 255, 255, .5);
	margin-top: 4px;
	display: block;
	line-height: 1.35
}

/* Hero visual */
.hero-visual {
	position: relative
}

.hero-img-card {
	border-radius: var(--r-xl);
	overflow: hidden;
	aspect-ratio: 4/3;
	background: var(--navy-light);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .35)
}

.hero-img-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .8
}

.hero-img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 30, 53, .5) 0%, transparent 60%)
}

/* Float card over image */
.hero-float {
	position: absolute;
	bottom: -16px;
	left: -20px;
	background: var(--white);
	border-radius: var(--r-md);
	padding: 18px 22px;
	box-shadow: var(--shadow-lg);
	border-left: 4px solid var(--accent)
}

.hf-num {
	font-family: var(--serif);
	font-size: 1.8rem;
	color: var(--accent);
	font-weight: 600
}

.hf-txt {
	font-size: .76rem;
	color: var(--g600);
	margin-top: 3px;
	line-height: 1.4
}

/* ── OVERVIEW ── */
.overview {
	background: var(--g100)
}

.overview-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center
}

.overview-img-wrap {
	position: relative
}

.dot-pattern {
	position: absolute;
	top: -24px;
	left: -24px;
	width: 120px;
	height: 120px;
	background-image: radial-gradient(circle, var(--accent-pale) 1.5px, transparent 1.5px);
	background-size: 16px 16px;
	border-radius: var(--r-md);
	z-index: -1
}

.overview-img {
	width: 100%;
	border-radius: var(--r-xl);
	overflow: hidden;
	aspect-ratio: 4/5;
	background: var(--g200);
	box-shadow: var(--shadow-lg)
}

.overview-img img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.overview-float {
	position: absolute;
	bottom: -0px;
	right: -20px;
	background: var(--accent);
	color: #fff;
	border-radius: var(--r-lg);
	padding: 22px 26px;
	box-shadow: var(--shadow-md);
	text-align: center;
	min-width: 155px
}

.of-num {
	font-family: var(--serif);
	font-size: 2.8rem;
	line-height: 1;
	display: block
}

.of-txt {
	font-size: .76rem;
	opacity: .85;
	margin-top: 4px;
	font-weight: 500;
	line-height: 1.4
}

.overview-content {}

.overview-body {
	font-size: 1rem;
	color: var(--g600);
	line-height: 1.8;
	margin-bottom: 28px
}

.overview-points {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 32px
}

.ov-point {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 18px 20px;
	background: var(--white);
	border-radius: var(--r-md);
	border-left: 3px solid var(--accent);
	transition: var(--tr)
}

.ov-point:hover {
	background: var(--accent-pale);
	transform: translateX(4px)
}

.ov-icon {
	width: 34px;
	height: 34px;
	background: var(--accent-pale);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.ov-icon svg {
	width: 16px;
	height: 16px;
	stroke: var(--accent);
	fill: none;
	stroke-width: 2
}

.ov-title {
	font-size: .92rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 2px
}

.ov-desc {
	font-size: .82rem;
	color: var(--g600);
	line-height: 1.55
}

/* ── EXPERTISE STATS ── */
.expertise-band {
	background: var(--navy);
	padding: 52px 0;
	position: relative;
	overflow: hidden
}

.expertise-band::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1.5px, transparent 1.5px);
	background-size: 28px 28px
}

.expertise-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, .08)
}

.exp-block {
	background: var(--navy);
	padding: 36px 28px;
	text-align: center;
	transition: var(--tr)
}

.exp-block:hover {
	background: rgba(255, 255, 255, .04)
}

.exp-num {
	font-family: var(--serif);
	font-size: 3rem;
	color: #fff;
	line-height: 1;
	font-weight: 600;
	display: block
}

.exp-label {
	font-size: .8rem;
	color: rgba(255, 255, 255, .55);
	margin-top: 8px;
	display: block;
	line-height: 1.4
}

.exp-sub {
	font-size: .68rem;
	color: var(--accent);
	margin-top: 6px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	display: block
}

/* ── RELATED SPECIALTIES ── */
.related-section {
	background: var(--g100)
}

.rel-hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
	flex-wrap: wrap;
	gap: 16px
}

.rel-hdr h2 {
	font-family: var(--serif);
	font-size: 1.8rem;
	color: var(--navy);
	font-weight: 600
}

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

.rel-spec-card {
	background: var(--white);
	border: 1.5px solid var(--g200);
	border-radius: var(--r-xl);
	padding: 28px 22px;
	transition: var(--tr);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-decoration: none;
	position: relative;
	overflow: hidden
}

.rel-spec-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	transform: scaleX(0);
	transition: transform .3s ease;
	transform-origin: left
}

.rel-spec-card.primary::before {
	background: #16a34a
}

.rel-spec-card.neuro::before {
	background: #7c3aed
}

.rel-spec-card.musculo::before {
	background: #d97706
}

.rel-spec-card.other::before {
	background: #0891b2
}

.rel-spec-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-md)
}

.rel-spec-card:hover::before {
	transform: scaleX(1)
}

.rel-spec-card.primary:hover {
	border-color: #16a34a
}

.rel-spec-card.neuro:hover {
	border-color: #7c3aed
}

.rel-spec-card.musculo:hover {
	border-color: #d97706
}

.rel-spec-card.other:hover {
	border-color: #0891b2
}

.rel-icon {
	width: 46px;
	height: 46px;
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	flex-shrink: 0
}

.rel-spec-card.primary .rel-icon {
	background: #dcfce7
}

.rel-spec-card.neuro .rel-icon {
	background: #ede9fe
}

.rel-spec-card.musculo .rel-icon {
	background: #fef3c7
}

.rel-spec-card.other .rel-icon {
	background: #cffafe
}

.rel-icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke-width: 1.8
}

.rel-spec-card.primary .rel-icon svg {
	stroke: #16a34a
}

.rel-spec-card.neuro .rel-icon svg {
	stroke: #7c3aed
}

.rel-spec-card.musculo .rel-icon svg {
	stroke: #d97706
}

.rel-spec-card.other .rel-icon svg {
	stroke: #0891b2
}

.rel-spec-name {
	font-size: 1rem;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 6px;
	line-height: 1.3;
	transition: color .2s
}

.rel-spec-card:hover .rel-spec-name {
	color: inherit
}

.rel-spec-card.primary:hover .rel-spec-name {
	color: #16a34a
}

.rel-spec-card.neuro:hover .rel-spec-name {
	color: #7c3aed
}

.rel-spec-card.musculo:hover .rel-spec-name {
	color: #d97706
}

.rel-spec-card.other:hover .rel-spec-name {
	color: #0891b2
}

.rel-spec-desc {
	font-size: .82rem;
	color: var(--g600);
	line-height: 1.55;
	flex: 1;
	margin-bottom: 16px
}

.rel-link {
	font-size: .78rem;
	font-weight: 700;
	color: var(--blue);
	display: flex;
	align-items: center;
	gap: 5px;
	transition: gap .2s
}

.rel-spec-card:hover .rel-link {
	gap: 9px
}

.rel-link svg {
	width: 11px;
	height: 11px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5
}


/* ── RESPONSIVE ── */
@media(max-width:1024px) {

	.hero-layout,
	.overview-grid,
	.why-grid,
	.faq-inner {
		grid-template-columns: 1fr;
		gap: 48px
	}

	.hero-visual,
	.why-img-wrap {
		display: none
	}

	.trust-band-inner {
		grid-template-columns: repeat(2, 1fr)
	}

	.ch-grid,
	.si-grid,
	.testi-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.process-steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px
	}

	.process-steps::before {
		display: none
	}

	.expertise-inner {
		grid-template-columns: repeat(2, 1fr)
	}

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

	.why-benefits {
		grid-template-columns: 1fr 1fr
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}

	.cta-inner {
		grid-template-columns: 1fr;
		text-align: center
	}

	.cta-actions {
		align-items: center
	}
}

@media(max-width:768px) {
	.section {
		padding: 64px 0
	}

	.nav-menu {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 74px;
		left: 0;
		right: 0;
		background: #fff;
		padding: 16px;
		box-shadow: var(--shadow-md);
		z-index: 100
	}

	.nav-menu.open {
		display: flex
	}

	.hamburger {
		display: flex
	}

	.ch-grid,
	.si-grid,
	.testi-grid,
	.rel-grid {
		grid-template-columns: 1fr
	}

	.why-benefits {
		grid-template-columns: 1fr
	}

	.process-steps {
		grid-template-columns: 1fr 1fr
	}

	.trust-band-inner {
		grid-template-columns: 1fr
	}

	.expertise-inner {
		grid-template-columns: 1fr 1fr
	}

	.footer-grid {
		grid-template-columns: 1fr
	}

	.topbar {
		display: none
	}

	.faq-contact-card {
		position: static
	}
}