/* Site Builder — Law Firm About widget styles */

.sb-lf-about {
	font-family: var(--sb-font-sans);
}

.sb-lf-about * {
	box-sizing: border-box;
}

.sb-lf-about a {
	text-decoration: none;
}

/* Scroll-reveal utility — fails open by default (see law-firm-about.js for
   why): `.sb-lf-reveal` alone is always fully visible; JS only adds
   `.sb-lf-pending` to items currently off-screen, then flips them to
   `.sb-lf-visible` as they scroll into view. `--sb-delay` 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(32px);
	will-change: opacity, transform;
}

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

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

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

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

/* Full-bleed utility shared by all three About-page widgets — each renders
   its own top-level <section> as this widget's root, so this same class
   (also used by the header widget) stretches that section edge-to-edge.
   This is the pure-CSS approximation; law-firm-about.js measures the real
   viewport offset on load/resize and overrides it with exact pixel margins,
   since the page theme's container/overflow rules can throw the 100vw trick
   off by a few pixels. */
.sb-lf-stretch {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* =====================================================================
   1. WHY MILAD
   ===================================================================== */

.sb-lf-wm {
	background: #f6f5f1;
	overflow: hidden;
}

.sb-lf-wm-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 96px 48px;
}

.sb-lf-wm-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 72px;
	/* stretch, not center: the photograph column is a carousel sized as a
	   percentage of its own height, so it needs to be given the biography's
	   full height to fill. A single centred portrait is what left the blank
	   band above and below. */
	align-items: stretch;
}

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

.sb-lf-wm-image-pos-right .sb-lf-wm-image-col {
	order: 2;
}

/* Image column */
.sb-lf-wm-image-col {
	position: relative;
}

.sb-lf-wm-image-glow {
	position: absolute;
	width: 70%;
	height: 70%;
	top: -10%;
	right: -12%;
	background: rgba(182, 145, 44, 0.35);
	filter: blur(60px);
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}

.sb-lf-wm-image-frame {
	position: relative;
	z-index: 1;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	box-shadow: 0 30px 60px -20px rgba(10, 23, 48, 0.35);
}

/* Inside a stack the frame is sized by the slot, not by its own ratio. */
.sb-lf-photostack-frame.sb-lf-wm-image-frame {
	aspect-ratio: auto;
	position: relative;
	z-index: auto;
}

.sb-lf-wm-image-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-lf-wm-image-col:not(.is-stacked):hover .sb-lf-wm-image-frame 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. */

.sb-lf-wm-image-col.is-stacked {
	--sb-photostack-ratio: 4 / 5;
	/* A floor for the case where the biography is short — without it the three
	   frames would be squashed into whatever height the text happens to be. */
	min-height: 640px;
}

.sb-lf-wm-badge {
	position: absolute;
	z-index: 4;
	left: -12%;
	bottom: 8%;
	display: flex;
	align-items: center;
	gap: 14px;
	background: #0a1730;
	padding: 16px 20px;
	border-radius: 10px;
	box-shadow: 0 20px 40px -14px rgba(10, 23, 48, 0.5);
	transition: transform 0.35s ease;
}

.sb-lf-wm-image-col:hover .sb-lf-wm-badge {
	transform: translateY(-6px);
}

/* Anchored to the bottom-left of the large centre frame rather than the whole
   column, which is now nearly twice as tall. */
.sb-lf-wm-image-col.is-stacked .sb-lf-wm-badge {
	bottom: 26%;
	left: -9%;
}

.sb-lf-wm-badge-icon {
	display: inline-flex;
	flex: none;
	font-size: 22px;
	color: #c9a227;
}

.sb-lf-wm-badge-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.sb-lf-wm-badge-title {
	color: #ffffff;
	font-weight: 700;
	font-size: 14.5px;
	white-space: nowrap;
}

.sb-lf-wm-badge-subtitle {
	color: rgba(255, 255, 255, 0.65);
	font-size: 12px;
	white-space: nowrap;
}

