/**
 * Kodiak Blog Article template.
 *
 * Source of truth: the approved Kodiak blog design. Tokens are namespaced
 * --kb-* so nothing collides with Enfold's own custom properties.
 *
 * Section order matters. Prose rules for .article-body come BEFORE the
 * component rules, so a component that contains prose-level elements (the H2
 * inside .takeaways-box, for instance) wins at equal specificity without
 * needing !important. Keep new component styles below the prose block.
 */

/* ══════════════════════════════════════════════════════ 1. TOKENS ══════ */

:root {
	--kb-navy:        #16324a;
	--kb-navy-dark:   #0d2233;
	--kb-navy-mid:    #1f4763;
	--kb-red:         #8b1e1e;
	--kb-red-dark:    #6e1717;
	--kb-red-light:   #fbecec;
	--kb-gold:        #d99a2b;
	--kb-teal:        #0284c7;
	--kb-bg:          #f2f4f7;
	--kb-white:       #ffffff;
	--kb-text:        #1c2833;
	--kb-muted:       #5b6b7a;
	--kb-border:      #e1e6ec;

	--kb-shadow-sm:   0 2px 8px rgba(22, 50, 74, 0.08);
	--kb-shadow-md:   0 6px 24px rgba(22, 50, 74, 0.12);
	--kb-shadow-lg:   0 16px 48px rgba(22, 50, 74, 0.16);

	--kb-radius:      12px;
	--kb-radius-sm:   8px;
	--kb-radius-pill: 100px;

	--kb-font:        'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--kb-max-w:       1280px;

	/* Clearance for the theme's sticky header (113px) plus a little breathing
	   room. Used by the sticky sidebar, the scroll-margin on anchor targets,
	   and read back by blog-template.js for the table-of-contents scroll-spy —
	   one value so the three cannot drift. Declared on :root so
	   getComputedStyle(documentElement) can read it. */
	/* Height of the floating CTA bar. With 8px padding either side of a 42px
	   button the content comes to 58px, so the bar's own min-height of 60px is
	   what actually sets it. The bar sits flush to the bottom edge, so this
	   doubles as the clearance the back-to-top button and contents pill need to
	   sit above it — they are positioned from this rather than from a copied
	   figure, which is what let them drift when the bar changed from a floating
	   pill to a full-width bar. min-height is only a floor, so if the padding or
	   button height ever push the content past it, raise this to match. */
	--kb-fab-h:       60px;

	--kb-header-h:    113px;
	--kb-sticky-top:  calc(var(--kb-header-h) + 16px);

	/* The sidebar sits lower than the anchor offset on purpose: a heading only
	   needs to clear the header, whereas the sidebar reads better with a gap
	   under it. Kept separate so tuning one does not move the other. */
	--kb-sidebar-top: 150px;
}

/*
 * The admin bar is 32px of fixed chrome above everything, but only for logged-in
 * users — measuring the header with it on screen is what makes an offset look
 * right in the editor and too large to visitors. WordPress adds .admin-bar to
 * the body exactly when it is present, so the allowance is added only then, and
 * the shipped value stays the true header height.
 */
body.admin-bar {
	--kb-sticky-top: calc(var(--kb-header-h) + 16px + 32px);
	--kb-sidebar-top: 182px;
}

@media screen and (max-width: 782px) {
	/* The admin bar grows to 46px and stops being fixed on small screens, so the
	   allowance comes back off. */
	body.admin-bar {
		--kb-sticky-top: calc(var(--kb-header-h) + 16px);
		--kb-sidebar-top: 150px;
	}
}

/* Colour themes for the boxed blocks. Adding a theme is a change here plus a
   choice in kb_theme_choices(); no template edits. */
.is-theme-red {
	--kb-accent:      #8b1e1e;
	--kb-accent-dark: #6e1717;
	--kb-accent-soft: #fbecec;
}
.is-theme-orange {
	--kb-accent:      #c2710c;
	--kb-accent-dark: #96570a;
	--kb-accent-soft: #fff6e6;
}
.is-theme-green {
	--kb-accent:      #1f7a4d;
	--kb-accent-dark: #16603b;
	--kb-accent-soft: #ebf7f1;
}
.is-theme-blue {
	--kb-accent:      #1d63b0;
	--kb-accent-dark: #164f8c;
	--kb-accent-soft: #eef4ff;
}

/* ═════════════════════════════════════════════════ 2. SHELL & RESET ════ */

.kb-article {
	background: var(--kb-bg);
	color: var(--kb-text);
	font-family: var(--kb-font);
	/* clip, not hidden. `overflow-x: hidden` forces overflow-y to compute as
	   `auto`, which makes this element a scroll container — and position:sticky
	   resolves against its nearest scroll container, which in that case is this
	   box rather than the viewport. Since this box never scrolls, the sticky
	   sidebar simply scrolled away. `clip` does the same visual job without
	   creating a scroll container, so overflow-y stays `visible`.
	   Measured: hidden → sidebar top -741px after a 1500px scroll; clip → 90px. */
	overflow-x: clip;

	/* The gap before the footer belongs to the page, not to whichever section
	   happens to come last. It used to sit on .services-section, so an article
	   ending in category cards — or in the article body alone — ran straight
	   into the footer. Everything after this point in the template is fixed
	   chrome and out of flow, so this is always the final space. */
	padding-bottom: 64px;
}

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

.kb-article img {
	display: block;
	max-width: 100%;
	height: auto;
}

.kb-article a {
	text-decoration: none;
}

.kb-article button {
	font-family: var(--kb-font);
	cursor: pointer;
}

/* Enfold pads and constrains #main on some layout settings; this template
   supplies its own rhythm. */
.kodiak-blog-template #main {
	padding-top: 0;
	background: var(--kb-bg);
}

/* Enfold ships its own scroll-to-top control. Ours matches the design, so hide
   the theme's to avoid two stacked buttons. */
.kodiak-blog-template #scroll-top-link {
	display: none !important;
}

html {
	scroll-behavior: smooth;
}

/* Anything a table-of-contents or in-page link can jump to. Without this the
   browser scrolls the target flush to the viewport top, which puts it behind
   the theme's sticky header — the heading you clicked ends up the one thing you
   cannot see. The token already carries its own breathing room, so it is used
   as-is here. */
.kb-article .article-body :is(h2, h3)[id],
.kb-article .faq-section[id],
.kb-article [id^="kb-"] {
	scroll-margin-top: var(--kb-sticky-top, 129px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.kb-article *,
	.kb-article *::before,
	.kb-article *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ════════════════════════════════════════════ 3. PROGRESS & BREADCRUMB ═ */

#kb-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	height: 4px;
	width: 0;
	background: var(--kb-red);
	transition: width 0.1s linear;
}

.kb-article .breadcrumb-bar {
	background: var(--kb-white);
	border-bottom: 1px solid var(--kb-border);
	padding: 10px 48px;
}

.kb-article .breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: var(--kb-max-w);
	margin: 0 auto;
	font-size: 12.5px;
	color: var(--kb-muted);
	flex-wrap: wrap;
}

.kb-article .breadcrumb a { color: var(--kb-muted); transition: color 0.2s; }
.kb-article .breadcrumb a:hover { color: var(--kb-red); }
.kb-article .breadcrumb .sep { color: #c8d0da; font-size: 11px; }
.kb-article .breadcrumb .current { color: var(--kb-navy); font-weight: 600; }

/* ═══════════════════════════════════════════════════════ 4. HERO ══════ */

.kb-article .article-hero {
	position: relative;
	width: 100%;
	min-height: min(490px, 54vw);
	overflow: hidden;
	background: var(--kb-navy) center / cover no-repeat;
}

.kb-article .article-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(13, 34, 51, 0.92) 0%, rgba(13, 34, 51, 0.68) 55%, rgba(139, 30, 30, 0.35) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 44px 64px;
}

.kb-article .article-hero__category {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--kb-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: var(--kb-radius-pill);
	margin: 0 auto 16px;
	width: fit-content;
	transition: background 0.2s;
}
.kb-article .article-hero__category:hover { background: var(--kb-red-dark); color: #fff; }
.kb-article .article-hero__category svg { width: 12px; height: 12px; }

.kb-article .article-hero__title {
	font-size: clamp(24px, 3.3vw, 42px);
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
	max-width: 840px;
	margin: 0 auto 14px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.kb-article .article-hero__excerpt {
	font-size: 16px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.88);
	max-width: 680px;
	line-height: 1.6;
	margin: 0 auto 22px;
}

.kb-article .article-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.kb-article .meta-author { display: flex; align-items: center; gap: 10px; }

.kb-article .meta-author__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.4);
	background: linear-gradient(135deg, var(--kb-red), var(--kb-navy-mid));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
	object-fit: cover;
}

