/* ============================================================================
   Keith Law — Homepage V2 styles (home.css)
   ============================================================================

   Design tokens (:root colours, fonts, spacing, radii) live in site.css —
   this file depends on it (handle `kl-site`) and must not redefine them.

   TABLE OF CONTENTS
   ------------------------------------------------------------------------
    1. Homepage-only tokens
    2. Header hide-on-scroll (Elementor sticky + local .kl-navbar)
    3. Base — .kl-home, .kl-container, .kl-section + primitives
       (.kl-eyebrow, .kl-heading, .kl-text, .kl-btn)
    4. Cascade shield (staging-only counter-rules)
    5. Layout primitives — marquee, decorative grid, dark texture group
    6. Shared section components
       6.1  Section shells & spacing (bg / overflow / padding / mobile gutter)
       6.2  Section headers (eyebrow + heading + description stacks)
       6.3  Eyebrow pill variants + dot wrappers
       6.4  Heading / description colour + alignment overrides
       6.5  Card copy (titles, body text, inline "Learn more" links)
       6.6  Icon wrappers
       6.7  Buttons — carousel arrows, pill CTAs with icon circle, ghost squares
       6.8  Decorative grid positions
    7. Sections (inner layout + anything unique to the section)
       Hero · Practice areas · Results/stats · About · Case results ·
       Referral · Attorneys · Legal guides · Mass tort · Testimonials ·
       FAQ · CTA
    8. Mobile carousel gutters (must stay last)

   CONVENTIONS
   ------------------------------------------------------------------------
   - Rules styling a/h1-h6/p/li/button elements carry the `.kl-home ` prefix
     (see the cascade shield). Boost a component's whole family or none.
   - Any line-height / font-weight on p, li or h elements is paired with a
     `--kl-i-lh` / `--kl-i-fw` custom property (feeds the staging-only
     !important pipe in the shield).
   - Shared component blocks (§3, §6) OWN a property across every breakpoint.
     A section block only re-declares a property it also declares at every
     breakpoint it changes, so source order never fights the media queries.
   - `:is()` lists are single-class only, so specificity stays (0,2,0) with
     the `.kl-home` prefix and section overrides can still win by order.
   - Breakpoints: ≤1024 tablet, ≤720 practice-areas stack, ≤600 mobile.
   ========================================================================== */


/* ═══════════════ 1. Homepage-only tokens ═══════════════ */
:root {
	--c-cream: #fffdf7;            /* warm off-white — case results, testimonials, FAQ */
	--c-dark-surface: #121212;     /* referral + attorneys dark block */
	--c-award-desc: #5b5b5b;       /* award copy — between --c-ink and --c-muted */
	--c-star: var(--c-warning);    /* rating gold (#fc9e0b) */
	--dark-section-texture: url('../images/dark-section-texture.jpg');
}


/* ═══════════════ 2. Header hide-on-scroll ═══════════════ */
header.elementor-location-header .elementor-sticky--active {
	transition: transform .35s cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}

body.header-hidden header.elementor-location-header .elementor-sticky--active {
	transform: translateY(-100%);
}

/* keep it visible while the mobile menu is open */
body.header-hidden .elementor-menu-toggle.elementor-active ~ *,
body.elementor-menu-open header.elementor-location-header .elementor-sticky--active {
	transform: none;
}

/* Local-chrome counterparts — the same hide-on-scroll for the child theme's
   own sticky navbar (staging has no .kl-navbar, so these are inert there). */
.kl-navbar {
	transition: transform .35s cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}

body.header-hidden .kl-navbar {
	transform: translateY(-100%);
}

body.kl-menu-open .kl-navbar {
	transform: none;
}


/* ═══════════════ 3. Base ═══════════════ */
.kl-home {
	font-family: var(--font-sora);
	color: var(--c-black);
	background: var(--c-bg);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	word-spacing: normal;
}

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

.kl-container {
	max-width: calc(var(--content-max) + 2 * var(--gutter));
	margin: 0 auto;
	padding-inline: var(--gutter);
}

.kl-section {
	padding-block: var(--space-6);
}

/* Token overrides (--gutter/--fs-title) live in site.css. */
@media (max-width: 600px) {
	.kl-section { padding-block: var(--space-5); }
}

/* Tablet: homepage sections use a 1.5em side gutter instead of the site-wide
   40px. --container-edge is re-declared here because the :root copy resolves
   var(--gutter) at :root scope — without this, the full-bleed carousel calcs
   would still see the 40px edge. Scoped ≥601px so the mobile gutters
   (root 20px / per-section 16px) are untouched. */
@media (min-width: 601px) and (max-width: 1024px) {
	.kl-section {
		--gutter: 1.5em;
		--container-edge: max(var(--gutter), calc((100vw - var(--content-max)) / 2));
	}
}

/* ── Eyebrow pill ── */
.kl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.875em 1.125em 0.875em 0.75em;
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: 400;
	line-height: 1;
}

/* Shared eyebrow dot — media-library kl-eyebrow SVG as a mask, tinted here */
.kl-eyebrow-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	background-color: var(--c-blue-accent-3); /* #4e98e2 */
	-webkit-mask: var(--kl-eyebrow-svg) center / contain no-repeat;
	mask: var(--kl-eyebrow-svg) center / contain no-repeat;
}

.kl-eyebrow-icon--fallback {
	-webkit-mask: none;
	mask: none;
	border-radius: 50%;
	width: 12px;
	height: 12px;
	margin: 0.25em;
}

@media (max-width: 600px) {
	.kl-eyebrow {
		padding: 0.75em 0.875em;
		font-size: 0.8125rem;
		margin-bottom:4px;
	}

	.kl-eyebrow-icon{
		width: 14px;
    	height: 14px;
	}
}

/* ── Section heading — 32px Figtree semibold (every section h2) ──
   Sections only override colour/alignment (§6.4); the hero h1 and the CTA /
   referring-attorney headings restate size+weight in their own blocks. */
.kl-home .kl-heading {
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: 600;
	--kl-i-fw: 600;
	line-height: 1.15em;
	--kl-i-lh: 1.15em;
	color: var(--c-black);
	margin: 0;
}

@media (max-width: 600px) {
	.kl-home .kl-heading { font-size: 1.75rem; }
}

/* ── Section description — 16px/1.5 muted ──
   The referral / attorneys descriptions don't carry .kl-text in markup, so
   they're listed alongside it. */
.kl-home :is(.kl-text, .kl-referral__desc, .kl-attorneys__desc, .kl-attorneys-referring__desc) {
	font-size: var(--fs-body);
	font-weight: 400;
	--kl-i-fw: 400;
	line-height: 1.5em;
	--kl-i-lh: 1.5em;
	color: var(--c-muted);
	margin: 0;
}

@media (max-width: 600px) {
	.kl-home :is(.kl-text, .kl-referral__desc, .kl-attorneys__desc, .kl-attorneys-referring__desc) {
		font-size: 0.875rem;
	}
}

/* ── Button base ── */
.kl-home .kl-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 1em 1.5em;
	border-radius: var(--radius-pill);
	font: 500 var(--fs-body)/1.5 var(--font-sora);
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
}
.kl-home .kl-btn--primary { background: var(--c-blue); color: var(--c-white); }
.kl-home .kl-btn--ghost { background: transparent; border-color: currentColor; color: inherit; }


/* ═══════════════ 4. Cascade shield ═══════════════
 *
 * The homepage is grafted into the staging site's active EverConvert theme
 * (Elementor kit body.elementor-kit-2236 + EverConvert element/global-CSS
 * rules). Those globals set a scaled rem root, body-level font/line-height/
 * letter-spacing, and !important p/li/h1-6 rules that our own single-class
 * component rules can't beat on specificity alone. This block — plus the
 * `.kl-home ` specificity boosts and `--kl-i-*` custom-property pipe
 * scattered through the rest of this file — shields local rendering from
 * all of it. Every declaration here either re-asserts a value local already
 * computes, or is scoped under body[class*="elementor-kit-"], which never
 * matches locally, so local rendering is unaffected.
 */

/* M1 — EverConvert sets html{font-size:var(--font-size)} (16.5px on
   staging); pin the rem root back to 16px on the homepage only.
   :has(#kl-home) cannot match any other staging page. */
html:has(#kl-home) { font-size: 16px; }

/* M3 — generic element counters. Specificity (0,1,2) via main.kl-home,
   beats the kit's element rules at (0,1,1); no-ops locally since local has
   no competing kit rule to counter — every value here just restates what
   the element already inherits/computes from .kl-home (font-family:
   var(--font-sora) inherited normally; --font-sora/--font-figtree/
   --font-roboto all alias into --font-body/--font-heading per site.css, so
   inherit here matches what each component already declares explicitly). */
main.kl-home :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-heading);
	text-transform: none;
	letter-spacing: inherit;
	word-spacing: normal;
}
main.kl-home a {
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	word-spacing: normal;
}
main.kl-home a:hover,
main.kl-home a:focus {
	color: var(--kl-a-color, inherit);
}
main.kl-home p { margin-block-end: 0.9rem; }
main.kl-home :is(button, input, select, textarea) {
	font-family: inherit;
	letter-spacing: inherit;
}
main.kl-home button:disabled { opacity: 1; }

/* Staging carries an inline-CSS `a > span > svg { filter: brightness(0)
   invert(1) }` rule that forces every link icon pure white (invisible in
   the light button circles). No kl- icon uses a filter — pin it off. */
main.kl-home a svg { filter: none; }

/* M5 — staging-only !important var-pipe. The kit's custom CSS carries
   !important line-height/font-weight on bare p/li/ul/ol/h1-6 selectors;
   these re-assertions read --kl-i-* custom properties so each component
   rule (and its media-query variants, set alongside the original
   line-height/font-weight declarations throughout this file) keeps
   controlling the value through the normal cascade instead of the kit's
   flat override. body[class*="elementor-kit-"] never matches locally. */
body[class*="elementor-kit-"] .kl-home :is(p, li, ul, ol) {
	line-height: var(--kl-i-lh, inherit) !important;
	font-weight: var(--kl-i-fw, inherit) !important;
}
body[class*="elementor-kit-"] .kl-home :is(li, ul, ol) {
	padding-bottom: var(--kl-i-pb, 0) !important;
}
body[class*="elementor-kit-"] .kl-home :is(h1, h2, h3, h4, h5, h6) {
	line-height: var(--kl-i-lh, inherit) !important;
}


/* ═══════════════ 5. Layout primitives ═══════════════ */

/* ── Marquee ──
 *
 * Full-bleed, auto-scrolling card row. Markup:
 *
 *   .kl-marquee > .kl-marquee__track > .kl-marquee__group × 2
 *
 * The second group is an identical aria-hidden + inert duplicate, so
 * translating the track -50% wraps seamlessly. Place the .kl-marquee
 * OUTSIDE .kl-container — it is meant to span the viewport and let cards
 * bleed past both edges. Cards need FIXED widths (the track is
 * content-sized, so percentage bases have nothing to resolve against).
 *
 * Per-section knobs (set on .kl-marquee, or --duration inline per instance):
 *   --kl-marquee-duration  loop time; scale it with card count so the
 *                          px/sec speed stays constant as content grows
 *   --kl-marquee-gap       space between cards (also the group's trailing
 *                          padding, so the two groups tile exactly)
 *   --kl-marquee-fade      width of the soft edge mask
 */