/* Content column */
.sb-lf-wm-eyebrow {
	color: #b6912c;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.sb-lf-wm-heading {
	margin: 0 0 20px;
	color: #0a1730;
	font-family: var(--sb-font-serif);
	font-weight: 700;
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.2;
}

.sb-lf-wm-description {
	margin: 0 0 36px;
	color: #5a6070;
	font-size: 16px;
	line-height: 1.7;
	max-width: 560px;
}

.sb-lf-wm-reasons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 36px;
}

.sb-lf-wm-reason {
	position: relative;
	display: flex;
	gap: 14px;
	padding: 20px 18px 20px 20px;
	background: #ffffff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(10, 23, 48, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sb-lf-wm-reason::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: #c9a227;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}

.sb-lf-wm-reason:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 32px -12px rgba(10, 23, 48, 0.18);
}

.sb-lf-wm-reason:hover::before {
	transform: scaleX(1);
}

.sb-lf-wm-reason-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(182, 145, 44, 0.12);
	color: #b6912c;
	font-size: 17px;
	transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.sb-lf-wm-reason:hover .sb-lf-wm-reason-icon {
	background: #0a1730;
	color: #c9a227;
	transform: rotate(-8deg) scale(1.08);
}

.sb-lf-wm-reason-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sb-lf-wm-reason-title {
	color: #0a1730;
	font-weight: 700;
	font-size: 15px;
}

.sb-lf-wm-reason-text {
	color: #5a6070;
	font-size: 13.5px;
	line-height: 1.55;
}

.sb-lf-wm-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	background: #0a1730;
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	border-radius: 6px;
	transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.sb-lf-wm-btn:hover {
	background: #c9a227;
	color: #0a1730;
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -10px rgba(10, 23, 48, 0.35);
}

/* =====================================================================
   2. WHY DIRECT ACCESS
   ===================================================================== */

/* The one band on the site that is not navy. Deep green ground, warm ivory
   type, brass accent — green/brass is a complementary pair in a way gold on
   near-black is not, and it stops the commercial argument reading as another
   navy block. All of it is overridable from the Style tab. */
.sb-lf-da {
	position: relative;
	background: #12261d;
	overflow: hidden;
	--sb-da-ivory: #f4efe3;
	--sb-da-brass: #d8b25c;
}

/* Two layers: the brass glow, and the same faint diagonal weave the Insights
   band uses over its navy, so the green is not a flat slab either. */
.sb-lf-da::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.03) 0,
			rgba(255, 255, 255, 0.03) 1px,
			transparent 1px,
			transparent 9px
		),
		radial-gradient(circle at 14% 8%, rgba(216, 178, 92, 0.13), transparent 46%),
		radial-gradient(circle at 88% 88%, rgba(216, 178, 92, 0.08), transparent 44%);
	pointer-events: none;
}

.sb-lf-da-inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	padding: 96px 48px;
}

.sb-lf-da-header {
	max-width: 760px;
	margin: 0 auto 56px;
	text-align: center;
}

.sb-lf-da-eyebrow {
	color: var(--sb-da-brass);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.sb-lf-da-heading {
	margin: 0 0 18px;
	color: var(--sb-da-ivory);
	font-family: var(--sb-font-serif);
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.2;
}

.sb-lf-da-description {
	margin: 0;
	color: rgba(244, 239, 227, 0.72);
	font-size: 16px;
	line-height: 1.7;
}

/* --- Benefit cards ------------------------------------------------------- */

.sb-lf-da-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* A 4px lift and a colour change, nothing more. The previous -8px jump with a
   rotating icon was the "clunky" part. */
.sb-lf-da-card {
	position: relative;
	padding: 32px 24px 28px;
	background: rgba(244, 239, 227, 0.045);
	border: 1px solid rgba(244, 239, 227, 0.1);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.sb-lf-da-card:hover {
	transform: translateY(-4px);
	background: rgba(216, 178, 92, 0.1);
	border-color: rgba(216, 178, 92, 0.38);
}

.sb-lf-da-card-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--sb-da-brass);
	color: #12261d;
	font-size: 19px;
	margin-bottom: 20px;
	transition: box-shadow 0.3s ease;
}