.kb-article .meta-author__name { font-size: 13.5px; font-weight: 600; color: #fff; text-align: left; }
.kb-article .meta-author__role { font-size: 11.5px; color: rgba(255, 255, 255, 0.65); text-align: left; }
.kb-article .meta-divider { width: 1px; height: 32px; background: rgba(255, 255, 255, 0.25); }

.kb-article .meta-chip {
	display: flex;
	align-items: center;
	gap: 5px;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.9);
	font-size: 12px;
	font-weight: 500;
	padding: 5px 11px;
	border-radius: var(--kb-radius-pill);
}
.kb-article .meta-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.kb-article .meta-chip.updated { background: rgba(139, 30, 30, 0.45); border-color: rgba(224, 122, 122, 0.5); }

/* ── Icon slots ──
   Every icon slot may hold either a built-in inline SVG or a Font Awesome <i>
   from the picker, so both are sized here rather than in each component. */
.kb-article .trust-item i,
.kb-article .sqc-trust-item i,
.kb-article .service-card__icon i,
.takeaways-box__header i,
.aeo-summary-box__badge i,
.toc-box__title i,
.calc-title i,
.pc-header i,
.pc-list .pc-icon i,
.kb-article .sn-icon i,
#kb-toc-pill i {
	font-size: 1em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.kb-article .trust-item i { font-size: 17px; color: var(--kb-red); }
.kb-article .sqc-trust-item i { font-size: 13px; color: var(--kb-red); }
.kb-article .service-card__icon i { font-size: 19px; }
.takeaways-box__header i { font-size: 17px; }
.aeo-summary-box__badge i { font-size: 13px; color: #38bdf8; }
.toc-box__title i { font-size: 15px; color: var(--kb-red); }
.calc-title i { font-size: 21px; color: var(--kb-gold); }
.pc-header i { font-size: 17px; }
.pc-list .pc-icon i { font-size: 15px; }
/* No colour: the pill is red, so the icon takes the button's white. */
#kb-toc-pill i { font-size: 15px; }

/* ═══════════════════════════════════════════════════ 5. TRUST STRIP ═══ */

.kb-article .trust-strip {
	background: var(--kb-white);
	border-bottom: 1px solid var(--kb-border);
	padding: 16px 48px;
}

.kb-article .trust-strip__inner {
	max-width: var(--kb-max-w);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 36px;
	flex-wrap: wrap;
}

.kb-article .trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--kb-navy);
}
.kb-article .trust-item svg { width: 18px; height: 18px; color: var(--kb-red); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════ 6. LAYOUT ═════ */

.kb-article .page-body {
	max-width: var(--kb-max-w);
	margin: 0 auto;
	/* No bottom padding: either a trailing section supplies the gap with its own
	   top margin, or .kb-article closes the page. */
	padding: 40px 24px 0;
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 40px;
	align-items: start;
}

.kb-article .content-col { min-width: 0; }

/* align-items:start above keeps each column its own height, which would leave
   position:sticky no room to travel. Stretching just the sidebar column gives
   the sticky child the full height of the article row to move through. */
.kb-article .sidebar-col {
	min-width: 0;
	align-self: stretch;
}

/* Tracks the content column rather than spanning the grid, so it shares an edge
   with the share block directly above it. */
.kb-article .content-col > .author-box {
	max-width: none;
	margin: 24px 0 0;
}

/* No sidebar configured — let the article use the full measure. The class is
   set in PHP rather than inferred with :has(), so the layout is correct on
   first paint and in browsers without :has() support. */
.kb-article .page-body.no-sidebar { grid-template-columns: minmax(0, 1fr); }

/* Rides along until the article runs out. The bottom margin keeps the last card
   clear of the viewport edge when the sidebar is taller than the screen.

   The offset clears the theme's own sticky header, so it is a token rather than
   a literal: the anchor-scroll padding and the table-of-contents scroll-spy
   have to clear the same header, and those drifting apart is what puts a
   heading behind the header when you jump to it. */
.kb-article .sidebar-sticky {
	position: sticky;
	top: var(--kb-sidebar-top);
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 24px;
}

/* ════════════════════════════════════════════════ 7. PROSE (article) ══ */

.kb-article .article-body { line-height: 1.72; color: var(--kb-text); }

.kb-article .article-body h2 {
	font-size: 25px;
	font-weight: 800;
	color: var(--kb-navy);
	line-height: 1.25;
	margin: 0;
	padding: 0;
	text-transform: none;
	letter-spacing: 0;
}

.kb-article .article-body h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--kb-navy);
	margin: 26px 0 12px;
	text-transform: none;
	letter-spacing: 0;
}

.kb-article .article-body p { font-size: 16.5px; margin: 0 0 18px; }
.kb-article .article-body ul,
.kb-article .article-body ol { margin: 0 0 18px 24px; font-size: 16px; }
.kb-article .article-body li { margin-bottom: 8px; }
/* Prose links only. Component links (buttons, chips, cards) all carry a class,
   so excluding classed anchors keeps them from picking up the underline. */
.kb-article .article-body a:not([class]) { color: var(--kb-red); text-decoration: underline; text-underline-offset: 3px; }
.kb-article .article-body strong { font-weight: 700; color: var(--kb-navy); }
.kb-article .article-body figure { margin: 0 0 24px; }
.kb-article .article-body figcaption { font-size: 13px; color: var(--kb-muted); margin-top: 8px; }

/* The red rule and spacing above each section heading. These lived on a
   .heading-wrapper that also held a "Copy Section Link" button; the button and
   its wrapper are gone, so the styling sits on the heading itself. Scoped to
   headings carrying an id, which is exactly the set the filter decorates —
   headings without one are not section starts. */
.kb-article .article-body h2[id] {
	margin-top: 40px;
	margin-bottom: 14px;
	border-top: 3px solid var(--kb-red);
	padding-top: 18px;
}

/* ══════════════════════════════════════════════════ 8. COMPONENTS ════ */
/* Everything below deliberately follows the prose rules — see the file note. */

/* ── AEO answer box ── */
.aeo-summary-box {
	background: linear-gradient(135deg, #f0f7ff 0%, #e6f0fa 100%);
	border: 2px solid var(--kb-teal);
	border-radius: var(--kb-radius);
	padding: 22px 26px;
	margin-bottom: 28px;
	box-shadow: var(--kb-shadow-sm);
}
.aeo-summary-box__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--kb-navy);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	padding: 4px 10px;
	border-radius: var(--kb-radius-pill);
	margin-bottom: 12px;
}
.aeo-summary-box__badge svg { width: 14px; height: 14px; color: #38bdf8; }
.aeo-summary-box__title { font-size: 17px; font-weight: 800; color: var(--kb-navy); margin-bottom: 8px; line-height: 1.3; }
.aeo-summary-box__text { font-size: 15px; color: #1e293b; line-height: 1.65; }
.kb-article .article-body .aeo-summary-box__text p,
.aeo-summary-box__text p { font-size: 15px; margin: 0 0 10px; }
.aeo-summary-box__text p:last-child { margin-bottom: 0; }
.aeo-summary-box__text strong { color: var(--kb-navy); font-weight: 700; }

/* ── Key takeaways ── */
.takeaways-box {
	background: var(--kb-accent-soft);
	border: 1.5px solid var(--kb-accent);
	border-radius: var(--kb-radius);
	padding: 24px 28px;
	margin-bottom: 32px;
}
.takeaways-box__header {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	color: var(--kb-accent-dark);
	margin-bottom: 14px;
}
.takeaways-box__header svg { width: 18px; height: 18px; }
.kb-article .article-body .takeaways-box h3,
.takeaways-box h3 { font-size: 18px; font-weight: 700; color: var(--kb-navy); margin: 0 0 14px; line-height: 1.3; }
.kb-article .article-body .takeaways-box ul,
.takeaways-box ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.kb-article .article-body .takeaways-box li,
.takeaways-box li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--kb-text); line-height: 1.55; margin: 0; }
.takeaways-box li::before {
	content: '';
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: var(--kb-accent);
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-size: 12px;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 2px;
}

/* ── Table of contents ── */
.toc-box {
	background: var(--kb-white);
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-radius);
	padding: 22px 26px;
	margin-bottom: 36px;
	box-shadow: var(--kb-shadow-sm);
	display: block;
}
.toc-box__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.toc-box__title {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	color: var(--kb-navy);
	display: flex;
	align-items: center;
	gap: 8px;
}
.toc-box__title svg { width: 16px; height: 16px; color: var(--kb-red); }
.toc-toggle { background: none; border: none; color: var(--kb-red); font-size: 12px; font-weight: 600; padding: 0; }