.kl-marquee {
	overflow: hidden;
	width: 100%;
	padding: 0.25em 0; /* room for card shadows */
	--kl-marquee-gap: 1.25em;
	--kl-marquee-fade: 67px;
	-webkit-mask-image: linear-gradient(to right,
		transparent 0,
		#000 var(--kl-marquee-fade),
		#000 calc(100% - var(--kl-marquee-fade)),
		transparent 100%);
	mask-image: linear-gradient(to right,
		transparent 0,
		#000 var(--kl-marquee-fade),
		#000 calc(100% - var(--kl-marquee-fade)),
		transparent 100%);
}

.kl-marquee__track {
	display: flex;
	width: max-content;
	animation: kl-marquee-scroll var(--kl-marquee-duration, 40s) linear infinite;
}

.kl-marquee:hover .kl-marquee__track {
	animation-play-state: paused;
}

.kl-marquee__group {
	display: flex;
	gap: var(--kl-marquee-gap);
	padding-right: var(--kl-marquee-gap);
	align-items: stretch;
}

@keyframes kl-marquee-scroll {
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.kl-marquee__track { animation: none; }
}

/* ── Decorative Grid_1 pattern (Figma asset w/ radial edge fade) ──
   Per-section positions live in §6.8. */
.kl-grid-pattern {
	position: absolute;
	width: 737px;
	height: 644px;
	pointer-events: none;
	z-index: 0;
	background-image: var(--kl-grid-svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/* ── Dark texture group ──
   Shared wrapper for the contiguous Referral + Attorneys dark block. The
   texture is painted once here so all inner sections share it. */
.kl-dark-texture-group {
	position: relative;
	overflow: hidden;
	background-color: var(--c-dark-surface);
}

.kl-dark-texture-group::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--dark-section-texture);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	opacity: 0.2;
	pointer-events: none;
	z-index: 0;
}

.kl-dark-texture-group > .kl-section {
	position: relative;
	z-index: 1;
}


/* ═══════════════ 6. Shared section components ═══════════════ */

/* ── 6.1 Section shells & spacing ──
   One table for every section's background, overflow and vertical padding
   at each breakpoint. Sections inside .kl-dark-texture-group (referral,
   attorneys, referring band) stay transparent so the shared texture shows. */
.kl-hero,
.kl-results-stats,
.kl-case-results,
.kl-referral,
.kl-attorneys,
.kl-legal-guides,
.kl-testimonials,
.kl-faqs {
	position: relative;
	overflow: hidden;
}

/* Practice areas / about clip the horizontal card peek but let their
   boundary grid bleed UP into the previous section (Figma: Grid_1 straddles
   the hero/practice and recognition/about seams). */
.kl-practice-areas,
.kl-about {
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
}

.kl-hero,
.kl-practice-areas,
.kl-results-stats,
.kl-legal-guides {
	background: var(--c-white);
}

.kl-case-results,
.kl-testimonials,
.kl-faqs {
	background: var(--c-cream);
}

.kl-mass-tort {
	background: var(--c-surface-1); /* Figma node 1:11360 — #f3f3f3 */
}

.kl-cta {
	background: linear-gradient(to bottom, var(--c-cream) 0% 50%, #222 50% 100%);
}

/* Desktop padding (practice areas / FAQ / CTA keep the .kl-section default) */
.kl-hero { padding-top: var(--space-6); padding-bottom: var(--space-7); }
.kl-results-stats { padding-top: 7.5em; padding-bottom: 12.5em; }
.kl-about { padding: 0.75em; } /* the card provides the visual spacing */
.kl-case-results,
.kl-referral,
.kl-mass-tort,
.kl-testimonials { padding-block: 7.5em; }
.kl-attorneys { padding-top: 0; padding-bottom: 5em; }
.kl-attorneys-referring { padding-bottom: 7.5em; } /* renders above the profiles — carries the top padding */
.kl-legal-guides { padding-top: 12.5em; padding-bottom: 7.5em; }

/* Desktop: the about card always fits one screenful — clear gaps on every
   side (floating rounded card, per Figma). */
@media (min-width: 1025px) {
	.kl-about { padding: 1.25em; }
}

@media (max-width: 1024px) {
	.kl-results-stats,
	.kl-case-results,
	.kl-referral,
	.kl-legal-guides,
	.kl-mass-tort,
	.kl-testimonials { padding-block: 7.5em; }
	.kl-attorneys { padding-bottom: 3.75em; }
	.kl-attorneys-referring { padding-top: 5em; padding-bottom: 7.5em; }
}

@media (max-width: 600px) {
	/* Figma mobile frames use a 16px side gutter on every section (px-16) */
	.kl-section { --gutter: 16px; }

	/* Figma keeps py-80 / py-120 on mobile, unlike the generic .kl-section reduction */
	.kl-hero { padding-top: 6em; padding-bottom: 5em; }
	.kl-about { padding: 0; }
	.kl-practice-areas,
	.kl-case-results,
	.kl-attorneys-referring,
	.kl-faqs,
	.kl-cta { padding-block: 5em; }
	.kl-results-stats,
	.kl-attorneys { padding-top: 5em; padding-bottom: 7.5em; }
	.kl-referral,
	.kl-testimonials { padding-top: 7.5em; padding-bottom: 5em; }
	.kl-legal-guides,
	.kl-mass-tort { padding-block: 7.5em; }
}

/* Content sits above the decorative grid layer */
:is(.kl-hero, .kl-results-stats, .kl-case-results, .kl-referral, .kl-legal-guides, .kl-testimonials, .kl-faqs) .kl-container {
	position: relative;
	z-index: 1;
}

/* ── 6.2 Section headers ── */

/* Centered column: eyebrow / heading / description */
.kl-results-stats__header,
.kl-case-results__header,
.kl-attorneys__header,
.kl-testimonials__header,
.kl-faqs__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	margin-bottom: 3.75em;
	text-align: center;
}

.kl-attorneys__header {
	max-width: 590px;
	margin: 0 auto 4em;
}

.kl-faqs__header {
	margin-bottom: var(--space-6);
}

/* Left-aligned column (referral) */
.kl-referral__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1em;
	max-width: 608px;
	margin-bottom: 5em;
}

