/* Inline-SVG icons replace the icon font throughout (see icon_library() in
   class-base-widget.php). They size from the surrounding font-size, so the
   rules that previously sized an <i> still apply. */
.sb-lf-glyph {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.125em;
	flex: none;
}

/* Site Builder — Law Firm Homepage widget styles
   All colors/spacing are driven by CSS custom properties set inline
   from Elementor's Global Theme controls; every rule below is a
   sensible fallback that individual Style controls can override. */

.sb-lf-homepage {
	--sb-primary: #10233c;
	--sb-accent: #b6912c;
	--sb-dark: #1b1f27;
	--sb-light: #f6f5f1;
	--sb-muted: #6b7280;
	--sb-white: #ffffff;
	--sb-container: 1240px;
	--sb-tl-line: #dcd6c8;
	--sb-tl-dot: #b6912c;

	position: relative;
	font-family: var(--sb-font-sans);
	color: var(--sb-dark);
	background: var(--sb-white);
	overflow-x: clip;
}

.sb-lf-homepage *,
.sb-lf-homepage *::before,
.sb-lf-homepage *::after {
	box-sizing: border-box;
}

.sb-lf-homepage img {
	max-width: 100%;
	display: block;
}

.sb-lf-spacer {
	width: 100%;
}

/* Break the widget out of the page/column container so every band
   spans the full browser width — toggled by the "Stretch Full Width"
   global control. */
.sb-lf-homepage.sb-lf-stretch {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.sb-lf-homepage .sb-lf-heading {
	font-family: var(--sb-font-serif);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 16px;
	color: var(--sb-primary);
	font-size: clamp(26px, 3.2vw, 40px);
}

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

.sb-lf-subheading {
	color: var(--sb-muted);
	font-size: 17px;
	line-height: 1.6;
	max-width: 640px;
	margin: 0 auto;
}

.sb-lf-section-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 48px;
	padding: 0 20px;
}

.sb-lf-section-cta {
	text-align: center;
	margin-top: 40px;
}

/* -------------------------------------------------- */
/* ANIMATION PRIMITIVES                                */
/* -------------------------------------------------- */
@keyframes sbFadeInUp {
	from { opacity: 0; transform: translateY(34px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes sbFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes sbZoomIn {
	from { opacity: 0; transform: scale(0.92); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes sbKenBurns {
	from { transform: scale(1); }
	to { transform: scale(1.14); }
}

@keyframes sbPulseRing {
	0% { box-shadow: 0 0 0 0 rgba(182, 145, 44, 0.45); }
	100% { box-shadow: 0 0 0 12px rgba(182, 145, 44, 0); }
}

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

@keyframes sbShine {
	0% { transform: translateX(-130%) skewX(-18deg); }
	100% { transform: translateX(230%) skewX(-18deg); }
}

/* Scroll-reveal utility — FAILS OPEN BY DEFAULT.
   `.sb-lf-reveal` alone is always fully visible; law-firm-homepage.js only
   adds `.sb-lf-pending` to items that are *currently off-screen*, then
   flips them to `.sb-lf-visible` via IntersectionObserver as they scroll
   into view. If JS never runs (script error, no-JS, or inside the
   Elementor editor iframe) content simply stays visible instead of being
   stuck at opacity:0 — nothing can render permanently blank.
   `--sb-delay` (set inline per item) staggers groups. */
.sb-lf-reveal {
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--sb-delay, 0s);
}

.sb-lf-reveal.sb-lf-pending {
	opacity: 0;
	transform: translateY(36px);
	will-change: opacity, transform;
}

.sb-lf-reveal.sb-lf-pending.sb-lf-reveal-zoom {
	transform: scale(0.94);
}

.sb-lf-reveal.sb-lf-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.sb-lf-homepage * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.sb-lf-reveal.sb-lf-pending {
		opacity: 1;
		transform: none;
	}
}

/* Buttons */
.sb-lf-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 32px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	border-radius: 2px;
	border: 2px solid transparent;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
}

.sb-lf-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
	transform: translateX(-130%) skewX(-18deg);
	pointer-events: none;
	z-index: 1;
}

.sb-lf-btn:hover::before {
	animation: sbShine 0.9s ease forwards;
}

.sb-lf-btn > * {
	position: relative;
	z-index: 2;
}

.sb-lf-btn-primary {
	background: var(--sb-accent);
	color: var(--sb-white);
	border-color: var(--sb-accent);
}

.sb-lf-btn-primary:hover {
	background: transparent;
	color: var(--sb-accent);
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(16, 35, 60, 0.2);
}

.sb-lf-btn-outline {
	background: transparent;
	color: var(--sb-white);
	border-color: rgba(255, 255, 255, 0.5);
}

.sb-lf-btn-outline:hover {
	background: var(--sb-white);
	color: var(--sb-primary);
	border-color: var(--sb-white);
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

/* -------------------------------------------------- */
/* 1. HERO                                             */
/* -------------------------------------------------- */
.sb-lf-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	overflow: hidden;
	background: var(--sb-primary);
}

@supports (min-height: 100svh) {
	.sb-lf-hero {
		min-height: 100svh;
	}
}

.sb-lf-hero-track {
	position: relative;
	width: 100%;
}

/* Both slides have to stay painted for the whole crossfade. `visibility` is
   not interpolatable, so it is transitioned with a zero duration and a delay
   equal to the fade: the outgoing slide keeps its pixels until the incoming
   one is fully opaque, instead of blinking out and leaving the flat navy
   background showing through mid-swap. */
.sb-lf-hero-slide {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 1.6s;
	display: flex;
	align-items: center;
}

.sb-lf-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

/* The resting transform is the Ken Burns END frame on purpose. Dropping
   .is-active removes the animation instantly, and without this the photo
   would snap back from scale(1.14) to scale(1) while still fading out —
   a visible lurch on every slide change. */
.sb-lf-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.14);
}

.sb-lf-hero-slide.is-active .sb-lf-hero-bg {
	animation: sbKenBurns 11s ease-out both;
}

/* Every slide renders two background layers (see render_hero()) and this
   swaps which one is shown. They carry the same photo unless the slide has
   a Mobile Background Image set, but they are always separate elements so
   each can take its own inline focal point — a wide photo is cropped off
   the sides on a phone and off the top on a desktop, so the point that has
   to stay in frame is rarely the same one. */
.sb-lf-hero-bg-mobile {
	display: none;
}

@media (max-width: 768px) {
	.sb-lf-hero-bg-has-mobile-alt {
		display: none;
	}

	.sb-lf-hero-bg-mobile {
		display: block;
	}
}

.sb-lf-hero-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(16, 35, 60, 0.72);
	z-index: 1;
}

/* The photograph crossfade runs long on purpose, but two headlines stacked
   on top of each other for 1.6s reads as a smear, so the copy dissolves on
   its own much faster and the incoming lines wait for the outgoing ones to
   clear. The per-line stagger below then plays on top of this. */
.sb-lf-hero-slide-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	max-width: var(--sb-container, 1240px);
	margin: 0 auto;
	padding: 60px 56px 110px;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.sb-lf-hero-slide.is-active .sb-lf-hero-slide-inner {
	opacity: 1;
	transition: opacity 0.5s ease 0.45s;
}

.sb-lf-hero-align-left .sb-lf-hero-slide-inner { text-align: left; }
.sb-lf-hero-align-center .sb-lf-hero-slide-inner { text-align: center; }
.sb-lf-hero-align-right .sb-lf-hero-slide-inner { text-align: right; }

.sb-lf-hero-align-center .sb-lf-hero-text-wrap {
	flex-direction: column;
}

.sb-lf-hero-align-center .sb-lf-hero-divider {
	width: 60px;
	height: 3px !important;
	margin: 0 auto 22px;
}

.sb-lf-hero-text-wrap {
	display: flex;
	align-items: center;
	gap: 28px;
}

.sb-lf-hero-align-right .sb-lf-hero-text-wrap {
	flex-direction: row;
}

.sb-lf-hero-divider {
	flex: none;
	width: 3px;
	height: 150px;
	background: var(--sb-accent);
}