.kb-article .article-body .toc-list,
.toc-list { list-style: none; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; }
/* Must out-specify the display:flex rule above, which the article-body scope
   would otherwise win. */
.kb-article .article-body .toc-list[hidden],
.toc-list[hidden] { display: none; }
.kb-article .article-body .toc-list li,
.toc-list li { border-bottom: 1px solid var(--kb-border); margin: 0; }
.toc-list li:last-child { border-bottom: none; }
.kb-article .article-body .toc-list a,
.toc-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	font-size: 14px;
	color: var(--kb-muted);
	transition: all 0.2s;
	line-height: 1.4;
	border-radius: var(--kb-radius-sm);
	text-decoration: none;
}
.toc-list a:hover { color: var(--kb-red); background: var(--kb-bg); }
.toc-list a.active { color: var(--kb-red); font-weight: 700; background: var(--kb-red-light); }
.toc-list .toc-num {
	font-size: 11px;
	font-weight: 700;
	color: var(--kb-red);
	background: var(--kb-red-light);
	border-radius: 4px;
	padding: 1px 6px;
	flex-shrink: 0;
}
.toc-list a.active .toc-num { background: var(--kb-red); color: #fff; }

/* ── Comparison table ── */
.comp-filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.comp-filter-btn {
	background: var(--kb-white);
	border: 1px solid var(--kb-border);
	padding: 6px 14px;
	border-radius: var(--kb-radius-pill);
	font-size: 13px;
	font-weight: 600;
	color: var(--kb-muted);
	transition: all 0.2s;
}
.comp-filter-btn:hover { color: var(--kb-navy); border-color: var(--kb-navy); }
.comp-filter-btn.active { background: var(--kb-navy); color: #fff; border-color: var(--kb-navy); }

.comparison-table-wrap { overflow-x: auto; margin: 20px 0 32px; border-radius: var(--kb-radius); box-shadow: var(--kb-shadow-sm); }
/* Enfold's base.css sets `table { margin: 0 0 20px 0 }`, which would push the
   table off the bottom of its rounded wrapper. The wrapper owns the spacing. */
.comparison-table { width: 100%; margin: 0; border-collapse: collapse; background: var(--kb-white); font-size: 14.5px; }
.comparison-table caption { font-size: 12px; color: var(--kb-muted); text-align: right; padding: 6px; font-style: italic; caption-side: bottom; }
.comparison-table th { background: var(--kb-navy); color: #fff; font-weight: 700; padding: 12px 16px; text-align: center; }
.comparison-table th:first-child { text-align: left; background: var(--kb-navy-dark); }
.comparison-table td { padding: 12px 16px; border-bottom: 1px solid var(--kb-border); text-align: center; }
.comparison-table td:first-child { text-align: left; font-weight: 600; background: #f8fafc; color: var(--kb-navy); }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tbody tr:hover td { background: var(--kb-red-light); }

/* ── Savings calculator ── */
.roi-calculator-box {
	background: linear-gradient(135deg, var(--kb-navy-dark) 0%, var(--kb-navy) 100%);
	color: #fff;
	border-radius: var(--kb-radius);
	padding: 28px 32px;
	margin: 36px 0;
	box-shadow: var(--kb-shadow-md);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.calc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.calc-title { font-size: 20px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; }
.calc-title svg { width: 22px; height: 22px; color: var(--kb-gold); }
.calc-subtitle { font-size: 13.5px; color: rgba(255, 255, 255, 0.75); }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.calc-control { display: flex; flex-direction: column; gap: 8px; }
.calc-label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: rgba(255, 255, 255, 0.85);
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
.calc-val { color: var(--kb-gold); font-size: 15px; font-weight: 800; white-space: nowrap; }
.calc-slider { width: 100%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); accent-color: var(--kb-red); cursor: pointer; }
.calc-results {
	background: rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--kb-radius-sm);
	padding: 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	text-align: center;
}
.calc-res-card { display: flex; flex-direction: column; gap: 4px; }
.calc-res-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.7); }
.calc-res-num { font-size: 24px; font-weight: 800; color: var(--kb-gold); }
.calc-res-sub { font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.kb-article .article-body .calc-disclaimer,
.calc-disclaimer { font-size: 11.5px; color: rgba(255, 255, 255, 0.5); margin: 14px 0 0; text-align: center; }

/* ── Callout ── */
.callout {
	border-radius: var(--kb-radius-sm);
	padding: 16px 20px;
	margin: 24px 0;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.6;
	background: var(--kb-accent-soft);
	border-left: 4px solid var(--kb-accent);
}
.callout-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; line-height: 1.2; }
.callout strong { display: block; margin-bottom: 4px; color: var(--kb-navy); }
.kb-article .article-body .callout p,
.callout p { font-size: 15px; margin: 0 0 8px; }
.callout p:last-child { margin-bottom: 0; }

/* ── Featured service card ── */
.inline-service-card {
	background: var(--kb-white);
	border: 2px solid var(--kb-red);
	border-radius: var(--kb-radius);
	padding: 26px;
	margin: 36px 0;
	display: flex;
	gap: 24px;
	align-items: center;
	box-shadow: var(--kb-shadow-md);
	position: relative;
}
.isc-badge {
	position: absolute;
	top: -1px;
	left: 20px;
	background: var(--kb-red);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 0 0 6px 6px;
}
.isc-badge.accent-navy { background: var(--kb-navy); }
.isc-badge.accent-gold { background: var(--kb-navy-mid); border-left: 3px solid var(--kb-gold); }
.isc-img-wrap {
	width: 120px;
	height: 120px;
	flex-shrink: 0;
	border-radius: var(--kb-radius-sm);
	overflow: hidden;
	background: var(--kb-bg);
	border: 1px solid var(--kb-border);
}
.isc-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.isc-info { flex: 1; min-width: 0; }
.isc-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--kb-red); margin-bottom: 6px; }
.isc-name { font-size: 19px; font-weight: 800; color: var(--kb-navy); margin-bottom: 8px; line-height: 1.3; }
.isc-desc { font-size: 14.5px; color: var(--kb-muted); margin-bottom: 16px; line-height: 1.55; }
.isc-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Buttons ──
   Intentionally unscoped. The blocks holding these buttons can be placed on any
   page, not just the article template, so an ancestor scope would leave them
   unstyled everywhere else. Safe because this stylesheet only loads on views
   that actually contain a Kodiak block or use the template. */
