/* ==========================================================================
   GroXpertise — clean SaaS aesthetic: whitespace, large type, one accent.
   ========================================================================== */

:root {
	/* Theme: navy & orange */
	--ink: #102a43;
	--ink-soft: #334a63;
	--muted: #6b7280;
	--line: #e6e8ec;
	--bg: #ffffff;
	--bg-gray: #f6f7f9;
	--accent: #e8590c;
	--accent-dark: #c2410c;
	--accent-tint: #fdeee3;
	--accent-light: #f08c4f; /* accent on dark backgrounds */
	--dark-card: #16334f;    /* raised surface on --ink sections */
	--dark-line: #24466b;    /* borders on --ink sections */
	--dark-text: #93a9bf;    /* muted text on --ink sections */
	--cta-tint: #fbdcc8;     /* body text on --accent-dark band */
	--radius: 14px;
	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--accent-dark); text-decoration: none; }

h1, h2, h3 {
	line-height: 1.15;
	letter-spacing: -0.025em;
	font-weight: 700;
	margin: 0 0 0.5em;
	color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 760px; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
	font-family: var(--font);
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 15px 30px; font-size: 17px; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--dark-card); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--accent-tint); }

/* --- Header ------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
	gap: 24px;
}
.brand {
	display: flex;
	align-items: baseline; /* text baseline sits on the logo's bottom edge */
	gap: 10px;
	text-decoration: none;
	color: var(--ink);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: -0.02em;
	border: none;
}
/* No focus outline on the logo, in any state. */
.brand:focus,
.brand:focus-visible { outline: none; }
.brand-logo {
	height: 26px;
	width: auto;
	display: block;
}
.site-nav { display: flex; align-items: center; gap: 28px; }
.nav-list {
	display: flex;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-list a {
	text-decoration: none;
	color: var(--ink-soft);
	font-weight: 500;
	font-size: 15.5px;
}
.nav-list a:hover { color: var(--ink); }
.nav-list a.active {
	color: var(--accent);
	border-bottom: 2px solid var(--accent);
	padding-bottom: 3px;
}
.nav-cta { padding: 9px 18px; font-size: 15px; }

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 6px;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
}
.nav-toggle-bar {
	width: 24px; height: 2px;
	background: var(--ink);
	transition: transform 0.2s ease;
}

/* Contact utility bar (email + phone) above the main nav — desktop/tablet.
   Keeps contact info out of the crowded main row so the nav can't overlap the
   logo. On mobile the sticky call bar (below) takes over. */