.sb-lf-hero-slide.is-active .sb-lf-hero-eyebrow {
	animation: sbFadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.sb-lf-hero-slide.is-active .sb-lf-hero-title {
	animation: sbFadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
}

.sb-lf-hero-slide.is-active .sb-lf-hero-hook {
	animation: sbFadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.sb-lf-hero-slide.is-active .sb-lf-hero-desc {
	animation: sbFadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.64s both;
}

.sb-lf-hero-slide.is-active .sb-lf-hero-actions {
	animation: sbFadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.82s both;
}

.sb-lf-hero-eyebrow {
	font-family: var(--sb-font-serif);
	color: #d9c98f;
	text-transform: uppercase;
	font-weight: 700;
	font-size: clamp(24px, 3.4vw, 42px);
	line-height: 1.15;
	letter-spacing: 0.01em;
	margin-bottom: 6px;
}

/* The reference hero headline. Its values now live in --sb-hero-title-* so
   the other pages' heroes can share them rather than each re-inventing a
   size and weight (see law-firm-tokens.css). */
.sb-lf-hero-title {
	font-family: var(--sb-font-serif);
	color: var(--sb-white);
	text-transform: uppercase;
	font-size: var(--sb-hero-title-size);
	font-weight: var(--sb-hero-title-weight);
	line-height: var(--sb-hero-title-leading);
	letter-spacing: var(--sb-hero-title-tracking);
	max-width: 620px;
	margin: 0 0 22px;
}

.sb-lf-hero-align-right .sb-lf-hero-title,
.sb-lf-hero-align-right .sb-lf-hero-desc {
	margin-left: auto;
}

.sb-lf-hero-align-center .sb-lf-hero-title,
.sb-lf-hero-align-center .sb-lf-hero-desc {
	margin-left: auto;
	margin-right: auto;
}

/* Emphasis line under the title (see render_hero_hook) — sentence case on
   purpose, so it reads as a spoken question next to the uppercase title. */
.sb-lf-hero-hook {
	font-family: var(--sb-font-serif);
	color: #ffffff;
	font-size: clamp(19px, 2.1vw, 28px);
	line-height: 1.5;
	font-weight: 400;
	max-width: 620px;
	margin: -8px 0 22px;
}

.sb-lf-hero-align-right .sb-lf-hero-hook {
	margin-left: auto;
}

.sb-lf-hero-align-center .sb-lf-hero-hook {
	margin-left: auto;
	margin-right: auto;
}

.sb-lf-hero-highlight {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.sb-lf-hero-highlight-word {
	color: #f0dfa4;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Hand-painted gold mark: a soft blurred smudge sits behind a tapered main
   stroke, with a thin "dry brush" flick below for texture. currentColor is
   driven by the Brush-Stroke Color control on the .sb-lf-hero-brush element,
   so all three paths recolour together. */
.sb-lf-hero-brush {
	position: absolute;
	left: -9%;
	bottom: -0.22em;
	width: 118%;
	height: 0.56em;
	color: #c9a227;
	overflow: visible;
	pointer-events: none;
	transform: rotate(-1.1deg);
}

.sb-lf-hero-brush-smudge {
	opacity: 0.32;
	filter: blur(2.5px);
	transform: translateY(0.6%) scaleY(1.25);
	transform-origin: center;
}

.sb-lf-hero-brush-main {
	opacity: 0.95;
}

.sb-lf-hero-brush-dry {
	opacity: 0.38;
}

/* Painted on left-to-right once the slide is showing. Fails open: without the
   animation (reduced motion, or a slide that never gets .is-active) the mark
   is simply fully drawn. */
.sb-lf-hero-slide.is-active .sb-lf-hero-brush {
	animation: sbBrushIn 0.75s cubic-bezier(0.33, 0.9, 0.5, 1) 1.05s both;
}

@keyframes sbBrushIn {
	from {
		clip-path: inset(0 100% 0 0);
		opacity: 0;
	}
	to {
		clip-path: inset(0 -20% 0 0);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sb-lf-hero-slide.is-active .sb-lf-hero-brush {
		animation: none;
	}
}

.sb-lf-hero-desc {
	color: #e7e9ee;
	font-size: 17px;
	line-height: 1.7;
	max-width: 560px;
	margin: 0 0 30px;
}

.sb-lf-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sb-lf-hero-align-right .sb-lf-hero-actions,
.sb-lf-hero-align-center .sb-lf-hero-actions {
	justify-content: flex-end;
}

.sb-lf-hero-align-center .sb-lf-hero-actions {
	justify-content: center;
}

.sb-lf-hero .sb-lf-btn-primary {
	animation: sbGlowPulse 2.6s ease-in-out 1.6s infinite;
}

.sb-lf-hero .sb-lf-btn-primary:hover {
	animation: none;
}

@keyframes sbGlowPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(182, 145, 44, 0.55); }
	50% { box-shadow: 0 0 0 10px rgba(182, 145, 44, 0); }
}

/* Corner badge */
.sb-lf-hero-corner {
	position: absolute;
	z-index: 4;
	top: 32px;
	left: 32px;
	width: 44px;
	height: 44px;
	border: 2px solid var(--sb-accent);
	color: var(--sb-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	text-decoration: none;
	transition: background 0.3s ease, transform 0.3s ease;
	animation: sbFadeIn 0.8s ease 0.2s both;
}

.sb-lf-hero-corner:hover {
	background: var(--sb-accent);
	transform: scale(1.06);
}

/* Bottom bar: explore cue (left) + slide navigation (right) */
.sb-lf-hero-bottom-bar {
	position: absolute;
	z-index: 4;
	left: 0;
	right: 0;
	bottom: 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--sb-container, 1240px);
	margin: 0 auto;
	padding: 0 56px;
}

/* The trust bar is pulled up 70px over the hero and is opaque, which would
   swallow the scroll cue and the slide counter/arrows whole. Lift them clear
   of it — but only when a trust bar actually follows the hero. */
.sb-lf-hero:has(+ .sb-lf-trustbar) .sb-lf-hero-bottom-bar {
	bottom: 100px;
}

.sb-lf-hero-explore {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--sb-white);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	animation: sbFadeIn 1s ease 1.2s both;
	transition: gap 0.3s ease, opacity 0.3s ease;
}

.sb-lf-hero-explore:hover {
	gap: 16px;
	opacity: 0.85;
}

.sb-lf-hero-explore-icon {
	color: var(--sb-accent);
	font-size: 15px;
	display: inline-flex;
	animation: sbScrollCue 1.8s ease-in-out infinite;
}

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

.sb-lf-hero-dots {
	display: flex;
	gap: 10px;
}

.sb-lf-hero-dots button {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.4);
	padding: 0;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.sb-lf-hero-dots button:hover {
	transform: scale(1.3);
	background: rgba(255, 255, 255, 0.7);
}

.sb-lf-hero-dots button.is-active {
	background: var(--sb-accent);
	transform: scale(1.25);
	animation: sbPulseRing 1.8s ease-out infinite;
}

.sb-lf-hero-counter {
	display: flex;
	align-items: center;
	gap: 18px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	letter-spacing: 0.04em;
}

.sb-lf-hero-counter-current {
	color: var(--sb-accent);
	font-weight: 700;
}

.sb-lf-hero-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: none;
	padding: 0;
	color: var(--sb-white);
	cursor: pointer;
	font-size: 13px;
	transition: color 0.3s ease;
}

.sb-lf-hero-arrow:hover {
	color: var(--sb-accent);
}

.sb-lf-hero-arrow-line {
	width: 32px;
	height: 1px;
	background: rgba(255, 255, 255, 0.4);
	transition: background 0.3s ease, width 0.3s ease;
}

.sb-lf-hero-arrow:hover .sb-lf-hero-arrow-line {
	background: var(--sb-accent);
	width: 40px;
}

/* -------------------------------------------------- */
/* 2. TRUST BAR                                        */
/* -------------------------------------------------- */
.sb-lf-trustbar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	background: var(--sb-white);
	box-shadow: 0 10px 40px rgba(16, 35, 60, 0.08);
	max-width: calc(var(--sb-container, 1240px) - 80px);
	margin: -70px auto 0;
	position: relative;
	/* Above the hero's own bottom-bar (slide counter/arrows, z-index: 4) so
	   this opaque card fully covers it where the negative margin makes the
	   two overlap, instead of the counter number showing through on top. */
	z-index: 5;
	border-radius: 4px;
	/* Visible, not hidden: a hovered card scales past the bar's edges and
	   would otherwise be sliced off. The rounded outer corners live on the
	   first/last cards instead (below), so the resting shape is unchanged. */
	overflow: visible;
}