.sb-lf-da-card:hover .sb-lf-da-card-icon {
	box-shadow: 0 0 0 8px rgba(216, 178, 92, 0.14);
}

.sb-lf-da-card-icon svg,
.sb-lf-da-card-icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
	display: block;
}

.sb-lf-da-card-title {
	position: relative;
	display: block;
	color: var(--sb-da-ivory);
	font-weight: 700;
	font-size: 17px;
	margin-bottom: 8px;
}

.sb-lf-da-card-text {
	position: relative;
	display: block;
	color: rgba(244, 239, 227, 0.66);
	font-size: 14px;
	line-height: 1.6;
}

/* --- Comparison ---------------------------------------------------------- */

/* Three tracks, not two: the middle one is the "Vs". It collapses to a full
   width row between the stacked columns on narrow screens. */
.sb-lf-da-compare {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 0 34px;
	max-width: 960px;
	margin: 56px auto 0;
}

.sb-lf-da-compare-col {
	padding: 32px 30px;
	border-radius: 14px;
	/* The two routes are meant to be weighed against each other, so each one
	   answers to being pointed at: it lifts, grows very slightly and picks up
	   a glow. `scale` rather than `transform` so it composes with nothing else
	   and cannot fight a transform set elsewhere. */
	transition: transform 0.3s ease, scale 0.3s ease, box-shadow 0.3s ease,
		border-color 0.3s ease, background 0.3s ease;
}

.sb-lf-da-compare-col:hover {
	transform: translateY(-5px);
	scale: 1.02;
	z-index: 2;
}

.sb-lf-da-compare-col-left:hover {
	background: rgba(244, 239, 227, 0.07);
	border-color: rgba(244, 239, 227, 0.34);
	box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.7);
}

.sb-lf-da-compare-col-right:hover {
	background: rgba(216, 178, 92, 0.16);
	border-color: rgba(216, 178, 92, 0.7);
	box-shadow: 0 22px 46px -18px rgba(0, 0, 0, 0.7), 0 0 30px -6px rgba(216, 178, 92, 0.3);
}

.sb-lf-da-compare-col-left {
	background: rgba(244, 239, 227, 0.03);
	border: 1px dashed rgba(244, 239, 227, 0.16);
}

.sb-lf-da-compare-col-right {
	background: rgba(216, 178, 92, 0.09);
	border: 1px solid rgba(216, 178, 92, 0.38);
}

.sb-lf-da-compare-vs {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--sb-da-brass);
	border-color: var(--sb-da-brass);
}

/* The hairlines above and below the word are drawn as flex children so they
   fill whatever height the two columns settle at. */
.sb-lf-da-compare-vs::before,
.sb-lf-da-compare-vs::after {
	content: "";
	flex: 1;
	width: 1px;
	background: currentColor;
	opacity: 0.3;
}

/* Deliberately loud. At 46px in brass-on-green it read as a bit of
   punctuation and disappeared; it is the hinge of the whole comparison, so it
   is now a filled brass disc with a ring around it and dark type inside. */