/* Left-aligned text stacks inside two-column layouts */
.kl-practice-areas__content,
.kl-legal-guides__header-content,
.kl-about__text-group {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

.kl-mass-tort__text-group {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

@media (max-width: 1024px) {

	.kl-practice-areas__content, .kl-legal-guides__header-content, .kl-about__text-group, .kl-attorneys__header, .kl-referral__header, .kl-case-results__header, .kl-results-stats__header, .kl-mass-tort__text-group, .kl-faqs__header{
		gap:10px;
	}

	.kl-referral__header { margin-bottom: 3em; }
	.kl-testimonials__header { margin-bottom: 2.5em; gap: 10px; }
	.kl-faqs__header{
		margin-bottom: 3em;
	}

	.kl-heading.kl-faqs__heading{
		max-width: 500px;
	}
}

@media (max-width: 600px) {
	.kl-results-stats__header,
	.kl-case-results__header,
	.kl-attorneys__header,
	.kl-faqs__header,
	.kl-referral__header {
		margin-bottom: 2.5em;
		gap: 10px;
	}

	.kl-attorneys__header { align-items: flex-start; }
	.kl-referral__header { max-width: 100%; }

	.kl-legal-guides__header-content,
	.kl-mass-tort__text-group { gap: 10px; }
}

/* ── 6.3 Eyebrow pill variants ── */

/* Light surface (Figma: bg #f3f3f3, text black) */
.kl-practice-areas__eyebrow,
.kl-results-stats__eyebrow,
.kl-case-results__eyebrow,
.kl-legal-guides__eyebrow,
.kl-testimonials__eyebrow,
.kl-faqs__eyebrow {
	background: var(--c-surface-1);
	color: var(--c-black);
}

.kl-faqs__eyebrow { color: var(--c-ink); }

/* Black pill (dark sections) — dot tinted brand blue */
.kl-referral__eyebrow,
.kl-attorneys__eyebrow {
	background: var(--c-black);
	color: var(--c-white);
}

.kl-referral__eyebrow .kl-eyebrow-icon,
.kl-attorneys__eyebrow .kl-eyebrow-icon {
	background-color: var(--c-blue);
}

/* Blue-tinted surface (Figma: bg #e3edfb) */
.kl-mass-tort__eyebrow {
	background: var(--c-blue-accent-1);
	color: var(--c-black);
}

/* Frosted white glass (over the about photo) */
.kl-about__eyebrow {
	background: rgba(255, 255, 255, 0.1);
	color: var(--c-white);
	white-space: nowrap;
}

/* Alignment inside column stacks */
.kl-practice-areas__eyebrow,
.kl-legal-guides__eyebrow,
.kl-mass-tort__eyebrow,
.kl-about__eyebrow {
	align-self: flex-start;
}

.kl-case-results__eyebrow,
.kl-testimonials__eyebrow {
	align-self: center;
}

/* Mobile: slightly tighter pills in a few sections (Figma per-frame values) */
@media (max-width: 600px) {
	.kl-mass-tort__eyebrow,
	.kl-faqs__eyebrow { padding: 0.5em 0.85em; }
	.kl-testimonials__eyebrow { padding: 0.571429em 0.857143em; }
}

/* ── 6.4 Heading / description overrides ── */

/* Headings on dark / photo backgrounds */
.kl-home :is(.kl-about__heading, .kl-referral__heading, .kl-attorneys__heading) {
	color: var(--c-white);
}

/* Headings on the ink scale */
.kl-home :is(.kl-mass-tort__heading, .kl-faqs__heading) {
	color: var(--c-ink);
}

.kl-home .kl-attorneys__heading { text-align: center; }

/* Descriptions on dark backgrounds (was #b5b5b5; nearest Figma token = text/disabled #afafaf) */
.kl-home :is(.kl-referral__desc, .kl-attorneys__desc, .kl-attorneys-referring__desc) {
	color: var(--c-disabled);
}

/* Width / alignment */
.kl-home .kl-practice-areas__desc { flex-grow: 1; }
.kl-home .kl-results-stats__subtitle { max-width: 640px; }
.kl-home .kl-case-results__desc { max-width: 500px; text-align: center; }
.kl-home .kl-attorneys__desc { text-align: center; }
.kl-home .kl-attorneys-referring__desc { max-width: 660px; }
.kl-home .kl-testimonials__desc { max-width: 478px; }
.kl-home .kl-faqs__desc { max-width: 496px; margin: 0 auto; }

@media (max-width: 1024px) {
	.kl-home .kl-attorneys__heading { font-size: 1.75rem; }
}

@media (max-width: 600px) {
	.kl-home .kl-about__heading { font-size: 1.5rem; }
	.kl-home .kl-testimonials__heading { font-size: 1.625rem; }

	.kl-home :is(.kl-attorneys__heading, .kl-attorneys__desc) { text-align: left; }
}

/* ── 6.5 Card copy ── */

/* Card titles — Figtree semibold, ink */
.kl-home :is(.kl-practice-areas__card-title, .kl-case-results__case-type, .kl-referral__step-title, .kl-legal-guides__card-title, .kl-mass-tort__card-title) {
	font-family: var(--font-heading);
	font-weight: 600;
	--kl-i-fw: 600;
	color: var(--c-ink);
	margin: 0;
}

/* Card body copy — 14px/1.5 muted */
.kl-home :is(.kl-practice-areas__card-desc, .kl-case-results__case-desc, .kl-referral__step-desc, .kl-legal-guides__card-excerpt, .kl-mass-tort__card-desc),
.kl-home .kl-testimonials__quote p {
	font-size: 0.875rem;
	font-weight: 400;
	--kl-i-fw: 400;
	line-height: 1.5em;
	--kl-i-lh: 1.5em;
	color: var(--c-muted);
	margin: 0;
}

@media (max-width: 600px) {
	.kl-home :is(.kl-case-results__case-desc, .kl-referral__step-desc, .kl-mass-tort__card-desc),
	.kl-home .kl-testimonials__quote p,
	.kl-practice-areas__card--dark .kl-practice-areas__card-desc {
		font-size: 0.8125rem;
	}
	/* NOTE: light practice-areas cards keep 14px — the old file's 13px rule
	   for them lost on specificity; only the dark card ever shrank. */
}

/* Inline "Learn more" / "Contact us" links with a trailing icon */
.kl-home :is(.kl-referral__step-link, .kl-legal-guides__card-link, .kl-attorneys__card-link) {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.kl-home :is(.kl-referral__step-link, .kl-legal-guides__card-link) {
	color: var(--c-blue);
	--kl-a-color: var(--c-blue);
}

.kl-home :is(.kl-referral__step-link, .kl-legal-guides__card-link):hover {
	text-decoration: underline;
}

/* Linked cards (ACF link set) — render as <a>, keep the card look */
.kl-results-stats__card--link,
.kl-home .kl-mass-tort__card--link {
	text-decoration: none;
	color: inherit;
	--kl-a-color: inherit;
}

/* ── 6.6 Icon wrappers ──
   Inline icon holders: never shrink, centre the glyph. All sit inside flex
   parents, so display computes to `flex` either way. */
.kl-about__eyebrow-dot,
.kl-attorneys__eyebrow-dot,
.kl-case-results__eyebrow-dot,
.kl-faqs__eyebrow-dot,
.kl-legal-guides__eyebrow-dot,
.kl-mass-tort__eyebrow-dot,
.kl-referral__eyebrow-dot,
.kl-results-stats__eyebrow-icon,
.kl-testimonials__eyebrow-dot,
.kl-hero__trust-icon,
.kl-referral__step-link-icon,
.kl-attorneys__card-link-icon,
.kl-practice-areas__card-icon,
.kl-mass-tort__card-icon,
.kl-mass-tort__cta-icon,
.kl-cta__trust-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.kl-hero__trust-icon svg,
.kl-hero__btn-icon svg,
.kl-about__btn-icon svg,
.kl-cta__btn-icon svg,
.kl-mass-tort__cta-icon svg,
.kl-mass-tort__card-icon svg,
.kl-cta__trust-icon svg,
.kl-cta__grid svg {
	display: block;
}

/* ── 6.7 Buttons ── */

/* Square carousel arrows — 8px radius, red glyph; the attorneys pair is the
   dark-section variant below. */
.kl-home :is(.kl-practice-areas__arrow, .kl-case-results__arrow, .kl-legal-guides__arrow, .kl-attorneys__nav-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	border-radius: 8px;
	border: 1px solid var(--c-outline-low);
	background: var(--c-white);
	color: var(--c-red-bright); /* Figma active arrow: #FF0000 */
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.kl-home .kl-legal-guides__arrow { border-color: var(--c-outline-med); }

.kl-home :is(.kl-practice-areas__arrow, .kl-case-results__arrow, .kl-legal-guides__arrow):hover {
	background: var(--c-surface-1);
}

.kl-home :is(.kl-practice-areas__arrow, .kl-case-results__arrow, .kl-legal-guides__arrow, .kl-attorneys__nav-btn)[disabled] {
	color: var(--c-disabled); /* Figma disabled arrow: #AFAFAF */
	cursor: default;
}

:is(.kl-practice-areas__arrow, .kl-case-results__arrow, .kl-legal-guides__arrow, .kl-attorneys__nav-btn) svg {
	width: 18px;
	height: 18px;
}

/* Dark-section variant (attorneys) — intentional non-token greys */
.kl-home .kl-attorneys__nav-btn {
	background: transparent;
	border-color: #454545;
}

.kl-home .kl-attorneys__nav-btn--next,
.kl-home .kl-attorneys__nav-btn:hover {
	background: #2b2b2b;
	border-color: transparent;
}

.kl-attorneys__nav-btn svg { color: #fff; }

.kl-home .kl-attorneys__nav-btn[disabled] {
	pointer-events: none;
	opacity: 0.4;
}

/* Mobile: 48px squares, 16px glyphs (Figma mobile nav) */
@media (max-width: 600px) {
	.kl-home :is(.kl-practice-areas__arrow, .kl-case-results__arrow, .kl-legal-guides__arrow) {
		width: 48px;
		height: 48px;
	}

	/* NOTE: the practice-areas / case-results glyphs stay 18px — the old
	   file's 16px rules for them never applied (lost to source order). */
	:is(.kl-legal-guides__arrow, .kl-attorneys__nav-btn) svg {
		width: 16px;
		height: 16px;
	}
}

/* Pill CTAs with a trailing icon circle (hero / about / CTA band) —
   compose on .kl-btn; only colour, size and spacing are overridden. */
.kl-home :is(.kl-hero__btn, .kl-about__btn, .kl-cta__btn) {
	height: 56px;
	white-space: nowrap;
	transition: opacity 0.15s;
}

.kl-home :is(.kl-hero__btn, .kl-about__btn, .kl-cta__btn):hover {
	opacity: 0.88;
}

.kl-home :is(.kl-hero__btn, .kl-about__btn) {
	gap: 1.25em;
	padding-left: 1.5em;
	padding-right: 0.25em;
}

/* Primary: black pill */
.kl-home :is(.kl-hero__btn--primary, .kl-about__btn--primary) {
	background: var(--c-black);
	color: var(--c-white);
	--kl-a-color: var(--c-white);
	border-color: var(--c-black);
}

/* Ghost: translucent pill (outlined on the hero, frosted over the about photo) */
.kl-home :is(.kl-hero__btn--ghost, .kl-about__btn--ghost) {
	background: rgba(251, 251, 251, 0.2);
}

.kl-home .kl-hero__btn--ghost {
	color: var(--c-ink);
	--kl-a-color: var(--c-ink);
	border-color: var(--c-muted);
}

.kl-home .kl-about__btn--ghost {
	color: var(--c-white);
	--kl-a-color: var(--c-white);
	border-color: var(--c-outline-low);
	backdrop-filter: blur(60px);
	-webkit-backdrop-filter: blur(60px);
}

/* Icon circles — 48px (40px in the CTA band) */
.kl-hero__btn-icon,
.kl-about__btn-icon,
.kl-cta__btn-icon,
.kl-attorneys-referring__cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-pill);
	flex-shrink: 0;
}

.kl-cta__btn-icon {
	width: 40px;
	height: 40px;
}

/* Light circle (on the black button) — Figma: arrow-up-right #FF0000 */
.kl-hero__btn-icon--light,
.kl-about__btn-icon--light {
	background: var(--c-bg);
	color: var(--c-red-bright);
}

/* Dark circle (on the ghost / white button) — Figma: phone #FF0000 */
.kl-hero__btn-icon--dark,
.kl-about__btn-icon--dark,
.kl-attorneys-referring__cta-icon {
	background: var(--c-black);
	color: var(--c-red-bright);
}

/* Arrow glyph renders 12px; phone glyphs keep their markup size.
   The CTA compound selector out-specifies its mobile svg override. */
.kl-hero__btn-icon--light svg,
.kl-about__btn-icon svg,
.kl-attorneys-referring__cta-icon svg,
.kl-cta__btn-icon.kl-cta__btn-icon--light svg {
	width: 12px;
	height: 12px;
}

@media (max-width: 600px) {
	.kl-home :is(.kl-hero__btn, .kl-cta__btn) { height: 48px; }

	.kl-hero__btn-icon,
	.kl-about__btn-icon,
	.kl-cta__btn-icon {
		width: 32px;
		height: 32px;
	}
}

/* Ghost square CTAs — Figma: border #afafaf (text/disabled), 8px radius */
.kl-home :is(.kl-legal-guides__view-more, .kl-mass-tort__cta) {
	padding: 0.875em 1em;
	border-radius: 8px;
	border: 1px solid var(--c-disabled);
	background: transparent;
}

/* ── 6.8 Decorative grid positions ──
   Every Grid_1 element composes .kl-grid-pattern (§5); these are only the
   per-section offsets, lifted from the Figma "BG Patterns" frames. */
.kl-hero__grid-bg--tl { top: -179px; left: -249px; }                 /* hero top-left (x -249) */
.kl-practice-areas__grid-bg { top: -365px; right: -200px; }          /* hero/practice seam (Figma x 903, y -365) */
.kl-results-stats__grid--tr { top: -189px; left: calc(var(--container-edge) + 726px); }
.kl-about__grid-bg { top: -388px; left: -167px; }                    /* recognition/about seam (Figma x -167, y 436) */
.kl-case-results__grid--tl { top: -94px; left: -17px; }
.kl-case-results__grid--br { bottom: -120px; right: -17px; }
.kl-legal-guides__grid--tr { top: -46px; right: -167px; }            /* Figma: left 579px, top -46px */
.kl-legal-guides__grid--bl { bottom: -120px; left: -145px; }         /* Figma: left -145px, top 862px */
.kl-faqs__grid-bg--tl { top: -156px; left: -159px; }                 /* Figma: x -159, y -156 */
.kl-faqs__grid-bg--br { bottom: -177px; right: -114px; }             /* Figma: x 817, y 661 */

/* Testimonials draws its grid as a pseudo-element (no grid element in markup) —
   Figma node 1:11391, ~737×644 at right -149 / top -149. */
.kl-testimonials::before {
	content: '';
	position: absolute;
	top: -150px;
	right: -167px;
	width: 737px;
	height: 644px;
	background-image: var(--kl-grid-svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 0;
}

/* Tablet: hide the grids that would otherwise cause horizontal overflow */
@media (max-width: 1024px) {
	.kl-case-results__grid,
	.kl-legal-guides__grid,
	.kl-testimonials::before {
		display: none;
	}
}

/* Mobile: shorter, viewport-wide strips */
@media (max-width: 600px) {
	.kl-hero__grid-bg--tl { top: -100px; left: auto; right: -125px; width: 100%; height: 350px; }
	.kl-practice-areas__grid-bg { top: -100px; left: -100px; width: 100%; height: 300px; }
	.kl-results-stats__grid--tr { top: -80px; left: auto; right: -100px; width: 100%; height: 300px; }
	.kl-about__grid-bg { top: -325px; left: -100px; width: 100%; }
	/* NOTE: FAQ grids keep their desktop offsets — the old file's mobile
	   top/left/bottom/right values never applied (lost to source order). */
	.kl-faqs__grid-bg--tl,
	.kl-faqs__grid-bg--br { width: 100%; }
}


/* ═══════════════ 7. Sections ═══════════════ */

/* ════════ Hero ════════ */

/* Inner two-column layout */
.kl-hero__inner {
	display: flex;
	gap: var(--space-5);
	align-items: stretch;
}

/* ── Left column (content) ── */
.kl-hero__content {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3.125em;
	justify-content: center;
	container-type: inline-size;
}

.kl-hero__text-group {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

.kl-home .kl-hero__heading {
	font-family: var(--font-figtree);
	font-size: min(8.5cqw, 3rem);
	font-weight: 800;
	--kl-i-fw: 800;
	line-height: 1em;
	--kl-i-lh: 1em;
	color: var(--c-ink);
	margin: 0;
}

.kl-home .kl-hero__subhead {
	font-size: 1.125rem;
	font-weight: 400;
	--kl-i-fw: 400;
	line-height: 1.5em;
	--kl-i-lh: 1.5em;
	color: var(--c-muted);
	margin: 0;
}

/* CTA group: button row + trust links */
.kl-hero__cta-group {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.kl-hero__buttons {
	display: flex;
	gap: 1.25em;
	align-items: center;
	flex-wrap: wrap;
}

/* Trust link row */
.kl-hero__trust-links {
	display: flex;
	gap: 1.25em;
	flex-wrap: wrap;
}

.kl-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 0.571429em;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--c-muted);
}

.kl-hero__trust-icon {
	color: var(--c-blue);
}

/* ── Right column (media mosaic) ── */
.kl-hero__media {
	display: flex;
	gap: 1em;
	align-items: stretch;
	flex: 1 1 0;
	max-width: 700px;
	min-width: 625px;
	container-type: inline-size;
}

.kl-hero__media-col {
	display: flex;
	flex: 1 0 0;
	min-width: 0;
	flex-direction: column;
	gap: 1em;
}

/* Left media col: photo fills flex then two badges below */
.kl-hero__media-col--left {
	justify-content: flex-end;
}

/* Photo wrappers */
.kl-hero__photo-wrap {
	border-radius: var(--radius-12);
	overflow: hidden;
	position: relative;
}

.kl-hero__photo-wrap--solo {
	flex: 1 0 0;
	min-height: 280px;
}

.kl-hero__photo-wrap--team {
	height: 526px;
	flex-shrink: 0;
}

/* Two independent card photos — plain cover crop, centered */
.kl-hero__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	border-radius: var(--radius-12);
}

/* Badge row (left col, below solo photo) */
.kl-hero__badges-row {
	display: flex;
	gap: 1em;
}

/* Stat badges */
.kl-hero__badge {
	display: flex;
	flex-direction: column;
	gap: 0.375em;
	padding: 0.5em 0.75em;
	border: 1px dashed #494949; /* Figma Free_Trail badge border */
	border-radius: var(--radius-12);
	overflow: hidden;
}

/* Top badge in right column (full width) */
.kl-hero__badge--top {
	width: 100%;
	flex-shrink: 0;
}

/* Badge in badges-row fills equally */
.kl-hero__badges-row .kl-hero__badge {
	flex: 1 0 0;
	min-width: 0;
}

.kl-hero__badge-value {
	font-family: var(--font-figtree);
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.5em;
	color: var(--c-blue);
	white-space: nowrap;
}

.kl-hero__badge-label {
	font-size: min(2.2cqi, 0.875rem);
	font-weight: 400;
	line-height: 22px;
	color: var(--c-muted);
}

/* ≤1024px: collapse to single column, media goes below */
@media (max-width: 1024px) {
	.kl-hero__inner {
		flex-direction: column;
		gap:7.5em;
	}

	.kl-hero__media {
		width: 100%;
		min-width: 100%;
		align-self: center;
	}

	.kl-hero__photo-wrap--solo {
		min-height: 240px;
	}

	.kl-hero__photo-wrap--team {
		height: 500px;
	}
}

/* ≤600px: Figma "Hero v4" mobile (node 33:2126) */
@media (max-width: 600px) {
	/* Content block <-> media block */
	.kl-hero__inner {
		flex-direction: column;
		gap: 7.5em;
	}

	.kl-hero__content {
		gap: 2.5em;
	}

	.kl-hero__text-group {
		gap: 20px;
	}

	.kl-home .kl-hero__heading {
		font-size: 2rem;
	}

	.kl-home .kl-hero__subhead {
		font-size: 0.875rem;
	}

	.kl-hero__cta-group {
		gap: 1.25em;
	}

	/* Buttons stay side-by-side on mobile (not stacked) — Figma keeps them in a row */
	.kl-hero__buttons {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 0.75em;
	}

	.kl-home .kl-hero__btn {
		gap: 0.75em;
		padding-left: 0.75em;
		flex: 0 1 auto;
		min-width: 0;
	}

	.kl-home .kl-hero__btn-label {
		/* 14px at the 390px design width; eases down slightly on narrower layouts */
		font-size: clamp(0.75rem, 3.6vw, 0.875rem);
		line-height: 1.5em;
	}

	/* Phone glyph in the dark circle narrows to 18px (height keeps its markup size) */
	.kl-hero__btn-icon--dark svg {
		width: 18px;
	}

	.kl-hero__trust-item {
		gap: 0.5em;
		font-size: 0.8125rem;
	}

	/* Media mosaic stays two columns side-by-side, just narrower.
	   Columns stretch to equal height: the right col's fixed 300px photo
	   sets the height, the left photo flexes to fill (badges are
	   flex-shrink:0 so they keep their natural size). */
	.kl-hero__media {
		gap: 0.5em;
	}

	.kl-hero__media-col--left {
		flex: 0 0 44%;
		justify-content: flex-start;
	}

	/* Left photo fills whatever height the right column establishes */
	.kl-hero__photo-wrap--solo {
		flex: 1 1 auto;
		height: auto;
		min-height: 0;
	}

	.kl-hero__photo-wrap--team {
		height: 300px;
	}

	/* Left column: photo, then the two stat badges stacked (not side-by-side) */
	.kl-hero__badges-row {
		flex-direction: column;
		gap: 0.5em;
	}

	/* Desktop gives row badges flex-basis 0 (width); in a column that zeroes
	   their HEIGHT — restore natural sizing. */
	.kl-hero__badges-row .kl-hero__badge {
		flex: 0 0 auto;
	}

	.kl-hero__badge {
		flex-shrink: 0;
		padding: 0.75em;
	}

	.kl-hero__badge-value {
		font-size: min(7cqi, 1rem);
		line-height: 1.15em;
	}

	.kl-hero__badge-label {
		font-size: 0.75rem;
		line-height: 1.15em;
	}
}


/* ════════ Practice areas ════════ */

/* Inner layout: two columns, left content + right carousel */
.kl-practice-areas__inner {
	display: flex;
	align-items: stretch;
	gap: 5em;
	position: relative;
	z-index: 1;
}

/* ── Left: content ── */
.kl-practice-areas__content {
	flex: 0 0 auto;
	width: 478px;
	min-width: 0;
}

/* Navigation arrows row */
.kl-practice-areas__nav {
	display: flex;
	gap: 1em;
	margin-top: 0.5em;
}

/* ── Right: carousel ── */
.kl-practice-areas__track-wrap {
	flex: 0 0 calc(100vw - var(--container-edge) - 478px - 80px);
	width: calc(100vw - var(--container-edge) - 478px - 80px);
	max-width: none;
	min-width: 0;
	overflow: hidden;
}

/* The flex track — JS reads column-gap for step calc; transition injected by JS */
.kl-practice-areas__track {
	display: flex;
	column-gap: 1.25em;
	width: max-content;
}

/* Individual card */
.kl-home .kl-practice-areas__card {
	flex: 0 0 379px;
	min-width: 379px;
	height: 470px;
	border-radius: 20px;
	padding: 2em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--c-white);
	border: 1px solid var(--c-outline-med);
	box-sizing: border-box;
}

/* Dark (active) card — car accidents */
.kl-home .kl-practice-areas__card--dark {
	background: var(--c-navy);
	border-color: var(--c-navy);
	color: var(--c-white);
	--kl-a-color: var(--c-white);
}

/* Ease the active-card (dark) highlight hand-off as the carousel steps */
.kl-home .kl-practice-areas__card,
.kl-practice-areas__card-icon,
.kl-practice-areas__card-icon-mask,
.kl-home .kl-practice-areas__card-title,
.kl-practice-areas__card-desc {
	transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}

/* Linked card (ACF link set) — renders as <a>, keep article look.
   The color reset is scoped away from the active/dark card: both
   modifiers land on the same element at equal specificity, so an
   unscoped `color: inherit` here would override the dark card's white
   (it is declared later) and drop its title back to black. */
.kl-home .kl-practice-areas__card--link {
	text-decoration: none;
}

.kl-practice-areas__card--link:not(.kl-practice-areas__card--dark) {
	color: inherit;
	--kl-a-color: inherit;
}

/* Masked icon (ACF icon_picker SVG) — CSS controls color via background */
.kl-practice-areas__card-icon-mask {
	display: block;
	width: 40px;
	height: 40px;
	background: var(--c-blue);
	-webkit-mask: var(--kl-icon) no-repeat center / contain;
	mask: var(--kl-icon) no-repeat center / contain;
}

.kl-practice-areas__card--dark .kl-practice-areas__card-icon-mask {
	background: var(--c-blue-accent-2);
}

/* Inline-SVG icon: stroke follows the card's text colour */
.kl-practice-areas__card--dark .kl-practice-areas__card-icon {
	color: var(--c-blue-accent-3); /* nearest Figma token = surface/brand_secondary_accent_3 #4e98e2 */
}

.kl-practice-areas__card:not(.kl-practice-areas__card--dark) .kl-practice-areas__card-icon {
	color: var(--c-blue);
}

/* Card body at bottom */
.kl-practice-areas__card-body {
	display: flex;
	flex-direction: column;
	gap: 0.375em;
}

.kl-home .kl-practice-areas__card-title {
	font-size: 1.5rem;
	line-height: 1.5em;
	--kl-i-lh: 1.5em;
	white-space: normal;
	overflow-wrap: break-word;
	min-width: 0;
	color: inherit;
}

/* On light cards the title is black */
.kl-practice-areas__card:not(.kl-practice-areas__card--dark) .kl-practice-areas__card-title {
	color: var(--c-black);
}

/* On the dark card the description is light grey */
.kl-practice-areas__card--dark .kl-practice-areas__card-desc {
	color: #c7d4e4;
}

/* ≤1024px (tablet): keep the desktop row — content beside the carousel —
   with a narrower content column and smaller cards */
@media (max-width: 1024px) {
	.kl-practice-areas__inner {
		gap: 2.5em;
	}

	.kl-practice-areas__content {
		width: 350px;
	}

	/* Carousel viewport: everything right of the content column (2.5em = 40px gap) */
	.kl-practice-areas__track-wrap {
		flex: 0 0 calc(100vw - var(--container-edge) - 350px - 40px);
		width: calc(100vw - var(--container-edge) - 350px - 40px);
	}

	.kl-home .kl-practice-areas__card {
		flex: 0 0 320px;
		min-width: 320px;
		height: 350px;
		padding: 1.5em;
	}
}

/* ≤720px: the row leaves too little room for the carousel — stack content
   above it (cards keep the 320×350 tablet sizing until the ≤600px styles) */
@media (max-width: 720px) {
	.kl-practice-areas__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.kl-practice-areas__content {
		width: 100%;
	}

	/* Constrain the carousel viewport to the full column width */
	.kl-practice-areas__track-wrap {
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}

	/* The desktop track is width:max-content, which leaves the cards'
	   percentage flex-basis with no definite size to resolve against
	   (they blow up to max-content). A definite 100% width fixes the
	   basis; the cards overflow the track box, which the wrap clips. */
	.kl-practice-areas__track {
		width: 100%;
	}
}

/* ≤600px: Figma "Practice areas" mobile (node 33:2165) — show 1 card + peek */
@media (max-width: 600px) {
	/* Stacking comes from the ≤720px block; here we just move the nav arrows
	   below the cards (Figma mobile order: eyebrow/heading/desc, cards,
	   arrows). __content has no box styling of its own, so display:contents
	   lets its children re-order alongside track-wrap as siblings. */
	.kl-practice-areas__inner {
		gap: 0;
	}

	.kl-practice-areas__content {
		display: contents;
	}

	.kl-practice-areas__eyebrow {
		order: 1;
	}

	.kl-home .kl-practice-areas__heading {
		order: 2;
		width: 100%;
		max-width: 316px; /* Figma mobile heading box — wraps "…the help / injured…" */
		margin-top: 10px;
	}

	/* Natural wrap on mobile (the <br> is the desktop break point) */
	.kl-practice-areas__heading br {
		display: none;
	}

	.kl-home .kl-practice-areas__desc {
		order: 3;
		width: 100%;
		margin-top: 10px;
	}

	.kl-practice-areas__track-wrap {
		order: 4;
		width: 100%;
		max-width: 100%;
		margin-top: 2.5em;
		overflow: hidden;
	}

	.kl-practice-areas__nav {
		order: 5;
		margin-top: 2.5em;
	}

	/* Single card + peek of the next one (~90% width, matches Figma's 322px card in a 358px column) */
	.kl-home .kl-practice-areas__card {
		flex: 0 0 90%;
		height: 298px;
		min-width: 0;
		padding: 1.5em 1em;
	}

	.kl-practice-areas__card-icon svg,
	.kl-practice-areas__card-icon-mask {
		width: 32px;
		height: 32px;
	}
}


/* ════════ Results / stats (Recognition / Awards) ════════ */

/* Award row is a .kl-marquee (§5); only the gap differs from the default. */
.kl-results-stats__marquee {
	--kl-marquee-gap: 1.5em;
}

/* ── Individual award card ── */
.kl-results-stats__card {
	background: var(--c-white);
	border: 1px solid var(--c-outline-med);
	border-radius: 20px;
	padding: 3.75em 2em 2em;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2em;
	flex: 0 0 519px;
	width: 519px;
	height: 302px;
	min-width: 0;
	position: relative;
	overflow: hidden;
}

/* Laurel SVG artwork — positioned behind content */
.kl-results-stats__laurel {
	position: absolute;
	inset: 0;
	display: block;
	background-image: url('../images/recognitiongraphic.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 486px 277px;
	pointer-events: none;
}

/* Media-library artwork (awards-icon-left/right): the wreath halves sit at
   the card's outer edges and scale with card height, so the pair adapts to
   each breakpoint's card width instead of a fixed 486px graphic. The URLs
   arrive as custom properties on the section (see results-stats.php).

   Inset: 1em from its own outer edge (left icon left, right icon right) via
   the 4-value background-position, and 0.75em top and bottom — the height is
   trimmed by both insets at once (1.5em) and the icon stays centered. */
.kl-results-stats--split-icons .kl-results-stats__laurel {
	--kl-award-icon-inset-x: 1em;
	--kl-award-icon-inset-y: 0.75em;
	background-image: var(--kl-award-icon-left), var(--kl-award-icon-right);
	background-position:
		left var(--kl-award-icon-inset-x) center,
		right var(--kl-award-icon-inset-x) center;
	background-size: auto calc(100% - var(--kl-award-icon-inset-y) * 2);
}

.kl-results-stats__laurel-svg {
	display: none;
}

/* Card body sits above laurel */
.kl-results-stats__card-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75em;
	width: 100%;
}

/* Year badge */
.kl-results-stats__badge {
	display: flex;
	align-items: center;
	justify-content: center;
}

.kl-results-stats__year {
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.5em;
	color: var(--c-blue-accent-3); /* #4e98e2 */
	white-space: nowrap;
}

/* Award name — navy, semibold, single line */
.kl-home .kl-results-stats__award-name {
	font-family: var(--font-figtree);
	font-size: 1.25rem;
	font-weight: 600;
	--kl-i-fw: 600;
	line-height: 1.8em;
	--kl-i-lh: 1.8em;
	color: var(--c-navy);
	text-align: center;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* Divider line */
.kl-results-stats__divider {
	border: none;
	border-top: 1px solid var(--c-outline-med);
	width: 276px;
	max-width: 100%;
	margin: 0;
}

/* Description text block */
.kl-results-stats__desc {
	font-size: 1.625rem;
	text-transform: capitalize;
	text-wrap-style: pretty;
	font-weight: 500;
	line-height: 1.15em;
	color: var(--c-award-desc);
	text-align: center;
}

.kl-home .kl-results-stats__desc p {
	margin: 0;
}

@media (max-width: 1024px) {

	.kl-results-stats{
    	padding-top: 7.5em;
    	padding-bottom: 12.5em;
	}

	/* Marquee cards keep a fixed width at every breakpoint — the track is
	   content-sized, so width:100%/flex-basis:auto has nothing to resolve
	   against and would collapse the row. */
	.kl-results-stats__card {
		flex: 0 0 420px;
		width: 420px;
		height: auto;
		min-height: 260px;
		padding: 2.5em 1.5em 1.5em;
	}
}

/* ≤600px: Figma "Homepage - Mobile" (node 33:2195) — the auto-scrolling
   marquee replaces the old scroll-snap peek row (no arrows in the design). */
@media (max-width: 600px) {
	.kl-results-stats__marquee {
		--kl-marquee-gap: 0.75em;
		--kl-marquee-fade: 28px;
		position: relative;
		z-index: 2;
	}

	.kl-results-stats__card {
		flex: 0 0 324px;
		width: 324px;
		min-height: 215px;
		height: auto;
		padding: 1.25em 2em 1.5em;
		justify-content: center;
	}

	.kl-results-stats__laurel {
		background-size: contain;
	}

	.kl-results-stats__card-body {
		gap: 10px;
	}

	.kl-results-stats__year {
		font-size: 0.875rem;
		line-height: 1;
	}

	.kl-home .kl-results-stats__award-name {
		white-space: normal;
		text-overflow: clip;
		font-size: 1.125rem;
	}

	.kl-results-stats__desc {
		font-size: 1.375rem;
		margin-top: 5px;
	}
}


/* ════════ About ════════ */

/* Full-bleed card: rounded rectangle that contains the photo + overlay.
   Mirrors Figma: border-radius 16px, height ~900px on desktop. */
.kl-about__card {
	position: relative;
	z-index: 1; /* above the boundary grid */
	border-radius: 16px;
	overflow: hidden;
	min-height: 900px;
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* Desktop: min() keeps the Figma 900px height on tall monitors; the 6em
   allowance leaves room for the sticky header plus the section's own
   top/bottom gaps; the floor keeps the overlay text from clipping on very
   short windows. */
@media (min-width: 1025px) {
	.kl-about__card {
		min-height: 560px;
		height: min(900px, calc(100vh - 6em));
	}
}

/* ── Photo layer (fills the card) ── */
.kl-about__photo-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.kl-about__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: 16px;
}

/* Gradient overlay: dark on the left fading to transparent by ~65% */
.kl-about__overlay {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.72) 0%,
		rgba(0, 0, 0, 0.55) 30%,
		rgba(0, 0, 0, 0.20) 50%,
		rgba(0, 0, 0, 0) 65%
	);
}

/* ── Text content (sits above photo) ── */
.kl-about__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2.5em;
	justify-content: center;
	padding: 3.75em 4em;
	width: min(744px, 55%);
	min-width: 0;
}