.topbar {
	background: var(--ink);
	color: #fff;
}
.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 26px;
	height: 38px;
}
.topbar-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--dark-text);
	font-weight: 500;
	font-size: 13.5px;
	text-decoration: none;
	white-space: nowrap;
}
.topbar-link:hover { color: #fff; }
.topbar-link svg { width: 14px; height: 14px; fill: currentColor; }

.call-bar { display: none; }

@media (max-width: 720px) {
	.topbar { display: none; } /* mobile uses the sticky call bar instead */
	.call-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 200;
		background: var(--accent);
		color: #fff;
		font-weight: 700;
		font-size: 17px;
		text-decoration: none;
		padding: 15px 16px calc(15px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -2px 14px rgba(11, 18, 32, 0.18);
	}
	.call-bar:hover { color: #fff; }
	.call-bar svg { width: 20px; height: 20px; fill: currentColor; }
	body { padding-bottom: 62px; } /* clear the fixed bar */
}

/* --- Sections ------------------------------------------------------------ */

.section { padding: 96px 0; }
.section-gray { background: var(--bg-gray); }
.section-dark { background: var(--ink); color: #cbd2de; }
.section-dark h2 { color: #fff; }

.section-head { max-width: 960px; margin: 0 auto 56px; text-align: center; }
.section-head p { color: var(--muted); font-size: 18px; }
.section-head-left { margin: 0 0 32px; text-align: left; }

.eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
}
.eyebrow-light { color: var(--accent-light); }

/* --- Hero ----------------------------------------------------------------- */

.hero { padding: 110px 0 120px; text-align: center; }
.hero-inner { max-width: 1280px; }
.hero h1 { margin-bottom: 20px; }
.hero-sub {
	font-size: clamp(17px, 2vw, 20px);
	color: var(--muted);
	max-width: 960px;
	margin: 0 auto 36px;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 0 0 2em; }

/* Image-backed hero (WP featured image on pages): navy overlay, light text */
.hero-image {
	background-size: cover;
	background-position: center;
	min-height: 80vh;  /* fallback for browsers without dvh */
	min-height: 80dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hero-image > .container { width: 100%; }
.hero-image { position: relative; }

.scroll-cue {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
	animation: cue-bob 2.4s ease-in-out infinite;
}
.scroll-cue:hover { border-color: #fff; background: rgba(255, 255, 255, 0.18); }
.scroll-cue svg { width: 18px; height: 18px; }
@keyframes cue-bob {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 6px); }
}
@media (prefers-reduced-motion: reduce) {
	.scroll-cue { animation: none; }
}
.hero-image h1 { color: #fff; }
.hero-image .hero-sub { color: #dbe4ee; }
.hero-image .hero-note { color: #b9c6d6; }
.hero-image .eyebrow { color: var(--accent-light); }
.hero-image .article-meta { color: #b9c6d6; }
.hero-image .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.hero-image .btn-ghost:hover { border-color: #fff; }

.page-hero { padding: 96px 0 72px; }
.page-hero .container { max-width: 880px; }
.page-hero .hero-sub { margin: 0 0 32px; }
.page-hero-compact { padding: 80px 0 48px; }

/* --- Problem section ------------------------------------------------------ */

.problem-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
}
.problem-grid li {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px 22px;
	font-weight: 600;
	position: relative;
	padding-left: 52px;
}
.problem-grid li::before {
	content: "✕";
	position: absolute;
	left: 20px;
	top: 19px;
	color: #c0392b;
	font-weight: 700;
}
.statement {
	text-align: center;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--ink-soft);
	margin: 1em auto;
	max-width: 960px;
}
.statement strong { color: var(--ink); }

/* --- GROW framework -------------------------------------------------------- */

.grow-layout {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 72px;
	align-items: start;
}
.grow-intro p { color: var(--muted); font-size: 18px; margin-bottom: 28px; }
.grow-steps {
	list-style: none;
	margin: 0 auto;
	max-width: 960px;
	padding: 0;
	position: relative;
}
.grow-steps::before {
	content: "";
	position: absolute;
	left: 31px;
	top: 32px;
	bottom: 32px;
	width: 2px;
	background: var(--line);
}
.grow-step {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding: 18px 0;
	position: relative;
}
.grow-letter {
	flex: 0 0 64px;
	height: 64px;
	display: grid;
	place-items: center;
	background: var(--accent-tint);
	border: 2px solid var(--accent);
	border-radius: 16px;
	color: var(--accent-dark);
	font-size: 26px;
	font-weight: 800;
	position: relative;
	z-index: 1;
	background-clip: padding-box;
}
.grow-step h3 { margin: 8px 0 4px; }
.grow-step p { color: var(--muted); margin: 0; }

/* --- Cards ------------------------------------------------------------------ */

.card-grid { display: grid; gap: 20px; }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-5 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card {
	display: block;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.card:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(11, 18, 32, 0.06); }
.card:has(.card-link):hover { border-color: var(--accent-dark); }
.card p { color: var(--muted); margin-bottom: 16px; }
.card-link { color: var(--accent-dark); font-weight: 600; font-size: 15px; }
.card-link-muted { color: var(--muted); font-weight: 500; }

.pillar { padding: 28px; }
.pillar h3 { font-size: 1.4rem; }
.pillar p { color: var(--muted); }

/* --- Industries --------------------------------------------------------------- */

.industry-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.industry-col {
	background: var(--bg-gray);
	border-radius: var(--radius);
	padding: 32px;
}
.section-gray .industry-col { background: #fff; border: 1px solid var(--line); }
.industry-col h3 { margin-bottom: 18px; }
.industry-col ul { list-style: none; margin: 0; padding: 0; }
.industry-col li { padding: 9px 0; border-top: 1px solid var(--line); }
.industry-col li:first-child { border-top: 0; }
.industry-col a { text-decoration: none; font-weight: 600; color: var(--ink); }
.industry-col a:hover { color: var(--accent-dark); }
.industry-col em { color: var(--muted); font-size: 14px; }

/* Industry cards (one service per card, four across to keep the row compact) */
.industry-cards { grid-template-columns: repeat(4, 1fr); }
.industry-card { display: flex; flex-direction: column; }
.industry-card h3 { font-size: 1.35rem; margin-bottom: 8px; }
.industry-card p { color: var(--muted); margin-bottom: 18px; }
.industry-card .card-link { margin-top: auto; }
@media (max-width: 840px) { .industry-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .industry-cards { grid-template-columns: 1fr; } }

/* --- Assessment section ---------------------------------------------------------- */

.assessment-layout {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 72px;
	align-items: center;
}
.assessment-layout p { font-size: 18px; }

.check-list {
	list-style: none;
	margin: 0 0 36px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
}
.check-list li { position: relative; padding-left: 30px; font-weight: 600; color: #fff; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-light); font-weight: 700; }
.check-list-dark { grid-template-columns: 1fr; }
.check-list-dark li { color: var(--ink); }
.check-list-dark li::before { color: var(--accent); }

.x-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.x-list li { position: relative; padding-left: 30px; font-weight: 600; }
.x-list li::before { content: "✕"; position: absolute; left: 0; color: #c0392b; font-weight: 700; }

.score-card {
	background: var(--dark-card);
	border: 1px solid var(--dark-line);
	border-radius: 20px;
	padding: 36px;
	text-align: center;
	position: relative;
}
.score-ring { width: 150px; height: 150px; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 10; }
.score-ring-bg { stroke: var(--dark-line); }
.score-ring-fill {
	stroke: var(--accent-light);
	stroke-linecap: round;
	stroke-dasharray: 327;
	stroke-dashoffset: 92; /* ~72% of circumference */
}
.score-value {
	position: absolute;
	top: 86px;
	left: 0; right: 0;
	display: grid;
	line-height: 1.1;
}
.score-value span { font-size: 38px; font-weight: 800; color: #fff; }
.score-value small { color: var(--dark-text); font-size: 13px; }
.score-bars { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.score-bars li { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; }
.score-bars span { font-size: 13px; color: var(--dark-text); text-align: left; }
.score-bars i {
	display: block;
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--accent), var(--accent-light));
	width: var(--w, 50%);
}

/* --- Case studies --------------------------------------------------------------- */

.case-card {
	background: var(--bg-gray);
	border-radius: var(--radius);
	padding: 32px;
}
.case-card-wide { max-width: 560px; margin: 0 auto; text-align: center; }
.case-rows { display: grid; gap: 10px; margin: 20px 0; }
.case-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 18px;
}
.case-row span { color: var(--muted); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.case-result {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--accent-dark);
	margin: 0;
}

/* --- Solutions overview rows ---------------------------------------------------- */

.solution-rows { display: grid; gap: 20px; }
.solution-row {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 48px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 40px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.solution-row:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(11, 18, 32, 0.06); }
.solution-row-main p:last-child { color: var(--muted); margin: 0; }
.solution-row-side ul { list-style: none; margin: 0 0 16px; padding: 0; }
.solution-row-side li { padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 15px; }

/* --- Two-column + contact layouts ------------------------------------------------ */

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.outcomes-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

.contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.contact-form-wrap {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 36px;
}
.step-list { margin: 0; padding-left: 20px; display: grid; gap: 16px; }
.step-list li { padding-left: 6px; }

.dimension-list { display: grid; gap: 8px; }
.dimension { display: flex; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.dimension:last-child { border-bottom: 0; }
.dimension-num { font-weight: 800; color: var(--accent); font-size: 15px; padding-top: 4px; }
.dimension h3 { margin-bottom: 4px; font-size: 1.05rem; }
.dimension p { color: var(--muted); margin: 0; font-size: 15.5px; }
.bonus-teaser { margin: 16px 0 0; color: var(--muted); font-size: 14.5px; font-style: italic; }

/* --- Forms -------------------------------------------------------------------- */

.lead-form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 6px; }
.form-row label { font-weight: 600; font-size: 14.5px; }
.form-row label span { color: var(--muted); font-weight: 400; }
.form-row input,
.form-row select,
.form-row textarea {
	font-family: var(--font);
	font-size: 16px;
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: #fff;
	color: var(--ink);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: 0;
	border-color: var(--accent);
}
.hp-field { position: absolute; left: -9999px; }
.form-notice { border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; font-weight: 600; }
.form-notice-success { background: var(--accent-tint); color: var(--accent-dark); }
.form-notice-error { background: #fdecea; color: #c0392b; }

/* --- CTA band ------------------------------------------------------------------- */

.cta-band { background: var(--accent-dark); padding: 88px 0; overflow: hidden; position: relative; }
.cta-band-image { background-size: cover; background-position: center; }
.cta-band::after { display: block; width: 100%; height: 120vh; position: absolute; top: 0; left: 0; z-index: 1; background: rgba(90, 30, 0, 0.5); content: ""; }
.cta-band-inner { text-align: center; max-width: 960px; position: relative; z-index: 5; }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--cta-tint); font-size: 18px; margin-bottom: 32px; }
.cta-band .hero-actions { justify-content: center; }

/* Ghost buttons need light strokes on dark/accent backgrounds. */
.section-dark .btn-ghost,
.cta-band .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.section-dark .btn-ghost:hover,
.cta-band .btn-ghost:hover { border-color: #fff; }

/* --- Platform page ---------------------------------------------------------------- */

.hero-note { color: var(--muted); font-size: 14px; margin-top: 16px; }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Module cards (name eyebrow, benefit headline, "Use it to" list, link) */
.module-card { display: flex; flex-direction: column; }
.module-card .eyebrow { margin-bottom: 8px; }
.module-card h3 { font-size: 1.2rem; line-height: 1.3; margin-bottom: 10px; }
.module-card p { color: var(--ink-soft); }
.module-card .use-label { color: var(--ink); font-weight: 700; font-size: 14px; margin: 6px 0 10px; }
.module-card .check-list { margin: 0 0 18px; gap: 8px; }
.module-card .check-list li { font-weight: 500; font-size: 15px; }
.module-card .card-link { margin-top: auto; }

/* Audience split: intro copy + industries checklist */
.platform-audience { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 40px; }
.platform-audience h3 { font-size: 1.4rem; margin-bottom: 10px; }
.platform-cols { grid-template-columns: repeat(2, 1fr); gap: 10px 24px; margin: 0 auto 1.5em; max-width: 960px; }

/* Comparison table */
.table-scroll { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); }
.compare-table th,
.compare-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); width: 50%; }
.compare-table thead th { background: var(--ink); color: #fff; font-size: 15px; }
.compare-table thead th:last-child { background: var(--accent-dark); }
.compare-table tbody tr:nth-child(even) { background: var(--bg-gray); }
.compare-table td:first-child { color: var(--muted); }
.compare-table td:last-child { font-weight: 600; color: var(--ink); }

/* Insight-to-implementation dark band */
.platform-implementation { max-width: 760px; margin: 0 auto; text-align: center; }
.platform-implementation h2 { color: #fff; }
.platform-implementation p { color: var(--dark-text); font-size: 18px; margin: 16px 0 28px; }
.platform-implementation .hero-actions { justify-content: center; }

/* FAQ accordion (native <details>) */
.faq { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px; background: #fff; }
.faq-item summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: 18px 30px 18px 0; list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0; top: 15px; font-size: 22px; line-height: 1; color: var(--accent); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item > div { padding: 0 0 18px; }
.faq-item p { color: var(--ink-soft); margin: 0; }

@media (max-width: 900px) {
	.card-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.platform-audience { grid-template-columns: 1fr; gap: 24px; }
	.card-grid-4 { grid-template-columns: 1fr; }
}

/* --- Growth Audit page ------------------------------------------------------------ */

/* On-page anchor sub-nav */
.subnav { background: #fff; border-bottom: 1px solid var(--line); }
.subnav-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 16px 0; }
.subnav a { color: var(--ink-soft); font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; }
.subnav a:hover { color: var(--accent-dark); }

/* Category cards (heading, intro, 2-col checklist, key-question callout) */
.audit-category { display: flex; flex-direction: column; }
.audit-category h3 { font-size: 1.25rem; margin-bottom: 8px; }
.audit-category > p { color: var(--ink-soft); }
.audit-cols { grid-template-columns: repeat(2, 1fr); gap: 8px 24px; margin: 12px 0 16px; }
.audit-cols li { font-weight: 500; font-size: 14.5px; }
.key-question { margin: auto 0 0; padding: 14px 16px; background: var(--accent-tint); border-radius: 10px; color: var(--ink); font-size: 14.5px; }
.key-question strong { color: var(--accent-dark); }

/* Report + industries helpers */
.report-sub { text-align: center; margin: 56px 0 6px; }
.report-sub-note { text-align: center; color: var(--muted); margin: 0 0 32px; }
.steps-cta { text-align: center; margin-top: 48px; }
.muted-note { color: var(--muted); font-size: 15px; max-width: 760px; margin: 24px auto 40px; text-align: center; }
.audit-industries { grid-template-columns: repeat(3, 1fr); max-width: 820px; margin: 0 auto; }

@media (max-width: 640px) {
	.audit-cols { grid-template-columns: 1fr; }
	.audit-industries { grid-template-columns: 1fr 1fr; }
}

/* --- Free Growth Audit landing page ----------------------------------------------- */

/* Split hero: copy left, form right */
.lead-hero { text-align: left; padding: 64px 0 72px; position: relative; overflow: hidden; }
.lead-hero::after { display: block; margin: 0; padding: 0; width: 100%; height: 110%; min-height: 200vh; background: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; z-index: 1; content: ""; }
.lead-hero-inner { display: grid; grid-template-columns: 1fr 600px; gap: 56px; align-items: start; position: relative; z-index: 5; }
.lead-hero-copy h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.lead-hero .hero-sub { margin: 0 0 18px; }
.lead-hero-actions { justify-content: flex-start; }
.lead-hero .hero-note { margin-top: 18px; }

/* Form card */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: 0 12px 34px rgba(11, 18, 32, 0.08); }
.form-card h2 { font-size: 1.5rem; margin-bottom: 6px; }
.form-card > p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.form-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.btn-block { display: block; width: 100%; text-align: center; }
.form-privacy { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 14px 0 0; }
/* Cross-link between the Assessment (self-serve report) and Strategy Session (live call). */
.followup-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.followup-note a { color: var(--accent-dark); font-weight: 600; }
.form-success { text-align: center; }
.form-success h2 { color: var(--accent-dark); }
.form-success .btn { margin-top: 12px; }

/* Sample-finding recommendation line */
.card .reco { color: var(--ink-soft); font-size: 14px; margin: 12px 0 0; }
.card .reco strong { color: var(--accent-dark); }

@media (max-width: 960px) {
	.lead-hero-inner { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
}
@media (max-width: 900px) {
	.lead-hero { padding: 40px 0 56px; }
	.lead-hero-inner { gap: 36px; }
}
@media (max-width: 560px) {
	.form-2col { grid-template-columns: 1fr; }
}

/* ==================================================================================
   Lead-magnet tool pages — Free Growth Audit (#free-growth-audit) & Website Score
   (#website-score). Scoped to each page via its #slug wrapper.
   ================================================================================== */

/* Hero: a soft branded backdrop so the white form card lifts off the page. */
#free-growth-audit .lead-hero,
#website-score .lead-hero {
	background:
		radial-gradient(900px 420px at 88% -14%, var(--accent-tint), rgba(253, 238, 227, 0) 62%),
		linear-gradient(180deg, var(--bg-gray), var(--bg) 74%);
	border-bottom: 1px solid var(--line);
}
#free-growth-audit .lead-hero-copy .eyebrow,
#website-score .lead-hero-copy .eyebrow { color: var(--accent-dark); }

/* The form card is the page's primary action: accent cap + a stronger lift. */
#free-growth-audit .lead-hero-form .form-card,
#website-score .lead-hero-form .form-card {
	border-top: 3px solid var(--accent);
	box-shadow: 0 22px 55px rgba(11, 18, 32, 0.13);
}

/* Free Growth Audit — "possible fix" callouts read as a positive next step. */
#free-growth-audit .card .reco {
	background: var(--accent-tint);
	border-radius: 8px;
	padding: 11px 13px;
	margin-top: 14px;
}

/* Website Score — colour-coded score-tier cards (the page's signature element). */
#website-score .score-scale .card {
	border-top-width: 4px;
	text-align: center;
}
#website-score .score-tier .eyebrow {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: none;
	margin-bottom: 4px;
}
#website-score .score-tier h3 { font-size: 1.15rem; margin-bottom: 8px; }
#website-score .score-tier-excellent { border-top-color: #2f9e44; }
#website-score .score-tier-excellent .eyebrow { color: #2f9e44; }
#website-score .score-tier-good { border-top-color: #1c7ed6; }
#website-score .score-tier-good .eyebrow { color: #1c7ed6; }
#website-score .score-tier-fair { border-top-color: #f08c00; }
#website-score .score-tier-fair .eyebrow { color: #f08c00; }
#website-score .score-tier-poor { border-top-color: #e03131; }
#website-score .score-tier-poor .eyebrow { color: #e03131; }

/* Website Score — the quick-win "possible consequence" reads as a caution. */
#website-score .card .reco {
	background: #fff4e6;
	border-radius: 8px;
	padding: 11px 13px;
	margin-top: 14px;
}
#website-score .card .reco strong { color: #d9480f; }

/* --- Footer ----------------------------------------------------------------------- */

.site-footer { background: var(--ink); color: var(--dark-text); padding: 72px 0 36px; }
/* Minimal chrome for standalone lead-magnet tools (Free Growth Audit, Website Score). */
.site-header-minimal .header-inner { justify-content: flex-start; }
.site-footer-minimal { text-align: center; padding: 44px 0; }
.site-footer-minimal .brand { justify-content: center; margin-bottom: 14px; }
.site-footer-minimal .brand-name { color: #fff; }
.site-footer-minimal .footer-legal { color: var(--dark-text); font-size: 14px; margin: 0; }
.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1.5fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--dark-line);
}
.footer-brand .brand { color: #fff; margin-bottom: 14px; }
.footer-brand p { font-size: 15px; max-width: 320px; }
.footer-contact { display: grid; gap: 9px; margin-top: 18px; }
.footer-contact a { display: inline-flex; align-items: center; gap: 9px; color: var(--dark-text); text-decoration: none; font-size: 15px; }
.footer-contact a:hover { color: #fff; }
.footer-contact svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.footer-col h3 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col a { color: var(--dark-text); text-decoration: none; font-size: 15px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { padding-top: 28px; font-size: 14px; }

/* --- Articles ----------------------------------------------------------------------- */

.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

.article-hero .container { max-width: 1280px; } /* align hero text with the header logo */
.article-hero h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); max-width: 840px; }

/* Split hero: title block left, featured image right */
.hero-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 56px;
	align-items: center;
}
.article-hero-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius);
}