.sb-lf-trustbar.sb-lf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sb-lf-trustbar.sb-lf-cols-4 { grid-template-columns: repeat(4, 1fr); }

.sb-lf-trustbar-item {
	--sb-tb-bg: #f4f4f2;
	--sb-tb-hover-bg: var(--sb-light);
	--sb-tb-hover-fg: var(--sb-primary);
	--sb-tb-hover-icon: var(--sb-accent);

	position: relative;
	padding: 40px 28px;
	text-align: center;
	background: var(--sb-tb-bg);
	border-right: 1px solid rgba(16, 35, 60, 0.08);
	transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.sb-lf-trustbar-item:first-child {
	border-radius: 4px 0 0 4px;
}

.sb-lf-trustbar-item:last-child {
	border-right: none;
	border-radius: 0 4px 4px 0;
}

.sb-lf-trustbar-item:hover {
	background-color: var(--sb-tb-hover-bg);
	transform: translateY(-4px) scale(1.035);
	box-shadow: 0 18px 44px rgba(16, 35, 60, 0.18);
	border-radius: 4px;
	border-right-color: transparent;
	z-index: 2;
}

.sb-lf-trustbar-item:hover .sb-lf-trustbar-title,
.sb-lf-trustbar-item:hover .sb-lf-trustbar-text {
	color: var(--sb-tb-hover-fg);
}

.sb-lf-trustbar-icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--sb-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease;
}

.sb-lf-line-icon {
	width: 27px;
	height: 27px;
	display: block;
}

.sb-lf-trustbar-item:hover .sb-lf-trustbar-icon {
	transform: scale(1.12);
	background: rgba(255, 255, 255, 0.14);
	color: var(--sb-tb-hover-icon);
}

/* The pearl card stays light on hover, so a translucent-white disc would
   vanish into it — keep a solid one there. */
.sb-lf-trustbar-item:nth-child(2):hover .sb-lf-trustbar-icon {
	background: rgba(255, 255, 255, 0.95);
}

.sb-lf-trustbar-title {
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sb-primary);
	margin-bottom: 8px;
	transition: color 0.3s ease;
}

.sb-lf-trustbar-text {
	color: var(--sb-muted);
	font-size: 14.5px;
	line-height: 1.6;
	transition: color 0.3s ease;
}

/* -------------------------------------------------- */
/* 3. ABOUT                                            */
/* -------------------------------------------------- */
.sb-lf-about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	/* stretch, not center: the photograph column is a carousel sized as a
	   percentage of its own height, so it needs to be given the height of the
	   writing beside it to fill. A single centred image is what left the blank
	   band above and below. */
	align-items: stretch;
	max-width: calc(var(--sb-container, 1240px) + 60px);
	margin: 0 auto;
	padding: 110px 40px 90px;
}

/* A lone image has no height of its own to fill, so it goes back to being
   vertically centred in the column. */
.sb-lf-about-image:not(.is-stacked) {
	align-self: center;
}

.sb-lf-about.sb-lf-pos-right {
	direction: rtl;
}

.sb-lf-about.sb-lf-pos-right > * {
	direction: ltr;
}

.sb-lf-about-image {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
}

.sb-lf-about-image img {
	width: 100%;
	border-radius: 6px;
	box-shadow: 0 30px 60px rgba(16, 35, 60, 0.18);
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-lf-about-image:not(.is-stacked):hover img {
	transform: scale(1.06);
}

/* --- Rotating photograph stack -------------------------------------------
   Layout is the shared .sb-lf-photostack-* component in law-firm-tokens.css;
   only the column it sits in is this band's business. The frames are set
   landscape here because these are room photographs rather than portraits. */

.sb-lf-about-image.is-stacked {
	--sb-photostack-ratio: 3 / 2;
	--sb-photostack-radius: 6px;
	overflow: visible;
	min-height: 560px;
}

.sb-lf-about-image.is-stacked .sb-lf-about-badge {
	bottom: 26%;
	right: -18px;
}

.sb-lf-about-badge {
	position: absolute;
	bottom: -24px;
	right: -24px;
	background: var(--sb-primary);
	color: var(--sb-white);
	padding: 22px 26px;
	border-radius: 6px;
	text-align: center;
	box-shadow: 0 16px 32px rgba(16, 35, 60, 0.28);
	min-width: 150px;
	animation: sbFloat 4.5s ease-in-out infinite;
	z-index: 2;
}

.sb-lf-about-badge-number {
	display: block;
	font-family: var(--sb-font-serif);
	font-size: 30px;
	font-weight: 700;
	color: var(--sb-accent);
}

.sb-lf-about-badge-text {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	margin-top: 6px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sb-lf-about-content {
	color: var(--sb-muted);
	font-size: 16px;
	line-height: 1.75;
	margin-bottom: 24px;
}

/* Pull statement between the two prose blocks. Rules above and below rather
   than quote marks or a quote glyph — the weight and colour carry it. */
.sb-lf-about-statement {
	margin: 26px 0;
	padding: 18px 0;
	border-top: 1px solid rgba(182, 145, 44, 0.35);
	border-bottom: 1px solid rgba(182, 145, 44, 0.35);
	color: var(--sb-accent);
	font-size: 18.5px;
	font-weight: 700;
	line-height: 1.5;
	text-wrap: balance;
}

.sb-lf-about-statement + .sb-lf-about-content {
	margin-top: 0;
}

.sb-lf-about-highlights {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 24px;
}

.sb-lf-about-highlights li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sb-dark);
	transition: transform 0.25s ease;
}

.sb-lf-about-highlights li:hover {
	transform: translateX(4px);
}

.sb-lf-about-highlight-copy strong {
	display: block;
	font-weight: 700;
}

.sb-lf-about-highlight-sub {
	color: var(--sb-muted);
}

.sb-lf-about-check {
	--sb-check-bg: #8a211c;
	--sb-check-rim: var(--sb-accent);

	flex: none;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--sb-check-bg);
	border: 1.5px solid var(--sb-check-rim);
	color: var(--sb-check-rim);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s ease;
}

.sb-lf-about-check svg {
	width: 14px;
	height: 14px;
}

.sb-lf-about-highlights li:hover .sb-lf-about-check {
	transform: scale(1.08);
}

/* --- "Team Photo Bleed" about layout --- */
.sb-lf-about.sb-lf-about-team-layout {
	display: block;
	position: relative;
	overflow: hidden;
	max-width: none;
	padding: 0;
}

.sb-lf-about-watermark {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center top;
	filter: grayscale(1);
	opacity: 0.12;
	pointer-events: none;
	z-index: 0;
}

.sb-lf-about-top {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 50px;
	max-width: calc(var(--sb-container, 1240px) + 60px);
	margin: 0 auto;
	padding: 110px 40px 60px;
}

.sb-lf-about-heading-col {
	flex: 1 1 340px;
	max-width: 420px;
}

.sb-lf-about-team-layout .sb-lf-about-eyebrow {
	font-family: var(--sb-font-serif);
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
}

.sb-lf-about-heading-col .sb-lf-heading {
	margin-bottom: 28px;
}

.sb-lf-about-right-col {
	flex: 1 1 480px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 26px;
	max-width: 660px;
}

.sb-lf-about-content-cols-2 {
	column-count: 2;
	column-gap: 40px;
	text-align: left;
	width: 100%;
}

.sb-lf-about-content-cols-2 p,
.sb-lf-about-content p {
	margin: 0 0 1em;
}

.sb-lf-about-badge-team {
	position: static;
	display: flex;
	align-items: center;
	gap: 20px;
	background: #17181c;
	color: var(--sb-white);
	padding: 20px 28px;
	border-radius: 4px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
	min-width: unset;
	animation: none;
}