/* Description paragraphs */
.kl-about__desc {
	display: flex;
	flex-direction: column;
	gap: 0; /* paragraph margin handles spacing */
}

.kl-home .kl-about__desc p {
	font-size: 0.875rem;
	font-weight: 400;
	--kl-i-fw: 400;
	line-height: 1.75em;
	--kl-i-lh: 1.75em;
	color: var(--c-white);
	margin: 0 0 1em;
}

.kl-about__desc p:last-child {
	margin-bottom: 0;
}

.kl-about__text-group{
	gap:10px;
}

/* ── CTA button group ── */
.kl-about__cta-group {
	display: flex;
	gap: 1.25em;
	align-items: center;
	flex-wrap: wrap;
}

/* ≤1024px: content expands to full width, overlay covers more */
@media (max-width: 1024px) {
	.kl-about__card {
		min-height: 560px;
	}

	.kl-about__photo {
		object-position: -250px top;
	}

	.kl-about__content {
		width: min(550px, 100%);
		padding: 3em 2.5em;
	}

	.kl-about__overlay {
		background: linear-gradient(
			to right,
			rgba(0, 0, 0, 0.78) 0%,
			rgba(0, 0, 0, 0.60) 50%,
			rgba(0, 0, 0, 0.25) 80%,
			rgba(0, 0, 0, 0) 100%
		);
	}
}