@media (max-width: 960px) {
	.hero-split { grid-template-columns: 1fr; gap: 36px; }
}
.article-meta { color: var(--muted); font-size: 15px; margin: 0; }

.article-section { padding-top: 24px; }
.article-body { max-width: 760px; margin: 0 auto; }
.article-body p,
.article-body li { color: var(--ink-soft); font-size: 17.5px; }
.article-body h2 { font-size: 1.65rem; margin: 2em 0 0.6em; }
.article-body h3 { font-size: 1.15rem; margin: 1.6em 0 0.4em; }
.article-body ul,
.article-body ol { padding-left: 26px; margin: 0 0 1.2em; }
.article-body li { margin-bottom: 8px; }
/* Unstyled list: no bullets, no indent. */
ul.nostyle {
	list-style-type: none;
	margin: 1em 0;
	padding: 0;
}

/* Custom list marker: a small outlined (empty) square. */
ul.emptysquare {
	list-style-type: none;
	margin: 1em 0 1.5em;
	padding: 0;
}
ul.emptysquare li {
	padding: 0 0 0 35px;
	position: relative;
}
ul.emptysquare li::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 10px;
	width: 15px;
	height: 15px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ink-soft);
	box-sizing: border-box;
}

/* Custom list marker: a small right-pointing triangle. */
ul.triangle {
	list-style-type: none;
	margin: 1em 0 1.5em;
	padding: 0;
}
ul.triangle li {
	position: relative;
	padding: 0 0 0 1em;
}
ul.triangle li::before {
	display: block;
	width: 10px;
	height: 10px;
	content: "\025B8";
	font-size: 30px;
	line-height: 20px;
	position: absolute;
	top: 0;
	left: 0;
}