.sb-lf-about-badge-icon {
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 2px solid var(--sb-accent);
	color: var(--sb-accent);
	background: rgba(182, 145, 44, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.sb-lf-about-badge-title {
	font-family: var(--sb-font-serif);
	font-size: 24px;
	font-weight: 700;
	color: var(--sb-accent);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
}

.sb-lf-about-badge-subtitle {
	font-size: 14px;
	color: #e7e9ee;
	margin-top: 2px;
}

.sb-lf-about-team {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
}

.sb-lf-about-team-image {
	max-width: 88%;
	width: auto;
	height: auto;
	margin: 0 auto;
	filter: drop-shadow(0 30px 40px rgba(16, 35, 60, 0.28));
}

@media (max-width: 900px) {
	.sb-lf-about-top {
		flex-direction: column;
		padding: 80px 24px 40px;
	}

	.sb-lf-about-heading-col,
	.sb-lf-about-right-col {
		max-width: 100%;
		align-items: flex-start;
		text-align: left;
	}

	.sb-lf-about-content-cols-2 {
		column-count: 1;
		text-align: left;
	}

	.sb-lf-about-badge-team {
		align-self: flex-start;
	}

	.sb-lf-about-team-image {
		max-width: 100%;
	}
}

/* -------------------------------------------------- */
/* 4. STATS                                            */
/* -------------------------------------------------- */
.sb-lf-statement {
	position: relative;
	overflow: hidden;
	padding: 96px 40px;
	text-align: center;
	background-color: #0f1e33;
	background-image: var(--sb-weave);
}

/* Soft off-navy discs bleeding past the edges. Purely atmospheric — they sit
   behind the copy and never scroll into the reading area. */
.sb-lf-statement-shapes {
	position: absolute;
	inset: 0;
	opacity: 0.5;
	pointer-events: none;
}

.sb-lf-statement-shapes span {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.028);
}

.sb-lf-statement-shapes span:nth-child(1) {
	width: 340px;
	height: 340px;
	top: -130px;
	left: -110px;
}

.sb-lf-statement-shapes span:nth-child(2) {
	width: 220px;
	height: 220px;
	bottom: -90px;
	left: 22%;
}

.sb-lf-statement-shapes span:nth-child(3) {
	width: 460px;
	height: 460px;
	top: -40px;
	right: -180px;
}

.sb-lf-statement-shapes span:nth-child(4) {
	width: 180px;
	height: 180px;
	bottom: -60px;
	right: 26%;
}

.sb-lf-statement-inner {
	position: relative;
	z-index: 2;
	max-width: calc(var(--sb-container, 1240px) - 60px);
	margin: 0 auto;
}

/* Scoped with .sb-lf-homepage to outrank the shared `.sb-lf-heading` rule,
   which would otherwise force the dark body colour and its own size. The size
   is capped so all three phrases stay on one line at desktop widths. */
.sb-lf-homepage .sb-lf-statement-heading {
	color: var(--sb-white);
	font-size: clamp(19px, 2.5vw, 34px);
	line-height: 1.3;
	text-transform: uppercase;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 0.36em;
	row-gap: 0.1em;
}

/* Each phrase stays whole, so a narrow screen breaks between phrases rather
   than mid-phrase. */
.sb-lf-statement-phrase {
	white-space: nowrap;
}

.sb-lf-statement-lead {
	color: #d9c98f;
}

.sb-lf-statement-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--sb-accent);
	margin: 22px 0 26px;
}

.sb-lf-statement-divider-line {
	width: 64px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.sb-lf-statement-diamond {
	width: 7px;
	height: 7px;
	background: currentColor;
	transform: rotate(45deg);
}

.sb-lf-statement-text {
	color: #c7cedb;
	font-size: 16px;
	line-height: 1.75;
	max-width: 620px;
	margin: 0 auto;
}

/* --- Entrance sequence ---------------------------------------------------
   Fails open: with no JS the block above is the finished state. initStatement()
   adds `sb-lf-st-armed` to hide the parts, then `sb-lf-st-play` once, the first
   time the band scrolls into view. */
.sb-lf-statement.sb-lf-st-armed .sb-lf-statement-phrase,
.sb-lf-statement.sb-lf-st-armed .sb-lf-statement-divider,
.sb-lf-statement.sb-lf-st-armed .sb-lf-statement-text {
	opacity: 0;
}

.sb-lf-statement.sb-lf-st-play .sb-lf-statement-phrase {
	animation: sbStatementSlide var(--sb-st-duration, 850ms) cubic-bezier(0.22, 1, 0.36, 1) var(--sb-st-delay, 0ms) both;
}

.sb-lf-statement.sb-lf-st-play .sb-lf-statement-divider {
	animation: sbStatementFade var(--sb-st-fade, 1200ms) ease var(--sb-st-text-delay, 2s) both;
}

.sb-lf-statement.sb-lf-st-play .sb-lf-statement-text {
	animation: sbStatementGrow var(--sb-st-fade, 1200ms) cubic-bezier(0.22, 1, 0.36, 1) var(--sb-st-text-delay, 2s) both;
}

@keyframes sbStatementSlide {
	from {
		opacity: 0;
		transform: translateX(-70px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes sbStatementFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes sbStatementGrow {
	from {
		opacity: 0;
		transform: scale(0.88);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sb-lf-statement.sb-lf-st-armed .sb-lf-statement-phrase,
	.sb-lf-statement.sb-lf-st-armed .sb-lf-statement-divider,
	.sb-lf-statement.sb-lf-st-armed .sb-lf-statement-text {
		opacity: 1;
	}
}

/* -------------------------------------------------- */
/* 5. REVIEWS & PROFESSIONAL RECOMMENDATIONS           */
/* -------------------------------------------------- */
.sb-lf-reviews {
	position: relative;
	overflow: hidden;
	padding: 96px 0 104px;
	background-color: #0f1e33;
}

/* Blurred right to the edge: the box is inset past the blur radius so the
   filter never smears a soft grey border into the section's corners. */
.sb-lf-reviews-bg {
	position: absolute;
	inset: -60px;
	background-size: cover;
	background-position: center 28%;
	filter: blur(20px);
	opacity: 0.55;
}

.sb-lf-reviews-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(9, 18, 32, 0.72);
	background-image: var(--sb-weave);
}

.sb-lf-reviews-inner {
	position: relative;
	z-index: 2;
}

.sb-lf-reviews .sb-lf-section-header {
	padding: 0 40px;
}

.sb-lf-reviews .sb-lf-heading {
	color: var(--sb-white);
}

.sb-lf-reviews-sub {
	color: #c7cedb;
}

.sb-lf-reviews-carousel {
	/* Lines the first card up with the page container. */
	--sb-rv-gutter: max(40px, calc((100vw - var(--sb-container, 1240px)) / 2 + 40px));

	margin-top: 46px;
}

.sb-lf-reviews-carousel + .sb-lf-reviews-carousel {
	margin-top: 54px;
}

/* Full-bleed like the track beneath it, rather than centred inside the page
   container. The label used to line up with the first card at rest, but the
   carousel drifts as it autoplays, so a container-aligned label spent most of
   its time looking indented against cards that had slid left of it. Pinned to
   the band's own edge padding it reads as the section's label at any scroll
   position. */
.sb-lf-reviews-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: none;
	margin: 0 0 20px;
	padding: 0 40px;
}

.sb-lf-reviews-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #d9c98f;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* Google's mark is supplied at its official four colours on a white disc —
   it is a trademark and recolouring it to match the band is not allowed. */
.sb-lf-reviews-label-google {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.sb-lf-reviews-label-google svg {
	width: 13px;
	height: 13px;
	display: block;
}

.sb-lf-reviews-nav {
	display: flex;
	gap: 10px;
}

.sb-lf-reviews-arrow {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: transparent;
	color: #e7e9ee;
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.sb-lf-reviews-arrow:hover {
	background: var(--sb-accent);
	border-color: var(--sb-accent);
	color: var(--sb-white);
}

/* Scroll-snap track: native momentum swipe on touch, smooth-scrolled by the
   arrows and by autoplay. The mask fades cards out as they slide past the
   edges rather than letting them stop dead at a hard boundary. */
.sb-lf-reviews-viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding: 14px 0 24px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.sb-lf-reviews-viewport::-webkit-scrollbar {
	display: none;
}

.sb-lf-reviews-track {
	display: flex;
	gap: 26px;
	width: max-content;
	padding-inline: var(--sb-rv-gutter, 40px);
}

.sb-lf-review-card {
	--sb-rv-accent: #b6912c;

	position: relative;
	flex: 0 0 auto;
	width: 372px;
	max-width: 84vw;
	padding: 34px 30px 28px;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 12px 34px rgba(6, 14, 26, 0.28);
	display: flex;
	flex-direction: column;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.sb-lf-review-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 54px rgba(6, 14, 26, 0.4);
}

/* Gold accent line across the top of the card. */
.sb-lf-review-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 30px;
	right: 30px;
	height: 2px;
	background: var(--sb-rv-accent);
}

.sb-lf-review-mark {
	font-family: var(--sb-font-serif);
	font-size: 54px;
	line-height: 0.7;
	color: var(--sb-rv-accent);
	opacity: 0.55;
	display: block;
	margin-bottom: 8px;
}

.sb-lf-review-stars {
	display: flex;
	gap: 3px;
	color: var(--sb-rv-accent);
	font-size: 14px;
	margin-bottom: 12px;
}

.sb-lf-review-stars .is-empty {
	opacity: 0.25;
}

.sb-lf-review-quote {
	margin: 0 0 22px;
	font-family: var(--sb-font-serif);
	font-style: italic;
	font-size: 17px;
	line-height: 1.62;
	color: #2b3444;
	flex: 1 1 auto;
}

.sb-lf-review-foot {
	border-top: 1px solid rgba(16, 35, 60, 0.1);
	padding-top: 16px;
}

.sb-lf-review-name {
	font-weight: 700;
	font-size: 15px;
	color: var(--sb-primary);
}

.sb-lf-review-role {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sb-muted);
	margin-top: 3px;
}

@media (max-width: 768px) {
	.sb-lf-reviews {
		padding: 68px 0 76px;
	}

	.sb-lf-reviews .sb-lf-section-header,
	.sb-lf-reviews-bar {
		padding: 0 22px;
	}

	.sb-lf-reviews-carousel {
		--sb-rv-gutter: 22px;
	}

	.sb-lf-review-card {
		width: 300px;
		padding: 28px 24px 24px;
	}
}

/* -------------------------------------------------- */
/* 6. PRACTICE AREAS                                   */
/* -------------------------------------------------- */
.sb-lf-practice-areas {
	padding: 100px 40px;
	background: #080c14;
}

.sb-lf-practice-areas .sb-lf-heading {
	color: var(--sb-white);
}

.sb-lf-practice-areas .sb-lf-subheading {
	color: #b9c2d2;
}

/* Group label: a centred rule either side of the group name. */
.sb-lf-pa-group-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	max-width: calc(var(--sb-container, 1240px) - 40px);
	margin: 52px auto 24px;
}

.sb-lf-pa-rule {
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(182, 145, 44, 0.5));
}

.sb-lf-pa-rule:last-child {
	background: linear-gradient(90deg, rgba(182, 145, 44, 0.5), transparent);
}

.sb-lf-pa-group-text {
	flex: none;
	color: #d9b45e;
	font-family: var(--sb-font-serif);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.sb-lf-pa-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	max-width: calc(var(--sb-container, 1240px) - 40px);
	margin: 0 auto;
}

.sb-lf-pa-grid.sb-lf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sb-lf-pa-grid.sb-lf-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Secondary group: five narrower cards, deliberately less prominent. */
.sb-lf-pa-grid-compact {
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	max-width: calc(var(--sb-container, 1240px) - 120px);
}

.sb-lf-pa-card {
	--sb-pa-bg: #0e1420;
	--sb-pa-bg-hover: #141c2b;
	--sb-pa-border: rgba(182, 145, 44, 0.32);
	--sb-pa-border-hover: rgba(224, 190, 104, 0.85);
	--sb-pa-icon: #d9b45e;
	--sb-pa-glow: rgba(201, 162, 39, 0.28);

	position: relative;
	display: block;
	background: var(--sb-pa-bg);
	border: 1px solid var(--sb-pa-border);
	border-radius: 6px;
	padding: 30px 24px 28px;
	text-align: center;
	text-decoration: none;
	/* Transform-based, so a lifted card overlaps its neighbours instead of
	   reflowing the grid around it. */
	transform: translateY(0) scale(1);
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		background-color 0.3s ease-in-out,
		border-color 0.3s ease-in-out,
		box-shadow 0.3s ease-in-out;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.sb-lf-pa-card:hover,
.sb-lf-pa-card:focus-visible,
.sb-lf-pa-card.is-tapped {
	transform: translateY(-5px) scale(1.04);
	background-color: var(--sb-pa-bg-hover);
	border-color: var(--sb-pa-border-hover);
	box-shadow:
		0 18px 40px rgba(0, 0, 0, 0.5),
		0 0 22px -6px var(--sb-pa-glow);
	z-index: 3;
}

/* Warm reflected light behind the icon rather than a neon ring. */
.sb-lf-pa-glow {
	position: absolute;
	top: 14px;
	left: 50%;
	width: 130px;
	height: 130px;
	margin-left: -65px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sb-pa-glow) 0%, transparent 68%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease-in-out;
}

.sb-lf-pa-card:hover .sb-lf-pa-glow,
.sb-lf-pa-card:focus-visible .sb-lf-pa-glow,
.sb-lf-pa-card.is-tapped .sb-lf-pa-glow {
	opacity: 1;
}

.sb-lf-pa-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sb-pa-icon);
	margin-bottom: 16px;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease-in-out;
}