/* ≤600px: Figma "Homepage - Mobile" (node 33:2485) — full-bleed card,
   text bottom-anchored, buttons side-by-side and compact. */
@media (max-width: 600px) {
	/* Figma mobile drops the third paragraph to shorten the overlay text */
	.kl-about__desc p:nth-of-type(3) {
		display: none;
	}

	.kl-about__card {
		min-height: 480px;
		border-radius: 0;
	}

	.kl-about__photo {
		border-radius: 0;
		object-position: 70% top;
	}

	/* The gradient gives way to a frosted band that fades in from the top */
	.kl-about__overlay {
		border-radius: 0;
		background: none;
	}

	.kl-about__overlay::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: rgb(0 0 0 / 50%);
		backdrop-filter: blur(40px);
		-webkit-backdrop-filter: blur(40px);
		mask-image: linear-gradient(to bottom, black 0%, transparent 35%, black 100%);
		-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 35%, black 100%);
	}

	.kl-about__content {
		padding: 7.5em 1.25em 5em 1.25em;
		gap: 1.75em;
		/* Figma: Hero Text Container is bottom-anchored (justify-end) */
		justify-content: flex-end;
		width:100%;
	}

	.kl-home .kl-about__desc p {
		font-size: var(--fs-sm);
		line-height: 1.5em;
		--kl-i-lh: 1.5em;
		/* The 1em bottom margin is set on the desktop rule, where the text is
		   16px; this text is 14px, so restate it to keep the same 16px gap. */
		margin-bottom: 1.15em;
	}

	/* Figma keeps the CTAs side-by-side on mobile ("Call to Action Group -
	   SIDE BY SIDE"), not stacked. Our labels are longer than the Figma
	   mobile copy ("Talk with us" / "Get to know us"), so wrapping to two
	   lines is allowed instead of the ellipsis/truncation that shorter
	   labels wouldn't need. */
	.kl-about__cta-group {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0.75em;
		width: 100%;
	}

	/* Compact mobile button — mirrors .kl-hero__btn at ≤600 */
	.kl-home .kl-about__btn {
		flex: 1 1 0;
		min-width: 0;
		height: auto;
		min-height: 0;
		gap: 1em;
		padding: 0.4em 0.5em 0.4em 1.25em;
		white-space: normal;
		text-align: left;
		font-size: 0.815rem;
		line-height: 1;
	}

	.kl-about__btn > span:first-child {
		flex: 1 1 auto;
		min-width: 0;
	}
}