/* Content table. Add class="gx-table" to a <table>; widths come from its
   <colgroup><col>. table-layout:fixed makes those col widths authoritative. */
table.gx-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 1.5em 0;
	border: 1px solid var(--dark-card);
}
table.gx-table thead th {
	background: var(--dark-card);
	color: #fff;
	padding: 5px 10px;
	text-align: left;
}
table.gx-table tbody td {
	padding: 10px;
	text-align: left;
	vertical-align: top;
}
table.gx-table tbody tr:nth-child(even) {
	background: var(--bg-gray);
}

/* Editor Button block */
.wp-block-button__link {
	height: 35px;
	padding: 0 1em !important;
}
.article-body a { color: var(--accent-dark); text-decoration: none; }
.article-body a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Figures (images in content) */
figure {
	display: block;
	margin: 1em 0 1.5em;
	padding: 0;
	position: relative;
}
figure img {
	display: block;
	max-width: 100%;
	height: auto;
	border: none;
	margin: 0;
	padding: 0;
}
img.alignnone {
	margin: 1em 0;
	padding: 0;
	border: none;
}
blockquote {
	display: block;
	margin: 1em 0;
	padding: 0 0 0 1em;
	border-left: 5px solid var(--line);
}

.card-date { display: block; color: var(--muted); font-size: 13.5px; margin-bottom: 10px; }