.btn-primary {
	background: var(--kb-red);
	color: #fff;
	border: none;
	padding: 12px 22px;
	border-radius: var(--kb-radius-pill);
	font-size: 14px;
	font-weight: 700;
	transition: background 0.2s, transform 0.15s;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
}
.btn-primary:hover { background: var(--kb-red-dark); color: #fff; transform: translateY(-1px); }
.btn-primary svg { width: 14px; height: 14px; }

.btn-secondary {
	background: transparent;
	color: var(--kb-navy);
	border: 2px solid var(--kb-navy);
	padding: 10px 20px;
	border-radius: var(--kb-radius-pill);
	font-size: 14px;
	font-weight: 700;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.btn-secondary:hover { background: var(--kb-navy); color: #fff; }

.btn-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--kb-red);
	color: #fff;
	border: none;
	padding: 13px 22px;
	border-radius: var(--kb-radius-pill);
	font-size: 14px;
	font-weight: 700;
	transition: background 0.2s;
	text-decoration: none;
}
.btn-phone:hover { background: var(--kb-red-dark); color: #fff; }
.btn-phone svg { width: 14px; height: 14px; }

.btn-outline-white {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.4);
	padding: 11px 20px;
	border-radius: var(--kb-radius-pill);
	font-size: 14px;
	font-weight: 600;
	transition: all 0.2s;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.btn-outline-white:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7); color: #fff; }

.btn-full { width: 100%; text-align: center; justify-content: center; }

.btn-quote {
	width: 100%;
	background: transparent;
	color: var(--kb-navy);
	border: 2px solid var(--kb-border);
	padding: 11px;
	border-radius: var(--kb-radius-pill);
	font-size: 14px;
	font-weight: 700;
	transition: all 0.2s;
	text-align: center;
	text-decoration: none;
	display: block;
}
.btn-quote:hover { border-color: var(--kb-navy); background: var(--kb-navy); color: #fff; }

/* ── Quote CTA section ── */
/* White panel. The design drew this navy, so every colour below is the light
   counterpart of what was here — labels, helper text, inputs, placeholders and
   validation all had to move together, since anything left at its old value is
   white text on white and simply disappears. */
.quote-cta-section {
	background: var(--kb-white);
	border-radius: var(--kb-radius);
	padding: 36px 40px;
	margin: 48px 0;
	color: var(--kb-text);
	box-shadow: var(--kb-shadow-lg);
	border: 2px solid var(--kb-red);
}
.quote-cta-header { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.quote-cta-tag {
	display: inline-block;
	background: var(--kb-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	padding: 4px 12px;
	border-radius: var(--kb-radius-pill);
	margin-bottom: 12px;
}
.kb-article .article-body .quote-cta-title,
.quote-cta-title { font-size: 26px; font-weight: 800; color: var(--kb-navy); margin: 0 0 10px; line-height: 1.25; }
.kb-article .article-body .quote-cta-desc,
.quote-cta-desc { font-size: 15px; color: var(--kb-muted); line-height: 1.6; margin: 0; }
.quote-cta-form-wrap { max-width: 720px; margin: 0 auto; }

/* Style whatever form plugin the editor drops in, without knowing its markup.
   Labels are pinned to the site navy rather than left to the plugin, so a form
   that ships its own grey or a theme that recolours labels still matches the
   rest of the panel. */
.quote-cta-form-wrap label,
.quote-cta-form-wrap legend,
.quote-cta-form-wrap .gfield_label,
.quote-cta-form-wrap .gform_legacy_markup_wrapper label,
.quote-cta-form-wrap .gform-field-label,
.quote-cta-form-wrap .gfield_consent_label,
.quote-cta-form-wrap .gsection_title,
.quote-cta-form-wrap .wpcf7-form-control-wrap + label,
.quote-cta-form-wrap .ff-el-input--label label {
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--kb-navy);
}

/* Helper text, required markers and validation copy. */
.quote-cta-form-wrap .gfield_description,
.quote-cta-form-wrap .gform-field-description,
.quote-cta-form-wrap .ginput_complex label,
.quote-cta-form-wrap .ff-el-input--content .ff-el-help-message,
.quote-cta-form-wrap small {
	color: var(--kb-muted);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}

/* Red rather than the gold used on the dark panel — gold on white is close to
   illegible, and red is already the accent everywhere else on a light card. */
.quote-cta-form-wrap .gfield_required,
.quote-cta-form-wrap .ff-el-is-required {
	color: var(--kb-red);
}

.quote-cta-form-wrap .gform_validation_errors,
.quote-cta-form-wrap .validation_error {
	background: var(--kb-red-light);
	border: 1px solid rgba(139, 30, 30, 0.35);
	border-radius: var(--kb-radius-sm);
	color: var(--kb-red-dark);
	padding: 12px 16px;
}

.quote-cta-form-wrap .gfield_error .gfield_label,
.quote-cta-form-wrap .validation_message {
	color: var(--kb-red-dark);
}

/* Gravity Forms ships its own grid; keep it from fighting the panel padding. */
.quote-cta-form-wrap .gform_wrapper.gravity-theme .gform_fields {
	grid-row-gap: 16px;
}
.quote-cta-form-wrap input[type="text"],
.quote-cta-form-wrap input[type="email"],
.quote-cta-form-wrap input[type="tel"],
.quote-cta-form-wrap input[type="url"],
.quote-cta-form-wrap input[type="number"],
.quote-cta-form-wrap select,
.quote-cta-form-wrap textarea {
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--kb-radius-sm);
	border: 1px solid var(--kb-border);
	background: var(--kb-bg);
	color: var(--kb-text);
	font-family: var(--kb-font);
	font-size: 14px;
}
.quote-cta-form-wrap select option { background: var(--kb-white); color: var(--kb-text); }
.quote-cta-form-wrap ::placeholder { color: var(--kb-muted); opacity: 1; }
/* Navy focus ring: the gold used on the dark panel all but vanishes here. The
   field also lifts to white so a focused input reads as active against the
   page-grey resting state. */
.quote-cta-form-wrap input:focus,
.quote-cta-form-wrap select:focus,
.quote-cta-form-wrap textarea:focus {
	outline: 2px solid var(--kb-navy);
	outline-offset: 1px;
	background: var(--kb-white);
}
.quote-cta-form-wrap button[type="submit"],
.quote-cta-form-wrap input[type="submit"] {
	background: var(--kb-red);
	color: #fff;
	border: none;
	padding: 14px 28px;
	border-radius: var(--kb-radius-pill);
	font-size: 15px;
	font-weight: 800;
	font-family: var(--kb-font);
	cursor: pointer;
	transition: all 0.2s;
	width: auto;
}
.quote-cta-form-wrap button[type="submit"]:hover,
.quote-cta-form-wrap input[type="submit"]:hover { background: var(--kb-red-dark); transform: translateY(-2px); }

/* ── Mid-article CTA banner ── */
.mid-cta-banner {
	background: linear-gradient(135deg, var(--kb-navy) 0%, var(--kb-navy-mid) 100%);
	border-radius: var(--kb-radius);
	padding: 32px 36px;
	margin: 40px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.mid-cta-banner__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #e07a7a; margin-bottom: 8px; }
.mid-cta-banner__heading { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 6px; line-height: 1.3; }
.mid-cta-banner__sub { font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.mid-cta-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }

/* ── Pros & cons ── */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 40px 0; }
.pros-cons-card { border-radius: var(--kb-radius); padding: 24px; }
.pros-card { background: var(--kb-red-light); border: 1.5px solid var(--kb-red); }
.cons-card { background: #eef2f5; border: 1.5px solid var(--kb-border); }
.pc-header { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; margin-bottom: 16px; }
.pc-header svg { width: 18px; height: 18px; flex-shrink: 0; }
.pros-card .pc-header { color: var(--kb-red-dark); }
.cons-card .pc-header { color: var(--kb-navy); }
.kb-article .article-body .pc-list,
.pc-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.kb-article .article-body .pc-list li,
.pc-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; margin: 0; }
.pc-list .pc-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; }
.pc-list .pc-icon svg { width: 16px; height: 16px; }
.pros-card .pc-icon { color: var(--kb-red); }
.cons-card .pc-icon { color: var(--kb-navy-mid); }

/* ── Expert verdict ── */
.expert-verdict {
	background: var(--kb-navy);
	border-radius: var(--kb-radius);
	padding: 32px 36px;
	margin: 40px 0;
	position: relative;
	overflow: hidden;
}
.expert-verdict::before {
	content: '"';
	position: absolute;
	top: -20px;
	left: 20px;
	font-size: 160px;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.05);
	line-height: 1;
	pointer-events: none;
}
.ev-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--kb-gold); margin-bottom: 20px; position: relative; }
.kb-article .article-body .ev-quote,
.ev-quote {
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	font-style: italic;
	line-height: 1.6;
	margin: 0 0 20px;
	padding: 0;
	border: none;
	background: none;
	position: relative;
}
.kb-article .article-body .ev-summary,
.ev-summary { font-size: 14.5px; color: rgba(255, 255, 255, 0.72); line-height: 1.65; position: relative; }
.kb-article .article-body .ev-summary p,
.ev-summary p { font-size: 14.5px; color: rgba(255, 255, 255, 0.72); margin: 0 0 10px; }
.ev-summary p:last-child { margin-bottom: 0; }
.kb-article .article-body .ev-summary a,
.kb-article .article-body .ev-summary a:not([class]) { color: #e07a7a; }
.ev-author {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	position: relative;
}
.ev-author-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--kb-red), var(--kb-navy-mid));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	flex-shrink: 0;
	object-fit: cover;
}
.ev-author-name { font-size: 14px; font-weight: 700; color: #fff; }
.ev-author-title { font-size: 12px; color: rgba(255, 255, 255, 0.55); }

/* ── FAQ ── */
.faq-section { margin: 44px 0; }
.kb-article .article-body .faq-section h2,
.faq-section h2 {
	font-size: 25px;
	font-weight: 800;
	color: var(--kb-navy);
	margin: 0 0 24px;
	border-top: 3px solid var(--kb-red);
	padding-top: 20px;
}
.faq-item { background: var(--kb-white); border: 1px solid var(--kb-border); border-radius: var(--kb-radius-sm); margin-bottom: 10px; overflow: hidden; }
.faq-question {
	width: 100%;
	background: none;
	border: none;
	padding: 18px 20px;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--kb-navy);
	transition: background 0.15s;
}
.faq-question:hover { background: #f8fafc; }
.faq-question.open { color: var(--kb-red); background: var(--kb-red-light); }
/* Toggle marker. Chevron, caret and circle rotate; the plus instead collapses
   its vertical stroke so it reads as a minus. */
.faq-arrow {
	flex-shrink: 0;
	color: var(--kb-red);
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s ease, color 0.15s;
}
.faq-arrow svg { width: 100%; height: 100%; display: block; }

.faq-question.open .faq-arrow.is-chevron,
.faq-question.open .faq-arrow.is-caret,
.faq-question.open .faq-arrow.is-circle { transform: rotate(180deg); }

.faq-arrow .kb-toggle-bar {
	transform-origin: center;
	transition: transform 0.25s ease, opacity 0.2s ease;
}
.faq-question.open .faq-arrow.is-plus .kb-toggle-bar {
	transform: scaleY(0);
	opacity: 0;
}

.faq-arrow.is-caret { width: 18px; height: 18px; }
.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s;
	font-size: 15px;
	color: var(--kb-text);
	line-height: 1.7;
	padding: 0 20px;
}
.faq-answer.open { max-height: 1200px; padding: 16px 20px; }
.kb-article .article-body .faq-answer p { font-size: 15px; margin: 0 0 10px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ── Tags & share ── */
.kb-article .tags-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 36px 0; }
.kb-article .tags-label { font-size: 13px; font-weight: 700; color: var(--kb-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.kb-article .tag-chip {
	background: var(--kb-white);
	border: 1px solid var(--kb-border);
	color: var(--kb-navy);
	font-size: 13px;
	font-weight: 500;
	padding: 5px 14px;
	border-radius: var(--kb-radius-pill);
	transition: all 0.2s;
	text-decoration: none;
}
.kb-article .tag-chip:hover { background: var(--kb-navy); color: #fff; border-color: var(--kb-navy); }

.kb-article .share-inline {
	background: var(--kb-white);
	border-radius: var(--kb-radius);
	border: 1px solid var(--kb-border);
	padding: 20px 24px;
	margin: 36px 0 0;
	box-shadow: var(--kb-shadow-sm);
}
.kb-article .share-inline h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--kb-muted); margin: 0 0 14px; }
.kb-article .share-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.kb-article .share-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: var(--kb-radius-pill);
	font-size: 12.5px;
	font-weight: 600;
	border: none;
	transition: all 0.2s;
	text-decoration: none;
}
.kb-article .share-btn.fb { background: #1877f2; color: #fff; }
.kb-article .share-btn.li { background: #0a66c2; color: #fff; }
.kb-article .share-btn.em,
.kb-article .share-btn.cp { background: var(--kb-bg); color: var(--kb-navy); border: 1px solid var(--kb-border); }
.kb-article .share-btn:hover { opacity: 0.88; transform: translateY(-1px); }

/* ── Sidebar cards ── */
.kb-article .sidebar-quote-card {
	background: var(--kb-white);
	border-radius: var(--kb-radius);
	border: 1px solid var(--kb-border);
	overflow: hidden;
	box-shadow: var(--kb-shadow-md);
}
.kb-article .sqc-img-wrap { background: var(--kb-navy); height: 150px; overflow: hidden; }
.kb-article .sqc-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.kb-article .sqc-body { padding: 22px; }
.kb-article .sqc-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--kb-red); margin-bottom: 6px; }
.kb-article .sqc-name { font-size: 17px; font-weight: 800; color: var(--kb-navy); margin-bottom: 10px; line-height: 1.3; }
.kb-article .sqc-desc { font-size: 13.5px; color: var(--kb-muted); line-height: 1.55; margin-bottom: 16px; }
.kb-article .sqc-actions { display: flex; flex-direction: column; gap: 10px; }
.kb-article .sqc-trust { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--kb-border); flex-wrap: wrap; }
.kb-article .sqc-trust-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--kb-muted); font-weight: 600; }
.kb-article .sqc-trust-item svg { width: 14px; height: 14px; color: var(--kb-red); }