/* ════════ Case results ════════ */

/* ── Carousel root ── */
.kl-case-results__carousel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5em;
}

/* Viewport: static clipping wrapper — stays put while the track translates.
   overflow: hidden here (not on the track) so the clipping box never moves.
   The negative block margin + 5px padding give card box-shadows room to
   paint without changing the layout height. */
.kl-case-results__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-block: -0.75em;
	padding: 5px;
}

/* The track is a flex row — JS reads column-gap and slide width to step.
   Each slide = one 2x2 grid; track advances one slide at a time.
   No overflow: hidden here — the viewport wrapper handles clipping.
   transition injected by JS. */
.kl-case-results__track {
	display: flex;
	column-gap: 1.5em;
	width: 100%;
}

/* ── Each slide = 2x2 grid of 4 cards ── */
.kl-case-results__slide {
	flex: 0 0 100%;
	min-width: 0;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, 1fr);
	gap: 1.5em;
}

/* ── Individual result card ── */
.kl-case-results__card {
	background: var(--c-white);
	border-radius: 20px;
	padding: 2em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 262px;
	min-width: 0;
	box-shadow: 0 1px 2.5px rgba(10, 13, 18, 0.20);
}

/* Big dollar-figure amount — blue, 30px bold */
.kl-home .kl-case-results__amount {
	font-size: 1.875rem;
	font-weight: 700;
	--kl-i-fw: 700;
	line-height: 1.2em;
	--kl-i-lh: 1.2em;
	color: var(--c-blue);
	margin: 0;
	word-break: break-word;
}

/* Body group: case type + description */
.kl-case-results__body {
	display: flex;
	flex-direction: column;
	gap: 0.375em;
	min-width: 0;
}

/* Case-type subtitle — 20px semibold */
.kl-home .kl-case-results__case-type {
	font-size: 1.25rem;
	line-height: 1.5em;
	--kl-i-lh: 1.5em;
}

.kl-home .kl-case-results__case-desc {
	text-wrap-style: pretty;
}

/* ── Bottom-centered prev/next nav ── */
.kl-case-results__nav {
	display: flex;
	gap: 1em;
	justify-content: center;
	align-items: center;
}

/* ≤1024px: cards remain 2-col, tighter */
@media (max-width: 1024px) {
	.kl-case-results__card {
		min-height: 220px;
		padding: 1.5em;
	}
}

/* ≤600px: Figma "Homepage - Mobile" (node 33:2505) — slides flatten into one
   horizontal row, one card per step with a peek of the next. */
@media (max-width: 600px) {
	/* Cards carry data-kl-carousel-item so the JS steps per card (slides
	   lose their box via display:contents). */
	.kl-case-results__slide {
		display: contents;
	}

	.kl-case-results__track {
		column-gap: 1.25em;
	}

	.kl-case-results__card {
		flex: 0 0 316px;
		min-height: 222px;
		padding: 1.5em 1.25em;
		gap: 1.5em;
	}

	.kl-home .kl-case-results__amount {
		font-size: 1.5rem;
	}

	.kl-home .kl-case-results__case-type {
		font-size: 1.125rem;
		line-height: 1.4em;
		--kl-i-lh: 1.4em;
	}
}


/* ════════ Referral (How It Works) ════════ */

/* ── Step cards row ── */
.kl-referral__steps {
	display: flex;
	gap: 1.5em;
	align-items: stretch;
}

/* Individual step card */
.kl-referral__step {
	flex: 1 0 0;
	min-width: 0;
	background: var(--c-bg);
	border-radius: 20px;
	overflow: hidden;
	padding: 2em;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 2.5em;
}

/* Step number label (red, top of card) */
.kl-home .kl-referral__step-num {
	font-size: var(--fs-body);
	font-weight: 600;
	--kl-i-fw: 600;
	line-height: 1;
	--kl-i-lh: 1;
	letter-spacing: 0;
	color: var(--c-brand-red);
	margin: 0;
}

/* Step body: title + description + optional link */
.kl-referral__step-body,
.kl-referral__step-text {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.kl-home .kl-referral__step-title {
	font-size: 1.25rem;
	line-height: 1;
	--kl-i-lh: 1;
	letter-spacing: 0;
}

/* Inline "Contact us" link with phone icon */
.kl-home .kl-referral__step-link {
	gap: var(--space-2);
	font-size: 0.875rem;
}

/* ≤1024px (tablet): steps flatten into the same horizontally scrollable peek
   row as mobile (native swipe/snap, no nav arrows here) */
@media (max-width: 1024px) {
	.kl-referral__steps {
		gap: 1em;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		/* Without this the mandatory snap aligns the first card to the
		   PADDING box, so the browser scrolls the gutter away on load and
		   card 1 sits flush to the viewport edge. Inset the snapport by the
		   same gutter so the resting position is scrollLeft 0. */
		scroll-padding-inline: var(--gutter);
		-webkit-overflow-scrolling: touch;
	}

	.kl-referral__steps::-webkit-scrollbar {
		background: transparent;
		display: none;
		width: 0;
		height: 0;
	}

	.kl-referral__step {
		flex: 0 0 350px;
		min-width: 0;
		padding: 1.25em;
		gap: 2.5em;
		scroll-snap-align: start;
	}
}

/* ≤600px: Figma "Homepage - Mobile" (node 33:2537) — the scroll-row
   mechanics come from the ≤1024px block; mobile narrows the cards
   (Figma: 311px) and widens the gap slightly. */
@media (max-width: 600px) {
	/* Natural 3-line wrap on mobile (the <br> is the desktop break point) */
	.kl-referral__heading br {
		display: none;
	}

	.kl-referral__steps {
		gap: 1.25em;
	}

	.kl-referral__step {
		flex: 0 0 311px;
	}

	.kl-referral__step-body {
		gap: 1.25em;
	}
}


/* ════════ Attorneys ════════
   Frame 1:11302 — dark-surface section with three full-bleed photo cards.
   Frame 1:11293 — "Are You a Referring Attorney?" callout band. */

/* ── Carousel viewport — overflow:hidden lives here, never on the track ── */
.kl-attorneys__viewport {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
}

/* ── Cards track (flex row — JS sets transform; no overflow:hidden here) ── */
.kl-attorneys__carousel {
	display: flex;
	column-gap: 1.5em;
	padding-inline: var(--container-edge);
	min-width: 0;
	width: max-content;
}

.kl-attorneys__card {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	height: 526px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	flex: 0 0 min(628px, calc((100vw - var(--container-edge) - 48px) / 2.25));
}

/* Photo fills the entire card */
.kl-attorneys__card-photo {
	position: absolute;
	inset: 0;
	border-radius: 20px;
}

.kl-attorneys__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* Dark gradient overlay — bottom-up */
.kl-attorneys__card-overlay {
	position: absolute;
	inset: 0;
	border-radius: 20px;
	background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.75) 80%);
}

/* Card body: text + link pinned to bottom */
.kl-attorneys__card-body {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding: 2em;
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

.kl-attorneys__card-info {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.kl-home .kl-attorneys__card-name {
	font-size: 2rem;
	font-weight: 600;
	--kl-i-fw: 600;
	line-height: 1.1;
	--kl-i-lh: 1.1;
	letter-spacing: 0;
	color: var(--c-white);
	margin: 0;
}

.kl-home .kl-attorneys__card-title {
	font-size: 1.125rem;
	font-weight: 400;
	--kl-i-fw: 400;
	line-height: 1.4;
	--kl-i-lh: 1.4;
	letter-spacing: 0;
	color: var(--c-white);
	margin: 0;
}

/* "Learn more →" inline link */
.kl-home .kl-attorneys__card-link {
	gap: 0.5em;
	color: var(--c-white);
	--kl-a-color: var(--c-white);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.5em;
	padding: 0;
	border: none;
	background: none;
}

.kl-home .kl-attorneys__card-link:hover {
	color: var(--c-white);
}

/* Reveal "Learn more" only while the card is hovered.
   Gated on (hover: hover) so touch devices — which never fire hover — keep it
   permanently visible instead of showing an invisible-but-tappable link.
   Fading rather than collapsing keeps the card body height fixed, so the name
   and title don't shift on hover; :focus-within covers keyboard users, who
   would otherwise tab to a link they cannot see. */
@media (hover: hover) and (pointer: fine) {
	.kl-home .kl-attorneys__card-link {
		opacity: 0;
		transform: translateY(0.5em);
		transition: opacity 0.25s ease, transform 0.25s ease;
	}

	.kl-attorneys__card:hover .kl-attorneys__card-link,
	.kl-attorneys__card:focus-within .kl-attorneys__card-link {
		opacity: 1;
		transform: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.kl-home .kl-attorneys__card-link {
			transform: none;
			transition: none;
		}
	}
}

/* ── Navigation buttons (styled in §6.7) ── */
.kl-attorneys__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin-top: 2.5em;
}

/* ── Referring attorney callout band (frame 1:11293) ── */
.kl-attorneys-referring__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5em;
	background: var(--c-dark-surface);
	border: 1px solid #333; /* intentional dark-section card/CTA border; no matching Figma token */
	border-radius: 8px;
	padding: 2.5em;
	min-height: 180px;
}

.kl-attorneys-referring__text-group {
	display: flex;
	flex-direction: column;
	gap: 0.625em;
	flex: 1 1 0;
	min-width: 0;
}

.kl-home .kl-attorneys-referring__heading {
	font-size: 3rem;
	font-weight: 500;
	--kl-i-fw: 500;
	line-height: 1.1;
	--kl-i-lh: 1.1;
	letter-spacing: 0;
	color: var(--c-white);
}

/* "Click here ↗" pill CTA: white bg, black icon circle (not a .kl-btn) */
.kl-home .kl-attorneys-referring__cta {
	display: inline-flex;
	align-items: center;
	gap: 1.25em;
	height: 56px;
	padding-left: 1.5em;
	padding-right: 0.25em;
	border-radius: var(--radius-pill);
	background: var(--c-white);
	border: 1px solid #333; /* intentional dark-section card/CTA border; no matching Figma token */
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.kl-attorneys-referring__cta-label {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.5em;
	color: var(--c-black);
}

@media (max-width: 1024px) {
	.kl-attorneys__card {
		flex: 0 0 450px;
		height: 400px;
	}

	.kl-home .kl-legal-guides__card-img-wrap{
		height:200px;
	}

	.kl-home .kl-attorneys-referring__heading {
		font-size: 2.25rem;
	}

	.kl-attorneys-referring__card {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5em;
	}
}

/* ≤600px — Figma "Homepage - Mobile" (node 33:2570 profiles / 33:2561 band).
   Viewport bleed + track gutter come from §8. */
@media (max-width: 600px) {
	/* Figma mobile: one card + peek of the next (315x355) */
	.kl-attorneys__card {
		flex: 0 0 315px;
		min-width: 0;
		height: 355px;
	}

	.kl-attorneys__card-body {
		padding: 1.25em;
	}

	.kl-attorneys__card-info {
		gap: 0.25em;
	}

	.kl-home .kl-attorneys__card-name {
		font-size: 1.75rem;
		line-height: 1.5em;
		--kl-i-lh: 1.5em;
	}

	/* Figma mobile nav: 48px squares (unchanged), 16px glyphs, left-aligned */
	.kl-attorneys__nav {
		justify-content: flex-start;
	}

	/* Figma mobile: card content centers (desktop/tablet keep left-aligned rows) */
	.kl-attorneys-referring__card {
		align-items: center;
		justify-content: center;
		padding: 2em 1.25em;
		gap: 2.5em;
	}

	.kl-attorneys-referring__text-group {
		align-items: center;
		gap: 10px;
	}

	.kl-home .kl-attorneys-referring__heading {
		font-size: 2rem;
		line-height: 1.15em;
		--kl-i-lh: 1.15em;
		letter-spacing: 0;
		text-align: center;
	}

	.kl-home .kl-attorneys-referring__desc {
		text-align: center;
	}

	.kl-home .kl-attorneys-referring__cta {
		height: 48px;
	}

	.kl-attorneys-referring__cta-icon {
		width: 40px;
		height: 40px;
	}
}


/* ════════ Legal guides ════════ */

/* ── Section header: two-column row (content left, nav arrows right) ── */
.kl-legal-guides__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 3.75em;
	margin-bottom: 3.75em;
}