.sb-lf-da-compare-vs span {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	border: 0;
	background: var(--sb-da-brass);
	color: #10231a;
	box-shadow: 0 0 0 1px rgba(244, 239, 227, 0.28), 0 0 0 9px rgba(216, 178, 92, 0.14),
		0 14px 30px -12px rgba(0, 0, 0, 0.6);
	font-family: var(--sb-font-serif);
	font-size: 30px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.sb-lf-da-compare-title {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.sb-lf-da-compare-col-left .sb-lf-da-compare-title {
	color: rgba(244, 239, 227, 0.5);
}

.sb-lf-da-compare-col-right .sb-lf-da-compare-title {
	color: var(--sb-da-brass);
}

.sb-lf-da-compare-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sb-lf-da-compare-col li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.5;
}

.sb-lf-da-compare-col-left li {
	color: rgba(244, 239, 227, 0.46);
}

.sb-lf-da-compare-col-right li {
	color: var(--sb-da-ivory);
}

.sb-lf-da-compare-icon {
	flex: none;
	font-style: normal;
	font-size: 12px;
	line-height: 1.6;
}

.sb-lf-da-compare-col-left .sb-lf-da-compare-icon {
	color: rgba(244, 239, 227, 0.4);
}

.sb-lf-da-compare-col-right .sb-lf-da-compare-icon {
	color: var(--sb-da-brass);
}

/* --- Closing statement --------------------------------------------------- */

.sb-lf-da-closing {
	max-width: 820px;
	margin: 56px auto 0;
	text-align: center;
}

.sb-lf-da-closing p {
	margin: 0 0 18px;
	color: rgba(244, 239, 227, 0.74);
	font-size: 16px;
	line-height: 1.75;
}

.sb-lf-da-closing p:last-child {
	margin-bottom: 0;
}

.sb-lf-da-closing-line {
	position: relative;
	margin-top: 34px !important;
	padding-top: 28px;
	color: var(--sb-da-ivory) !important;
	font-family: var(--sb-font-serif);
	font-size: clamp(19px, 2.1vw, 25px) !important;
	line-height: 1.45 !important;
	text-wrap: balance;
}

.sb-lf-da-closing-word {
	color: var(--sb-da-brass);
	font-weight: 800;
}

.sb-lf-da-closing-line::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 2px;
	background: var(--sb-da-brass);
}

.sb-lf-da-cta-wrap {
	text-align: center;
	margin-top: 48px;
}

.sb-lf-da-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 34px;
	background: var(--sb-da-brass);
	color: #12261d;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	border-radius: 6px;
	transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.sb-lf-da-btn:hover {
	background: var(--sb-da-ivory);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -10px rgba(216, 178, 92, 0.45);
}