.kb-article .sidebar-newsletter { background: linear-gradient(135deg, var(--kb-navy), var(--kb-navy-mid)); border-radius: var(--kb-radius); padding: 22px; }
/* ── Widgets ──
   The sidebar is a widget area, so anything can land in it. This gives every
   widget the card treatment the designed sections already had, which is what
   stops a stock Recent Posts or Text widget looking pasted in.

   .sidebar-quote-card and .sidebar-newsletter below keep their own styling and
   opt out of this shell — they set their own background and padding, and are
   still reachable from a Custom HTML widget for anyone who wants the original
   two cards back. */
.kb-article .sidebar-widget {
	background: var(--kb-white);
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-radius);
	box-shadow: var(--kb-shadow-sm);
	padding: 22px;
	font-size: 14px;
	color: var(--kb-text);
}
.kb-article .sidebar-widget__title {
	font-size: 15px;
	font-weight: 800;
	color: var(--kb-navy);
	margin: 0 0 14px;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
}
.kb-article .sidebar-widget ul { list-style: none; margin: 0; padding: 0; }
.kb-article .sidebar-widget li { margin-bottom: 10px; line-height: 1.5; }
.kb-article .sidebar-widget li:last-child { margin-bottom: 0; }
.kb-article .sidebar-widget a { color: var(--kb-navy); font-weight: 600; text-decoration: none; }
.kb-article .sidebar-widget a:hover { color: var(--kb-red); }
.kb-article .sidebar-widget p:last-child { margin-bottom: 0; }
.kb-article .sidebar-widget img { max-width: 100%; height: auto; }

/* The two designed cards bring their own background, border and padding, so the
   generic shell has to get out of the way entirely — otherwise they render as a
   card inside a card, with doubled padding and two borders. Keyed to the
   widget's own classname rather than to the inner card, so the shell is
   neutralised before any of it paints. */
.kb-article .sidebar-widget.kb-widget-featured-service,
.kb-article .sidebar-widget.kb-widget-signup {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* Icon and title on one row — the only deliberate departure from the design,
   which stacks them. The design's two bottom margins (10px under the icon, 6px
   under the title) would both apply inside a flex row and no longer stack, so
   the row wrapper carries the 6px and the icon's is dropped. Everything else
   keeps the design's values. */
.kb-article .sn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
/* The design puts a 26px emoji here. An SVG needs an explicit colour, because
   the emoji carried its own and an SVG would inherit the dark body text onto
   the navy card — white matches the title, which is what the emoji read as. */
.kb-article .sn-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.kb-article .sn-icon svg { width: 26px; height: 26px; color: #fff; display: block; }
.kb-article .sn-title { font-size: 16px; font-weight: 800; color: #fff; }
.kb-article .sn-sub { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-bottom: 16px; line-height: 1.5; }
/* This card is navy too, so anything a form plugin drops in needs the same
   light treatment the quote CTA panel gets. */
.kb-article .sn-form-wrap label,
.kb-article .sn-form-wrap legend,
.kb-article .sn-form-wrap .gfield_label,
.kb-article .sn-form-wrap .gform-field-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: rgba(255, 255, 255, 0.8);
}
.kb-article .sn-form-wrap .gfield_description,
.kb-article .sn-form-wrap .gform-field-description { color: rgba(255, 255, 255, 0.55); text-transform: none; letter-spacing: 0; font-weight: 500; }
.kb-article .sn-form-wrap .gfield_required { color: var(--kb-gold); }
.kb-article .sn-form-wrap input[type="text"],
.kb-article .sn-form-wrap input[type="email"] {
	width: 100%;
	padding: 11px 14px;
	border-radius: var(--kb-radius-sm);
	border: none;
	font-size: 14px;
	font-family: var(--kb-font);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	margin-bottom: 10px;
}
.kb-article .sn-form-wrap ::placeholder { color: rgba(255, 255, 255, 0.5); }
.kb-article .sn-form-wrap input:focus { outline: 2px solid var(--kb-red); background: rgba(255, 255, 255, 0.18); }
.kb-article .sn-form-wrap button[type="submit"],
.kb-article .sn-form-wrap input[type="submit"] {
	width: 100%;
	background: var(--kb-red);
	color: #fff;
	border: none;
	padding: 12px;
	border-radius: var(--kb-radius-sm);
	font-size: 14px;
	font-weight: 700;
	font-family: var(--kb-font);
	cursor: pointer;
	transition: background 0.2s;
}
.kb-article .sn-form-wrap button[type="submit"]:hover { background: var(--kb-red-dark); }
.kb-article .sn-disclaimer { font-size: 11px; color: rgba(255, 255, 255, 0.45); text-align: center; margin-top: 10px; }

/* ── Author box ── */
.kb-article .author-box {
	background: var(--kb-white);
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-radius);
	padding: 32px 36px;
	margin: 0 auto;
	display: flex;
	gap: 28px;
	align-items: flex-start;
	box-shadow: var(--kb-shadow-sm);
	max-width: var(--kb-max-w);
}
.kb-article .author-avatar {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--kb-navy), var(--kb-red));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 30px;
	font-weight: 800;
	border: 3px solid var(--kb-red-light);
	object-fit: cover;
}
.kb-article .author-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--kb-red); margin-bottom: 6px; }
.kb-article .author-name { font-size: 22px; font-weight: 800; color: var(--kb-navy); margin-bottom: 4px; }
.kb-article .author-title { font-size: 14px; color: var(--kb-muted); margin-bottom: 14px; font-weight: 500; }
.kb-article .author-bio { font-size: 15px; color: var(--kb-text); line-height: 1.7; margin-bottom: 16px; }
.kb-article .author-bio p { margin: 0 0 10px; }
.kb-article .author-links { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kb-article .author-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--kb-radius-pill);
	font-size: 13px;
	font-weight: 600;
	border: 1.5px solid var(--kb-border);
	color: var(--kb-navy);
	transition: all 0.2s;
	text-decoration: none;
}
.kb-article .author-link:hover { border-color: var(--kb-navy); background: var(--kb-navy); color: #fff; }
.kb-article .author-social { display: flex; gap: 8px; margin-left: 4px; }
.kb-article .author-social a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kb-bg);
	border: 1.5px solid var(--kb-border);
	color: var(--kb-navy);
	transition: all 0.2s;
}
.kb-article .author-social a svg { width: 16px; height: 16px; }
.kb-article .author-social a.fb:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.kb-article .author-social a.li:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; }

