/* =========================================================
   HelloSuggest — custom design system
   (navy #022169 + red #E4022B + white #ffffff,
   Bricolage/Manrope)
   ========================================================= */

:root {
	--primary-color: #E4022B;
	--secondary-color: #022169;
	--black-100: #022169;
	--black-200: #022169;
	--black-300: #022169;
	--background: #ffffff;
	--subtitle: rgb(119, 119, 125);
	--bricolage: "Bricolage Grotesque", sans-serif;
	--manrope: "Manrope", sans-serif;
	--shadow-btn: 0 4px 0 0 rgba(0, 0, 0, 0.25);
}

/* ---------------- Base ---------------- */
html { scroll-behavior: smooth; }
body {
	font-family: var(--manrope);
	font-size: 16px;
	line-height: 30px;
	color: var(--black-100);
	background: var(--background);
	overflow-x: hidden;
	padding-top: 86px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--bricolage);
	color: var(--black-100);
	font-weight: 600;
}
a { color: var(--primary-color); transition: color 0.3s ease; }
a:hover { color: var(--black-100); text-decoration: none; }
img { max-width: 100%; height: auto; }
.img-fluid { max-width: 100%; height: auto; }
::selection { background: var(--primary-color); color: #fff; }
[id] { scroll-margin-top: 96px; }
.container { max-width: 1200px; }

/* ---------------- Header / Nav ---------------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: var(--background);
	padding: 20px 0;
	transition: padding 0.4s ease, box-shadow 0.4s ease;
}
.site-header.scrolled {
	padding: 10px 0;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.brand {
	font-family: var(--bricolage);
	font-weight: 700;
	font-size: 27px;
	letter-spacing: -0.5px;
	color: var(--black-100);
	white-space: nowrap;
}
.brand span { color: var(--primary-color); }
.brand:hover { color: var(--black-100); }

.site-nav ul {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 6px;
	border-radius: 50px;
}
.site-nav .menu-link {
	display: block;
	padding: 10px 17px;
	border-radius: 50px;
	color: var(--black-100);
	font-size: 15px;
	font-weight: 600;
	transition: color 0.3s ease;
}
.site-nav .menu-link:hover,
.site-nav .menu-link.active { color: var(--primary-color); }
.header-cta { margin-left: 4px; }

.header-toggle {
	display: none;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	color: var(--black-100);
	user-select: none;
}

/* ---------------- Services dropdown ---------------- */
.menu-item-has-children { position: relative; }
.menu-item-has-children .menu-link { display: flex; align-items: center; gap: 4px; }
.hs-caret { font-size: 14px; transition: transform 0.3s ease; }
.menu-item-has-children.open .hs-caret { transform: rotate(180deg); }

.hs-dropdown {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	transform: translateY(8px);
	min-width: 820px;
	max-width: min(960px, calc(100vw - 32px));
	background: var(--black-300);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 22px;
	padding: 16px;
	box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
	z-index: 1200;
}
.menu-item-has-children:hover .hs-dropdown,
.menu-item-has-children.open .hs-dropdown,
.menu-item-has-children:focus-within .hs-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 26px;
}
.hs-dropdown-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
}
.hs-drop-link {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 11px 13px;
	border-radius: 14px;
	color: #dedede;
	transition: background 0.25s ease, color 0.25s ease;
}
.hs-drop-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.hs-drop-link.is-active { background: rgba(228, 2, 43, 0.14); }
.hs-drop-link i {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	font-size: 18px;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	transition: background 0.25s ease, color 0.25s ease;
}
.hs-drop-link:hover i { background: var(--primary-color); color: #fff; }
.hs-drop-link span { display: flex; flex-direction: column; min-width: 0; }
.hs-drop-link strong { font-size: 14.5px; line-height: 1.35; color: #fff; font-family: var(--manrope); }
.hs-drop-link small { font-size: 12.5px; line-height: 1.5; color: rgba(222, 222, 222, 0.62); display: block; margin-top: 2px; }

.hs-drop-all {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 11px 16px;
	margin-bottom: 6px;
	border-radius: 14px;
	border: 1px dashed rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.hs-drop-all:hover { background: rgba(228, 2, 43, 0.16); border-color: rgba(228, 2, 43, 0.5); color: #fff; }

.header-cta { margin-left: 4px; }

/* ---------------- Buttons ---------------- */
.btn {
	display: inline-block;
	cursor: pointer;
	border: none;
	border-radius: 50px;
	padding: 17px 34px;
	font-family: var(--manrope);
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	box-shadow: var(--shadow-btn);
	transition: all 0.3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
	background: var(--primary-color);
	color: #ffffff;
}
.btn.is-loading {
	opacity: 0.85;
	cursor: progress;
	pointer-events: none;
}
.btn-spinner {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 8px;
	vertical-align: -2px;
	border: 2px solid rgba(16, 16, 16, 0.25);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin {
	to { transform: rotate(360deg); }
}
.btn-primary:hover {
	background: var(--black-200);
	color: #fff;
}
.btn-dark {
	background: var(--black-200);
	color: #fff;
}
.btn-dark:hover { color: var(--primary-color); }
.btn-white {
	background: #fff;
	color: var(--black-100);
}
.btn-white:hover { color: var(--black-200); }

/* ---------------- Sections ---------------- */
.section { padding: 90px 0; }

.sec-header {
	text-align: center;
	max-width: 820px;
	margin: 0 auto 60px;
}
.sec-header.left {
	text-align: left;
	max-width: none;
	margin: 0 0 40px;
}
.pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #bebebe;
	padding: 10px 20px;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 400;
	margin-bottom: 18px;
	background: transparent;
}
.pill i { color: var(--primary-color); }
.sec-title {
	font-size: 46px;
	line-height: 1.12;
	color: var(--black-100);
	margin: 0 0 16px;
}
.sec-title span { color: var(--primary-color); }
.sec-lead {
	font-size: 18px;
	line-height: 1.75;
	color: var(--subtitle);
	margin: 0;
}
.sec-header.center .sec-lead { margin: 0 auto; max-width: 720px; }

/* ---------------- Hero (home) ---------------- */
.hero { padding: 30px 0 40px; position: relative; }
.hero h1 {
	font-size: 72px;
	line-height: 1.08;
	font-weight: 600;
	margin: 0 0 22px;
}
.hero h1 span { color: var(--primary-color); }
.hero .hero-lead {
	font-size: 20px;
	line-height: 1.7;
	color: var(--black-100);
	margin-bottom: 14px;
}
.hero .hero-copy {
	color: var(--subtitle);
	line-height: 1.8;
	max-width: 800px;
	margin: 0 auto 32px;
}
.hero .btn { margin: 0 8px 10px 0; }

	/* Hero SEO audit tool */
	.hero-audit { max-width: 740px; margin: 28px auto 0; text-align: left; }
	.hero-audit-form { display: flex; align-items: stretch; gap: 12px; background: #fff; border: 1px solid #e5e5e5; border-radius: 16px; padding: 10px 10px 10px 18px; box-shadow: 0 14px 40px rgba(7, 7, 7, 0.07); }
	.hero-audit-input { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
	.hero-audit-input i { color: var(--primary-color); font-size: 20px; flex-shrink: 0; }
	.hero-audit-input input { flex: 1; min-width: 0; border: none; outline: none; font-family: var(--manrope); font-size: 16px; color: var(--black-100); background: transparent; }
	.hero-audit-form .btn { margin: 0; white-space: nowrap; padding: 14px 24px; }
	.hero-audit-note { margin: 12px 0 0; font-size: 13px; color: var(--subtitle); display: flex; align-items: center; gap: 6px; justify-content: center; }
	.hero-audit-note i { color: var(--primary-color); font-size: 16px; }
	@media (max-width: 575.98px) {
		.hero-audit-form { flex-direction: column; padding: 12px; }
		.hero-audit-form .btn { width: 100%; }
		.hero-audit-note { justify-content: flex-start; }
	}

/* ---------------- Page hero (inner pages) ---------------- */
.page-hero {
	padding: 30px 0 40px;
	text-align: center;
}
.page-hero h1 {
	font-size: 60px;
	line-height: 1.1;
	font-weight: 600;
	margin: 0 0 16px;
}

/* ---------------- Custom breadcrumb ---------------- */
.hs-breadcrumb {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 26px;
	font-size: 14px;
	font-weight: 600;
	color: var(--subtitle);
}
.hs-breadcrumb a { color: var(--black-100); }
.hs-breadcrumb a:hover { color: var(--primary-color); }
.hs-breadcrumb i { font-size: 15px; color: var(--primary-color); }
.hs-breadcrumb span { color: var(--primary-color); }

/* ---------------- Service page intro ---------------- */
.svc-intro {
	max-width: 1200px;
	margin: 0 auto;
}
.svc-intro p { font-size: 17.5px; line-height: 32px; color: var(--black-100); margin-bottom: 18px; text-align: center; }
.svc-intro p:last-child { margin-bottom: 0; }
.svc-intro strong { color: var(--black-100); }

/* ---------------- Service page body sections ---------------- */
.svc-section {
	width: 100%;
	margin: 0 0 20px;
	padding: 40px;
	background: #fff;
	border: 1px solid #bebebe;
	border-radius: 22px;
}
.svc-section-title {
	font-size: 30px;
	font-weight: 600;
	margin-bottom: 14px;
}
.svc-section-title span { color: var(--primary-color); }
.svc-section-lead {
	font-size: 17px;
	line-height: 30px;
	color: var(--black-100);
	margin-bottom: 16px;
	font-weight: 500;
}
.svc-section p { color: var(--subtitle); font-size: 15.5px; line-height: 28px; margin-bottom: 14px; }

/* ---------------- Stats (bordered boxes) ---------------- */
.stat-box {
	background: var(--secondary-color);
	border: 1px solid var(--secondary-color);
	border-radius: 15px;
	padding: 30px 20px;
	text-align: center;
	height: 100%;
	transition: all 0.4s ease;
}
.stat-box:hover { border-color: var(--primary-color); transform: translateY(-4px); }
.stat-box h4 {
	font-family: var(--bricolage);
	font-size: 20px;
	line-height: 1.1;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 6px;
}
.stat-box p { margin: 0; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }

/* ---------------- Industry-style cards ---------------- */
.industry-card {
	background: #fff;
	border-radius: 20px;
	border: 1px solid #e5e5e5;
	padding: 42px 30px;
	text-align: center;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.industry-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--primary-color);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.industry-card:hover {
	border-color: var(--primary-color);
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(228, 2, 43, 0.12);
}
.industry-card:hover::before { transform: scaleX(1); }
.industry-card .industry-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	border-radius: 20px;
	background: rgba(228, 2, 43, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.industry-card .industry-icon i {
	font-size: 36px;
	color: var(--primary-color);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.industry-card:hover .industry-icon {
	background: var(--primary-color);
	border-radius: 50%;
}
.industry-card:hover .industry-icon i { color: #fff; }
.industry-card h4 {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 10px;
}
.industry-card p {
	font-size: 15px;
	line-height: 26px;
	color: var(--subtitle);
	margin-bottom: 0;
}
.industry-card .industry-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 18px;
	color: var(--primary-color);
	font-weight: 600;
	font-size: 15px;
	opacity: 0;
	transform: translateY(10px);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.industry-card:hover .industry-link { opacity: 1; transform: translateY(0); }
.industry-card .industry-link i { transition: transform 0.3s; }
.industry-card:hover .industry-link i { transform: translateX(4px); }

/* ---------------- Feature boxes ---------------- */
.feature-card {
	background: #fff;
	border: 1px solid #bebebe;
	border-radius: 18px;
	padding: 40px 32px;
	text-align: center;
	height: 100%;
	transition: all 0.4s ease;
}
.feature-card:hover { border-color: var(--primary-color); transform: translateY(-6px); }
.feature-card > i {
	font-size: 46px;
	color: var(--primary-color);
	margin-bottom: 18px;
	display: block;
}
.feature-card h4 {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 10px;
}
.feature-card p {
	color: var(--subtitle);
	font-size: 15px;
	line-height: 26px;
	margin-bottom: 0;
}

/* ---------------- Process steps ---------------- */
.step-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 18px;
}
.step-circle {
	position: relative;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 26px;
	background: #fff;
}
.step-circle i { font-size: 30px; color: var(--primary-color); }
.step-num {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 28px;
	height: 28px;
	background: var(--primary-color);
	color: #fff;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.step-card h4 { font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.step-card p { color: var(--subtitle); font-size: 15px; line-height: 26px; margin-bottom: 0; }

/* ---------------- Dark SEO content block ---------------- */
.seo-content-wrap {
	background: var(--black-200);
	border-radius: 40px;
	overflow: hidden;
}
.seo-content-left { padding: 70px 60px; }
.seo-content-left h2 {
	color: #fff;
	font-size: 42px;
	line-height: 55px;
	margin-bottom: 30px;
}
.seo-content-left p.seo-lead {
	color: rgba(255, 255, 255, 0.8);
	font-size: 18px;
	line-height: 30px;
	margin-bottom: 40px;
}
.seo-feature-item {
	display: flex;
	gap: 20px;
	padding: 30px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	margin-bottom: 20px;
}
.seo-feature-item:last-child { margin-bottom: 0; }
.seo-feature-item:hover {
	border-color: rgba(228, 2, 43, 0.4);
	background: rgba(228, 2, 43, 0.05);
}
.seo-feature-item .seo-icon {
	width: 56px;
	height: 56px;
	min-width: 56px;
	border-radius: 14px;
	background: rgba(228, 2, 43, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
}
.seo-feature-item .seo-icon i { font-size: 26px; color: var(--primary-color); }
.seo-feature-item h3 {
	color: #fff;
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 8px;
	line-height: 1.3;
}
.seo-feature-item p {
	color: rgba(255, 255, 255, 0.65);
	font-size: 16px;
	line-height: 28px;
	margin-bottom: 0;
}
.seo-content-right {
	background: rgba(228, 2, 43, 0.08);
	padding: 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}
.seo-content-right .seo-vertical-img {
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 auto 28px;
	border-radius: 22px;
	border: 1px solid rgba(228, 2, 43, 0.35);
	box-shadow: 0 0 0 6px rgba(228, 2, 43, 0.08), 0 18px 40px rgba(0, 0, 0, 0.35);
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	display: block;
}
.seo-content-right .seo-vertical-img:hover {
	transform: translateY(-4px);
}
.seo-content-right h3 {
	color: #fff;
	font-size: 26px;
	margin-bottom: 20px;
}
.seo-point {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 24px;
}
.seo-point:last-child { margin-bottom: 0; }
.seo-point i { color: var(--primary-color); font-size: 22px; margin-top: 4px; flex-shrink: 0; }
.seo-point strong { display: block; color: #fff; font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.seo-point span { color: rgba(255, 255, 255, 0.6); font-size: 15px; line-height: 26px; display: block; }

/* ---------------- Split text / lists ---------------- */
.hs-split { display: flex; align-items: center; flex-wrap: wrap; }
.hs-split-text h2 {
	font-size: 44px;
	line-height: 1.15;
	color: var(--black-100);
	margin-bottom: 18px;
}
.hs-split-text h2 span { color: var(--primary-color); }
.hs-split-text p { color: var(--subtitle); line-height: 1.8; margin-bottom: 16px; }
.hs-list-solid { list-style: none; padding: 0; margin: 0 0 24px; }
.hs-list-solid li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	color: var(--subtitle);
	line-height: 1.7;
}
.hs-list-solid li::before {
	content: "\ea6c";
	font-family: "remixicon";
	position: absolute;
	left: 0;
	top: 2px;
	color: var(--primary-color);
	font-weight: 700;
}

/* ---------------- FAQ accordion ---------------- */
.faq-wrap { background: var(--black-200); border-radius: 20px; padding: 50px 40px; text-align: center; height: 100%; }
.faq-wrap > i { font-size: 56px; color: var(--primary-color); display: block; margin-bottom: 20px; }
.faq-wrap h2 { color: #fff; font-size: 36px; line-height: 1.2; margin-bottom: 24px; }
.faq-wrap p { color: rgba(255, 255, 255, 0.7); font-size: 16px; }
.faq-wrap p a { color: var(--primary-color); }
.faq-wrap .btn-primary:hover { background: #fff; color: var(--primary-color); }

.accordion-item { margin-bottom: 15px; }
.accordion-holder { display: flex; flex-direction: column; gap: 15px; }
.accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 10px;
	border: 1px solid #ccc;
	background: #fff;
	padding: 18px 22px;
	font-size: 19px;
	font-weight: 600;
	cursor: pointer;
	margin: 0;
	color: var(--black-100);
	transition: border-color 0.3s ease;
}
.accordion-header:hover { border-color: var(--primary-color); }
.accordion-header span {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--secondary-color);
	flex-shrink: 0;
	transition: background 0.3s ease;
}
.accordion-item[data-open="true"] .accordion-header span { background: var(--primary-color); }
.accordion-body {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	padding: 0 22px;
	background: #fff;
	border: 1px solid transparent;
	border-top: none;
	border-radius: 0 0 10px 10px;
	transition: all 0.4s ease;
}
.accordion-body p { color: var(--subtitle); margin: 0; padding-bottom: 8px; }
.accordion-item[data-open="true"] .accordion-body {
	max-height: 60vh;
	overflow: auto;
	opacity: 1;
	visibility: visible;
	padding: 14px 22px 18px;
	border-color: var(--primary-color);
}

/* Blog single: keep accordions independent of body h2/h3/p typography */
.blog-single-body .accordion-header { font-size: 19px; margin: 0; }
.blog-single-body .accordion-body p { color: var(--subtitle); font-size: 16px; line-height: 1.8; margin: 0; padding-bottom: 8px; }

/* ---------------- Blog single: styled content blocks ---------------- */
.blog-single-body .hs-body-p { color: var(--black-100); line-height: 1.9; }
.blog-single-body .hs-lead { font-size: 19px; color: var(--subtitle); }
.blog-single-body .hs-h2 {
	border-left: 4px solid var(--primary-color);
	padding-left: 14px;
}
.blog-single-body .hs-faq-title { border-left-color: var(--secondary-color); }
.blog-single-body .hs-faq-title i { margin-right: 4px; }

.hs-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
}
.hs-compare {
	border: 1px solid #ececec;
	border-left: 4px solid #ccc;
	border-radius: 12px;
	padding: 18px 20px;
	margin: 20px 0;
	background: #fafafa;
}
.hs-compare p { color: var(--black-100); font-size: 16px; line-height: 1.8; margin: 0; }
.hs-compare .hs-tagline {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}
.hs-compare .hs-tagline span {
	font-family: Consolas, Menlo, monospace;
	font-size: 14px;
	color: var(--black-100);
	background: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	padding: 6px 10px;
}
.hs-before { border-left-color: #e05d5d; background: #fdf7f7; }
.hs-before .hs-tag-before { background: #f5dddc; color: #a03a3a; }
.hs-after { border-left-color: #3fae6a; background: #f4faf6; }
.hs-after .hs-tag-after { background: #d6ecdf; color: #1f7a44; }

.hs-example {
	border-radius: 12px;
	padding: 18px 20px;
	margin: 20px 0;
	background: #eef4ff;
	border-left: 4px solid var(--primary-color);
}
.hs-example .hs-tag-example { background: #dbe6ff; color: #1d4ed8; }
.hs-example p { color: var(--black-100); font-size: 17px; line-height: 1.8; margin: 0; font-style: italic; }

.hs-takeaway {
	border-radius: 14px;
	padding: 26px 28px;
	margin: 28px 0;
	background: #fff8ee;
	border: 1px solid #ffd9a8;
}
.hs-takeaway .hs-tag-takeaway { background: #ffe3c2; color: #b25b00; }
.hs-takeaway p { color: var(--black-100); font-size: 17px; line-height: 1.9; margin: 0; }

.hs-cta {
	border-radius: 14px;
	padding: 26px 28px;
	margin: 32px 0 8px;
	background: linear-gradient(120deg, var(--primary-color) 0%, #ff7a3d 100%);
}
.hs-cta p { color: #fff; font-size: 17px; line-height: 1.8; margin: 0; }
.hs-cta .process-link { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.hs-cta .process-link:hover { color: #fff; border-color: #fff; }

.hs-related {
	border-radius: 12px;
	padding: 18px 20px;
	margin: 20px 0;
	background: #f4f5f7;
	border: 1px solid #e3e5ea;
}
.hs-related .hs-tag-related { background: #e3e5ea; color: #4a5160; }
.hs-related p { color: var(--black-100); font-size: 16px; line-height: 1.8; margin: 0; }

.hs-note {
	margin: 20px 0;
	padding: 16px 20px;
	border-left: 4px solid var(--secondary-color);
	background: #f6f6f6;
	border-radius: 0 12px 12px 0;
	color: var(--black-100);
	font-size: 17px;
	line-height: 1.8;
}
.hs-note a { color: var(--primary-color); }

/* ---------------- CTA band ---------------- */
.cta-band {
	background: linear-gradient(120deg, var(--primary-color) 0%, #ff7a3d 100%);
	border-radius: 24px;
	padding: 64px;
}
.cta-band h2 { color: #fff; font-size: 40px; margin-bottom: 12px; }
.cta-band p { color: rgba(255, 255, 255, 0.9); line-height: 1.7; margin-bottom: 0; }
.cta-band .btn-white { box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.18); }

/* ---------------- Blog ---------------- */
.blog-card {
	display: block;
	background: #fff;
	border: 1px solid #bebebe;
	border-radius: 15px;
	overflow: hidden;
	transition: all 0.4s ease;
	color: var(--black-100);
	height: 100%;
}
.blog-card:hover {
	border-color: var(--primary-color);
	box-shadow: 0 18px 40px rgba(228, 2, 43, 0.08);
	transform: translateY(-4px);
	color: var(--black-100);
}
.blog-card-media { position: relative; overflow: hidden; }
.blog-card-media img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	transition: all 0.6s ease;
}
.blog-card:hover .blog-card-media img { transform: scale(1.05); }
.blog-card-tag {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(228, 2, 43, 0.9);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 30px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.blog-card-body { padding: 24px; }
.blog-card-meta { display: flex; gap: 16px; font-size: 14px; color: var(--subtitle); }
.blog-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.blog-card h3 {
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	margin: 10px 0;
	transition: color 0.3s ease;
}
.blog-card:hover h3 { color: var(--primary-color); }
.blog-card p {
	font-size: 16px;
	line-height: 27px;
	color: var(--subtitle);
	margin-bottom: 0;
}
.blog-card-footer {
	margin-top: 18px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--primary-color);
}

.blog-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 46px;
}
.blog-pagination a {
	min-width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid #bebebe;
	border-radius: 12px;
	background: #fff;
	font-weight: 600;
	font-size: 15px;
	color: var(--black-100);
	transition: all 0.3s ease;
}
.blog-pagination a:hover { border-color: var(--primary-color); color: var(--primary-color); }
.blog-pagination a.current {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
	cursor: default;
}
.blog-pagination span.disabled { opacity: 0.4; }

/* ---------------- Blog single ---------------- */
.blog-single-cover {
	border-radius: 20px;
	overflow: hidden;
	border: 8px solid #ccc;
	margin-bottom: 30px;
}
.blog-single-cover img { width: 100%; display: block; }
.blog-single-meta {
	display: flex;
	gap: 18px;
	color: var(--subtitle);
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 18px;
}
.blog-single-meta span { display: inline-flex; align-items: center; gap: 6px; }
.blog-single-meta i { color: var(--primary-color); }
.blog-single-body p { color: var(--black-100); line-height: 1.9; font-size: 17px; margin-bottom: 20px; }
.blog-single-body h2 { font-size: 30px; margin: 38px 0 14px; color: var(--black-100); line-height: 1.35; }
.blog-single-body h3 { font-size: 28px; margin: 34px 0 14px; color: var(--black-100); }

/* ---------------- Contact ---------------- */
.contact-info-card {
	background: var(--black-200);
	border-radius: 20px;
	padding: 55px 50px;
	height: 100%;
}
.contact-info-card h2 { color: #fff; font-size: 34px; line-height: 44px; margin-bottom: 15px; }
.contact-info-card > p { color: rgba(255, 255, 255, 0.7); font-size: 17px; line-height: 28px; margin-bottom: 35px; }
.contact-detail-row { display: flex; align-items: center; gap: 16px; margin-bottom: 25px; }
.contact-detail-row:last-child { margin-bottom: 0; }
.contact-detail-row .contact-icon {
	width: 50px;
	height: 50px;
	min-width: 50px;
	border-radius: 14px;
	background: rgba(228, 2, 43, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease;
}
.contact-detail-row:hover .contact-icon { background: var(--primary-color); }
.contact-detail-row .contact-icon i { font-size: 22px; color: var(--primary-color); transition: all 0.4s ease; }
.contact-detail-row:hover .contact-icon i { color: #fff; }
.contact-detail-row .detail-text h5 { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.contact-detail-row .detail-text a,
.contact-detail-row .detail-text span { color: rgba(255, 255, 255, 0.6); font-size: 15px; transition: color 0.3s ease; }
.contact-detail-row .detail-text a:hover { color: var(--primary-color); }

.contact-form-card {
	background: #fff;
	border-radius: 20px;
	padding: 50px 45px;
	border: 1px solid #e5e5e5;
	height: 100%;
}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--black-100); }
.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 14px 18px;
	font-size: 16px;
	font-family: var(--manrope);
	color: var(--black-100);
	background: #fafafa;
	transition: all 0.3s ease;
	outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	border-color: var(--primary-color);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(228, 2, 43, 0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #aaa; }
.form-group textarea { resize: vertical; min-height: 130px; }
.form-submit { width: 100%; }
.form-note { text-align: center; font-size: 13px; color: var(--subtitle); margin-top: 16px; }
.hs-honeypot { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 0; overflow: hidden; opacity: 0; }

.form-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border-radius: 12px;
	padding: 16px 20px;
	font-size: 15px;
	margin-bottom: 24px;
	line-height: 1.6;
}
.form-alert i { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.form-alert ul { margin: 0; padding-left: 18px; }
.form-alert-success { background: #eafaf1; border: 1px solid #b9e5c9; color: #175e38; }
.form-alert-success i { color: #1f9d55; }
.form-alert-error { background: #fdecec; border: 1px solid #f3c1c1; color: #8e2a2a; }
.form-alert-error i { color: #c53030; }

/* ---------------- Free SEO audit tool (hero + results) ---------------- */
.audit-box { max-width: 780px; margin: 34px auto 0; }
.audit-form { display: flex; align-items: stretch; gap: 12px; background: #fff; border: 1px solid #e5e5e5; border-radius: 16px; padding: 10px 10px 10px 18px; box-shadow: 0 14px 40px rgba(7, 7, 7, 0.07); }
.audit-form.error { border-color: #f3c1c1; box-shadow: 0 14px 40px rgba(197, 48, 48, 0.08); }
.audit-form .af-input { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.audit-form .af-input i { color: var(--primary-color); font-size: 20px; flex-shrink: 0; }
.audit-form input { flex: 1; min-width: 0; border: none; outline: none; font-family: var(--manrope); font-size: 16px; color: var(--black-100); background: transparent; }
.audit-form .btn { margin: 0; white-space: nowrap; padding: 14px 26px; }
.audit-error-box { display: flex; align-items: flex-start; gap: 10px; background: #fdecec; border: 1px solid #f3c1c1; color: #8e2a2a; border-radius: 12px; padding: 14px 18px; margin-top: 16px; font-size: 14px; line-height: 1.6; text-align: left; }
.audit-error-box i { font-size: 20px; margin-top: 1px; }
.audit-note { margin: 14px 0 0; font-size: 13px; color: var(--subtitle); display: flex; align-items: center; justify-content: center; gap: 6px; }
.audit-note i { color: var(--primary-color); }
@media (max-width: 575.98px) {
	.audit-form { flex-direction: column; padding: 12px; }
	.audit-form .btn { width: 100%; }
}

.audit-score-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 22px; padding: 40px 44px; display: flex; align-items: center; gap: 38px; flex-wrap: wrap; }
.audit-ring { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.audit-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.audit-ring .ring-track { stroke: #eee; }
.audit-ring .ring-value { stroke: var(--primary-color); stroke-linecap: round; }
.audit-ring .ring-grade { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.audit-ring .ring-grade b { font-family: var(--bricolage); font-size: 38px; line-height: 1; color: var(--black-100); }
.audit-ring .ring-grade span { font-size: 12px; font-weight: 700; color: var(--subtitle); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 4px; }
.audit-meta { flex: 1; min-width: 260px; }
.audit-meta h2 { font-size: 24px; font-weight: 700; color: var(--black-100); margin: 0 0 4px; word-break: break-all; }
.audit-meta .audit-host { color: var(--subtitle); font-size: 14px; margin: 0 0 14px; word-break: break-all; }
.audit-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 50px; font-size: 13px; font-weight: 700; }
.chip.pass { background: #e8f7ee; color: #0e7a3d; }
.chip.warn { background: #fff5e6; color: #b45309; }
.chip.fail { background: #fdeeee; color: #c53030; }
.audit-remark { font-size: 15px; line-height: 1.7; color: #555; margin: 0; }
.audit-ids { display: flex; gap: 6px 22px; flex-wrap: wrap; margin-top: 14px; }
.audit-ids span { font-size: 13px; color: var(--subtitle); }
.audit-ids b { color: var(--black-100); }

.audit-groups { margin-top: 28px; display: grid; gap: 24px; }
.audit-group { background: #fff; border: 1px solid #e5e5e5; border-radius: 20px; overflow: hidden; }
.audit-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 26px; border-bottom: 1px solid #f0f0f0; flex-wrap: wrap; }
.audit-group-head h3 { margin: 0; font-size: 17px; color: var(--black-100); display: flex; align-items: center; gap: 10px; }
.audit-group-head h3 i { color: var(--primary-color); font-size: 20px; }
.audit-group-head .ag-stats { display: flex; gap: 12px; font-size: 13px; font-weight: 700; }
.audit-group-head .ag-stats .b { color: #0e7a3d; }
.audit-group-head .ag-stats .w { color: #b45309; }
.audit-group-head .ag-stats .f { color: #c53030; }
.audit-check { display: flex; gap: 14px; padding: 16px 26px; border-bottom: 1px solid #f6f6f6; align-items: flex-start; }
.audit-check:last-child { border-bottom: none; }
.ac-icon { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-top: 1px; }
.ac-icon.pass { background: #e8f7ee; color: #0e7a3d; }
.ac-icon.warn { background: #fff5e6; color: #b45309; }
.ac-icon.fail { background: #fdeeee; color: #c53030; }
.ac-body { flex: 1; min-width: 0; }
.ac-title { font-weight: 700; font-size: 14.5px; color: var(--black-100); }
.ac-detail { font-size: 13.5px; color: #666; margin-top: 3px; line-height: 1.6; word-break: break-word; }
.ac-fix { font-size: 13px; color: #0f766e; background: #eefaf8; border-radius: 8px; padding: 8px 12px; margin-top: 8px; line-height: 1.55; }
.ac-fix b { color: #115e59; }
.audit-cta { margin-top: 34px; background: linear-gradient(135deg, var(--primary-color), #ff7a39); border-radius: 22px; padding: 44px 30px; text-align: center; color: #fff; }
.audit-cta h3 { color: #fff; font-size: 26px; margin-bottom: 10px; }
.audit-cta p { color: rgba(255, 255, 255, 0.88); max-width: 560px; margin: 0 auto 22px; font-size: 15px; line-height: 1.7; }
.btn-white { background: #fff; color: var(--primary-color); }
.btn-white:hover { background: #ffe4d6; color: var(--primary-color); }
@media (max-width: 575.98px) {
	.audit-score-card { padding: 28px 22px; gap: 24px; }
	.audit-check, .audit-group-head { padding: 14px 18px; }
}
@media (max-width: 380px) {
	.audit-form { flex-direction: column; padding: 12px; }
	.audit-form .btn { width: 100%; }
	.audit-score-card { justify-content: center; }
}

/* ---------------- Global assessment form (footer, every page) ---------------- */
.global-form-band {
	background: linear-gradient(135deg, #101010 0%, #1d1d1d 100%);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 22px;
	padding: 44px;
	margin-bottom: 54px;
}
.global-form-band .gl-inner { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.global-form-band .gl-title { flex: 1 1 300px; min-width: 260px; }
.global-form-band .gl-title h3 { color: #fff; font-size: 26px; line-height: 1.3; margin-bottom: 10px; }
.global-form-band .gl-title h3 span { color: var(--primary-color); }
.global-form-band .gl-title p { color: rgba(255, 255, 255, 0.6); font-size: 15px; line-height: 25px; margin: 0; }
.global-form-band form { flex: 2 1 460px; min-width: 300px; }
.global-form-band .gl-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.global-form-band .gl-fields .gf-name { flex: 1 1 140px; min-width: 140px; }
.global-form-band .gl-fields .gf-email { flex: 1 1 220px; min-width: 180px; }
.global-form-band .gl-fields .gf-msg { flex: 1 1 100%; }
.global-form-band input,
.global-form-band textarea {
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 15px;
	font-family: var(--manrope);
	color: #fff;
	outline: none;
	transition: all 0.3s ease;
	box-sizing: border-box;
}
.global-form-band input::placeholder,
.global-form-band textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.global-form-band input:focus,
.global-form-band textarea:focus {
	border-color: var(--primary-color);
	background: rgba(255, 255, 255, 0.09);
	box-shadow: 0 0 0 3px rgba(228, 2, 43, 0.12);
}
.global-form-band textarea { min-height: 74px; resize: vertical; }
.global-form-band .gl-submit { margin-top: 14px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.global-form-band .gl-submit .btn-primary { width: auto; padding: 14px 28px; }
.global-form-band .gl-note { color: rgba(255, 255, 255, 0.45); font-size: 12px; }
.global-form-band .gl-note i { margin-right: 4px; }
@media (max-width: 575.98px) { .global-form-band { padding: 30px 24px; } }

/* ---------------- Footer ---------------- */
.footer-bg { background: var(--black-200); }
.footer-top { padding: 80px 0 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.6);
	font-size: 18px;
	transition: all 0.4s ease;
}
.footer-social a:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.footer-about .footer-logo {
	font-family: var(--bricolage);
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 20px;
}
.footer-about .footer-logo span { color: var(--primary-color); }
.footer-about .footer-desc { color: rgba(255, 255, 255, 0.6); font-size: 16px; line-height: 28px; margin-bottom: 25px; }
.footer-heading { color: #fff; font-size: 20px; font-weight: 600; margin-bottom: 25px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links li:last-child { margin-bottom: 0; }
.footer-links a { color: rgba(255, 255, 255, 0.6); font-size: 16px; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 6px; }
.footer-links a:hover { color: var(--primary-color); transform: translateX(4px); }
.footer-links a i { font-size: 14px; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.footer-contact-item:last-child { margin-bottom: 0; }
.footer-contact-item i { color: var(--primary-color); font-size: 20px; margin-top: 4px; flex-shrink: 0; }
.footer-contact-item span,
.footer-contact-item a { color: rgba(255, 255, 255, 0.6); font-size: 16px; line-height: 26px; }
.footer-contact-item a:hover { color: var(--primary-color); }
.footer-bottom { padding: 25px 0; }
.footer-bottom-wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-bottom p { color: rgba(255, 255, 255, 0.45); font-size: 15px; margin: 0; }
.footer-bottom p a { color: var(--primary-color); font-weight: 600; }
.footer-bottom-links { display: flex; gap: 25px; list-style: none; padding: 0; margin: 0; }
.footer-bottom-links a { color: rgba(255, 255, 255, 0.45); font-size: 15px; transition: color 0.3s ease; }
.footer-bottom-links a:hover { color: var(--primary-color); }

/* ---------------- Scroll to top ---------------- */
.scroll-top {
	position: fixed;
	right: 12px;
	bottom: 20px;
	z-index: 900;
	width: 44px;
	height: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.scroll-top i {
	position: absolute;
	color: var(--primary-color);
	font-size: 22px;
	z-index: 1;
}
.scroll-top svg { width: 100%; height: 100%; }

/* ---------------- Reveal on scroll ---------------- */
html.js .fadeInUp {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity 0.9s ease, transform 0.9s ease;
}
html.js .fadeInUp.visible {
	opacity: 1;
	transform: none;
}

/* ---------------- Admin ---------------- */
.admin-body {
	background: var(--background);
	padding-top: 0;
}
.admin-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 15px; }
.admin-card {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 24px;
	padding: 48px 42px;
	max-width: 480px;
	width: 100%;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}
.admin-wrap .admin-form input {
	width: 100%;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 14px 18px;
	font-size: 16px;
	font-family: var(--manrope);
	color: var(--black-100);
	background: #fafafa;
	transition: all 0.3s ease;
	outline: none;
}
.admin-wrap .admin-form input:focus {
	border-color: var(--primary-color);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(228, 2, 43, 0.1);
}
.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 18px; overflow: hidden; }
.admin-table th { text-align: left; padding: 14px 18px; background: var(--black-200); color: #fff; font-size: 14px; font-weight: 600; }
.admin-table td { padding: 14px 18px; border-bottom: 1px solid #f0f0f0; font-size: 15px; vertical-align: top; }
.admin-table tbody tr:hover td { background: rgba(2, 33, 105, 0.05); }
.badge { display: inline-block; padding: 4px 12px; border-radius: 30px; font-size: 12px; font-weight: 700; }
.badge-new { background: rgba(228, 2, 43, 0.12); color: var(--primary-color); }
.badge-read { background: #f0f0f0; color: var(--subtitle); }
.admin-actions a, .admin-actions button {
	display: inline-block;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	padding: 4px 2px;
}
.admin-actions .del { color: #c53030; }
.admin-actions a { color: var(--primary-color); }

/* ---------------- Responsive ---------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.menu-item-has-children .hs-dropdown {
		min-width: calc(100vw - 260px);
		max-width: calc(100vw - 260px);
	}
	.hs-dropdown-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
	body { padding-top: 78px; }
	.site-nav {
		position: fixed;
		top: 74px;
		left: 15px;
		right: 15px;
		z-index: 999;
		background: #fff;
		border: 1px solid #e5e5e5;
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
		border-radius: 24px;
		padding: 18px;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: all 0.4s ease;
	}
	.site-nav.open {
		max-height: calc(100vh - 96px);
		max-height: calc(100dvh - 96px);
		overflow-y: auto;
		opacity: 1;
		visibility: visible;
	}
	.site-nav ul { flex-direction: column; align-items: stretch; background: none; padding: 0; }
	.site-nav li { border-bottom: 1px solid rgba(2, 33, 105, 0.15); }
	.site-nav li:last-child { border-bottom: none; }
	.site-nav .menu-link { text-align: left; padding: 14px 12px; }
	.menu-item-has-children { position: static; }
	.menu-item-has-children .hs-dropdown {
		position: static;
		transform: none;
		min-width: 0;
		width: 100%;
		margin: 4px 0 8px;
		padding: 12px;
		max-height: 0;
		overflow: hidden;
		border-radius: 16px;
		box-shadow: none;
		border-color: rgba(255, 255, 255, 0.07);
	}
	.menu-item-has-children.open .hs-dropdown { max-height: none; overflow: visible; }
	.menu-item-has-children::after { display: none; }
	.hs-dropdown-inner { display: block; }
	.hs-drop-link,
	.hs-drop-all {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 11px 14px;
	margin-bottom: 4px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
}
	.hs-drop-link small { display: block; font-size: 12.5px; line-height: 1.5; color: rgba(222, 222, 222, 0.62); margin-top: 2px; }
	.header-cta { display: none; }
	.header-toggle { display: block; }

	.hero h1 { font-size: 50px; }
	.page-hero h1 { font-size: 44px; }
	.sec-title { font-size: 34px; }
	.hs-split-text h2 { font-size: 34px; }
	.seo-content-left { padding: 40px 30px; }
	.seo-content-right { padding: 40px 30px; }
	.contact-info-card, .contact-form-card { padding: 40px 30px; }
	.cta-band { padding: 44px 30px; }
	.cta-band h2 { font-size: 32px; }
	.svc-section { padding: 28px 22px; margin-bottom: 16px; }
	.svc-section-title { font-size: 25px; }
	.faq-wrap { padding: 40px 30px; }
	.footer-top { padding: 50px 0 30px; }
}
@media (max-width: 767.98px) {
	body { padding-top: 70px; }
	.hero { padding: 10px 0 20px; }
	.hero h1 { font-size: 38px; }
	.page-hero h1 { font-size: 34px; }
	.sec-title { font-size: 28px; }
	.hs-split-text h2 { font-size: 28px; }
	.section { padding: 60px 0; }
	.stat-box h4 { font-size: 20px; }
	.seo-content-wrap { border-radius: 24px; }
	.seo-content-left h2 { font-size: 26px; line-height: 36px; }
	.seo-feature-item { flex-direction: column; }
	.cta-band { padding: 36px 22px; border-radius: 18px; }
	.cta-band h2 { font-size: 26px; }
	.footer-bottom-wrap { flex-direction: column; text-align: center; }
}
@media (max-width: 575.98px) {
	.site-nav { top: 70px; left: 10px; right: 10px; padding: 14px; border-radius: 20px; }
	.menu-item-has-children .hs-dropdown { padding: 10px; }
	.hs-drop-link,
	.hs-drop-all { padding: 10px 12px; }
	.hs-drop-link small { font-size: 11.5px; line-height: 1.45; }
	.svc-intro p { font-size: 16px; line-height: 29px; }
	.svc-section { padding: 26px 20px; border-radius: 18px; }
	.svc-section-title { font-size: 23px; }
	.seo-content-left,
	.seo-content-right { padding: 28px 20px; }
	.seo-content-left h2 { font-size: 24px; line-height: 34px; }
	.seo-feature-item { padding: 22px; }
}

/* ---------------- Service page unique-layout add-ons ---------------- */
.svc-kicker-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; justify-content: center; }
.svc-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--black-100);
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 999px;
	padding: 8px 16px;
}
.svc-kicker i { color: var(--primary-color); }

.svc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; }

.svc-table-wrap { overflow-x: auto; border-radius: 20px; margin: 0 0 28px; }
.svc-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 20px;
	overflow: hidden;
	font-size: 14.5px;
}
.svc-table th {
	background: var(--black-300);
	color: #fff;
	font-family: var(--bricolage);
	font-weight: 600;
	font-size: 15px;
	padding: 16px 20px;
	text-align: left;
	white-space: nowrap;
}
.svc-table td { padding: 16px 20px; border-top: 1px solid #f0f0f0; line-height: 1.6; color: var(--black-100); vertical-align: top; }
.svc-table tr:nth-child(even) td { background: #fafafa; }
.svc-table .tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.svc-table .tag.high { background: #fdeeee; color: #c53030; }
.svc-table .tag.med { background: #fff5e6; color: #b45309; }
.svc-table .tag.low { background: #e8f7ee; color: #0e7a3d; }
.svc-table .tag.good { background: #e8f7ee; color: #0e7a3d; }
.svc-table .tag.bad { background: #fdeeee; color: #c53030; }
@media (max-width: 767.98px) { .svc-table { min-width: 620px; } }

.svc-quote {
	position: relative;
	padding: 40px 48px;
	background: var(--black-300);
	border-radius: 24px;
	color: #fff;
	margin: 0 0 40px;
}
.svc-quote > i { font-size: 44px; color: var(--primary-color); display: block; margin-bottom: 18px; }
.svc-quote p { font-family: var(--bricolage); font-size: 28px; line-height: 1.4; color: #fff; margin-bottom: 12px; }
.svc-quote span { color: rgba(255, 255, 255, 0.55); font-size: 15px; }
@media (max-width: 767.98px) {
	.svc-quote { padding: 28px 24px; }
	.svc-quote p { font-size: 21px; }
}

.svc-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.svc-check {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 16px;
	padding: 18px 20px;
}
.svc-check .check-ic {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	background: rgba(228, 2, 43, 0.08);
	color: var(--primary-color);
}
.svc-check .check-ic.good { background: #e8f7ee; color: #0e7a3d; }
.svc-check .check-ic.warn { background: #fff5e6; color: #b45309; }
.svc-check h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.svc-check p { font-size: 13.5px; line-height: 1.6; color: var(--subtitle); margin: 0; }
@media (max-width: 767.98px) { .svc-checks { grid-template-columns: 1fr; } }

.svc-sidecard { background: #fff; border: 1px solid #e5e5e5; border-radius: 22px; padding: 34px 30px; height: 100%; }
.svc-sidecard h3 { font-size: 22px; font-weight: 600; margin-bottom: 16px; }
.svc-sidecard ul { list-style: none; padding: 0; margin: 0 0 20px; }
.svc-sidecard li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: 15px; line-height: 1.6; color: var(--black-100); }
.svc-sidecard li:last-child { margin-bottom: 0; }
.svc-sidecard li i { color: var(--primary-color); font-size: 18px; margin-top: 2px; flex-shrink: 0; }

@media (max-width: 991.98px) { .svc-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .svc-stats { grid-template-columns: 1fr; } }

/* ---------------- Ongoing Website Support (unique components) ---------------- */
.svc-media-figure { position: relative; }
.svc-media-figure img { width: 100%; height: auto; border-radius: 22px; display: block; border: 1px solid #ececec; box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.16); }
.svc-media-badge {
	position: absolute;
	left: 18px;
	bottom: 18px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--black-300);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}
.svc-media-badge i { color: var(--primary-color); font-size: 16px; }
.svc-media-badge::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2fd07a; box-shadow: 0 0 0 3px rgba(47, 208, 122, 0.25); }

.svc-symptoms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 26px 0 8px; }
.svc-symptom {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 16px;
	padding: 18px 20px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.svc-symptom:hover { border-color: var(--primary-color); box-shadow: 0 14px 30px rgba(228, 2, 43, 0.1); transform: translateY(-2px); }
.svc-symptom .symptom-ic {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(228, 2, 43, 0.1);
	color: var(--primary-color);
	font-size: 18px;
}
.svc-symptom h4 { font-size: 15.5px; font-weight: 700; margin-bottom: 3px; }
.svc-symptom p { font-size: 13.5px; line-height: 1.6; color: var(--subtitle); margin: 0; }

.svc-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.svc-tier {
	position: relative;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 22px;
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
}
.svc-tier.featured { border-color: var(--primary-color); box-shadow: 0 20px 44px rgba(228, 2, 43, 0.14); }
.svc-tier .tier-tag {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--primary-color);
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
}
.svc-tier h3 { font-size: 19px; font-weight: 700; margin-bottom: 6px; font-family: var(--bricolage); }
.svc-tier .tier-who { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary-color); margin-bottom: 12px; }
.svc-tier p { font-size: 14.5px; line-height: 1.65; color: var(--black-100); flex: 1; margin: 0; }
.svc-tier .tier-link { margin-top: 18px; font-weight: 700; font-size: 13.5px; color: var(--primary-color); display: inline-flex; align-items: center; gap: 4px; }

.svc-report {
	display: flex;
	align-items: center;
	gap: 22px;
	background: var(--black-300);
	border-radius: 22px;
	padding: 30px 34px;
	margin-top: 26px;
}
.svc-report i {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 15px;
	background: var(--primary-color);
	color: #fff;
	font-size: 25px;
}
.svc-report h4 { color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.svc-report p { color: rgba(255, 255, 255, 0.62); font-size: 14.5px; line-height: 1.6; margin: 0; }

@media (max-width: 991.98px) { .svc-compare { grid-template-columns: 1fr; } .svc-tier.featured { order: -1; } }
@media (max-width: 767.98px) { .svc-symptoms { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .svc-report { flex-direction: column; align-items: flex-start; } }

/* =========================================================
   About page (unique founder-story layout)
   ========================================================= */
.about-founder-card {
	background: #fff;
	border: 1px solid #bebebe;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.14);
}
.founder-photo {
	position: relative;
	height: 100%;
	min-height: 420px;
	background: var(--black-300);
}
.founder-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.founder-badge {
	position: absolute;
	left: 18px;
	bottom: 18px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;
	border-radius: 999px;
	background: rgba(7, 7, 7, 0.85);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	backdrop-filter: blur(6px);
}
.founder-badge i { color: var(--primary-color); font-size: 16px; }
.founder-info { padding: 52px 54px; }
.founder-info h2 { font-size: 38px; margin-bottom: 6px; }
.founder-origin { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; color: var(--primary-color); margin-bottom: 16px; }
.founder-snapshot { font-size: 16.5px; line-height: 29px; color: var(--black-100); margin-bottom: 26px; }
.founder-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.founder-stat {
	background: var(--background);
	border: 1px solid #ececec;
	border-radius: 16px;
	padding: 18px 16px;
	text-align: center;
}
.founder-stat span { display: block; font-family: var(--bricolage); font-size: 30px; font-weight: 700; color: var(--primary-color); line-height: 1.1; }
.founder-stat small { color: var(--subtitle); font-size: 12.5px; line-height: 1.4; display: block; margin-top: 4px; }
.founder-social { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.founder-social span { font-weight: 700; font-size: 15px; margin-right: 4px; }
.founder-social a {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--black-300);
	color: #fff;
	font-size: 18px;
	transition: background 0.25s ease, transform 0.25s ease;
}
.founder-social a:hover { background: var(--primary-color); color: #fff; transform: translateY(-3px); }

.about-story { max-width: 920px; margin: 0 auto; }
.story-chapter {
	position: relative;
	background: #fff;
	border: 1px solid #bebebe;
	border-radius: 20px;
	padding: 34px 40px 34px 118px;
	margin-bottom: 22px;
}
.story-num {
	position: absolute;
	top: 34px;
	left: 40px;
	font-family: var(--bricolage);
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	color: var(--primary-color);
	opacity: 0.9;
}
.story-chapter::before {
	content: "";
	position: absolute;
	left: 96px;
	bottom: -22px;
	width: 2px;
	height: 22px;
	background: var(--primary-color);
	opacity: 0.35;
}
.story-chapter:last-child::before { display: none; }
.story-body h3 { font-size: 25px; font-weight: 600; margin-bottom: 12px; }
.story-body p { font-size: 16px; line-height: 29px; color: var(--subtitle); margin-bottom: 12px; }
.story-body p:last-child { margin-bottom: 0; }
.story-body p strong { color: var(--black-100); }

.about-process-step {
	background: #fff;
	border: 1px solid #bebebe;
	border-radius: 20px;
	padding: 30px 26px;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.about-process-step:hover { border-color: var(--primary-color); transform: translateY(-5px); }
.process-ic {
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: rgba(228, 2, 43, 0.1);
	color: var(--primary-color);
	font-size: 24px;
	margin-bottom: 18px;
}
.about-process-step h4 { font-size: 17.5px; font-weight: 700; margin-bottom: 8px; }
.about-process-step p { font-size: 14px; line-height: 24px; color: var(--subtitle); margin: 0; }

.belief-card {
	background: #fff;
	border: 1px solid #bebebe;
	border-radius: 20px;
	padding: 34px 30px;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.belief-card:hover { border-color: var(--primary-color); transform: translateY(-5px); }
.belief-card > i { font-size: 40px; color: var(--primary-color); display: block; margin-bottom: 16px; }
.belief-card h4 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.belief-card p { font-size: 15px; line-height: 26px; color: var(--subtitle); margin: 0; }

.about-vision {
	background: var(--black-300);
	border-radius: 24px;
	overflow: hidden;
}
.vision-inner { padding: 64px 60px; }
.vision-inner h2 { color: #fff; font-size: 34px; line-height: 1.2; margin-bottom: 18px; }
.vision-inner p { color: rgba(255, 255, 255, 0.7); font-size: 16px; line-height: 29px; margin-bottom: 14px; }
.vision-inner p:last-of-type { margin-bottom: 24px; }
.vision-media {
	height: 100%;
	min-height: 340px;
	background: radial-gradient(circle at 30% 20%, rgba(228, 2, 43, 0.35), transparent 60%), var(--black-200);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}
.vision-media img { width: 220px; height: 220px; object-fit: contain; filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.45)); }

@media (max-width: 991.98px) {
	.founder-photo { min-height: 380px; }
	.founder-info { padding: 38px 30px; }
	.vision-inner { padding: 44px 30px; }
}
@media (max-width: 767.98px) {
	.story-chapter { padding: 28px 26px 28px 84px; }
	.story-num { left: 26px; font-size: 36px; top: 30px; }
	.story-chapter::before { left: 44px; }
	.founder-stats { grid-template-columns: 1fr; }
	.cta-band { padding: 40px 28px; }
}
@media (max-width: 575.98px) {
	.story-chapter { padding-left: 78px; }
}

/* =========================================================
   Home page revamp additions
   ========================================================= */

/* --- Hero ambient glows --- */
.hero { overflow: hidden; }
.hero-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(70px);
	opacity: 0.55;
	z-index: 0;
}
.hero-glow-1 {
	width: 520px;
	height: 520px;
	top: -180px;
	right: -120px;
	background: radial-gradient(circle, rgba(228, 2, 43, 0.35), transparent 65%);
}
.hero-glow-2 {
	width: 460px;
	height: 460px;
	bottom: -200px;
	left: -140px;
	background: radial-gradient(circle, rgba(228, 2, 43, 0.22), transparent 65%);
}
.hero .container { position: relative; z-index: 1; }

/* --- Hero trust badges --- */
.hero-badges {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-top: 26px;
}
.hero-badges span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--subtitle);
}
.hero-badges i { color: var(--primary-color); font-size: 15px; }

/* --- Inline text link used on the home page --- */
.process-link {
	font-weight: 600;
	color: var(--primary-color);
	border-bottom: 1px solid rgba(228, 2, 43, 0.35);
	transition: all 0.3s ease;
}
.process-link:hover { color: var(--black-100); border-color: var(--black-100); }

/* --- Featured guides header row --- */
.featured-guides-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

@media (max-width: 767.98px) {
	.hero-glow-1 { width: 380px; height: 380px; top: -120px; right: -100px; }
	.hero-glow-2 { width: 340px; height: 340px; bottom: -140px; left: -110px; }
}

@media (max-width: 575.98px) {
	.hero-badges { flex-direction: column; align-items: center; gap: 8px; }
	.featured-guides-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* --- Full-bleed dark sections --- */
.section-dark {
	background: var(--black-200);
	position: relative;
	overflow: hidden;
}
.section-dark::before {
	content: "";
	position: absolute;
	top: -160px;
	right: -90px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(228, 2, 43, 0.16), transparent 65%);
	filter: blur(50px);
	pointer-events: none;
}
.section-dark > .container { position: relative; z-index: 1; }
.section-dark .pill { color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.section-dark .sec-title { color: #fff; }
.section-dark .sec-title span { color: var(--primary-color); }
.section-dark .sec-lead { color: rgba(255, 255, 255, 0.72); }
.section-dark .step-card h4 { color: #fff; }
.section-dark .step-card p { color: rgba(255, 255, 255, 0.65); }
.section-dark .step-circle { background: #fff; border-color: rgba(255, 255, 255, 0.35); }
.section-dark .process-link { color: var(--primary-color); border-color: rgba(228, 2, 43, 0.5); }
.section-dark .process-link:hover { color: #fff; border-color: #fff; }

/* --- Pricing cards --- */
.pricing-card {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 24px;
	padding: 44px 34px;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: all 0.4s ease;
}
.pricing-card:hover {
	border-color: var(--primary-color);
	transform: translateY(-6px);
	box-shadow: 0 24px 50px rgba(7, 7, 7, 0.08);
}
.pricing-card .pricing-badge {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--primary-color);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 7px 20px;
	border-radius: 50px;
	white-space: nowrap;
	z-index: 1;
}
.pricing-card h4 { font-size: 25px; font-weight: 700; margin-bottom: 4px; }
.pricing-card .pricing-price {
	font-family: var(--bricolage);
	font-size: 46px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--black-100);
	margin: 12px 0 8px;
}
.pricing-card .pricing-cadence {
	font-family: var(--manrope);
	font-size: 14px;
	font-weight: 600;
	color: var(--subtitle);
	display: inline-block;
	margin-left: 8px;
}
.pricing-card .pricing-desc {
	color: var(--subtitle);
	font-size: 15px;
	line-height: 26px;
	margin-bottom: 22px;
}
.pricing-card .pricing-features {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	flex-grow: 1;
}
.pricing-card .pricing-features li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14.5px;
	line-height: 24px;
	color: var(--black-100);
	padding: 7px 0;
}
.pricing-card .pricing-features i { color: var(--primary-color); margin-top: 4px; }
.pricing-card .btn { margin-top: auto; }
.pricing-card.is-featured {
	background: var(--black-200);
	border-color: var(--black-200);
	box-shadow: 0 22px 46px rgba(0, 0, 0, 0.28);
}
.pricing-card.is-featured h4,
.pricing-card.is-featured .pricing-price { color: #fff; }
.pricing-card.is-featured .pricing-cadence,
.pricing-card.is-featured .pricing-desc { color: rgba(255, 255, 255, 0.68); }
.pricing-card.is-featured .pricing-features li { color: rgba(255, 255, 255, 0.85); }
.pricing-card.is-featured:hover {
	border-color: var(--primary-color);
	box-shadow: 0 24px 52px rgba(0, 0, 0, 0.4);
}
.pricing-note { font-size: 15px; color: var(--subtitle); margin-top: 10px; }
/* ---------------- Web development home (split hero + partner logos) ---------------- */
.wd-hero .row { align-items: center; }
.wd-hero h1 { font-size: 56px; margin-bottom: 18px; }
.wd-hero .hero-lead { font-size: 19px; margin-bottom: 12px; }
.wd-hero .hero-copy { margin: 0 0 26px; }
.wd-hero .hero-badges { justify-content: flex-start; margin-top: 22px; }
.wd-hero-media { position: relative; }
.wd-hero-media img {
	width: 100%;
}

/* --- Partner logos --- */
.partner-strip { padding: 50px 0 40px; }
.partner-strip .partner-label {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--subtitle);
	margin-bottom: 26px;
}
.partner-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px 60px;
}
.partner-logos img {
	height: 34px;
	width: auto;
	opacity: 0.55;
	filter: grayscale(1);
	transition: all 0.3s ease;
}
.partner-logos img:hover { opacity: 1; filter: none; }

@media (max-width: 991.98px) {
	.wd-hero h1 { font-size: 46px; }
	.wd-hero-media { margin-top: 34px; }
}
@media (max-width: 575.98px) {
	.wd-hero h1 { font-size: 36px; }
	.wd-hero .hero-badges { flex-direction: row; justify-content: flex-start; }
	.partner-logos { gap: 16px 32px; }
	.partner-logos img { height: 28px; }
}

/* --- "Looks good isn't enough" full-width blue section --- */
.wd-enough { background: var(--secondary-color); }
.wd-enough .pill { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.wd-enough .sec-title { color: #fff; }
.wd-enough .sec-lead { color: rgba(255, 255, 255, 0.78); }
.wd-enough .seo-feature-item {
	height: 100%;
	margin-bottom: 0;
	background: rgba(255, 255, 255, 0.05);
	flex-direction: column;
	gap: 16px;
}
.wd-enough-note {
	max-width: 860px;
	margin: 44px auto 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	font-size: 17px;
	line-height: 30px;
}

/* --- Recent projects cards --- */
.project-card {
	background: #fff;
	border: 1px solid #bebebe;
	border-radius: 20px;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: all 0.4s ease;
}
.project-card:hover { border-color: var(--primary-color); transform: translateY(-6px); box-shadow: 0 22px 46px rgba(7, 7, 7, 0.1); }
.project-card .project-thumb { overflow: hidden; }
.project-card .project-thumb img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.5s ease;
}
.project-card:hover .project-thumb img { transform: scale(1.05); }
.project-card .project-body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.project-card .project-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	border: 1px solid #e5e5e5;
	border-radius: 50px;
	padding: 5px 14px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--subtitle);
	margin-bottom: 12px;
}
.project-card .project-tag i { color: var(--primary-color); font-size: 14px; }
.project-card h4 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.project-card p { color: var(--subtitle); font-size: 15px; line-height: 26px; margin-bottom: 16px; flex-grow: 1; }
.project-card .industry-link { opacity: 1; font-weight: 700; color: var(--primary-color); display: inline-flex; align-items: center; gap: 4px; }
.project-card .industry-link i { transition: transform 0.3s; }
.project-card:hover .industry-link i { transform: translateX(4px); }

/* --- Full-width image banner --- */
.wd-fullimg-section { padding: 0 0 90px; }
.wd-fullimg-section img {
	width: 100%;
	height: clamp(260px, 42vw, 520px);
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* --- Reviews cards --- */
.review-card {
	background: #fff;
	border: 1px solid #bebebe;
	border-radius: 20px;
	padding: 30px 28px;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: all 0.4s ease;
}
.review-card:hover { border-color: var(--primary-color); transform: translateY(-5px); box-shadow: 0 20px 44px rgba(7, 7, 7, 0.08); }
.review-card .review-stars { color: var(--primary-color); font-size: 18px; margin-bottom: 16px; letter-spacing: 2px; }
.review-card .review-text { color: var(--black-100); font-size: 15.5px; line-height: 28px; margin-bottom: 20px; flex-grow: 1; }
.review-card .review-text::before { content: "\201C"; color: var(--primary-color); font-family: var(--bricolage); font-size: 30px; line-height: 0; vertical-align: -6px; margin-right: 4px; }
.review-card .review-author { display: flex; align-items: center; gap: 14px; }
.review-card .review-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--black-200);
	flex-shrink: 0;
}
.review-card .review-avatar-initials {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--black-200);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	flex-shrink: 0;
}
.review-card .review-name { font-size: 16px; font-weight: 700; color: var(--black-100); margin: 0; }
.review-card .review-role { font-size: 13.5px; color: var(--subtitle); margin: 2px 0 0; }

/* --- Reviews carousel --- */
.reviews-carousel { position: relative; }
.reviews-viewport { overflow: hidden; }
.reviews-track {
	display: flex;
	gap: 24px;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.review-slide { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; }
.reviews-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid #bebebe;
	background: #fff;
	color: var(--black-100);
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(7, 7, 7, 0.12);
	transition: all 0.3s ease;
}
.reviews-nav:hover:not(:disabled) {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}
.reviews-nav:disabled { opacity: 0.35; cursor: default; }
.reviews-prev { left: -24px; }
.reviews-next { right: -24px; }
.reviews-dots { display: flex; justify-content: center; gap: 9px; margin-top: 30px; }
.reviews-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	background: #d4d4d4;
	cursor: pointer;
	padding: 0;
	transition: all 0.3s ease;
}
.reviews-dot.is-active { background: var(--primary-color); width: 26px; border-radius: 50px; }

@media (max-width: 991.98px) {
	.review-slide { flex: 0 0 calc((100% - 24px) / 2); }
	.reviews-prev { left: -8px; }
	.reviews-next { right: -8px; }
}
@media (max-width: 767.98px) {
	.review-slide { flex: 0 0 100%; }
	.reviews-nav { width: 40px; height: 40px; font-size: 18px; }
	.reviews-prev { left: 0; }
	.reviews-next { right: 0; }
}