@media (max-width: 860px) {
	.sb-lf-da-compare {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* Rotated to a horizontal rule once the columns sit one above the other. */
	.sb-lf-da-compare-vs {
		flex-direction: row;
		padding: 18px 0;
	}

	.sb-lf-da-compare-vs::before,
	.sb-lf-da-compare-vs::after {
		width: auto;
		height: 1px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sb-lf-da-card {
		transition: background 0.3s ease, border-color 0.3s ease;
	}

	.sb-lf-da-card:hover {
		transform: none;
	}

	.sb-lf-da-compare-col {
		transition: none;
	}

	.sb-lf-da-compare-col:hover {
		transform: none;
		scale: 1;
	}
}

/* =====================================================================
   3. FAQS
   ===================================================================== */

.sb-lf-faq {
	background: #f6f5f1;
}

.sb-lf-faq-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 96px 48px;
}

/* `minmax(0, …)` rather than a bare `1.5fr 1fr`. A bare `fr` is shorthand
   for `minmax(auto, 1fr)`, and that `auto` minimum refuses to shrink a track
   below its content's min-content width. The FAQ questions are long, and
   sit in a flex row that would not wrap them (see .sb-lf-faq-question below),
   so on a phone the single stacked track resolved to ~674px inside a ~389px
   container and the whole accordion hung off the right-hand edge.
   
   That overflow is what the About page's container-level `overflow: hidden`
   was covering up: it stopped the page scrolling sideways, but it did so by
   slicing the ends off every question and answer. */
.sb-lf-faq-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.sb-lf-faq-eyebrow {
	color: #b6912c;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.sb-lf-faq-heading {
	margin: 0 0 16px;
	color: #0a1730;
	font-family: var(--sb-font-serif);
	font-weight: 700;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.2;
}

.sb-lf-faq-description {
	margin: 0 0 32px;
	color: #5a6070;
	font-size: 15.5px;
	line-height: 1.7;
	max-width: 520px;
}

.sb-lf-faq-accordion {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sb-lf-faq-item {
	background: #ffffff;
	border-left: 3px solid transparent;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(10, 23, 48, 0.05);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.sb-lf-faq-item.is-open {
	border-left-color: #c9a227;
	box-shadow: 0 14px 30px -14px rgba(10, 23, 48, 0.2);
}

/* The label and the +/- toggle are flex siblings. A flex item defaults to
   `min-width: auto`, which means "never shrink below min-content" — and for
   a <button>, whose UA styling suppresses wrapping, min-content is the whole
   question on one line. That is what made the track above blow out. The
   `min-width: 0` and wrapping rules on the label child are the actual fix;
   the grid's minmax() is the belt to this braces. */
.sb-lf-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-width: 0;
	white-space: normal;
	padding: 20px 22px;
	background-color: transparent !important;
	background-image: none !important;
	border: none;
	outline: none;
	color: #0a1730;
	font-weight: 700;
	font-size: 15.5px;
	text-align: left;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* Explicit hover/focus/open backgrounds — some host themes apply their own
   button:hover / button:focus background (often an accent color unrelated
   to this widget's branding), which would otherwise win because this rule
   only set text color before. `!important` here keeps this control panel's
   colors authoritative regardless of theme button defaults. */
.sb-lf-faq-question:hover,
.sb-lf-faq-question:focus-visible {
	background-color: rgba(201, 162, 39, 0.08) !important;
	color: #b6912c;
}

.sb-lf-faq-item.is-open .sb-lf-faq-question {
	background-color: rgba(201, 162, 39, 0.06) !important;
}

/* The question label — the button's first child, which carries no class. */
.sb-lf-faq-question > span:first-child {
	min-width: 0;
	flex: 1 1 auto;
	white-space: normal;
	overflow-wrap: anywhere;
}

.sb-lf-faq-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 22px;
	height: 22px;
	color: #c9a227;
}

.sb-lf-faq-toggle-line {
	position: absolute;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.sb-lf-faq-toggle-h {
	width: 14px;
	height: 2px;
}

.sb-lf-faq-toggle-v {
	width: 2px;
	height: 14px;
}

.sb-lf-faq-item.is-open .sb-lf-faq-toggle-v {
	transform: rotate(90deg);
	opacity: 0;
}

/* Grid-rows trick animates to the answer's natural height without any JS
   height measurement — 0fr collapses it, 1fr expands to content size. */
.sb-lf-faq-answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.sb-lf-faq-item.is-open .sb-lf-faq-answer-wrap {
	grid-template-rows: 1fr;
}

.sb-lf-faq-answer-inner {
	overflow: hidden;
}

.sb-lf-faq-answer {
	margin: 0;
	padding: 0 22px 20px;
	color: #5a6070;
	font-size: 14.5px;
	line-height: 1.7;
}

/* Side contact box */
.sb-lf-faq-cta {
	position: sticky;
	top: 32px;
	padding: 40px 32px;
	background-color: #0a1730;
	background-image: var(--sb-weave);
	border-radius: 14px;
	text-align: left;
	box-shadow: 0 24px 50px -20px rgba(10, 23, 48, 0.35);
}

/* White, not gold: this disc sits on the navy card and the icon was rendering
   as a near-black silhouette against it. See also the `fill: currentColor`
   rule below — Elementor's icon SVGs carry no fill of their own. */
.sb-lf-faq-cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	font-size: 20px;
	margin-bottom: 20px;
}

.sb-lf-faq-cta-heading {
	color: #ffffff;
	font-weight: 700;
	font-size: 19px;
	margin-bottom: 10px;
}

.sb-lf-faq-cta-text {
	margin: 0 0 24px;
	color: rgba(255, 255, 255, 0.65);
	font-size: 14.5px;
	line-height: 1.6;
}

.sb-lf-faq-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	background: #c9a227;
	color: #0a1730;
	font-weight: 700;
	font-size: 13.5px;
	border-radius: 6px;
	transition: background 0.3s ease, transform 0.3s ease;
}

.sb-lf-faq-cta-btn:hover {
	background: #ffffff;
	transform: translateY(-3px);
}

/* =====================================================================
   4. VIDEO SHOWCASE
   ===================================================================== */

.sb-lf-vs {
	background-color: #0a1730;
	background-image: var(--sb-weave);
	overflow: hidden;
}

.sb-lf-vs-inner {
	max-width: 1480px;
	margin: 0 auto;
	padding: 96px 48px;
}

.sb-lf-vs-header {
	max-width: 820px;
	margin: 0 auto 56px;
	text-align: center;
}

.sb-lf-vs-eyebrow {
	color: #c9a227;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 14px;
}

.sb-lf-vs-heading {
	color: #ffffff;
	font-family: var(--sb-font-serif);
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1.25;
	margin: 0 0 22px;
}

.sb-lf-vs-intro {
	color: rgba(255, 255, 255, 0.72);
	font-size: 16px;
	line-height: 1.75;
	margin: 0 0 16px;
}

/* The closing sentence of the introduction, set up a size and lightened so it
   carries more weight than the paragraphs above it without becoming a heading. */
.sb-lf-vs-emphasis {
	position: relative;
	color: #ffffff;
	font-family: var(--sb-font-serif);
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.55;
	margin: 30px auto 0;
	max-width: 700px;
	padding-top: 26px;
}

.sb-lf-vs-emphasis::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 2px;
	background: #c9a227;
}

.sb-lf-vs-consultancy {
	color: rgba(255, 255, 255, 0.58);
	font-size: 14.5px;
	line-height: 1.7;
	margin: 26px auto 0;
	max-width: 760px;
}

/* --- Feature photograph -------------------------------------------------- */

.sb-lf-vs-feature {
	margin: 0 auto 64px;
	max-width: 1020px;
}

.sb-lf-vs-feature-frame {
	position: relative;
	height: 460px;
	border-radius: 14px;
	overflow: hidden;
	background: #06101f;
}

.sb-lf-vs-feature-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.sb-lf-vs-feature figcaption {
	margin-top: 14px;
	text-align: center;
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	letter-spacing: 0.01em;
	font-style: italic;
}

/* --- Recording cards ----------------------------------------------------- */

/* Widened past the text column. With the feature photograph removed the
   recordings are what this band is for, and three cards inside the 1184px
   prose measure would have been small enough to read as footnotes. */
.sb-lf-vs-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	align-items: start;
	width: min(1400px, 100%);
	margin-inline: auto;
}