/* ── Category card sections & services ── */
.kb-article .related-section { max-width: var(--kb-max-w); margin: 44px auto 0; padding: 0 24px; }
.kb-article .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.kb-article .section-title { font-size: 22px; font-weight: 800; color: var(--kb-navy); display: flex; align-items: center; gap: 8px; }
.kb-article .section-link { font-size: 14px; font-weight: 600; color: var(--kb-red); }
.kb-article .section-link:hover { text-decoration: underline; }
.kb-article .related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.kb-article .article-card {
	background: var(--kb-white);
	border-radius: var(--kb-radius);
	border: 1px solid var(--kb-border);
	overflow: hidden;
	box-shadow: var(--kb-shadow-sm);
	transition: transform 0.2s, box-shadow 0.2s;
	display: flex;
	flex-direction: column;
	text-decoration: none;
}
.kb-article .article-card:hover { transform: translateY(-3px); box-shadow: var(--kb-shadow-md); }
.kb-article .article-card__img { height: 150px; background: var(--kb-bg); overflow: hidden; }
.kb-article .article-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.kb-article .article-card:hover .article-card__img img { transform: scale(1.04); }
.kb-article .article-card__body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.kb-article .article-card__tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--kb-red); margin-bottom: 6px; }
.kb-article .article-card__title { font-size: 15px; font-weight: 700; color: var(--kb-navy); line-height: 1.4; }
.kb-article .article-card__readtime { font-size: 11.5px; color: var(--kb-muted); font-weight: 500; }

.kb-article .services-section { max-width: var(--kb-max-w); margin: 48px auto 0; padding: 0 24px; }
.kb-article .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kb-article .service-card {
	background: var(--kb-white);
	border-radius: var(--kb-radius);
	border: 1px solid var(--kb-border);
	box-shadow: var(--kb-shadow-sm);
	transition: transform 0.2s, box-shadow 0.2s;
	padding: 22px;
	display: flex;
	flex-direction: column;
	text-decoration: none;
}
.kb-article .service-card:hover { transform: translateY(-3px); box-shadow: var(--kb-shadow-md); }
.kb-article .service-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--kb-red-light);
	color: var(--kb-red);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}
.kb-article .service-card__icon svg { width: 20px; height: 20px; }
.kb-article .service-card__name { font-size: 15px; font-weight: 700; color: var(--kb-navy); margin-bottom: 8px; line-height: 1.35; flex: 1; }
.kb-article .service-card__link { font-size: 13px; font-weight: 700; color: var(--kb-red); }

/* ══════════════════════════════════════════════════ 9. FLOATING UI ════ */

/* Full-bleed bar flush to the bottom edge, matching the sticky-bar block in
   acf-blocks-satish: the bar spans the viewport and the buttons divide it
   equally, rather than the centred pill the Kodiak design file drew. Colours
   come from the site palette rather than per-block hex values. */