.sb-lf-pa-card .sb-lf-line-icon {
	width: 34px;
	height: 34px;
}

.sb-lf-pa-card:hover .sb-lf-pa-icon,
.sb-lf-pa-card:focus-visible .sb-lf-pa-icon,
.sb-lf-pa-card.is-tapped .sb-lf-pa-icon {
	transform: scale(1.09);
	color: #ecd08a;
}

.sb-lf-pa-card-title {
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.35;
	color: var(--sb-white);
	margin-bottom: 12px;
	transition: color 0.3s ease-in-out;
}

.sb-lf-pa-card:hover .sb-lf-pa-card-title,
.sb-lf-pa-card:focus-visible .sb-lf-pa-card-title,
.sb-lf-pa-card.is-tapped .sb-lf-pa-card-title {
	color: #f4f1e8;
}

/* Description is always legible; hover only lifts it the last 20%. */
.sb-lf-pa-card-text {
	color: #a8b2c4;
	font-size: 13.5px;
	line-height: 1.6;
	opacity: 0.82;
	transition: opacity 0.3s ease-in-out;
}

.sb-lf-pa-card:hover .sb-lf-pa-card-text,
.sb-lf-pa-card:focus-visible .sb-lf-pa-card-text,
.sb-lf-pa-card.is-tapped .sb-lf-pa-card-text {
	opacity: 1;
}

.sb-lf-pa-grid-compact .sb-lf-pa-card {
	padding: 22px 16px 20px;
}

.sb-lf-pa-grid-compact .sb-lf-line-icon {
	width: 26px;
	height: 26px;
}

.sb-lf-pa-grid-compact .sb-lf-pa-icon {
	margin-bottom: 12px;
}

.sb-lf-pa-grid-compact .sb-lf-pa-card-title {
	font-size: 12.5px;
	margin-bottom: 8px;
}

.sb-lf-pa-grid-compact .sb-lf-pa-card-text {
	font-size: 12px;
	line-height: 1.5;
}

.sb-lf-pa-grid-compact .sb-lf-pa-glow {
	width: 92px;
	height: 92px;
	margin-left: -46px;
}

.sb-lf-practice-areas .sb-lf-section-cta {
	margin-top: 48px;
}

/* -------------------------------------------------- */
/* 7. ATTORNEYS                                        */
/* -------------------------------------------------- */
.sb-lf-attorneys {
	padding: 100px 40px;
	background: var(--sb-light);
}

.sb-lf-att-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: calc(var(--sb-container, 1240px) - 40px);
	margin: 0 auto;
}

.sb-lf-att-grid.sb-lf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sb-lf-att-grid.sb-lf-cols-4 { grid-template-columns: repeat(4, 1fr); }

.sb-lf-att-card {
	background: var(--sb-white);
	border-radius: 6px;
	overflow: hidden;
	text-align: center;
	padding-bottom: 26px;
	box-shadow: 0 10px 30px rgba(16, 35, 60, 0.06);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sb-lf-att-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 44px rgba(16, 35, 60, 0.16);
}

.sb-lf-att-photo {
	overflow: hidden;
	margin-bottom: 20px;
}

.sb-lf-att-card img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-lf-att-card:hover img {
	transform: scale(1.08);
}

.sb-lf-att-name {
	font-weight: 700;
	font-size: 18px;
	color: var(--sb-primary);
	padding: 0 20px;
}

.sb-lf-att-title {
	color: var(--sb-accent);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 6px 0 14px;
}

