/* ================================
   KNM Finance — Global Styles
   Fonts: Manrope + Inter
   Palette: #3E4A56, #E8EBEE, #1A1A1A, #707981, #FFFFFF
   ================================ */

:root {
	--knm-primary: #3e4a56;
	--knm-light: #e8ebee;
	--knm-text: #1a1a1a;
	--knm-white: #ffffff;
	--knm-muted: #707981;
}

/* Typography base */
body {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	color: var(--knm-text);
	background: #fff;
}
a {
	text-decoration: none;
}
.manrope {
	font-family: Manrope, Inter, sans-serif;
}

/*MARK: Header */
.topbar {
	border-bottom: 1px solid #e7ebef;
	background: #fff;
}
.brand-mark {
	height: 34px;
}
.nav-link {
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #111;
}
.nav-link:hover {
	color: var(--knm-primary);
}
/* sections linked via #hash won't hide under sticky navbar */
[id] {
	scroll-margin-top: 84px;
} /* adjust if your navbar height changes */

/* make the navbar logo bigger */
.brand-mark {
	height: 44px; /* was 34px */
	width: auto; /* keep aspect ratio */
	display: block; /* remove baseline gap */
}

/*sticky nav*/
.topbar {
	border-bottom: 1px solid #e7ebef;
	background: #fff;
	z-index: 1030; /* stay above content */
}
.nav-shadow {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* even bigger on desktop */
@media (min-width: 992px) {
	.brand-mark {
		height: 52px;
	}
}

/* optional: tighten navbar vertical padding so it stays neat */
.navbar {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

/*MARK: Hero */
.section-hero {
	padding: 72px 0 56px;
}
.hero-title {
	font: 700 clamp(32px, 5.4vw, 80px) / 1.05 Manrope, sans-serif;
	color: var(--knm-primary);
	margin-bottom: 8px;
}
.hero-sub {
	color: #4a5560;
	margin-bottom: 22px;
}
/* square buttons + perfectly centered text */
.btn-cta {
	border-radius: 0 !important; /* remove rounded corners */
	display: inline-flex; /* keep flex centering */
	align-items: center;
	justify-content: center;
	text-align: center; /* ensure text is centered */
}

.btn-primary-knm {
	border-radius: 0;
	background: var(--knm-primary);
	color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
}
.btn-primary-knm:hover {
	background: #1a1a1a;
	color: #fff;
}
.btn-outline-knm {
	border-radius: 0;
	border: 2px solid var(--knm-primary);
	color: var(--knm-primary);
	background: #fff;
	font-weight: 600;
}
.btn-outline-knm:hover {
	background: var(--knm-light);
}
.btn-gap > * + * {
	margin-left: 12px;
}
/* Bigger, square, perfectly centered CTAs */
.btn-gap {
	display: flex;
	align-items: center;
	gap: 16px; /* replaces the margin-left hack */
	flex-wrap: wrap; /* nice on smaller screens */
}

.btn-cta {
	border-radius: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1; /* keeps text centered vertically */
	min-width: 260px; /* makes them feel substantial */
	height: 60px; /* ↑ height */
	padding: 0 40px; /* ↑ horizontal padding */
	font-size: 18px; /* ↑ text size */
	font-weight: 700; /* bolder label */
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

/* Variants keep the square look */
.btn-primary-knm {
	border-radius: 0 !important;
	background: var(--knm-primary);
	color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
}
.btn-primary-knm:hover {
	background: #1a1a1a;
	color: #fff;
}

.btn-outline-knm {
	border-radius: 0 !important;
	border: 2px solid var(--knm-primary);
	color: var(--knm-primary);
	background: #fff;
	font-weight: 700; /* match primary weight */
}
.btn-outline-knm:hover {
	background: var(--knm-light);
}

/* Mobile/tablet sizing */
@media (max-width: 991.98px) {
	.btn-cta {
		width: 100%;
		max-width: 360px; /* keeps them tidy on small screens */
		height: 56px;
		font-size: 16px;
		padding: 0 28px;
	}
}

.hero-img {
	width: 80%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
/* ===== Mobile/tablet centering ===== */
@media (max-width: 991.98px) {
	/* center the hero text block */
	.section-hero .col-lg-7 {
		text-align: center;
	}

	/* center the buttons row */
	.btn-gap {
		justify-content: center; /* puts both buttons in the middle */
		width: 100%;
	}

	/* make image full-width and centered */
	.hero-img {
		display: block;
		margin: 16px auto 0; /* centers horizontally */
		width: 100%;
		max-width: 420px; /* keeps it elegant on small screens */
	}
}

/* ================================
   MARK: Hero image — smaller on mobile
   ================================ */
@media (max-width: 768px) {
	.hero-img {
		max-width: 340px; /* was 420px */
		width: 85%; /* keep it responsive */
	}
	.section-hero {
		padding: 56px 0 44px; /* a bit tighter so it feels balanced */
	}
}

@media (max-width: 576px) {
	.hero-img {
		max-width: 300px; /* even smaller on phones */
		width: 82%;
	}
}

/* ================================
   MARK: SERVICES SECTION (KNM Finance)
   Equal card size + centered compact lists
   ================================ */

.section-services {
	background: var(--knm-primary);
	color: #fff;
	padding: 54px 0 70px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.section-services .lead {
	color: var(--knm-light);
}

.svc-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.25);
	margin: 14px 0 26px;
}

/* === Layout Grid === */
.section-services .row > [class*="col-"] {
	display: flex;
	align-items: stretch;
	justify-content: center;
}

/* === Service Card === */
.svc-card {
	background: #ffffff;
	color: #2b333a;
	border-radius: 12px;
	padding: 22px 18px;
	width: 100%;
	max-width: 290px; /* fixed consistent width */
	min-height: 420px; /* fixed consistent height */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* === Image === */
.svc-image {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin: 0 auto 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* === Title === */
.svc-title {
	font: 700 16px/1.3 Manrope, sans-serif;
	color: #111;
	margin: 8px 0 8px; /* tighter space above and below */
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

/* === List === */
.svc-card ul {
	list-style: disc;
	list-style-position: inside;
	margin: 4px 0 0;
	padding: 0;
	text-align: center;
	flex-grow: 1; /* keeps list vertically centered */
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* top-align inside card for cleaner spacing */
}

.svc-card li {
	font-size: 14.5px;
	color: #505a63;
	margin: 3px 0; /* reduced gap between items */
	line-height: 1.35; /* tighter line height */
}

.svc-card li::marker {
	color: var(--knm-primary);
}

/* === Fade-in Animation === */
.fade-on-scroll {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.9s ease, transform 0.9s ease;
}
.fade-on-scroll.show {
	opacity: 1;
	transform: translateY(0);
}

/* === Responsive Tweaks === */
@media (max-width: 1200px) {
	.svc-card {
		max-width: 260px;
		min-height: 400px;
	}
}

@media (max-width: 991.98px) {
	.section-services {
		padding: 48px 0;
	}
	.svc-card {
		max-width: 300px;
		min-height: 380px;
		margin: 0 auto;
	}
	.svc-image {
		width: 130px;
		height: 130px;
	}
}

@media (max-width: 576px) {
	.svc-card {
		max-width: 100%;
		min-height: 360px;
		padding: 18px;
	}
	.svc-image {
		width: 110px;
		height: 110px;
	}
}

/* === Accessibility: Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
	.fade-on-scroll {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.svc-card:hover {
		transform: none;
	}
}

/* ================================
   MARK: ABOUT US (official text version)
   ================================ */

.section-about {
	background: #f6f8fb;
	padding: 64px 0 86px;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.about-head {
	margin-bottom: 24px;
}

.about-badge {
	width: 60px;
	height: 56px;
	opacity: 0.9;
	animation: badgeFloat 6s ease-in-out infinite;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

@keyframes badgeFloat {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

/* Grid layout */
.about-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 28px;
	align-items: center;
}

/* Left image */
.about-media {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	background: #e0e6ee;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}
.about-media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Text card */
.about-card {
	position: relative;
	background: #ffffff;
	border-radius: 12px;
	padding: 28px 32px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
	border-left: 6px solid var(--knm-primary);
}

.about-card p {
	font-size: 16.5px;
	color: #1a1a1a;
	line-height: 1.55;
	margin: 0 0 14px;
}
.about-card p:last-child {
	margin-bottom: 0;
}

/* Trust stats */
.about-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 24px;
	padding: 0;
	list-style: none;
}
.about-stats li {
	background: #f5f7fa;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 10px;
	padding: 14px 12px;
	text-align: center;
}
.about-stats strong {
	display: block;
	font: 800 22px/1 Manrope, sans-serif;
	color: #111;
}
.about-stats span {
	color: #5b6570;
	font-size: 13.5px;
}

/* Fade-in animation */
.reveal-about {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-about.show {
	opacity: 1;
	transform: none;
}

/* Responsive */
@media (max-width: 992px) {
	.section-about {
		padding: 54px 0 72px;
	}
	.about-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.about-badge {
		width: 52px;
		height: 48px;
	}
}
@media (max-width: 576px) {
	.about-card {
		padding: 22px;
	}
	.about-card p {
		font-size: 15.5px;
		line-height: 1.5;
	}
	.about-stats {
		grid-template-columns: 1fr 1fr;
	}
}
/* Mobile: 2 columns; last item spans both = centered row */
@media (max-width: 576px) {
	.about-stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.about-stats li:last-child {
		grid-column: 1 / -1; /* span both columns */
	}
}

/* ================================
   MARK: RESULTS (matches Services color, improved spacing)
   ================================ */
.section-results {
	background: var(--knm-primary);
	color: #fff;
	padding: 80px 0 90px; /* increased vertical space */
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.section-results .results-lead {
	color: var(--knm-light);
	margin-bottom: 26px; /* more room under subtitle */
}

/* Grid */
.results-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px; /* was 14px — adds more breathing space between cards */
}

/* KPI card */
.kpi-card {
	background: #ffffff;
	color: #2b333a;
	border-radius: 14px;
	padding: 26px 20px; /* more inner spacing */
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.kpi-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 30px rgba(0, 0, 0, 0.14);
}

/* Big number + accent ring */
.kpi {
	display: flex;
	align-items: center;
	gap: 16px; /* adds space between circle and number */
}

.kpi-number {
	position: relative;
	display: inline-block;
	font: 800 32px/1 Manrope, sans-serif;
	color: #111;
	padding-left: 32px; /* was 16px — gives more room for the circle */
}

.kpi-number::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 3px var(--knm-primary);
	opacity: 0.9;
}

/* Text */
.kpi-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #505a63;
}

/* Responsive */
@media (max-width: 1200px) {
	.results-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}
@media (max-width: 576px) {
	.results-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.section-results {
		padding: 70px 0 80px;
	}
	.kpi-number {
		font-size: 28px;
	}
}

/* ================================
   MARK: COMMITMENT (white section)
   ================================ */
.section-commitment {
	background: #ffffff; /* same as main */
	padding: 72px 0 90px;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.commit-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 28px;
	align-items: center;
}

/* Left copy */
.commit-copy {
	position: relative;
	padding-left: 18px; /* room for accent bar */
}
.commit-copy::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35rem;
	width: 6px;
	height: 44px;
	background: var(--knm-primary);
	border-radius: 3px;
	opacity: 0.95;
}

.commit-kicker {
	display: inline-block;
	font: 700 12px/1 Manrope, sans-serif;
	letter-spacing: 0.16em;
	color: var(--knm-primary);
	background: #eef2f6;
	padding: 6px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.commit-title {
	font: 800 clamp(22px, 3.2vw, 34px) / 1.15 Manrope, sans-serif;
	color: #111;
	margin: 4px 0 10px;
}

.section-commitment p {
	color: #1a1a1a;
	font-size: 16.5px;
	line-height: 1.6;
	margin: 0;
	max-width: 56ch;
}

/* Right image */
.commit-media {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	background: #f1f4f7;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
	position: relative;
	isolation: isolate;
}
.commit-media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* subtle floating badge (optional, looks nice with your brand) */
.commit-media::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
	border-radius: 14px;
	pointer-events: none;
}

/* Reuse fade-on-scroll timing */
.section-commitment .fade-on-scroll {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.section-commitment .fade-on-scroll.show {
	opacity: 1;
	transform: none;
}

/* Responsive */
@media (max-width: 992px) {
	.section-commitment {
		padding: 56px 0 76px;
	}
	.commit-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.commit-copy {
		padding-left: 14px;
	}
	.commit-copy::before {
		height: 36px;
	}
}

@media (max-width: 576px) {
	.section-commitment p {
		font-size: 15.5px;
		line-height: 1.55;
	}
}
/* ================================
   MARK: TESTIMONIALS (KNM — full rewrite)
   ================================ */

.section-testimonials {
	background: var(--knm-primary); /* same dark tone as Services */
	color: #fff;
	padding: 80px 0 96px; /* generous breathing room */
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.section-testimonials h2 {
	margin: 0 0 18px;
}

.testi-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px; /* space between cards */
}

/* ===== Testimonial Card ===== */
.quote-card {
	background: #ffffff;
	color: #2b333a;
	border-radius: 14px;
	padding: 24px 22px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	isolation: isolate;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.quote-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 32px rgba(0, 0, 0, 0.16);
}

/* Decorative quote (simple + cross-browser) */
.quote-card blockquote {
	margin: 0;
	font-size: 16.2px;
	line-height: 1.55;
	color: #1a1a1a;
	position: relative;
	padding-left: 36px; /* room for the opening quote */
}

.quote-card blockquote::before {
	content: "“";
	position: absolute;
	left: 0;
	top: -6px;
	font-family: Georgia, serif;
	font-size: 52px;
	line-height: 1;
	color: var(--knm-primary);
	opacity: 0.3;
}

/* Author / attribution */
.quote-card figcaption {
	font-size: 13.5px;
	color: #5b6570;
	margin-top: 2px;
}

/* Optional subtle divider above figcaption */
.quote-card figcaption::before {
	content: "";
	display: block;
	height: 1px;
	background: rgba(0, 0, 0, 0.06);
	margin: 6px 0 10px;
}

/* ===== Fade-on-scroll integration (reuse your JS) ===== */
.section-testimonials .fade-on-scroll {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.section-testimonials .fade-on-scroll.show {
	opacity: 1;
	transform: none;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
	.testi-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 768px) {
	.section-testimonials {
		padding: 70px 0 84px;
	}
	.quote-card {
		padding: 22px 18px;
	}
	.quote-card blockquote {
		font-size: 15.8px;
	}
}

@media (max-width: 576px) {
	.testi-grid {
		grid-template-columns: 1fr; /* single column on phones */
		gap: 16px;
	}
	.quote-card blockquote {
		padding-left: 32px;
	}
	.quote-card blockquote::before {
		top: -4px;
		font-size: 46px;
	}
}

/* ===== Reduced Motion (accessibility) ===== */
@media (prefers-reduced-motion: reduce) {
	.quote-card:hover {
		transform: none;
	}
	.section-testimonials .fade-on-scroll {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ================================
   MARK: STICKY CONTACT ICONS — Final Clean
   ================================ */

.contact-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 72px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 200px;
	z-index: 1040;

	/* Frosted glass + soft divider */
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* Circle buttons */
.contact-dock a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: #3e4a56;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	transition: all 0.35s ease;
	animation: dockPulse 2.4s ease-in-out infinite;
}

/* Alternate pulse timing for a breathing rhythm */
.contact-dock a:nth-child(2) {
	animation-delay: 1.2s;
}

/* Hover lift (pauses pulse while hovering) */
.contact-dock a:hover {
	transform: translateY(-5px);
	background: #4b5a68;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), 0 0 10px rgba(62, 74, 86, 0.3);
	animation-play-state: paused;
}

/* Icons */
.dock-icon {
	width: 30px;
	height: 30px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	transition: transform 0.3s ease;
}
.contact-dock a:hover .dock-icon {
	transform: scale(1.15);
}

/* Pulse keyframes (defined ONCE) */
@keyframes dockPulse {
	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	}
	50% {
		transform: scale(1.08);
		box-shadow: 0 8px 22px rgba(62, 74, 86, 0.35);
	}
}

/* Responsive tweaks */
@media (max-width: 768px) {
	.contact-dock {
		height: 64px;
		gap: 160px;
		backdrop-filter: blur(8px);
	}
	.contact-dock a {
		width: 54px;
		height: 54px;
	}
	.dock-icon {
		width: 26px;
		height: 26px;
	}
}
@media (max-width: 480px) {
	.contact-dock {
		height: 60px;
		gap: 140px;
	}
	.contact-dock a {
		width: 50px;
		height: 50px;
	}
	.dock-icon {
		width: 24px;
		height: 24px;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.contact-dock a {
		animation: none !important;
	}
}

/* ================================
   CONTACT SECTION (copy-only padding)
   ================================ */
.section-contact {
	background: #fff;
	color: var(--knm-text);
	padding: 64px 0 120px; /* extra bottom: clear of dock */
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.contact-kicker {
	display: inline-block;
	font: 700 12px/1 Manrope, sans-serif;
	letter-spacing: 0.16em;
	color: var(--knm-primary);
	background: #eef2f6;
	padding: 6px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.contact-sub {
	color: #5b6570;
	max-width: 62ch;
	margin: 6px auto 0;
}
@media (max-width: 576px) {
	.section-contact {
		padding-bottom: 110px;
	}
}

/* ================================
   FLOATING DOCK HINT (arrow + chip)
   ================================ */
.dock-hint {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 92px; /* above the dock */
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #101418;
	color: #fff;
	padding: 10px 14px;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.08);
	z-index: 1200;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.dock-hint .hint-text {
	font: 700 12.5px/1 Manrope, sans-serif;
	letter-spacing: 0.04em;
	opacity: 0.9;
}
.dock-hint .hint-arrow {
	opacity: 0.95;
	animation: hintBounce 1.2s ease-in-out infinite;
}
.dock-hint.is-visible {
	opacity: 1;
	transform: translate(-50%, -4px);
	pointer-events: auto;
}

@keyframes hintBounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(6px);
	}
}

@media (max-width: 576px) {
	.dock-hint {
		bottom: 86px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.dock-hint .hint-arrow {
		animation: none;
	}
}

/* ================================
   MARK: FOOTER — KNM Finance
   ================================ */

.section-footer {
	background: #f8fafc; /* light neutral tone (same as contact dock) */
	color: var(--knm-text);
	padding: 48px 0 56px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	text-align: center;
}

.footer-divider {
	width: 80px;
	height: 2px;
	background: var(--knm-primary);
	opacity: 0.7;
	margin: 0 auto 18px;
	border-radius: 2px;
}

.footer-text {
	font-size: 15px;
	margin-bottom: 8px;
	color: #555d66;
}

.footer-credit {
	font-size: 14px;
	color: #7a858f;
	letter-spacing: 0.3px;
}

.footer-credit a {
	color: var(--knm-primary);
	text-decoration: none;
	font-weight: 700;
	transition: color 0.25s ease;
}

.footer-credit a:hover {
	color: #1a1a1a;
}

/* Subtle fade-in reuse */
.section-footer .fade-on-scroll {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.9s ease, transform 0.9s ease;
}
.section-footer .fade-on-scroll.show {
	opacity: 1;
	transform: none;
}

/* Small screen spacing */
@media (max-width: 576px) {
	.section-footer {
		padding: 40px 0 50px;
	}
	.footer-text,
	.footer-credit {
		font-size: 14px;
	}
}
/* === Hero layout fix (image right on desktop, centered on mobile) === */
.section-hero .col-lg-5 {
	display: flex;
	justify-content: flex-end; /* push picture to the right on lg+ */
	align-items: center;
}

/* Replace older .hero-img sizing with this more robust set */
.hero-img {
	max-width: 560px; /* nice cap on large screens */
	width: 100%; /* responsive */
	height: auto; /* keep aspect ratio */
	aspect-ratio: 2 / 3; /* 960 x 1440; helps prevent CLS */
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Mobile/tablet: center the image column and the image */
@media (max-width: 991.98px) {
	.section-hero .col-lg-5 {
		justify-content: center; /* center picture on small screens */
	}
	.section-hero .col-lg-7 {
		text-align: center; /* keep text centered (you already had this) */
	}
}