.floating-action-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	transform: translateY(100%);
	z-index: 900;
	background: var(--kb-white);
	box-shadow: 0 -4px 16px rgba(22, 50, 74, 0.14);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	min-height: var(--kb-fab-h);
	box-sizing: border-box;
	transition: transform 0.3s ease, opacity 0.3s;
	opacity: 0;
	pointer-events: none;
	font-family: var(--kb-font);
}
.floating-action-bar.show { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* ── Desktop: a floating card, bottom left ──
   Above 1024px a full-bleed bar across a wide screen is a lot of furniture for
   two buttons, so it becomes a compact card in the corner instead. The buttons
   stack and the label comes back, since there is room for it here.

   1025px rather than 769px so the bar stays full width on tablets, matching the
   breakpoint the rest of the template already treats as the desktop boundary
   (the sidebar drops to one column at the same point).

   `is-mobile-only` is the block's "Hide on desktop" option. It is written as a
   separate rule after this one rather than as a :not() on the whole block, so
   the card styling stays readable and the option is a single override. */
@media (min-width: 1025px) {
	.floating-action-bar:not(.is-editor-preview) {
		right: auto;
		left: 32px;
		bottom: 32px;
		/* A fixed width rather than max-width: the card held two short buttons,
		   so shrink-to-fit left it far narrower than its cap and reading as an
		   afterthought against a full-width page. */
		width: 300px;
		max-width: calc(100vw - 64px);
		min-height: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 24px;
		border-radius: var(--kb-radius);
		box-shadow: var(--kb-shadow-lg);
		/* Slides up from the bottom edge rather than the full height of the
		   card, which would start it further off screen than it needs to be. */
		transform: translateY(calc(100% + 32px));
	}
	.floating-action-bar:not(.is-editor-preview).show { transform: translateY(0); }

	/* The label is a heading here, not the inline caption it is on the bar. */
	.floating-action-bar:not(.is-editor-preview) .fab-text {
		white-space: normal;
		font-size: 16px;
		line-height: 1.3;
		padding-left: 0;
	}

	/* Stacked, so each button takes the card's full width. Taller and larger
	   than the mobile bar's buttons, which are sized to fit two across a phone
	   rather than to stand alone in a card. */
	.floating-action-bar:not(.is-editor-preview) .fab-actions {
		flex-direction: column;
		gap: 10px;
		flex: none;
	}

	/* height:auto so the padding actually sets the button size — a fixed height
	   would win and the vertical padding would do nothing. */
	.floating-action-bar:not(.is-editor-preview) .fab-btn-quote,
	.floating-action-bar:not(.is-editor-preview) .fab-btn-phone {
		height: auto;
		font-size: 15px;
		padding: 10px;
	}

	.floating-action-bar:not(.is-editor-preview) .fab-btn-quote svg,
	.floating-action-bar:not(.is-editor-preview) .fab-btn-phone svg {
		width: 18px;
		height: 18px;
	}

	/* Top-right corner of the card, and the only breakpoint it appears at.
	   Absolute rather than inline, so it does not take a row in the stacked
	   column, and the label is given right padding so a long heading does not
	   run under it. */
	.floating-action-bar:not(.is-editor-preview) .fab-close {
		display: inline-flex;
		position: absolute;
		top: 10px;
		right: 10px;
	}
	.floating-action-bar:not(.is-editor-preview) .fab-text {
		padding-right: 28px;
	}

	.floating-action-bar.is-mobile-only { display: none; }
}

/*
 * No bottom-left collision rule is needed for the contents pill. The card only
 * exists above 1024px and the pill is only shown at 1024px and below, so the
 * two never share the corner. That stops being true if either breakpoint moves.
 */

/* In the editor the bar sits inline so it can be selected like any block:
   `inset` clears the pinned offsets and `transition: none` stops it animating
   in as the canvas scrolls. */
.floating-action-bar.is-editor-preview {
	position: static;
	inset: auto;
	transform: none;
	opacity: 1;
	pointer-events: auto;
	transition: none;
	width: 100%;
	max-width: 100%;
	border-radius: var(--kb-radius-sm);
}

/* The label sits alongside the buttons on desktop and is hidden on mobile,
   where the two buttons take the whole bar. */
.fab-text {
	color: var(--kb-navy);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	padding-left: 6px;
}

/* flex:1 on the group and on each button is what splits the bar evenly. */
.fab-actions { display: flex; gap: 8px; flex: 1; }

.fab-btn-quote,
.fab-btn-phone {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 42px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.3px;
	border: none;
	border-radius: var(--kb-radius-pill);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.fab-btn-quote:hover,
.fab-btn-phone:hover { transform: translateY(-1px); }

/* Navy for the call, red for the quote — the same weighting the design gives
   the two actions everywhere else on the page. */
.fab-btn-phone { background: var(--kb-navy); color: #fff; }
.fab-btn-phone:hover { background: var(--kb-navy-mid); color: #fff; }
.fab-btn-quote { background: var(--kb-red); color: #fff; }
.fab-btn-quote:hover { background: var(--kb-red-dark); color: #fff; }

.fab-btn-quote svg,
.fab-btn-phone svg { width: 16px; height: 16px; flex-shrink: 0; }
.fab-btn-quote i,
.fab-btn-phone i { font-size: 15px; line-height: 1; flex-shrink: 0; }

/* Dismiss — desktop card only. Hidden by default and switched on in the
   1025px block: the mobile and tablet bar is 60px tall with two buttons already
   filling it, so a close control there costs more room than it earns. */
.fab-close {
	display: none;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--kb-muted);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	-webkit-tap-highlight-color: transparent;
}
.fab-close:hover { background: var(--kb-bg); color: var(--kb-navy); }
.fab-close svg { width: 14px; height: 14px; }

/* Dismissed for the rest of the visit. !important is not needed — the `show`
   class is removed at the same time — but the rule guards against anything else
   re-adding it. */
.floating-action-bar.is-dismissed {
	display: none;
}

#kb-back-to-top {
	position: fixed;
	bottom: 32px;
	right: 32px;
	z-index: 800;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--kb-navy);
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	box-shadow: var(--kb-shadow-md);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s, transform 0.2s;
}
#kb-back-to-top svg { width: 22px; height: 22px; }
#kb-back-to-top.show { opacity: 1; visibility: visible; }
#kb-back-to-top:hover { background: var(--kb-red); transform: translateY(-2px); }

/* Left edge, opposite the back-to-top button — the two used to share the right
   corner and overlapped outright once both were visible on a phone. */
#kb-toc-pill {
	display: none;
	position: fixed;
	bottom: 88px;
	left: 24px;
	right: auto;
	z-index: 800;
	background: var(--kb-red);
	color: #fff;
	border: none;
	padding: 10px 18px;
	border-radius: var(--kb-radius-pill);
	font-size: 13px;
	font-weight: 700;
	font-family: var(--kb-font);
	box-shadow: var(--kb-shadow-md);
	align-items: center;
	gap: 7px;
	cursor: pointer;
	line-height: 1;
}
/* The icon comes from the TOC block's own picker; the <i> case is handled with
   the other icon slots up in section 4. */
#kb-toc-pill svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Stacking order for the fixed chrome, low to high:
 *   800  back-to-top, contents pill
 *   900  floating CTA bar
 *   940  TOC overlay
 *   950  TOC drawer
 *   9999 toast
 * The drawer and its overlay have to clear the CTA bar: both are pinned to the
 * bottom edge on a phone, so a lower drawer let the bar sit on top of the sheet
 * — and the bar stayed clickable through what is an aria-modal dialog. */
.toc-drawer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 950;
	background: var(--kb-white);
	border-radius: var(--kb-radius) var(--kb-radius) 0 0;
	padding: 24px;
	transform: translateY(110%);
	transition: transform 0.3s ease;
	box-shadow: 0 -8px 40px rgba(22, 50, 74, 0.18);
	max-height: 70vh;
	overflow-y: auto;
	font-family: var(--kb-font);
}
.toc-drawer.open { transform: translateY(0); }
.toc-drawer__handle { width: 40px; height: 4px; background: var(--kb-border); border-radius: 2px; margin: 0 auto 18px; }
.toc-drawer__title { font-size: 14px; font-weight: 800; color: var(--kb-navy); margin-bottom: 14px; }
.toc-drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 940; opacity: 0; visibility: hidden; transition: opacity 0.3s; }
.toc-drawer-overlay.open { opacity: 1; visibility: visible; }
.toc-drawer-overlay[hidden] { display: block; }

.toast-msg {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 9999;
	background: var(--kb-navy);
	color: #fff;
	padding: 12px 20px;
	border-radius: var(--kb-radius-sm);
	font-size: 13.5px;
	font-weight: 600;
	font-family: var(--kb-font);
	box-shadow: var(--kb-shadow-md);
	display: flex;
	align-items: center;
	gap: 8px;
	opacity: 0;
	transform: translateY(-20px);
	transition: all 0.3s ease;
	pointer-events: none;
}
.toast-msg.show { opacity: 1; transform: translateY(0); }
.toast-msg svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ═════════════════════════════════════════════════ 10. RESPONSIVE ════ */

@media (max-width: 1024px) {
	.kb-article .page-body { grid-template-columns: 1fr; }
	.kb-article .sidebar-sticky { position: static; margin-bottom: 0; }

	/* Single column: article, author box, then the sidebar cards. That is plain
	   source order now that the author box is inside the content column, so no
	   `order` juggling is needed. The design put the sidebar first here, but
	   that pushes the article itself below the fold on a phone. */
	.kb-article .content-col > .author-box { margin-top: 8px; }
	/* Stacked full-width, a card would otherwise stretch to the whole measure. */
	.kb-article .sidebar-quote-card,
	.kb-article .sidebar-widget { max-width: 480px; }
	#kb-toc-pill { display: flex; }

	/* The CTA is a full-width bar flush to the bottom edge everywhere in this
	   range, so both round buttons lift clear of it, and the page gains room so
	   the last line of the article is not left behind it. Derived from the bar's
	   own height rather than a copied figure — the offsets drifted once already
	   when the bar changed shape. Above 1024px the bar becomes a corner card and
	   none of this applies. */
	#kb-back-to-top,
	#kb-toc-pill { bottom: calc(var(--kb-fab-h) + 16px); }
	.kb-article { padding-bottom: calc(var(--kb-fab-h) + 24px); }
	.kb-article .article-hero__overlay { padding: 32px; }
	.kb-article .related-grid { grid-template-columns: repeat(2, 1fr); }
	.kb-article .services-grid { grid-template-columns: repeat(2, 1fr); }
	.kb-article .trust-strip__inner { gap: 20px; }
	.calc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.kb-article .breadcrumb-bar { padding: 10px 16px; }
	.kb-article .page-body { padding: 24px 16px 0; }
	.kb-article .related-section,
	.kb-article .services-section { padding: 0 16px; }
	.kb-article .related-grid { grid-template-columns: 1fr 1fr; }
	.kb-article .services-grid { grid-template-columns: 1fr; }
	.pros-cons { grid-template-columns: 1fr; }
	.mid-cta-banner { flex-direction: column; align-items: flex-start; }
	.inline-service-card { flex-direction: column; align-items: stretch; }
	.isc-img-wrap { width: 100%; height: 160px; }
	/* Stacked card. align-items:stretch rather than flex-start so the text block
	   fills the width — the link pills below need a full-width line to divide
	   between them. The avatar keeps its own size because that is set
	   explicitly, so stretch does not touch it. */
	.kb-article .author-box {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 24px 20px;
	}
	.kb-article .author-avatar { width: 64px; height: 64px; font-size: 24px; border-width: 2px; }
	.kb-article .author-title { margin-bottom: 12px; }
	.kb-article .author-bio { margin-bottom: 14px; }

	/* Two pills to a row, social icons on their own line. Left to wrap on its
	   own the row broke mid-list — one link alone on the first line, the other
	   sharing the second with the icons. flex-grow keeps a single link filling
	   its row instead of sitting at half width. */
	.kb-article .author-links { gap: 8px; }
	.kb-article .author-link { flex: 1 1 calc(50% - 4px); justify-content: center; }
	.kb-article .author-social { flex: 0 0 100%; margin-left: 0; }
	.kb-article .article-hero { height: auto; min-height: 300px; }
	.kb-article .article-hero__overlay { position: static; padding: 32px 20px; }
	.kb-article .article-hero__title { font-size: 24px; }
	.kb-article .article-hero__excerpt { display: none; }
	.kb-article .trust-strip { padding: 14px 16px; }
	/* Centred, unlike the design, which left-aligns here. Once the row wraps,
	   flex-start leaves the last line short and hanging against the left edge;
	   centring keeps every line balanced under the one above. The items are
	   centred individually too, so a label that wraps to two lines stays tidy
	   rather than sitting ragged next to its icon. */
	.kb-article .trust-strip__inner {
		gap: 14px 22px;
		justify-content: center;
		text-align: center;
	}
	.kb-article .trust-item { justify-content: center; }
	.calc-results { grid-template-columns: 1fr; }
	/* Buttons take the whole bar; the label has no room next to them. */
	.fab-text { display: none; }
	.quote-cta-section { padding: 24px 20px; }
	.roi-calculator-box { padding: 22px 20px; }
	.expert-verdict { padding: 26px 22px; }
}