.sb-lf-att-bio {
	color: var(--sb-muted);
	font-size: 14px;
	line-height: 1.6;
	padding: 0 24px;
	margin-bottom: 16px;
}

.sb-lf-att-social {
	display: flex;
	justify-content: center;
	gap: 12px;
}

.sb-lf-att-social a {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sb-light);
	color: var(--sb-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 13px;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.sb-lf-att-social a:hover {
	background: var(--sb-accent);
	color: var(--sb-white);
	transform: translateY(-3px);
}

/* -------------------------------------------------- */
/* 8. TESTIMONIALS                                     */
/* -------------------------------------------------- */
.sb-lf-testimonials {
	padding: 100px 40px;
}

.sb-lf-testi-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	max-width: calc(var(--sb-container, 1240px) - 40px);
	margin: 0 auto;
}

.sb-lf-testi-slider {
	display: flex;
	gap: 28px;
	max-width: calc(var(--sb-container, 1240px) - 40px);
	margin: 0 auto;
	overflow: hidden;
}

.sb-lf-testi-slider .sb-lf-testi-card {
	flex: 0 0 100%;
	display: none;
}

.sb-lf-testi-slider .sb-lf-testi-card.is-active {
	display: block;
	animation: sbFadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-lf-testi-card {
	background: var(--sb-light);
	border-radius: 6px;
	padding: 40px;
	position: relative;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sb-lf-testi-grid .sb-lf-testi-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 22px 40px rgba(16, 35, 60, 0.1);
}

.sb-lf-testi-quote-icon {
	color: var(--sb-accent);
	opacity: 0.5;
	font-size: 24px;
	margin-bottom: 14px;
	transition: transform 0.3s ease;
}

.sb-lf-testi-card:hover .sb-lf-testi-quote-icon {
	transform: scale(1.15) rotate(-6deg);
}

.sb-lf-testi-rating {
	color: #e0b13a;
	font-size: 13px;
	margin-bottom: 14px;
}

.sb-lf-testi-quote {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--sb-dark);
	margin-bottom: 26px;
}

.sb-lf-testi-person {
	display: flex;
	align-items: center;
	gap: 14px;
}

.sb-lf-testi-person img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
}

.sb-lf-testi-name {
	font-weight: 700;
	color: var(--sb-primary);
}

.sb-lf-testi-title {
	color: var(--sb-muted);
	font-size: 13px;
}

/* --- Spotlight testimonials skin --- */
.sb-lf-testi-spotlight-section {
	position: relative;
	overflow: hidden;
	padding: 110px 0 0;
	background: #0a0e18;
}

.sb-lf-testi-watermark {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center bottom;
	filter: grayscale(1);
	z-index: 0;
}

.sb-lf-testi-watermark::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(8, 12, 22, 0.88);
}

.sb-lf-testi-spotlight-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 40px;
	min-height: 540px;
	max-width: calc(var(--sb-container, 1240px) + 60px);
	margin: 0 auto;
	padding: 0 40px;
}

.sb-lf-testi-spotlight-content {
	flex: 1 1 540px;
	max-width: 620px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 0 60px;
}

.sb-lf-testi-spotlight-content .sb-lf-eyebrow {
	font-family: var(--sb-font-serif);
	font-style: italic;
	text-transform: uppercase;
}

.sb-lf-testi-spotlight-track {
	position: relative;
}

.sb-lf-testi-spotlight-slide {
	display: none;
	position: relative;
}

.sb-lf-testi-spotlight-slide.is-active {
	display: block;
	animation: sbFadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-lf-testi-spotlight-card {
	position: relative;
	z-index: 1;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(6px);
	padding: 40px;
	max-width: 560px;
}

.sb-lf-testi-spotlight-quote {
	font-style: italic;
	font-size: 19px;
	line-height: 1.7;
	color: #c7cedb;
}

.sb-lf-testi-spotlight-person {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 30px;
}

.sb-lf-testi-spotlight-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.15);
	flex: none;
}

.sb-lf-testi-spotlight-name {
	font-family: var(--sb-font-serif);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #d9c98f;
}

.sb-lf-testi-spotlight-title {
	color: #c7cedb;
	font-size: 14px;
	margin-top: 4px;
}

.sb-lf-testi-spotlight-mark {
	position: absolute;
	z-index: 0;
	right: -20px;
	bottom: -30px;
	font-size: 150px;
	color: rgba(182, 145, 44, 0.35);
	pointer-events: none;
	line-height: 1;
}

.sb-lf-testi-spotlight-dots {
	display: flex;
	gap: 10px;
	margin-top: 34px;
}

.sb-lf-testi-spotlight-dots button {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.3);
	padding: 0;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
}

.sb-lf-testi-spotlight-dots button:hover {
	background: rgba(255, 255, 255, 0.6);
	transform: scale(1.2);
}

.sb-lf-testi-spotlight-dots button.is-active {
	background: var(--sb-accent);
	transform: scale(1.2);
}

.sb-lf-testi-spotlight-image {
	position: relative;
	flex: 1 1 45%;
	overflow: hidden;
}

.sb-lf-testi-spotlight-portrait {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	opacity: 0;
	z-index: 0;
	transition: opacity 1.1s ease;
}

.sb-lf-testi-spotlight-portrait.is-active {
	opacity: 1;
	z-index: 1;
}

.sb-lf-testi-spotlight-line {
	position: relative;
	z-index: 1;
	height: 1px;
	margin-top: 50px;
	background: linear-gradient(90deg, transparent 0%, var(--sb-accent) 50%, transparent 100%);
	opacity: 0.6;
}

@media (max-width: 900px) {
	.sb-lf-testi-spotlight-inner {
		flex-direction: column;
		min-height: 0;
		padding: 0 24px;
	}

	.sb-lf-testi-spotlight-image {
		order: -1;
		height: 320px;
		flex: none;
	}

	.sb-lf-testi-spotlight-content {
		max-width: 100%;
		padding: 40px 0;
	}

	.sb-lf-testi-spotlight-card {
		max-width: 100%;
	}

	.sb-lf-testi-spotlight-mark {
		display: none;
	}
}

/* -------------------------------------------------- */
/* 9. COMMUNITY BAND                                   */
/* -------------------------------------------------- */
.sb-lf-community {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	max-width: calc(var(--sb-container, 1240px) + 60px);
	margin: 0 auto;
	padding: 100px 40px;
	background: var(--sb-light);
}

.sb-lf-community.sb-lf-pos-right {
	direction: rtl;
}

.sb-lf-community.sb-lf-pos-right > * {
	direction: ltr;
}

.sb-lf-community-image {
	overflow: hidden;
	border-radius: 6px;
}

.sb-lf-community-image img {
	width: 100%;
	border-radius: 6px;
	box-shadow: 0 30px 60px rgba(16, 35, 60, 0.14);
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-lf-community-image:hover img {
	transform: scale(1.06);
}

.sb-lf-community-content {
	color: var(--sb-muted);
	font-size: 16px;
	line-height: 1.75;
	margin-bottom: 26px;
}

.sb-lf-community-stats {
	display: flex;
	gap: 40px;
	margin-bottom: 30px;
}

.sb-lf-community-stat-number {
	display: block;
	font-family: var(--sb-font-serif);
	font-size: 30px;
	font-weight: 700;
	color: var(--sb-primary);
}

.sb-lf-community-stat-label {
	display: block;
	color: var(--sb-muted);
	font-size: 13px;
	margin-top: 4px;
}

/* -------------------------------------------------- */
/* 10. ARRANGE A CONFERENCE                            */
/* -------------------------------------------------- */
.sb-lf-appointment {
	--sb-cf-accent: #d9b45e;
	--sb-cf-glow: rgba(201, 162, 39, 0.26);

	background-color: #0c1830;
	background-image: var(--sb-weave);
	padding: 100px 40px;
}

.sb-lf-appointment-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 56px;
	align-items: start;
	max-width: var(--sb-container, 1240px);
	margin: 0 auto;
}

.sb-lf-appointment .sb-lf-heading {
	color: var(--sb-white);
	margin-bottom: 0;
}

/* Single clean rule under the heading — no diamond or motif. */
.sb-lf-appt-rule {
	display: block;
	width: 320px;
	max-width: 100%;
	height: 2px;
	background: var(--sb-accent);
	margin: 22px 0 20px;
}