.sb-lf-vs-cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.sb-lf-vs-cols-1 {
	grid-template-columns: minmax(0, 720px);
	justify-content: center;
}

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

.sb-lf-vs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.09);
	/* 300ms, per the brief. Deliberately only translate + shadow + border on the
	   card itself; the image and play button run their own transitions below. */
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.sb-lf-vs-card:hover,
.sb-lf-vs-card:focus-within {
	transform: translateY(-4px);
	border-color: rgba(201, 162, 39, 0.4);
	box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.75);
}

.sb-lf-vs-card-media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	margin: 0;
	border: 0;
	/* The letterbox behind the still. These recordings are not all 16:9 and the
	   frame is shown whole (see below), so the gap has to be a deliberate
	   colour rather than whatever happens to be behind the card. */
	background: #06101f;
	cursor: pointer;
	overflow: hidden;
}

/* `contain`, NOT `cover`. Each recording burns its title and the Law Friends
   Society mark into the frame, along the very bottom and the top corner —
   cropping to fill the card is what cut those off. */
.sb-lf-vs-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	/* !important because Elementor's frontend reset sets `img { height: auto }`
	   and it was winning here — the image then sized itself from its own
	   intrinsic ratio, overflowed the 16:9 frame and got clipped by the
	   `overflow: hidden` on it, which put the crop straight back. The image has
	   to be exactly the frame for `contain` to have anything to letterbox
	   against. */
	height: 100% !important;
	object-fit: contain;
	object-position: center;
	display: block;
	transition: transform 0.3s ease;
}

.sb-lf-vs-card:hover .sb-lf-vs-card-img,
.sb-lf-vs-card:focus-within .sb-lf-vs-card-img {
	transform: scale(1.025);
}

.sb-lf-vs-card-veil {
	position: absolute;
	inset: 0;
	background: rgba(10, 23, 48, 0.34);
	transition: background 0.3s ease;
	pointer-events: none;
}