@media (max-width: 480px) {
	.kb-article .related-grid { grid-template-columns: 1fr; }
	.kb-article .meta-divider { display: none; }
	.kb-article .share-buttons { gap: 8px; }
	#kb-back-to-top { right: 16px; }
	#kb-toc-pill { left: 16px; padding: 9px 15px; }
}

/* ── Tablet: pair the sidebar cards ──
   Below 1024px the sidebar drops under the article and becomes a full-width
   band, where a single stacked column wastes most of the row. auto-fit means
   this needs no separate rule for the one-card case: two cards sit side by
   side, and a lone card simply fills the row. It also self-corrects on narrow
   tablets, collapsing back to one column when 260px each no longer fits.
   Placed last so it wins over the max-width blocks in its range. */
@media (min-width: 600px) and (max-width: 1024px) {
	.kb-article .sidebar-sticky {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		align-items: start;
		gap: 20px;
	}

	/* The 1024px rule caps these at 480px for the stacked layout; side by side
	   they should take their share of the row instead. */
	.kb-article .sidebar-quote-card,
	.kb-article .sidebar-widget { max-width: none; }

	/* Equal-height columns whatever the widgets are. */
	.kb-article .sidebar-newsletter,
	.kb-article .sidebar-widget { height: 100%; }
}

/* ══════════════════════════════════════ 11. ENFOLD COMPATIBILITY ══════ */

/* Enfold paints text through ID-prefixed selectors:
 *
 *   #top #wrap_all .all_colors h2 { color: #003366; }
 *   #top label span, #top legend span { color: #444; }
 *
 * An ID beats any number of classes, so nothing above can win on specificity
 * no matter how it is written — the only options are to mirror the theme's own
 * prefixes and add a class, or to reach for !important. This section does the
 * former, which keeps !important available if the site ever needs to override
 * us in turn.
 *
 * These selectors match only inside Enfold's wrappers. On any other theme they
 * are inert and the base rules above already produce the right result, so this
 * section is safe to leave in place everywhere.
 */

/* The blanket h2 rule is the easy one to miss: #003366 is close enough to our
   navy to look deliberate in the article, while on the dark panels it renders
   the heading all but invisible.

   Prose first, components after, all at the same specificity — the same
   source-order strategy the top of this file describes. Scoping the prose rule
   with .kb-article instead would make it one class heavier than the component
   rules, and since the blocks render inside .article-body it would repaint
   their titles too. That is exactly what turned .quote-cta-title navy. */
#top #wrap_all .all_colors .article-body h2,
#top #wrap_all .all_colors .article-body h3 {
	color: var(--kb-navy);
}

#top #wrap_all .all_colors .takeaways-box h3,
#top #wrap_all .all_colors .faq-section h2 {
	color: var(--kb-navy);
}

/* The quote panel is white now, so its headings take the navy — white here
   would be invisible. The sidebar newsletter card is still navy and keeps it. */
#top #wrap_all .all_colors h2.quote-cta-title,
#top #wrap_all .all_colors .quote-cta-form-wrap h2,
#top #wrap_all .all_colors .quote-cta-form-wrap h3,
#top #wrap_all .all_colors .quote-cta-form-wrap .gform_title,
#top #wrap_all .all_colors .quote-cta-form-wrap .gsection_title {
	color: var(--kb-navy);
}

#top #wrap_all .all_colors .sn-form-wrap h2,
#top #wrap_all .all_colors .sn-form-wrap h3 {
	color: #fff;
}

/* Enfold injects a hover badge into every linked image:
 *
 *   <span class="image-overlay"><span class="image-overlay-inside"></span></span>
 *
 * with a circular glyph drawn by .image-overlay-inside:before. On these card
 * grids the whole card is already the link, so the badge is redundant and it
 * washes out the thumbnail.
 *
 * The cards carry Enfold's `noHover` opt-out, which stops the theme building
 * the badge at all — this is the safety net for any linked image that ends up
 * in a card without it. !important is load-bearing rather than lazy here:
 * avia.js sets `display:block` on the overlay as an inline style on mouseenter,
 * and a normal declaration cannot outrank the style attribute. */
.kb-article .article-card .image-overlay,
.kb-article .related-grid .image-overlay,
.kb-article .services-grid .image-overlay,
.kb-article .sqc-img-wrap .image-overlay,
.inline-service-card .image-overlay {
	display: none !important;
}

/* Enfold sets overflow-x on the document itself:
 *
 *   html.responsive, .responsive body { overflow-x: hidden; }   (base.css)
 *   #top                              { overflow-x: hidden; }   (base.css)
 *
 * `overflow-x: hidden` forces overflow-y to compute as auto/scroll, which makes
 * those elements scroll containers. position:sticky resolves against its
 * nearest scroll container, so with the document itself scrolling, a sticky
 * element has nothing to stick to and simply scrolls away — measured at -741px
 * after a 1500px scroll, against the 90px it should hold.
 *
 * `clip` prevents horizontal overflow exactly as `hidden` does but creates no
 * scroll container, so overflow-y stays visible. Scoped with :has() so it only
 * applies on pages carrying this template, leaving the theme's own behaviour
 * untouched everywhere else. Browsers without :has() keep the theme's value and
 * simply do not get a sticky sidebar, which is the current behaviour.
 */
html:has(.kb-article),
html:has(.kb-article) body,
html:has(.kb-article) #top {
	overflow-x: clip;
}

/* Buttons are anchors, so the theme's link colours land on them: the label goes
   navy on the red button and red on hover, instead of the white the design
   specifies. Enfold colours links per colour-section, which outranks a single
   class — `.main_color a` alone is already heavier than `.btn-primary`.
   Matched here with the theme's own prefixes plus the button class, and the
   hover states restated because the theme sets those separately. */
#top #wrap_all .all_colors .btn-primary,
#top #wrap_all .all_colors .btn-primary:hover,
#top #wrap_all .all_colors .btn-primary:focus,
#top #wrap_all .all_colors .fab-btn-quote,
#top #wrap_all .all_colors .fab-btn-quote:hover,
#top #wrap_all .all_colors .fab-btn-phone,
#top #wrap_all .all_colors .fab-btn-phone:hover,
#top #wrap_all .all_colors .share-btn.fb,
#top #wrap_all .all_colors .share-btn.li {
	color: #fff;
}

#top #wrap_all .all_colors .btn-quote,
#top #wrap_all .all_colors .btn-quote:focus {
	color: var(--kb-navy);
}

/* Fills navy on hover, so the label has to flip to white with it. */
#top #wrap_all .all_colors .btn-quote:hover {
	color: #fff;
}

#top #wrap_all .all_colors .author-link,
#top #wrap_all .all_colors .share-btn.em,
#top #wrap_all .all_colors .share-btn.cp {
	color: var(--kb-navy);
}

#top #wrap_all .all_colors .author-link:hover {
	color: #fff;
}

#top #wrap_all .all_colors .section-link,
#top #wrap_all .all_colors .service-card__link {
	color: var(--kb-red);
}

/* The calculator's slider captions are <label><span>, which the theme paints
   #444 — near-black on the navy panel. */
#top .roi-calculator-box .calc-label span { color: rgba(255, 255, 255, 0.85); }
#top .roi-calculator-box .calc-label .calc-val { color: var(--kb-gold); }

/* Same rule reaches any label markup a form plugin puts in the dark panels.
   `inherit` hands the span back to whichever label colour applies, so the
   styling above stays the single source of truth. */
#top .quote-cta-form-wrap label span,
#top .quote-cta-form-wrap legend span,
#top .sn-form-wrap label span,
#top .sn-form-wrap legend span {
	color: inherit;
}

/* Required markers keep their accent — one class more than the rule above.
   Red on the white quote panel, gold on the navy newsletter card. */
#top .quote-cta-form-wrap label span.gfield_required,
#top .quote-cta-form-wrap label span.ff-el-is-required {
	color: var(--kb-red);
}

#top .sn-form-wrap label span.gfield_required {
	color: var(--kb-gold);
}