.sb-lf-appointment-desc {
	color: #c7cedb;
	font-size: 16px;
	line-height: 1.7;
	max-width: 520px;
	margin: 0 0 26px;
}

.sb-lf-confer-options {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sb-lf-confer-card {
	--sb-cf-bg: rgba(255, 255, 255, 0.04);
	--sb-cf-border: rgba(255, 255, 255, 0.12);
	--sb-cf-border-hover: rgba(224, 190, 104, 0.8);

	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	/* Equal height regardless of how many lines each option runs to. */
	min-height: 104px;
	padding: 20px 22px;
	background: var(--sb-cf-bg);
	border: 1px solid var(--sb-cf-border);
	border-radius: 6px;
	text-decoration: none;
	transform: translateY(0) scale(1);
	transition:
		transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		background-color 0.28s ease-in-out,
		border-color 0.28s ease-in-out,
		box-shadow 0.28s ease-in-out;
}

.sb-lf-confer-card:hover,
.sb-lf-confer-card:focus-visible,
.sb-lf-confer-card.is-tapped {
	transform: translateY(-4px) scale(1.025);
	background-color: rgba(255, 255, 255, 0.07);
	border-color: var(--sb-cf-border-hover);
	box-shadow:
		0 14px 30px rgba(0, 0, 0, 0.42),
		0 0 18px -6px var(--sb-cf-glow);
	z-index: 2;
}

.sb-lf-confer-icon {
	position: relative;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sb-cf-accent);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.28s ease-in-out;
}

/* Warm reflected light behind the icon rather than a lit ring. */
.sb-lf-confer-icon::before {
	content: "";
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sb-cf-glow) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 0.28s ease-in-out;
}

.sb-lf-confer-card:hover .sb-lf-confer-icon,
.sb-lf-confer-card:focus-visible .sb-lf-confer-icon,
.sb-lf-confer-card.is-tapped .sb-lf-confer-icon {
	transform: scale(1.08);
	color: #ecd08a;
}

.sb-lf-confer-card:hover .sb-lf-confer-icon::before,
.sb-lf-confer-card:focus-visible .sb-lf-confer-icon::before,
.sb-lf-confer-card.is-tapped .sb-lf-confer-icon::before {
	opacity: 1;
}

.sb-lf-confer-icon .sb-lf-line-icon {
	width: 30px;
	height: 30px;
}

.sb-lf-confer-body {
	flex: 1 1 auto;
	min-width: 0;
}

.sb-lf-confer-title {
	position: relative;
	display: inline-block;
	color: var(--sb-cf-accent);
	font-weight: 700;
	font-size: 15.5px;
	letter-spacing: 0.02em;
	margin-bottom: 6px;
	transition: color 0.28s ease-in-out;
}

/* Underline wipes in from the left. */
.sb-lf-confer-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1px;
	background: var(--sb-cf-accent);
	box-shadow: 0 0 6px var(--sb-cf-glow);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.sb-lf-confer-card:hover .sb-lf-confer-title,
.sb-lf-confer-card:focus-visible .sb-lf-confer-title,
.sb-lf-confer-card.is-tapped .sb-lf-confer-title {
	color: #f0dfa4;
}

.sb-lf-confer-card:hover .sb-lf-confer-title::after,
.sb-lf-confer-card:focus-visible .sb-lf-confer-title::after,
.sb-lf-confer-card.is-tapped .sb-lf-confer-title::after {
	transform: scaleX(1);
}

.sb-lf-confer-text {
	display: block;
	color: #e2e7ef;
	font-size: 14px;
	line-height: 1.55;
}

.sb-lf-confer-arrow {
	flex: none;
	display: inline-flex;
	color: rgba(255, 255, 255, 0.45);
	font-size: 15px;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.28s ease-in-out;
}

.sb-lf-confer-card:hover .sb-lf-confer-arrow,
.sb-lf-confer-card:focus-visible .sb-lf-confer-arrow,
.sb-lf-confer-card.is-tapped .sb-lf-confer-arrow {
	transform: translateX(5px);
	color: var(--sb-cf-accent);
}

.sb-lf-arrange {
	display: flex;
	gap: 20px;
	margin-top: 28px;
	padding: 0 22px;
}

.sb-lf-arrange-icon {
	flex: none;
	width: 52px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	color: var(--sb-cf-accent);
}

.sb-lf-arrange-icon .sb-lf-line-icon {
	width: 30px;
	height: 30px;
}

.sb-lf-arrange-title {
	color: var(--sb-cf-accent);
	font-weight: 700;
	font-size: 15.5px;
	margin-bottom: 8px;
}

.sb-lf-arrange-body p {
	color: #e2e7ef;
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 10px;
}

.sb-lf-arrange-body p:last-child {
	margin-bottom: 0;
}

/* --- White form panel --------------------------------------------------- */
.sb-lf-appointment-form-wrap {
	background: var(--sb-white);
	border-radius: 12px;
	padding: 38px 36px 32px;
	box-shadow: 0 24px 60px rgba(3, 10, 22, 0.45);
}

.sb-lf-form {
	--sb-fld-border: #d8dce3;
	--sb-fld-focus: #c89b35;

	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
}

.sb-lf-form-row-full,
.sb-lf-form > button,
.sb-lf-form-privacy,
.sb-lf-form-response {
	grid-column: 1 / -1;
}

.sb-lf-form label,
.sb-lf-form legend {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sb-primary);
	margin-bottom: 8px;
}

.sb-lf-form input,
.sb-lf-form select,
.sb-lf-form textarea {
	width: 100%;
	padding: 13px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--sb-dark);
	background: #fff;
	border: 1px solid var(--sb-fld-border);
	border-radius: 6px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sb-lf-form input::placeholder,
.sb-lf-form textarea::placeholder {
	color: #9aa3b2;
	opacity: 1;
}

.sb-lf-form input:focus,
.sb-lf-form select:focus,
.sb-lf-form textarea:focus {
	outline: none;
	border-color: var(--sb-fld-focus);
	box-shadow: 0 0 0 3px rgba(200, 155, 53, 0.16);
}

.sb-lf-form textarea {
	resize: vertical;
	min-height: 120px;
}

.sb-lf-confer-choice {
	border: 0;
	margin: 0;
	padding: 0;
}

.sb-lf-form .sb-lf-radio {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 14.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sb-dark);
	cursor: pointer;
}

.sb-lf-form .sb-lf-radio:last-child {
	margin-bottom: 0;
}

/* Custom mark so the selected state can carry the gold accent. */
.sb-lf-radio input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.sb-lf-radio-mark {
	flex: none;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 1.5px solid var(--sb-fld-border);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sb-lf-radio input:checked + .sb-lf-radio-mark {
	border-color: var(--sb-fld-focus);
	box-shadow: inset 0 0 0 3.5px var(--sb-fld-focus), inset 0 0 0 5px #fff;
}

.sb-lf-radio input:focus-visible + .sb-lf-radio-mark {
	box-shadow: 0 0 0 3px rgba(200, 155, 53, 0.24);
}

.sb-lf-form .sb-lf-btn-primary {
	--sb-cta-from: #c89b35;
	--sb-cta-to: #d4aa45;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	margin-top: 4px;
	padding: 17px 26px;
	border: 0;
	border-radius: 6px;
	background: linear-gradient(135deg, var(--sb-cta-from), var(--sb-cta-to));
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.sb-lf-form .sb-lf-btn-primary .sb-lf-glyph {
	transition: transform 0.25s ease;
}

.sb-lf-form .sb-lf-btn-primary:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 12px 26px rgba(200, 155, 53, 0.35);
}

.sb-lf-form .sb-lf-btn-primary:hover .sb-lf-glyph {
	transform: translateX(4px);
}

.sb-lf-form-privacy {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 16px 0 0;
	color: #8b94a3;
	font-size: 12.5px;
	line-height: 1.5;
}

.sb-lf-form-privacy .sb-lf-glyph {
	margin-top: 2px;
	font-size: 13px;
}

.sb-lf-form-response {
	margin-top: 12px;
	font-size: 14px;
}

.sb-lf-form-response.is-success {
	color: #17683f;
}

.sb-lf-form-response.is-error {
	color: #b3261e;
}

@media (max-width: 900px) {
	.sb-lf-appointment {
		padding: 68px 22px;
	}

	/* Heading, options, "How to Arrange", then the form. */
	.sb-lf-appointment-grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.sb-lf-appointment-form-wrap {
		padding: 28px 22px 24px;
	}

	.sb-lf-form {
		grid-template-columns: 1fr;
	}

	.sb-lf-arrange {
		padding: 0;
	}

	/* Comfortable touch targets. */
	.sb-lf-form input,
	.sb-lf-form select,
	.sb-lf-form textarea {
		padding: 15px 14px;
		font-size: 16px;
	}

	.sb-lf-form .sb-lf-radio {
		margin-bottom: 14px;
	}
}

/* -------------------------------------------------- */
/* 11. NEWS                                            */
/* -------------------------------------------------- */
.sb-lf-news {
	padding: 100px 40px;
}

.sb-lf-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: calc(var(--sb-container, 1240px) - 40px);
	margin: 0 auto;
}