.sb-lf-vs-card:hover .sb-lf-vs-card-veil,
.sb-lf-vs-card:focus-within .sb-lf-vs-card-veil {
	background: rgba(10, 23, 48, 0.16);
}

.sb-lf-vs-card-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: #c9a227;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	pointer-events: none;
}

.sb-lf-vs-card:hover .sb-lf-vs-card-play,
.sb-lf-vs-card:focus-within .sb-lf-vs-card-play {
	transform: translate(-50%, -50%) scale(1.12);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 10px rgba(201, 162, 39, 0.16);
}

.sb-lf-vs-card-play svg {
	width: 38%;
	height: 38%;
	fill: #0a1730;
	margin-left: 4px;
}

.sb-lf-vs-card-body {
	padding: 22px 26px 28px;
	text-align: left;
}

/* Series / CPD / running time. Kept off the still itself — see render_cards(). */
.sb-lf-vs-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.sb-lf-vs-card-series {
	color: #c9a227;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sb-lf-vs-card-cpd {
	color: #0a1730;
	background: #c9a227;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 3px;
	white-space: nowrap;
}

.sb-lf-vs-card-duration {
	margin-left: auto;
	color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sb-lf-vs-card-title {
	margin: 0 0 12px;
	color: #ffffff;
	font-family: var(--sb-font-serif);
	font-size: 20px;
	line-height: 1.35;
	font-weight: 700;
}

/* Underline drawn on the inner span so it tracks the words, and animated from
   the left rather than simply appearing. */
.sb-lf-vs-card-title span {
	background-image: linear-gradient(#c9a227, #c9a227);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1.5px;
	padding-bottom: 3px;
	transition: background-size 0.3s ease;
}

.sb-lf-vs-card:hover .sb-lf-vs-card-title span,
.sb-lf-vs-card:focus-within .sb-lf-vs-card-title span {
	background-size: 100% 1.5px;
}

.sb-lf-vs-card-desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.66);
	font-size: 14.5px;
	line-height: 1.65;
}

.sb-lf-vs-cta-wrap {
	text-align: center;
	margin-top: 56px;
}

.sb-lf-vs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #c9a227;
	color: #0a1730;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 16px 36px;
	border-radius: 2px;
	transition: background 0.3s ease, transform 0.3s ease;
}

.sb-lf-vs-btn:hover {
	background: #ffffff;
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.sb-lf-vs-card,
	.sb-lf-vs-card-img,
	.sb-lf-vs-card-play,
	.sb-lf-vs-card-title span {
		transition: none;
	}

	.sb-lf-vs-card:hover,
	.sb-lf-vs-card:focus-within {
		transform: none;
	}

	.sb-lf-vs-card:hover .sb-lf-vs-card-img,
	.sb-lf-vs-card:focus-within .sb-lf-vs-card-img {
		transform: none;
	}
}

/* --- Video lightbox: single reusable instance per widget, filled in on
   click by JS (initVideoLightbox in law-firm-about.js) --- */
.sb-lf-video-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.sb-lf-video-lightbox.is-open {
	display: flex;
}

.sb-lf-video-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 10, 20, 0.88);
}

.sb-lf-video-lightbox-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 960px;
}

.sb-lf-video-lightbox-media {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	background: #000;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.sb-lf-video-lightbox-media iframe,
.sb-lf-video-lightbox-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sb-lf-video-lightbox-close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.sb-lf-video-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.24);
}