.kl-legal-guides__header-content {
	flex: 1 0 0;
	min-width: 0;
	max-width: 606px;
}

/* Nav arrows container — right column of the header */
.kl-legal-guides__nav {
	display: flex;
	gap: 1em;
	align-items: center;
	flex-shrink: 0;
}

/* ── Carousel viewport — overflow:hidden lives here, not on the track ──
   CRITICAL: This wrapper is static (never translated). The JS carousel
   transforms only [data-kl-carousel-track] (.kl-legal-guides__track). */
.kl-legal-guides__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* The track — a flex row; JS reads column-gap to calculate step distance.
   No overflow:hidden here (that would clip while translating = blank screen).
   transition is injected by the carousel JS controller. */
.kl-legal-guides__track {
	display: flex;
	column-gap: 1.5em;
}

/* ── Individual article card — 3-up at desktop ── */
.kl-legal-guides__card {
	/* 3 cards visible; (100% - 2 gaps of 24px) / 3 */
	flex: 0 0 calc((100% - 2 * 24px) / 3);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1em;
}

/* Thumbnail wrapper — fixed height, rounded corners per Figma (20px) */
.kl-legal-guides__card-img-wrap {
	position: relative;
	width: 100%;
	height: 242px;
	border-radius: 20px;
	overflow: hidden;
	flex-shrink: 0;
}

.kl-legal-guides__card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 20px;
}

/* Card text body — title, excerpt, link */
.kl-legal-guides__card-body {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	flex-grow:1;
}

.kl-home .kl-legal-guides__card-title {
	font-size: 1.125rem;
	line-height: 1.4em;
	--kl-i-lh: 1.4em;
}

.kl-home .kl-legal-guides__card-excerpt {
	/* px, not em, so the clamp height stays fixed if the font-size changes */
	line-height: 22px;
	--kl-i-lh: 22px;
	/* Figma clamps excerpt to ~2 lines (45px height) */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex-grow:1;
}

/* "Learn more →" inline link — blue, plain text link */
.kl-home .kl-legal-guides__card-link {
	gap: 0.4em;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5em;
}

/* ── Footer: centered "View more" ghost button ── */
.kl-legal-guides__footer {
	display: flex;
	justify-content: center;
	margin-top: 3.75em;
}

.kl-home .kl-legal-guides__view-more {
	color: var(--c-ink);
	--kl-a-color: var(--c-ink);
}

.kl-home .kl-legal-guides__view-more:hover {
	background: var(--c-surface-1);
}

/* Tablet (601–1024) keeps the DESKTOP layout — header row with the nav
   arrows on the right, 3-up cards, centered "View more" below. */

/* ≤600px — Figma "Homepage - Mobile" (node 33:2593): one card + peek of the
   next (292 wide, 20px gap). The nav arrows move out of the header row and
   pair with the "View more" button in a shared bottom row (arrows left,
   button right). The header becomes `display: contents` so header-content/
   nav become direct grid items of .kl-container (same technique as
   .kl-case-results__slide), letting nav + footer share one grid-area
   without touching markup. */
@media (max-width: 600px) {
	.kl-legal-guides .kl-container {
		display: grid;
		grid-template-areas:
			"content"
			"viewport"
			"bottom";
		row-gap: 2.5em;
	}

	.kl-legal-guides__header {
		display: contents;
	}

	.kl-legal-guides__header-content {
		grid-area: content;
		max-width: 100%;
	}

	.kl-legal-guides__viewport {
		grid-area: viewport;
	}

	.kl-legal-guides__nav {
		grid-area: bottom;
		justify-self: start;
		align-self: center;
	}

	.kl-legal-guides__footer {
		grid-area: bottom;
		justify-self: end;
		align-self: center;
		margin-top: 0;
	}

	.kl-legal-guides__track {
		column-gap: 1.25em;
	}

	.kl-legal-guides__card {
		flex: 0 0 292px;
		min-width: 0;
	}

	.kl-legal-guides__view-more svg {
		width: 16px;
		height: 16px;
	}
}


/* ════════ Mass tort ════════ */

/* ── Two-column layout: left content | right 2×2 grid ── */
.kl-mass-tort__inner {
	display: flex;
	gap: 3.75em;
	align-items: center;
}

/* ── Left column ── */
.kl-mass-tort__content {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2em;
	justify-content: space-between;
	align-self: stretch;
}

/* CTA button — ghost square (§6.7) */
.kl-home .kl-mass-tort__cta {
	gap: 0.75em;
	align-self: flex-start;
	transition: background 0.15s, border-color 0.15s;
}

.kl-home .kl-mass-tort__cta:hover {
	background: var(--c-white);
	border-color: var(--c-ink);
}

.kl-mass-tort__cta-label {
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.5em;
	color: var(--c-ink);
	white-space: nowrap;
}

.kl-mass-tort__cta-icon {
	justify-content: center;
	color: var(--c-ink);
}

/* ── Right column: 2×2 grid of feature cards ── */
.kl-mass-tort__grid {
	flex: 1 0 0;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, auto);
	gap: 1.5em;
}

/* Individual feature card */
.kl-home .kl-mass-tort__card {
	background: var(--c-white);
	border-radius: 20px;
	padding: 2em;
	display: flex;
	flex-direction: column;
	gap: 1.25em;
	min-width: 0;
}

/* Icon container — 32×32, brand-red fill */
.kl-mass-tort__card-icon {
	width: 32px;
	height: 32px;
}

.kl-mass-tort__card-icon svg {
	width: 32px;
	height: 32px;
	fill: var(--c-brand-red);
}

/* Card body: title + description */
.kl-mass-tort__card-body {
	display: flex;
	flex-direction: column;
	gap: 0.375em;
	min-width: 0;
}

.kl-home .kl-mass-tort__card-title {
	font-size: 1.125rem;
	line-height: normal;
	--kl-i-lh: normal;
	letter-spacing: 0;
}

/* ≤1024px — stack to single column. Order is text-group -> cards -> CTA
   (the button drops below the grid instead of staying with the text group,
   matching mobile). .content becomes display:contents so its children
   (text-group + CTA) become direct flex items of .inner, letting `order`
   move the CTA last without touching markup. */
@media (max-width: 1024px) {
	.kl-mass-tort__inner {
		flex-direction: column;
		gap: 2.5em;
		align-items: flex-start;
	}

	.kl-mass-tort__content {
		display: contents;
	}

	.kl-home .kl-mass-tort__cta {
		order: 2;
	}

	.kl-mass-tort__grid {
		width: 100%;
	}
}

/* ≤600px — Figma "Homepage - Mobile" (node 33:2625) */
@media (max-width: 600px) {
	.kl-home .kl-mass-tort__cta {
		padding: 0.875em 0.75em 0.875em 1em;
	}

	.kl-mass-tort__cta-icon svg {
		width: 16px;
		height: 16px;
	}

	/* Single-column grid on mobile, tighter gap + card padding (Figma: 20px / 16px) */
	.kl-mass-tort__grid {
		grid-template-columns: 1fr;
		gap: 1.25em;
	}

	.kl-home .kl-mass-tort__card {
		padding: 1em;
	}

	.kl-mass-tort__card-icon,
	.kl-mass-tort__card-icon svg {
		width: 24px;
		height: 24px;
	}
}


/* ════════ Testimonials ════════ */

/* Full-bleed marquee (behaviour from §5; the 20px gap and 67px edge fade —
   Figma nodes 1:11451/1:11452 — are its defaults).

   Individual testimonial card — fixed width (the marquee track is
   content-sized, so percentage bases can't resolve against it).
   White glass card: rgba(255,255,255,0.8) bg, 16px radius, subtle shadow. */
.kl-testimonials__card {
	flex: 0 0 413px;
	/* Explicit width alongside the flex-basis, like the recognition cards:
	   WebKit/iOS ignores flex-basis when computing the max-content track
	   width and would size it from the unwrapped quote text instead —
	   ballooning the track and making the marquee race/blank out. */
	width: 413px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 16px;
	box-shadow: 0 1px 5px rgba(10, 13, 18, 0.20);
	padding: 1.5em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	box-sizing: border-box;
}

/* ── 5-star row ── */
.kl-testimonials__stars {
	display: flex;
	gap: 0.25em;
	align-items: center;
	padding: 0.125em 0;
	flex-shrink: 0;
}

.kl-testimonials__star {
	display: block;
	flex-shrink: 0;
	color: var(--c-star);
	width: 24px;
	height: 24px;
}

/* ── Quote ── Long reviews are capped at 450 characters in testimonials.php
   (character counts aren't expressible in CSS). Paragraph styling in §6.5. */
.kl-testimonials__quote {
	margin: 0;
	padding: 0;
	flex: 1 0 0; /* push author to bottom */
}

/* ── Author row: avatar + name/location ── */
.kl-testimonials__author {
	display: flex;
	gap: 0.75em;
	align-items: flex-start;
	flex-shrink: 0;
	margin-top: 2em;
}

.kl-testimonials__avatar-wrap {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.kl-testimonials__avatar {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--radius-pill);
}

.kl-testimonials__author-info {
	display: flex;
	flex-direction: column;
	gap: 0.125em;
	min-width: 0;
}

.kl-home .kl-testimonials__author-name {
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.5em;
	color: var(--c-ink);
	--kl-a-color: var(--c-ink);
	white-space: nowrap;
}

/* Reviewer name linked to the Google review (ACF review_link). The <a>
   carries the same __author-name class, so every resting style is
   unchanged; the underline on hover/focus is the only affordance. */
.kl-home .kl-testimonials__author-name--link:hover,
.kl-home .kl-testimonials__author-name--link:focus-visible {
	text-decoration: underline;
}

.kl-testimonials__author-location {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.5em;
	color: var(--c-muted);
	white-space: nowrap;
}

@media (max-width: 1024px) {

	.kl-home .kl-heading{
		text-wrap-style:pretty;
	}

	.kl-testimonials__card {
		/*flex: 0 0 360px;*/
	}
}