/* Blog pagination */
.pagination { margin-top: 56px; }
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.page-numbers {
	display: inline-block;
	padding: 9px 15px;
	border-radius: 9px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink-soft);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
}
.page-numbers:hover { border-color: var(--accent); color: var(--accent-dark); }
.page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* Two-column article layout: content + ~370px sidebar */
.article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 370px;
	gap: 64px;
	align-items: start;
}
.article-layout .article-body { max-width: 760px; margin: 0; }

.sidebar-sticky { position: sticky; top: 100px; display: grid; gap: 20px; }
.sidebar-card {
	background: var(--bg-gray);
	border-radius: var(--radius);
	padding: 24px;
}
.sidebar-card h3 { font-size: 1.15rem; margin-bottom: 12px; }
.sidebar-card p { font-size: 14.5px; color: var(--ink-soft); }
.sidebar-cta { background: var(--accent-tint); }
.sidebar-cta .btn { width: 100%; text-align: center; padding: 11px 18px; font-size: 15px; }
.sidebar-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}
.sidebar-links a {
	display: block;
	padding: 6px 0;
	text-decoration: none;
	color: var(--accent-dark);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
}
.sidebar-links a:hover { text-decoration: underline; text-underline-offset: 2px; }
.sidebar-card .card-link { display: inline-block; margin-top: 10px; font-size: 14px; }