.sb-lf-news-grid.sb-lf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sb-lf-news-grid.sb-lf-cols-4 { grid-template-columns: repeat(4, 1fr); }

.sb-lf-news-card {
	display: block;
	text-decoration: none;
	background: var(--sb-white);
	border: 1px solid #ebe8de;
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.sb-lf-news-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 22px 44px rgba(16, 35, 60, 0.14);
}

.sb-lf-news-image {
	height: 190px;
	background-size: cover;
	background-position: center;
	position: relative;
	background-color: var(--sb-light);
	overflow: hidden;
}

.sb-lf-news-card:hover .sb-lf-news-image {
	background-size: 112%;
}

.sb-lf-news-image,
.sb-lf-news-card:hover .sb-lf-news-image {
	transition: background-size 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-lf-news-tag {
	position: absolute;
	left: 16px;
	bottom: 16px;
	background: var(--sb-accent);
	color: var(--sb-white);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 6px 12px;
	border-radius: 3px;
	z-index: 1;
}

.sb-lf-news-body {
	padding: 24px;
}

.sb-lf-news-meta {
	color: var(--sb-muted);
	font-size: 12.5px;
	margin-bottom: 10px;
}

.sb-lf-news-title {
	font-weight: 700;
	font-size: 17px;
	color: var(--sb-primary);
	line-height: 1.4;
	margin-bottom: 10px;
	transition: color 0.25s ease;
}

.sb-lf-news-card:hover .sb-lf-news-title {
	color: var(--sb-accent);
}

.sb-lf-news-excerpt {
	color: var(--sb-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* -------------------------------------------------- */
/* 12. RECOGNITION / LOGOS STRIP                       */
/* -------------------------------------------------- */
.sb-lf-logos {
	padding: 70px 40px;
	text-align: center;
	border-top: 1px solid #ebe8de;
	border-bottom: 1px solid #ebe8de;
}

.sb-lf-logos-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px;
	max-width: calc(var(--sb-container, 1240px) - 140px);
	margin: 0 auto;
}

.sb-lf-logo-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 150px;
	transition: transform 0.3s ease;
	opacity: 0.85;
}

.sb-lf-logo-item:hover {
	transform: translateY(-4px);
	opacity: 1;
}

.sb-lf-logo-icon {
	font-size: 22px;
	color: var(--sb-accent);
	margin-bottom: 10px;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sb-lf-logo-item:hover .sb-lf-logo-icon {
	transform: scale(1.15) rotate(-6deg);
}

.sb-lf-logo-label {
	font-weight: 700;
	font-size: 14px;
	color: var(--sb-primary);
}

.sb-lf-logo-sublabel {
	font-size: 12px;
	color: var(--sb-muted);
	margin-top: 4px;
}

/* -------------------------------------------------- */
/* 13. NEWSLETTER                                      */
/* -------------------------------------------------- */
.sb-lf-newsletter {
	background-color: var(--sb-primary);
	padding: 80px 40px;
	text-align: center;
	background-image: var(--sb-weave);
}

.sb-lf-newsletter .sb-lf-heading {
	color: var(--sb-white);
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.sb-lf-newsletter-sub {
	color: #e7e9ee;
	font-size: 16px;
	max-width: 520px;
	margin: 0 auto 30px;
}

.sb-lf-newsletter-form {
	display: flex;
	max-width: 480px;
	margin: 0 auto;
	gap: 12px;
}

.sb-lf-newsletter-form input {
	flex: 1;
	padding: 15px 18px;
	border-radius: 3px;
	border: none;
	font-size: 14px;
	transition: box-shadow 0.25s ease;
}

.sb-lf-newsletter-form input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(182, 145, 44, 0.45);
}

.sb-lf-newsletter-form button {
	white-space: nowrap;
}

/* -------------------------------------------------- */
/* RESPONSIVE                                          */
/* -------------------------------------------------- */
@media (max-width: 1024px) {
	.sb-lf-pa-grid,
	.sb-lf-att-grid,
	.sb-lf-news-grid,
	.sb-lf-testi-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Secondary group keeps a tighter grid so it still reads as subordinate
	   to Family and Criminal once everything narrows. */
	.sb-lf-pa-grid-compact {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	.sb-lf-pa-group-text {
		font-size: 16px;
		letter-spacing: 0.16em;
	}

	.sb-lf-trustbar {
		grid-template-columns: 1fr !important;
		margin-top: 0;
	}

	/* Stacked: the rounded corners belong to the top and bottom of the column
	   rather than its left and right ends. */
	.sb-lf-trustbar-item {
		border-right: none;
		border-bottom: 1px solid rgba(16, 35, 60, 0.08);
	}

	.sb-lf-trustbar-item:first-child {
		border-radius: 4px 4px 0 0;
	}

	.sb-lf-trustbar-item:last-child {
		border-bottom: none;
		border-radius: 0 0 4px 4px;
	}

	.sb-lf-about,
	.sb-lf-community,
	.sb-lf-appointment-grid {
		grid-template-columns: 1fr;
	}

	.sb-lf-about.sb-lf-pos-right,
	.sb-lf-community.sb-lf-pos-right {
		direction: ltr;
	}

	.sb-lf-about-badge {
		right: 16px;
	}

	/* Single column, so there is no text height to match. The carousel is
	   sized off the viewport width instead, chosen so the large middle frame
	   keeps roughly the proportions it has on desktop. */
	.sb-lf-about-image.is-stacked {
		min-height: 0;
		height: 122vw;
		max-height: 680px;
	}

	.sb-lf-about-image.is-stacked .sb-lf-about-badge {
		right: 8px;
		bottom: 26%;
	}
}

@media (max-width: 640px) {
	.sb-lf-pa-grid,
	.sb-lf-att-grid,
	.sb-lf-news-grid,
	.sb-lf-testi-grid,
	.sb-lf-about-highlights,
	.sb-lf-form {
		grid-template-columns: 1fr !important;
	}

	.sb-lf-pa-grid-compact {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.sb-lf-practice-areas {
		padding: 68px 22px;
	}

	.sb-lf-pa-group-label {
		margin: 40px auto 20px;
		gap: 14px;
	}

	.sb-lf-statement {
		padding: 68px 22px;
	}

	.sb-lf-hero-slide-inner {
		padding: 40px 22px 96px;
		align-items: center !important;
		text-align: center !important;
	}

	.sb-lf-hero-text-wrap {
		flex-direction: column !important;
	}

	.sb-lf-hero-divider {
		width: 60px;
		height: 3px !important;
		margin: 0 auto 18px;
	}

	.sb-lf-hero-title,
	.sb-lf-hero-hook,
	.sb-lf-hero-desc {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* "representing YOU directly?" would otherwise break mid-phrase on a
	   narrow screen and drag the brush stroke onto its own line. */
	.sb-lf-hero-hook {
		margin-top: 0;
		text-wrap: balance;
	}

	.sb-lf-hero-actions {
		justify-content: center !important;
	}

	.sb-lf-hero-corner {
		top: 18px;
		left: 18px;
		width: 36px;
		height: 36px;
	}

	.sb-lf-hero-bottom-bar,
	/* Stacked layout drops the trust bar's negative top margin, so there is
	   nothing overlapping the hero to clear here. */
	.sb-lf-hero:has(+ .sb-lf-trustbar) .sb-lf-hero-bottom-bar {
		padding: 0 22px;
		bottom: 20px;
	}

	.sb-lf-hero-explore span:last-child {
		display: none;
	}

	.sb-lf-hero-counter-nums {
		display: none;
	}

	.sb-lf-community-stats {
		flex-direction: column;
		gap: 16px;
	}
}