/* ≤600px — Figma "Homepage - Mobile" (node 33:2652) */
@media (max-width: 600px) {
	/* Narrower fixed card + tighter padding on mobile (Figma: 20px) */
	.kl-testimonials__card {
		flex: 0 0 300px;
		width: 300px; /* keep in step with the flex-basis — see the base rule */
		padding: 1.25em;
	}

	/* Slimmer edge fade on small screens */
	.kl-testimonials__marquee {
		--kl-marquee-fade: 28px;
	}

	/* Avatar shrinks 48px -> 40px on mobile per Figma */
	.kl-testimonials__avatar-wrap,
	.kl-testimonials__avatar {
		width: 40px;
		height: 40px;
	}
}


/* ════════ FAQ ════════ */

/* ── Two-column accordion grid ── */
.kl-faqs__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4); /* 24px */
	align-items: start;
}

/* Each column is a flex stack of items */
.kl-faqs__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-4); /* 24px */
	min-width: 0;
}

/* ── Individual FAQ item card ── */
.kl-faqs__item {
	background: var(--c-white);
	border: 1px solid var(--c-outline-med);
	border-radius: 16px; /* Figma: border_radius_16 */
	overflow: hidden;
}

/* Staging's theme paints focus/hover chrome on every button — pin it off */
.kl-faqs__item button,
.kl-faqs__item button:focus,
.kl-faqs__item button:hover {
	outline: none !important;
	background: none !important;
}

/* ── Trigger (accordion button) ── */
.kl-home .kl-faqs__trigger {
	/* Reset button defaults */
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: none;
	border-radius: 0; /* staging's EverConvert theme rounds buttons 3px; local relies on the reset */
	cursor: pointer;
	text-align: left;
	font-family: var(--font-sora);
	color: inherit;

	/* Layout: full-width row, question + chevron */
	display: flex;
	align-items: center;
	gap: 0.625em;
	width: 100%;
	padding: 1.75em; /* Figma: --11 = 28px */
}

.kl-home .kl-faqs__trigger[aria-expanded="true"] {
	padding-bottom: 0.5em;
}

.kl-faqs__question {
	flex: 1 0 0;
	min-width: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.5; /* ~30px */
	letter-spacing: 0;
	color: var(--c-ink);
	text-wrap: auto;
}

/* ── Chevron icon — rotates 180° when the item is open ── */
.kl-faqs__chevron {
	flex-shrink: 0;
	width: 14px;
	height: auto;
	color: var(--c-ink);
	transition: transform 0.25s ease;
}

[data-kl-accordion-trigger][aria-expanded="true"] .kl-faqs__chevron {
	transform: rotate(180deg);
}

/* ── Panel (answer) — `hidden` attribute hides it; JS removes it to open ── */
.kl-faqs__panel {
	padding: 0 1.75em 1.75em;
}

.kl-faqs__panel[hidden] {
	display: none;
}

.kl-faqs__answer {
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5; /* 24px */
	color: var(--c-muted);
	margin: 0;
}

.kl-faqs__answer p:last-of-type {
	margin-bottom: 0;
}

/* ≤1024px — collapse to 1 column */
@media (max-width: 900px) {
	.kl-faqs__grid {
		grid-template-columns: 1fr;
	}
}

/* ≤600px — Figma "Homepage - Mobile" (node 33:2712) */
@media (max-width: 600px) {
	/* The two accordion roots collapse to one visual column (grid gap already
	   matches the 24px Figma "Card" gap); items within a column tighten to
	   the 20px Figma gap. */
	.kl-faqs__col {
		gap: 1.25em;
	}

	.kl-faqs__item {
		border-radius: 12px;
	}

	.kl-home .kl-faqs__trigger {
		padding: 1em;
		align-items: flex-start;
	}

	.kl-faqs__question {
		font-size: 0.875rem;
		line-height: 1.4em;
		white-space: normal; /* long questions wrap on mobile instead of colliding with the chevron */
	}

	.kl-faqs__chevron {
		width: 12px;
		height: auto;
		margin-top: 4px;
	}

	.kl-faqs__panel {
		padding: 0 1em 1em;
	}

	.kl-faqs__answer {
		font-size: 0.8125rem;
		line-height: 1.5em;
	}
}


/* ════════ CTA ════════
   Card: navy band with border-radius 20px, centered column layout, overflow
   hidden so the decorative grid SVGs clip cleanly. The trust strip hangs at
   the bottom edge, full-bleed, so the card itself carries no padding — the
   content wrapper does (Figma 43:1168: 64px top / 32px above the strip). */
.kl-cta__card {
	position: relative;
	background: var(--c-navy);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* CTA-local palette from Figma 43:1168 (deliberately not global tokens) */
	--kl-cta-desc: #c7d4e4;
	--kl-cta-or: #8fa3bc;
	--kl-cta-trust-text: #aabbd0;
	--kl-cta-trust-icon: #7fd1a8;
	--kl-cta-line: rgba(255, 255, 255, 0.22);
}

/* Decorative grid panels — absolute, one each side */
.kl-cta__grid {
	position: absolute;
	top: 50%;
	width: 414px;
	height: 361px;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 1;
}

.kl-cta__grid--left {
	left: calc(50% - 914px); /* ~500px left of center */
}

.kl-cta__grid--right {
	left: calc(50% + 381px); /* ~381px right of center */
}

.kl-cta__grid svg {
	width: 100%;
	height: 100%;
}

/* Inner centered column — Figma content frame: pad 64px top / 32px bottom,
   40px gap; the description column is 588px wide */
.kl-cta__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5em;
	align-self: center;
	width: min(100%, 40em);
	padding: 4em 1.25em 2em;
	text-align: center;
}

/* Text group: headline + description (Figma: 20px gap) */
.kl-cta__text-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px; /* 20px at the heading's 44px font-size */
}

/* Headline — Figtree 44px extrabold, 115% */
.kl-home .kl-cta__heading {
	font-size: 2.75rem;
	font-weight: 800;
	--kl-i-fw: 800;
	line-height: 1.15em;
	--kl-i-lh: 1.15em;
	color: var(--c-white);
}

/* Description — body 16px / 140%, light steel blue, 588px column */
.kl-home .kl-cta__subhead {
	font-size: 1rem;
	font-weight: 400;
	--kl-i-fw: 400;
	line-height: 1.4em;
	--kl-i-lh: 1.4em;
	color: var(--kl-cta-desc);
	max-width: 588px;
	margin: 0;
}

/* Button row: red pill · "or" · phone pill (Figma: 22px gaps) */
.kl-cta__buttons {
	display: flex;
	gap: 1.375em;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

/* Shared CTA button sizing — composes on .kl-btn (+ §6.7) */
.kl-home .kl-cta__btn {
	gap: 14px;
	padding: 0 10px 0 24px;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: normal;
}

/* Primary: red pill, trailing arrow circle */
.kl-home .kl-cta__btn--primary {
	background: var(--c-brand-red);
	color: var(--c-white);
	--kl-a-color: var(--c-white);
	border-color: var(--c-brand-red);
}

/* "or" separator between the pills */
.kl-cta__or {
	font-size: 1rem;
	color: var(--kl-cta-or);
}

/* Phone: transparent outlined pill, leading icon circle, frosted */
.kl-home .kl-cta__btn--phone {
	background: transparent;
	color: var(--c-white);
	--kl-a-color: var(--c-white);
	border-color: var(--kl-cta-line);
	gap: 12px;
	padding: 0 24px 0 10px;
	letter-spacing: -0.5px;
	backdrop-filter: blur(60px);
	-webkit-backdrop-filter: blur(60px);
}

/* Icon circles — 40px (24px glyph + 8px padding); sizing in §6.7 */
.kl-cta__btn-icon--light {
	background: var(--c-bg);
	color: var(--c-brand-red);
}

.kl-cta__btn-icon--frost {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid var(--kl-cta-line);
	color: var(--c-white);
}

.kl-cta__btn-icon svg {
	width: 24px;
	height: 24px;
}

/* Trust strip — full-bleed darkened band pinned to the card bottom */
.kl-cta__trust {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75em 2.5em;
	padding: 1.125em 1em;
	background: rgba(0, 0, 0, 0.4);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.kl-cta__trust-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	color: var(--kl-cta-trust-text);
}

.kl-cta__trust-icon {
	color: var(--kl-cta-trust-icon);
}

.kl-cta__trust-icon svg {
	width: 16px;
	height: 16px;
}

/* ≤600px — Figma "Homepage - Mobile" (node 33:2754) */
@media (max-width: 600px) {
	/* Content wrapper keeps generous top padding; horizontal shrinks to the
	   16px rhythm. Border-radius stays the base 20px. */
	.kl-cta__content {
		padding: 3em 1em 1.5em;
		gap: 2em;
	}

	.kl-cta__text-group {
		gap: 10px; /* ~16px at the 28px mobile heading size */
	}

	.kl-home .kl-cta__heading {
		font-size: 1.75rem;
		line-height: 1.2em;
		--kl-i-lh: 1.2em;
	}

	.kl-home .kl-cta__subhead {
		font-size: var(--fs-sm);
		line-height: 1.5em;
		--kl-i-lh: 1.5em;
	}

	/* Stack the pills — the phone number + "Free consultation" don't fit
	   side-by-side at 375px; "or" sits between them in the column. */
	.kl-cta__buttons {
		flex-direction: column;
		gap: 0.75em;
	}

	.kl-home .kl-cta__btn {
		font-size: 1rem;
		gap: 10px;
	}

	/* Phone glyph 24 -> 20 (arrow stays 12px via the §6.7 compound selector) */
	.kl-cta__btn-icon svg {
		width: 20px;
		height: 20px;
	}

	.kl-cta__trust {
		gap: 0.625em 1.25em;
		padding: 1em;
	}

	.kl-cta__grid {
		display: none; /* hide decorative grids on narrow viewports */
	}
}


/* ═══════════════ 8. Mobile carousel gutters (must stay last) ═══════════════
 *
 * Every carousel gets 1em (--gutter) of breathing room on BOTH sides while
 * still letting cards scroll off-screen:
 *
 *   viewport  → bleeds to the screen edges (escapes .kl-container's padding)
 *   track     → carries the 1em padding
 *
 * so the resting card sits 1em from the edge, its box-shadow has room to
 * render in the bleed area, and mid-scroll cards are cut by the screen
 * edge rather than by a hard boundary 1em in. Clipping the viewport at the
 * gutter instead (the obvious approach) shaves the shadow off the first
 * card and makes the peek look sliced.
 *
 * Escaping via negative margin — not width:100vw — because 100vw includes
 * the scrollbar width in desktop browsers and overflows the layout box.
 */
@media (max-width: 600px) {
	.kl-practice-areas__track-wrap,
	.kl-case-results__viewport,
	.kl-attorneys__viewport,
	.kl-legal-guides__viewport {
		/* Explicit width, never `auto`: these are flex/grid items, so `auto`
		   makes them shrink-to-fit the max-content track (thousands of px).
		   flex: 0 0 pins the basis so a flex parent can't shrink it back. */
		width: calc(100% + var(--gutter) * 2);
		max-width: none;
		flex: 0 0 calc(100% + var(--gutter) * 2);
		margin-inline: calc(var(--gutter) * -1);
	}

	.kl-practice-areas__track,
	.kl-case-results__track,
	.kl-attorneys__carousel,
	.kl-legal-guides__track {
		padding-inline: var(--gutter);
	}
}