/* WordPress widgets in the sidebar share the link-list look */
.sidebar-card ul:not([class]) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}
.sidebar-card ul:not([class]) li {
	padding: 6px 0;
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.4;
}
.sidebar-card ul:not([class]) a {
	text-decoration: none;
	color: var(--accent-dark);
	font-weight: 500;
}
.sidebar-card ul:not([class]) a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Catch-all: every sidebar link (incl. block-widget lists with classed <ul>s)
   underlines only on hover; the CTA button never underlines. */
.article-sidebar a:not(.btn):hover { text-decoration: underline; text-underline-offset: 2px; }

/* Search widget: fit the sidebar, no overflow */
.sidebar-card .search-form { display: flex; gap: 8px; }
.sidebar-card .search-field {
	flex: 1;
	min-width: 0;
	max-width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: #fff;
	font-family: var(--font);
	font-size: 15px;
	color: var(--ink);
}
.sidebar-card .search-field:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.sidebar-card .search-submit {
	flex: 0 0 auto;
	padding: 9px 16px;
	border: 0;
	border-radius: 9px;
	background: var(--accent);
	color: #fff;
	font-family: var(--font);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}
.sidebar-card .search-submit:hover { background: var(--accent-dark); }
.sidebar-card .search-form label { flex: 1; min-width: 0; margin: 0; }
.sidebar-card input[type="search"] { max-width: 100%; height: 35px; }