body.sb-lf-video-lightbox-open {
	overflow: hidden;
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 992px) {
	.sb-lf-wm-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.sb-lf-wm-image-pos-right .sb-lf-wm-image-col {
		order: 0;
	}

	.sb-lf-wm-image-col:not(.is-stacked) .sb-lf-wm-image-frame {
		max-width: 420px;
		margin: 0 auto;
	}

	/* Single column, so there is no biography height to match. The carousel is
	   sized off the viewport width instead, chosen so the large middle frame
	   lands around 62% of the screen — the same proportions as the desktop
	   arrangement rather than three tiny frames. */
	.sb-lf-wm-image-col.is-stacked {
		min-height: 0;
		height: 182vw;
		max-height: 820px;
	}

	.sb-lf-wm-badge {
		left: 6%;
	}

	.sb-lf-wm-image-col.is-stacked .sb-lf-wm-badge {
		left: 2%;
		bottom: 26%;
	}

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

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

	.sb-lf-faq-cta {
		position: static;
	}

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

@media (max-width: 1180px) {
	.sb-lf-vs-cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* The recording cards carry a letterboxed still plus a title and a paragraph,
   so two abreast stop being "large cards" well before the usual tablet
   breakpoint. They stack early and stay stacked. */
@media (max-width: 900px) {
	.sb-lf-vs-grid,
	.sb-lf-vs-cols-1,
	.sb-lf-vs-cols-2,
	.sb-lf-vs-cols-3,
	.sb-lf-vs-cols-4 {
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
	}

	.sb-lf-vs-feature-frame {
		height: 340px;
	}
}

@media (max-width: 640px) {
	.sb-lf-wm-inner,
	.sb-lf-da-inner,
	.sb-lf-faq-inner,
	.sb-lf-vs-inner {
		padding: 64px 24px;
	}

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

	.sb-lf-wm-badge {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

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

	.sb-lf-vs-card-body {
		padding: 20px 20px 24px;
	}

	.sb-lf-vs-feature-frame {
		height: 260px;
	}
}

/* --- Multi-paragraph biography ----------------------------------------- */
.sb-lf-wm-description p {
	margin: 0 0 16px;
}

.sb-lf-wm-description p:last-child {
	margin-bottom: 0;
}

/* Personal involvement. This is the promise the whole section is making, and
   at body size and body colour it read as another paragraph and got lost. It
   is now the serif face, a size up, near-black navy and semibold, against a
   stronger gold rule and tint. */
.sb-lf-wm-involvement {
	position: relative;
	margin: 32px 0 0;
	padding: 26px 30px 26px 32px;
	border-left: 5px solid var(--sb-wm-accent, #b6912c);
	background: linear-gradient(90deg, rgba(182, 145, 44, 0.14), rgba(182, 145, 44, 0.05));
	border-radius: 0 8px 8px 0;
	font-family: var(--sb-font-serif);
	font-size: clamp(17px, 1.85vw, 21px);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.002em;
	color: #10233c;
	text-wrap: pretty;
}

/* --- Advocacy philosophy ------------------------------------------------ */
.sb-lf-wm-philosophy {
	margin: 38px 0 32px;
	padding: 6px 0 6px 26px;
	border-left: 2px solid var(--sb-wm-accent, #b6912c);
}

.sb-lf-wm-philosophy-lead,
.sb-lf-wm-philosophy-sub {
	display: block;
	font-family: var(--sb-font-serif);
	color: #10233c;
	text-wrap: balance;
}

.sb-lf-wm-philosophy-lead {
	font-size: clamp(20px, 2.3vw, 28px);
	line-height: 1.4;
}

.sb-lf-wm-philosophy-sub {
	margin-top: 16px;
	font-size: clamp(16px, 1.7vw, 20px);
	line-height: 1.5;
	color: #3d4756;
}

.sb-lf-wm-philosophy-mark {
	color: var(--sb-wm-accent, #b6912c);
}

@media (max-width: 768px) {
	.sb-lf-wm-philosophy {
		margin: 30px 0 26px;
		padding-left: 18px;
	}

	.sb-lf-wm-involvement {
		padding: 20px 20px 20px 22px;
		border-left-width: 4px;
		font-size: 17px;
	}
}

/* Elementor renders icon-control values as <svg class="e-font-icon-svg"> with
   no fill of its own, so they fell back to black. Inherit the gold the
   surrounding control sets. */
.sb-lf-wm-reason-icon svg,
.sb-lf-wm-badge-icon svg {
	fill: currentColor;
	width: 1em;
	height: 1em;
}