/* Narrower sidebar on small laptops/tablets before the single-column collapse */
@media (min-width: 961px) and (max-width: 1024px) {
	.article-layout { grid-template-columns: minmax(0, 1fr) 300px; }
	.lead-hero-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
	.article-layout { grid-template-columns: 1fr; gap: 48px; }
	.sidebar-sticky { position: static; }
}

/* --- Entry content (blog fallback) ------------------------------------------------- */

.entry-title a { color: var(--ink); text-decoration: none; }
.entry-content { font-size: 17px; }

/* --- Responsive --------------------------------------------------------------------- */

@media (max-width: 960px) {
	.section { padding: 72px 0; }
	.problem-grid { grid-template-columns: 1fr 1fr; }
	.grow-layout,
	.assessment-layout,
	.two-col,
	.outcomes-layout,
	.contact-layout { grid-template-columns: 1fr; gap: 48px; }
	.card-grid-3 { grid-template-columns: 1fr 1fr; }
	.industry-grid { grid-template-columns: 1fr; }
	.solution-row { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Collapse the primary nav to the hamburger early: six links + the CTA need
   room, and would otherwise overlap the logo on small laptops/tablets. */
@media (max-width: 960px) {
	.nav-toggle { display: flex; }
	.site-nav {
		display: none;
		position: absolute;
		top: 72px;
		left: 0; right: 0;
		background: #fff;
		border-bottom: 1px solid var(--line);
		padding: 20px 24px 28px;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.site-nav.is-open { display: flex; }
	.nav-list { flex-direction: column; gap: 4px; }
	.nav-list a { display: block; padding: 10px 0; font-size: 17px; }
	.nav-cta { text-align: center; }
}

@media (max-width: 720px) {
	.hero { padding: 72px 0 80px; }
	.problem-grid { grid-template-columns: 1fr; }
	.card-grid-3 { grid-template-columns: 1fr; }
	.card-grid-2 { grid-template-columns: 1fr; }
	.check-list { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.grow-steps::before { left: 27px; }
	.grow-letter { flex-basis: 56px; height: 56px; font-size: 22px; }
}