/**
 * LawyerUp component styles.
 *
 * The custom properties below are transcribed from the Figma build's own token layer
 * (index.css @layer theme) so the WordPress components match the design exactly.
 */

:root {
	--lu-brand-50: #eef4ff;
	--lu-brand-100: #dbe6ff;
	--lu-brand-200: #bcd0ff;
	--lu-brand-300: #8eb0ff;
	--lu-brand-400: #5985ff;
	--lu-brand-500: #2f63f6;
	--lu-brand-600: #2563eb;
	--lu-brand-700: #1d4ed8;
	--lu-brand-900: #1e3a8a;
	--lu-brand-950: #172554;
	--lu-accent-300: #fcd34d;
	--lu-accent-400: #fbbf24;
	--lu-accent-500: #f5b301;
	--lu-accent-600: #f59e0b;
	--lu-sun-500: #f97316;
	--lu-ink-950: #0b1220;
	--lu-ink-900: #0f172a;
	--lu-ink-700: #334155;
	--lu-ink-500: #64748b;
	--lu-ink-400: #94a3b8;
	--lu-ink-300: #cbd5e1;
	--lu-ink-200: #e2e8f0;
	--lu-ink-100: #eef2f9;
	--lu-mist: #f6f9ff;
	--lu-cloud: #fff;
	--lu-border: var(--lu-ink-200);

	--lu-radius-sm: 0.5rem;
	--lu-radius-md: 0.875rem;
	--lu-radius-lg: 1.25rem;
	--lu-radius-xl: 1.75rem;
	--lu-radius-pill: 999px;

	--lu-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
	--lu-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
	--lu-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
	--lu-shadow-lg: 0 24px 60px rgba(30, 58, 138, 0.14);
}

/* ---------------------------------------------------------------- Find an Attorney
   Transcribed from the Figma FindAttorney.tsx: a white card (radius-xl, 12px padding,
   shadow-lg, 1px brand-100 ring) holding two 40px-chip fields either side of a hairline
   divider, then the brand-blue submit. */

.lu-search { width: 100% !important; }

.lu-search__eyebrow {
	margin: 0 0 8px !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--lu-brand-600) !important;
}

.lu-search__heading {
	margin: 0 0 8px !important;
	font-size: 2rem !important;
	line-height: 1.15 !important;
	color: var(--lu-ink-900) !important;
}

.lu-search__text {
	margin: 0 0 24px !important;
	color: var(--lu-ink-500) !important;
}

/* --- the card ------------------------------------------------------------- */

.lu-search__shell {
	background: var(--lu-cloud) !important;
	border-radius: var(--lu-radius-xl) !important;
	padding: 12px !important;
	box-shadow: var(--lu-shadow-lg) !important;
	outline: 1px solid rgba(219, 230, 255, 0.7) !important;
	outline-offset: -1px !important;
}

.lu-search--bar .lu-search__shell,
.lu-search--vertical .lu-search__shell {
	border-radius: var(--lu-radius-lg) !important;
	padding: 8px !important;
	box-shadow: var(--lu-shadow-md) !important;
	outline-color: var(--lu-border) !important;
}

.lu-search__row {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

@media (min-width: 1024px) {
	.lu-search--hero .lu-search__row { flex-direction: row !important; align-items: stretch !important; }
}

@media (min-width: 768px) {
	.lu-search--bar .lu-search__row { flex-direction: row !important; align-items: stretch !important; }
}

.lu-search--vertical .lu-search__row { flex-direction: column !important; }

/* --- a field -------------------------------------------------------------- */

.lu-field {
	position: relative !important;
	display: flex !important;
	flex: 1 1 0 !important;
	min-width: 0 !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px 16px !important;
	border-radius: var(--lu-radius-md) !important;
	cursor: pointer !important;
	transition: background 0.15s ease !important;
}

.lu-field:hover { background: var(--lu-mist) !important; }

.lu-field__chip {
	display: grid !important;
	place-items: center !important;
	width: 40px !important;
	height: 40px !important;
	flex: 0 0 40px !important;
	border-radius: 50% !important;
}

.lu-field__chip--brand { background: var(--lu-brand-50) !important; color: var(--lu-brand-600) !important; }
.lu-field__chip--accent { background: rgba(245, 179, 1, 0.15) !important; color: var(--lu-accent-600) !important; }

.lu-field__chip .lu-icon { width: 20px !important; height: 20px !important; }

.lu-field__body {
	display: block !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
}

.lu-field__label {
	display: block !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.025em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
	color: var(--lu-ink-400) !important;
}

.lu-field__control {
	position: relative !important;
	display: block !important;
}

.lu-field__select,
.lu-field__input {
	width: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	color: var(--lu-ink-900) !important;
	appearance: none !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	overflow: hidden !important;
}

.lu-field__select { padding-right: 24px !important; cursor: pointer !important; }

.lu-field__select:focus-visible,
.lu-field__input:focus-visible {
	outline: 2px solid var(--lu-brand-500) !important;
	outline-offset: 3px !important;
	border-radius: 4px !important;
}

.lu-field__input::placeholder {
	font-weight: 500 !important;
	color: var(--lu-ink-400) !important;
}

.lu-field__caret {
	position: absolute !important;
	right: 0 !important;
	top: 50% !important;
	width: 16px !important;
	height: 16px !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
	color: var(--lu-ink-400) !important;
	transition: transform 0.15s ease !important;
}

.lu-field:hover .lu-field__caret { transform: translateY(-60%) !important; }

/* --- divider -------------------------------------------------------------- */

.lu-search__divider {
	display: none !important;
	width: 1px !important;
	align-self: stretch !important;
	background: var(--lu-border) !important;
}

@media (min-width: 768px) {
	.lu-search--hero .lu-search__divider,
	.lu-search--bar .lu-search__divider { display: block !important; }
}

.lu-search--vertical .lu-search__divider {
	display: block !important;
	width: 100% !important;
	height: 1px !important;
}

/* --- submit --------------------------------------------------------------- */

.lu-search__submit {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 16px 32px !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: var(--lu-brand-600) !important;
	border: 0 !important;
	border-radius: var(--lu-radius-md) !important;
	cursor: pointer !important;
	transition: background 0.15s ease, transform 0.1s ease !important;
}

.lu-search__submit .lu-icon { width: 20px !important; height: 20px !important; }
.lu-search__submit:hover { background: var(--lu-brand-700) !important; }
.lu-search__submit:active { transform: scale(0.98) !important; }

.lu-search--vertical .lu-search__submit { width: 100% !important; }

/* --- city suggestions ----------------------------------------------------- */

.lu-suggest {
	position: absolute !important;
	z-index: 30 !important;
	top: calc(100% + 8px) !important;
	left: 0 !important;
	right: 0 !important;
	max-height: 18rem !important;
	overflow-y: auto !important;
	padding: 4px !important;
	background: var(--lu-cloud) !important;
	border-radius: var(--lu-radius-md) !important;
	box-shadow: var(--lu-shadow-lg) !important;
	outline: 1px solid var(--lu-border) !important;
	outline-offset: -1px !important;
}

.lu-suggest__item {
	display: flex !important;
	width: 100% !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	padding: 8px 12px !important;
	text-align: left !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	background: none !important;
	border: 0 !important;
	border-radius: var(--lu-radius-sm) !important;
	cursor: pointer !important;
}

.lu-suggest__item:hover,
.lu-suggest__item.is-active { background: var(--lu-mist) !important; }

.lu-suggest__item--any {
	justify-content: flex-start !important;
	font-weight: 500 !important;
	color: var(--lu-ink-500) !important;
}

.lu-suggest__city {
	font-weight: 600 !important;
	color: var(--lu-ink-900) !important;
}

.lu-suggest__count {
	font-size: 0.75rem !important;
	color: var(--lu-ink-400) !important;
	white-space: nowrap !important;
	font-variant-numeric: tabular-nums !important;
}

.lu-suggest__empty {
	margin: 0 !important;
	padding: 12px !important;
	font-size: 0.875rem !important;
	color: var(--lu-ink-400) !important;
}

.lu-search__error {
	margin: 10px 2px 0 !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: var(--lu-sun-500) !important;
}

/* ------------------------------------------------------------------ Attorney card
   Figma Cards.tsx: a 1:1 photo with a floating rating pill, then practice eyebrow,
   name, firm, an icon meta row, and a full-width outlined View Profile control.
   The whole card is one link. */

.lu-grid {
	display: grid !important;
	gap: 24px !important;
	grid-template-columns: repeat(var(--lu-cols, 4), minmax(0, 1fr)) !important;
	grid-auto-rows: auto !important;
}

.lu-grid--2 { --lu-cols: 2; }
.lu-grid--3 { --lu-cols: 3; }
.lu-grid--4 { --lu-cols: 4; }
.lu-grid--5 { --lu-cols: 5; }

@media (max-width: 1024px) {
	.lu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px) {
	.lu-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

.lu-card {
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	text-decoration: none !important;
	color: inherit !important;
	background: var(--lu-cloud) !important;
	border-radius: var(--lu-radius-lg) !important;
	box-shadow: var(--lu-shadow-sm) !important;
	outline: 1px solid var(--lu-border) !important;
	outline-offset: -1px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.lu-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: var(--lu-shadow-lg) !important;
}

.lu-card:focus-visible {
	outline: 2px solid var(--lu-brand-600) !important;
	outline-offset: 2px !important;
}

.lu-card__media {
	position: relative !important;
	display: block !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
	background: var(--lu-brand-100) !important;
}

.lu-card__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: top center !important;
	display: block !important;
	transition: transform 0.5s ease !important;
}

.lu-card:hover .lu-card__media img { transform: scale(1.05) !important; }

.lu-card__rating {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 6px 12px !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	color: var(--lu-ink-900) !important;
	background: rgba(255, 255, 255, 0.95) !important;
	border-radius: var(--lu-radius-pill) !important;
	box-shadow: var(--lu-shadow-xs) !important;
}

.lu-card__rating svg {
	width: 14px !important;
	height: 14px !important;
	fill: var(--lu-accent-500) !important;
}

.lu-card__rating span {
	font-weight: 500 !important;
	color: var(--lu-ink-400) !important;
}

.lu-card__body {
	display: flex !important;
	flex: 1 !important;
	flex-direction: column !important;
	padding: 24px !important;
}

.lu-card__eyebrow {
	display: block !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
	color: var(--lu-brand-600) !important;
}

.lu-card__name {
	display: block !important;
	margin-top: 4px !important;
	font-size: 1.25rem !important;
	line-height: 1.25 !important;
	font-weight: 800 !important;
	color: var(--lu-ink-900) !important;
}

.lu-card:hover .lu-card__name { color: var(--lu-brand-700) !important; }

.lu-card__firm {
	display: block !important;
	margin-top: 4px !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	color: var(--lu-ink-500) !important;
}

.lu-card__meta {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 16px !important;
	margin-top: 12px !important;
	font-size: 0.875rem !important;
	color: var(--lu-ink-500) !important;
}

.lu-card__fact {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
}

.lu-card__fact .lu-icon { width: 16px !important; height: 16px !important; }
.lu-icon--pin { color: var(--lu-accent-600) !important; }
.lu-icon--bar { color: var(--lu-brand-600) !important; }

.lu-card__cta {
	display: inline-flex !important;
	width: 100% !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	margin-top: auto !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	margin-block-start: 20px !important;
	font-weight: 700 !important;
	color: var(--lu-brand-600) !important;
	border: 2px solid var(--lu-brand-600) !important;
	border-radius: var(--lu-radius-md) !important;
	transition: background 0.15s ease, color 0.15s ease !important;
}

.lu-card__cta .lu-icon {
	width: 16px !important;
	height: 16px !important;
	transition: transform 0.15s ease !important;
}

.lu-card:hover .lu-card__cta {
	background: var(--lu-brand-600) !important;
	color: #fff !important;
}

.lu-card:hover .lu-card__cta .lu-icon { transform: translateX(4px) !important; }

.lu-grid__more {
	margin: 32px 0 0 !important;
	text-align: center !important;
}

/* ------------------------------------------------------------- Compact row card */

.lu-mini {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 16px !important;
	text-decoration: none !important;
	color: inherit !important;
	background: var(--lu-cloud) !important;
	border-radius: var(--lu-radius-xl) !important;
	outline: 1px solid var(--lu-border) !important;
	outline-offset: -1px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.lu-mini:hover {
	transform: translateY(-2px) !important;
	box-shadow: var(--lu-shadow-md) !important;
}

.lu-mini__media {
	width: 64px !important;
	height: 64px !important;
	flex: 0 0 64px !important;
	overflow: hidden !important;
	border-radius: var(--lu-radius-lg) !important;
	background: var(--lu-brand-100) !important;
}

.lu-mini__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: top center !important;
	display: block !important;
}

.lu-mini__body { min-width: 0 !important; }

.lu-mini__name {
	display: block !important;
	font-weight: 700 !important;
	color: var(--lu-ink-900) !important;
}

.lu-mini:hover .lu-mini__name { color: var(--lu-brand-700) !important; }

.lu-mini__firm {
	display: block !important;
	font-size: 0.75rem !important;
	color: var(--lu-ink-500) !important;
}

/* ------------------------------------------------------------------ Star rating */

.lu-stars {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: var(--lu-ink-700) !important;
}

.lu-stars__star {
	width: 16px !important;
	height: 16px !important;
	fill: var(--lu-ink-200) !important;
	flex: 0 0 16px !important;
}

.lu-stars__star.is-on { fill: var(--lu-accent-500) !important; }
.lu-stars__star + .lu-stars__star { margin-left: -2px !important; }
.lu-stars__score { margin-left: 4px !important; }

.lu-stars__count {
	font-weight: 400 !important;
	color: var(--lu-ink-400) !important;
}

/* ------------------------------------------------------------------------- Tiles */

.lu-tile {
	display: flex !important;
	flex-direction: column !important;
	padding: 28px !important;
	text-decoration: none !important;
	background: var(--lu-cloud) !important;
	border: 1px solid var(--lu-border) !important;
	border-radius: var(--lu-radius-lg) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.lu-tile:hover {
	border-color: var(--lu-brand-300) !important;
	box-shadow: var(--lu-shadow-md) !important;
	transform: translateY(-2px) !important;
}

.lu-tile__title {
	margin: 0 0 8px !important;
	font-size: 1.25rem !important;
	line-height: 1.25 !important;
	font-weight: 800 !important;
	color: var(--lu-ink-900) !important;
}

.lu-tile__text {
	margin: 0 0 20px !important;
	color: var(--lu-ink-500) !important;
	font-size: 0.95rem !important;
	line-height: 1.6 !important;
}

.lu-tile__cta {
	margin-top: auto !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	color: var(--lu-brand-600) !important;
}

.lu-tile:hover .lu-tile__cta {
	color: var(--lu-brand-700) !important;
}

/* --------------------------------------------------------------------- Locations */

.lu-locations {
	display: grid !important;
	gap: 16px !important;
	grid-template-columns: repeat(var(--lu-cols, 5), minmax(0, 1fr)) !important;
}

.lu-locations--3 { --lu-cols: 3; }
.lu-locations--4 { --lu-cols: 4; }
.lu-locations--5 { --lu-cols: 5; }

@media (max-width: 1024px) {
	.lu-locations { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px) {
	.lu-locations { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

.lu-loc {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	padding: 18px 20px !important;
	text-decoration: none !important;
	background: var(--lu-cloud) !important;
	border: 1px solid var(--lu-border) !important;
	border-radius: var(--lu-radius-md) !important;
	transition: border-color 0.2s ease, background 0.2s ease !important;
}

.lu-loc:hover {
	background: var(--lu-brand-50) !important;
	border-color: var(--lu-brand-300) !important;
}

.lu-loc__city {
	font-weight: 700 !important;
	color: var(--lu-ink-900) !important;
}

.lu-loc__state {
	font-size: 0.8rem !important;
	color: var(--lu-ink-400) !important;
}

.lu-loc__count {
	margin-top: 8px !important;
	font-size: 0.8rem !important;
	color: var(--lu-ink-500) !important;
}

.lu-loc__count strong {
	color: var(--lu-brand-600) !important;
}

/* ------------------------------------------------------------- Attorney profile
   Figma AttorneyProfile.tsx: a 320px sidebar (photo, brand-blue consultation card,
   At a Glance icon list) beside the main column. */

.lu-profile {
	display: grid !important;
	gap: 64px !important;
	grid-template-columns: 320px minmax(0, 1fr) !important;
	align-items: start !important;
}

@media (max-width: 1024px) {
	.lu-profile { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
}

/* The design's sidebar is a plain flex column — its section is overflow:hidden for
   the wash blob, which would break a sticky child anyway. */
.lu-profile__aside {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
}

.lu-profile__photo {
	overflow: hidden !important;
	border-radius: var(--lu-radius-xl) !important;
	background: var(--lu-brand-100) !important;
	box-shadow: var(--lu-shadow-lg) !important;
}

.lu-profile__photo img {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 4 / 5 !important;
	object-fit: cover !important;
	object-position: top center !important;
}

/* --- free consultation card ---------------------------------------------- */

.lu-consult {
	padding: 32px !important;
	border-radius: var(--lu-radius-xl) !important;
	background: var(--lu-brand-600) !important;
	color: #fff !important;
	box-shadow: var(--lu-shadow-lg) !important;
}

.lu-consult__eyebrow {
	margin: 0 !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--lu-brand-200) !important;
}

.lu-consult__title {
	margin: 8px 0 0 !important;
	font-size: 1.25rem !important;
	line-height: 1.25 !important;
	font-weight: 800 !important;
	color: #fff !important;
}

.lu-consult__phone {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	margin-top: 16px !important;
	padding: 12px 24px !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	color: var(--lu-brand-700) !important;
	background: #fff !important;
	border-radius: var(--lu-radius-pill) !important;
	box-shadow: var(--lu-shadow-sm) !important;
	transition: background 0.15s ease !important;
}

.lu-consult__phone:hover { background: var(--lu-brand-50) !important; color: var(--lu-brand-700) !important; }
.lu-consult__phone .lu-icon { width: 16px !important; height: 16px !important; }

.lu-consult__cta {
	display: block !important;
	margin-top: 12px !important;
	padding: 12px 24px !important;
	text-align: center !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	color: var(--lu-ink-900) !important;
	background: var(--lu-accent-400) !important;
	border-radius: var(--lu-radius-pill) !important;
	box-shadow: var(--lu-shadow-sm) !important;
	transition: background 0.15s ease !important;
}

.lu-consult__cta:hover { background: var(--lu-accent-300) !important; color: var(--lu-ink-900) !important; }

/* --- at a glance ---------------------------------------------------------- */

.lu-glance-card {
	padding: 24px !important;
	border-radius: var(--lu-radius-xl) !important;
	background: var(--lu-cloud) !important;
	outline: 1px solid var(--lu-border) !important;
	outline-offset: -1px !important;
}

.lu-glance-card__eyebrow {
	margin: 0 !important;
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--lu-ink-400) !important;
}

.lu-glance {
	margin: 16px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.lu-glance li {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	font-size: 0.875rem !important;
	line-height: 1.45 !important;
	color: var(--lu-ink-700) !important;
}

.lu-glance .lu-icon {
	width: 16px !important;
	height: 16px !important;
	flex: 0 0 16px !important;
}

.lu-icon--brand { color: var(--lu-brand-500) !important; }
.lu-icon--accent { color: var(--lu-accent-500) !important; }

/* --- main column ---------------------------------------------------------- */

.lu-profile__main {
	display: flex !important;
	flex-direction: column !important;
	gap: 48px !important;
}

.lu-profile__meta {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 12px !important;
}

.lu-badge-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 16px !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--lu-brand-600) !important;
	background: var(--lu-brand-50) !important;
	border-radius: var(--lu-radius-pill) !important;
	outline: 1px solid var(--lu-brand-100) !important;
	outline-offset: -1px !important;
}

.lu-badge-pill .lu-icon { width: 16px !important; height: 16px !important; }

.lu-profile__name {
	margin: 0 !important;
	font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.025em !important;
	font-weight: 800 !important;
	color: var(--lu-ink-900) !important;
}

.lu-profile__firm {
	margin: 0 !important;
	font-size: 1.125rem !important;
	font-weight: 600 !important;
	color: var(--lu-ink-500) !important;
}

.lu-profile__block {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.lu-profile__h2 {
	margin: 0 !important;
	font-size: 1.25rem !important;
	line-height: 1.25 !important;
	font-weight: 800 !important;
	color: var(--lu-ink-900) !important;
}

.lu-bio p {
	margin: 0 0 14px !important;
	line-height: 1.65 !important;
	color: var(--lu-ink-700) !important;
}

.lu-bio p:last-child { margin-bottom: 0 !important; }

.lu-list {
	margin: 0 !important;
	padding-left: 1.15rem !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	color: var(--lu-ink-700) !important;
	line-height: 1.6 !important;
}

/* --- serves --------------------------------------------------------------- */

.lu-serves {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}

.lu-serves__pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 16px !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	color: var(--lu-ink-700) !important;
	background: var(--lu-cloud) !important;
	border-radius: var(--lu-radius-pill) !important;
	outline: 1px solid var(--lu-border) !important;
	outline-offset: -1px !important;
	transition: background 0.15s ease, color 0.15s ease, outline-color 0.15s ease !important;
}

.lu-serves__pill:hover {
	background: var(--lu-brand-50) !important;
	color: var(--lu-brand-700) !important;
	outline-color: var(--lu-brand-200) !important;
}

.lu-serves__pill .lu-icon { width: 14px !important; height: 14px !important; }

/* --- badges --------------------------------------------------------------- */

.lu-badges {
	display: grid !important;
	gap: 16px !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 640px) {
	.lu-badges { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

.lu-badge {
	padding: 16px !important;
	background: var(--lu-cloud) !important;
	border-radius: var(--lu-radius-lg) !important;
	outline: 1px solid var(--lu-border) !important;
	outline-offset: -1px !important;
}

.lu-badge svg {
	width: 24px !important;
	height: 24px !important;
	stroke: var(--lu-brand-600) !important;
	fill: none !important;
	stroke-width: 2 !important;
}

.lu-badge__label {
	margin: 8px 0 0 !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	color: var(--lu-ink-900) !important;
}

.lu-badge__sub {
	margin: 0 !important;
	font-size: 0.75rem !important;
	color: var(--lu-ink-500) !important;
}

/* --- practice callout ------------------------------------------------------ */

.lu-callout {
	padding: 32px !important;
	background: var(--lu-brand-50) !important;
	border-radius: var(--lu-radius-xl) !important;
	outline: 1px solid var(--lu-brand-100) !important;
	outline-offset: -1px !important;
}

.lu-callout .lu-callout__eyebrow {
	margin: 0 !important;
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--lu-brand-600) !important;
}

.lu-callout p {
	margin: 8px 0 0 !important;
	color: var(--lu-ink-700) !important;
	line-height: 1.6 !important;
}

.lu-callout__link {
	display: inline-block !important;
	margin-top: 16px !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	color: var(--lu-brand-600) !important;
	text-underline-offset: 4px !important;
}

.lu-callout__link:hover { text-decoration: underline !important; }

/* --- other attorneys -------------------------------------------------------- */

.lu-minis {
	display: grid !important;
	gap: 24px !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	margin-top: 20px !important;
}

@media (max-width: 1024px) { .lu-minis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .lu-minis { grid-template-columns: minmax(0, 1fr) !important; } }

/* ------------------------------------------------------------------- Get Listed */

.lu-form {
	display: grid !important;
	gap: 20px !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 720px) {
	.lu-form { grid-template-columns: minmax(0, 1fr) !important; }
}

.lu-form__row--full {
	grid-column: 1 / -1 !important;
}

.lu-form label {
	display: block !important;
	margin-bottom: 6px !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--lu-ink-400) !important;
}

.lu-form input[type="text"],
.lu-form input[type="email"],
.lu-form input[type="tel"],
.lu-form input[type="url"],
.lu-form textarea {
	width: 100% !important;
	padding: 12px 14px !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	color: var(--lu-ink-900) !important;
	background: var(--lu-cloud) !important;
	border: 1px solid var(--lu-border) !important;
	border-radius: var(--lu-radius-md) !important;
}

.lu-form input:focus,
.lu-form textarea:focus {
	outline: none !important;
	border-color: var(--lu-brand-400) !important;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

.lu-chips {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}

.lu-chip {
	position: relative !important;
}

.lu-chip input {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.lu-chip span {
	display: inline-block !important;
	padding: 9px 16px !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	color: var(--lu-ink-700) !important;
	background: var(--lu-cloud) !important;
	border: 1px solid var(--lu-border) !important;
	border-radius: var(--lu-radius-pill) !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.lu-chip input:checked + span {
	color: #fff !important;
	background: var(--lu-brand-600) !important;
	border-color: var(--lu-brand-600) !important;
}

.lu-chip input:focus-visible + span {
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18) !important;
}

.lu-price-note {
	grid-column: 1 / -1 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 14px 18px !important;
	font-weight: 700 !important;
	color: var(--lu-ink-900) !important;
	background: rgba(245, 179, 1, 0.15) !important;
	border: 1px solid var(--lu-accent-400) !important;
	border-radius: var(--lu-radius-md) !important;
}

.lu-form__note {
	grid-column: 1 / -1 !important;
	margin: 0 !important;
	font-size: 0.85rem !important;
	color: var(--lu-ink-500) !important;
}

.lu-btn {
	display: inline-block !important;
	padding: 14px 30px !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	border: 0 !important;
	border-radius: var(--lu-radius-md) !important;
	cursor: pointer !important;
	transition: background 0.15s ease, color 0.15s ease !important;
}

.lu-btn--primary {
	color: #fff !important;
	background: var(--lu-brand-600) !important;
}

.lu-btn--primary:hover {
	background: var(--lu-brand-700) !important;
	color: #fff !important;
}

.lu-btn--accent {
	color: var(--lu-ink-950) !important;
	background: var(--lu-accent-500) !important;
}

.lu-btn--accent:hover {
	background: var(--lu-accent-600) !important;
	color: var(--lu-ink-950) !important;
}

.lu-btn--ghost {
	color: var(--lu-brand-700) !important;
	background: var(--lu-cloud) !important;
	border: 1px solid var(--lu-border) !important;
}

.lu-btn--ghost:hover {
	background: var(--lu-brand-50) !important;
	border-color: var(--lu-brand-300) !important;
}

.lu-notice {
	padding: 14px 18px !important;
	margin-bottom: 20px !important;
	border-radius: var(--lu-radius-md) !important;
	font-weight: 600 !important;
}

.lu-notice--error {
	color: #7f1d1d !important;
	background: #fef2f2 !important;
	border: 1px solid #fecaca !important;
}

.lu-notice--success {
	color: #14532d !important;
	background: #f0fdf4 !important;
	border: 1px solid #bbf7d0 !important;
}

.lu-empty {
	padding: 40px !important;
	text-align: center !important;
	color: var(--lu-ink-500) !important;
	background: var(--lu-mist) !important;
	border-radius: var(--lu-radius-lg) !important;
}

/* ------------------------------------------------------------------------- Tabs */

.lu-tabs {
	display: inline-flex !important;
	gap: 4px !important;
	padding: 4px !important;
	background: var(--lu-ink-100) !important;
	border-radius: var(--lu-radius-pill) !important;
	margin-bottom: 24px !important;
}

.lu-tabs button {
	padding: 8px 20px !important;
	font-family: inherit !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	color: var(--lu-ink-500) !important;
	background: none !important;
	border: 0 !important;
	border-radius: var(--lu-radius-pill) !important;
	cursor: pointer !important;
}

.lu-tabs button.is-active {
	color: var(--lu-brand-700) !important;
	background: var(--lu-cloud) !important;
	box-shadow: var(--lu-shadow-xs) !important;
}

/* --------------------------------------------------------------- Archive intro */

.lu-archive-intro {
	max-width: 760px !important;
}

.lu-archive-intro__eyebrow {
	margin: 0 0 10px !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.11em !important;
	text-transform: uppercase !important;
	color: var(--lu-brand-600) !important;
}

.lu-archive-intro__title {
	margin: 0 0 14px !important;
	font-size: clamp(2rem, 4.4vw, 3rem) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.02em !important;
	font-weight: 800 !important;
	color: var(--lu-ink-950) !important;
}

.lu-archive-intro__text {
	margin: 0 !important;
	max-width: 680px !important;
	font-size: 1.06rem !important;
	line-height: 1.65 !important;
	color: var(--lu-ink-500) !important;
}

.lu-archive-intro .lu-glance {
	margin-top: 20px !important;
}

.lu-archive-intro--dark .lu-archive-intro__eyebrow {
	color: var(--lu-accent-500) !important;
}

.lu-archive-intro--dark .lu-archive-intro__title {
	color: #fff !important;
}

.lu-archive-intro--dark .lu-archive-intro__text {
	color: rgba(255, 255, 255, 0.78) !important;
}

.lu-archive-intro--dark .lu-glance li {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.1) !important;
}

/* ---------------------------------------------------------------- Breadcrumbs */

.lu-breadcrumbs {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 0.85rem !important;
	color: var(--lu-ink-500) !important;
}

.lu-breadcrumbs a {
	color: var(--lu-ink-500) !important;
	text-decoration: none !important;
}

.lu-breadcrumbs a:hover {
	color: var(--lu-brand-600) !important;
}

.lu-breadcrumbs__sep {
	color: var(--lu-ink-300) !important;
}

.lu-breadcrumbs [aria-current] {
	color: var(--lu-ink-900) !important;
	font-weight: 600 !important;
}

.lu-breadcrumbs--dark,
.lu-breadcrumbs--dark a {
	color: rgba(255, 255, 255, 0.7) !important;
}

.lu-breadcrumbs--dark a:hover,
.lu-breadcrumbs--dark [aria-current] {
	color: #fff !important;
}

.lu-breadcrumbs--dark .lu-breadcrumbs__sep {
	color: rgba(255, 255, 255, 0.35) !important;
}

/* ---------------------------------------------------------------- Pagination */

.lu-pagination {
	margin-top: 40px !important;
}

.lu-pagination ul {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	justify-content: center !important;
}

.lu-pagination a,
.lu-pagination span {
	display: inline-block !important;
	min-width: 42px !important;
	padding: 9px 12px !important;
	text-align: center !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	color: var(--lu-ink-700) !important;
	background: var(--lu-cloud) !important;
	border: 1px solid var(--lu-border) !important;
	border-radius: var(--lu-radius-md) !important;
}

.lu-pagination .current {
	color: #fff !important;
	background: var(--lu-brand-600) !important;
	border-color: var(--lu-brand-600) !important;
}

.lu-pagination a:hover {
	background: var(--lu-brand-50) !important;
	border-color: var(--lu-brand-300) !important;
}

/* ------------------------------------------------------------------ Term chips */

.lu-chips-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}

.lu-chips-row a {
	padding: 9px 16px !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	color: var(--lu-ink-700) !important;
	background: var(--lu-cloud) !important;
	border: 1px solid var(--lu-border) !important;
	border-radius: var(--lu-radius-pill) !important;
}

.lu-chips-row a:hover,
.lu-chips-row a.is-active {
	color: #fff !important;
	background: var(--lu-brand-600) !important;
	border-color: var(--lu-brand-600) !important;
}

.lu-related + .lu-related {
	margin-top: 40px !important;
}

.lu-related__title {
	margin: 0 0 6px !important;
	font-size: 1.5rem !important;
	line-height: 1.25 !important;
	font-weight: 800 !important;
	color: var(--lu-ink-950) !important;
}

.lu-related__sub {
	margin: 0 0 16px !important;
	color: var(--lu-ink-500) !important;
}



/* -------------------------------------------------------- Mobile overflow guards */

/* The slide-out nav panel is off-canvas but still contributes to document width,
   so an unconstrained logo there causes horizontal scroll on phones. */
.slide-panel-logo img,
.slide-panel-top img {
	max-width: 130px !important;
	height: auto !important;
}

.bevel-nav-menu img {
	max-width: 100% !important;
	height: auto !important;
}

/* Nothing in a LawyerUp component may exceed its column. */
.lu-card img,
.lu-profile img,
.lu-grid img {
	max-width: 100% !important;
}

/* ------------------------------------------------------------ Refine + results */

.lu-refine__label {
	margin: 0 0 12px !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: #fff !important;
}

.lu-results-head {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 8px 24px !important;
}

.lu-results-head__title {
	margin: 0 !important;
	font-size: clamp(1.6rem, 3vw, 2rem) !important;
	line-height: 1.2 !important;
	font-weight: 800 !important;
	color: var(--lu-ink-900) !important;
}

.lu-results-head__sub {
	margin: 0 !important;
	font-size: 0.875rem !important;
	color: var(--lu-ink-500) !important;
}

/* ======================================================= Elementor kit overrides

   The Elementor kit styles EVERY button and text input on the site:

     .elementor-kit-8 button { background: primary; color: #fff; fill: #fff;
                               font-size: 16px; font-weight: 500; line-height: 1.19em;
                               letter-spacing: 0; word-spacing: 0;
                               border-radius: 14px; padding: 12px 18px }
     .elementor-kit-8 button:hover, :focus { background: secondary; color: #fff }
     .elementor-kit-8 input:not([type=button]):not([type=submit]) {
                               line-height: 1.2; border: 1px solid border;
                               border-radius: 6px; padding: 14px 16px }

   Those selectors are (0,1,1) and the kit stylesheet loads after this one, so a plain
   component class cannot win — every city suggestion came out as a solid blue pill and
   the inline search fields grew a boxed border. The declarations below are deliberately
   limited to the exact properties the kit sets on these two element types; nothing else
   in this file uses !important.
   ------------------------------------------------------------------------------- */

/* --- city suggestion rows: full reset back to a plain list row ------------- */

.lu-search .lu-suggest .lu-suggest__item {
	display: flex !important;
	width: 100% !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 8px 12px !important;
	text-align: left !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-transform: none !important;
	color: var(--lu-ink-900) !important;
	fill: currentColor !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--lu-radius-sm) !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background-color 0.12s ease !important;
}

.lu-search .lu-suggest .lu-suggest__item:hover,
.lu-search .lu-suggest .lu-suggest__item:focus,
.lu-search .lu-suggest .lu-suggest__item:focus-visible,
.lu-search .lu-suggest .lu-suggest__item.is-active {
	background-color: var(--lu-mist) !important;
	color: var(--lu-ink-900) !important;
}

.lu-search .lu-suggest .lu-suggest__item:focus-visible {
	outline: 2px solid var(--lu-brand-500) !important;
	outline-offset: -2px !important;
}

.lu-search .lu-suggest .lu-suggest__item--any {
	justify-content: flex-start !important;
	color: var(--lu-ink-500) !important;
}

.lu-search .lu-suggest .lu-suggest__city {
	font-weight: 600 !important;
	color: var(--lu-ink-900) !important;
}

.lu-search .lu-suggest .lu-suggest__count {
	font-size: 0.75rem !important;
	font-weight: 400 !important;
	color: var(--lu-ink-400) !important;
	white-space: nowrap !important;
}

/* --- the submit button ----------------------------------------------------- */

.lu-search .lu-search__submit {
	padding: 16px 32px !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: normal !important;
	color: #fff !important;
	fill: #fff !important;
	background-color: var(--lu-brand-600) !important;
	border-radius: var(--lu-radius-md) !important;
}

.lu-search .lu-search__submit:hover,
.lu-search .lu-search__submit:focus {
	background-color: var(--lu-brand-700) !important;
	color: #fff !important;
}

/* --- the two inline fields ------------------------------------------------- */

.lu-search .lu-field__input,
.lu-search .lu-field__select {
	line-height: 1.5 !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.lu-search .lu-field__select { padding-right: 24px !important; }

/* --- Get Listed form ------------------------------------------------------- */

.lu-form input[type="text"],
.lu-form input[type="email"],
.lu-form input[type="tel"],
.lu-form input[type="url"],
.lu-form textarea {
	line-height: 1.5 !important;
	border: 1px solid var(--lu-border) !important;
	border-radius: var(--lu-radius-md) !important;
	padding: 12px 14px !important;
}

.lu-form input:focus,
.lu-form textarea:focus {
	border-color: var(--lu-brand-400) !important;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

.lu-get-listed .lu-btn--accent {
	padding: 14px 30px !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--lu-ink-950) !important;
	fill: var(--lu-ink-950) !important;
	background-color: var(--lu-accent-500) !important;
	border-radius: var(--lu-radius-md) !important;
}

.lu-get-listed .lu-btn--accent:hover,
.lu-get-listed .lu-btn--accent:focus {
	background-color: var(--lu-accent-600) !important;
	color: var(--lu-ink-950) !important;
}

/* --- practice-area chips on the Get Listed form ---------------------------- */

.lu-chips .lu-chip span {
	display: inline-block !important;
	padding: 9px 16px !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	color: var(--lu-ink-700) !important;
	background-color: var(--lu-cloud) !important;
	border: 1px solid var(--lu-border) !important;
	border-radius: var(--lu-radius-pill) !important;
}

.lu-chips .lu-chip input:checked + span {
	color: #fff !important;
	background-color: var(--lu-brand-600) !important;
	border-color: var(--lu-brand-600) !important;
}

/* --- the panel must not be clipped or stacked under the next band ---------- */

.lu-search,
.lu-search__shell,
.lu-search__row,
.lu-field,
.lu-field--city,
.elementor-widget-lawyerup-search,
.elementor-widget-lawyerup-search > .elementor-widget-container {
	overflow: visible !important;
}

.lu-field--city { position: relative !important; }

.lu-search .lu-suggest {
	position: absolute !important;
	z-index: 999 !important;
	top: calc(100% + 8px) !important;
	left: 0 !important;
	right: 0 !important;
	display: block !important;
	max-height: 18rem !important;
	overflow-y: auto !important;
	padding: 4px !important;
	background-color: var(--lu-cloud) !important;
	border-radius: var(--lu-radius-md) !important;
	box-shadow: var(--lu-shadow-lg) !important;
	outline: 1px solid var(--lu-border) !important;
	outline-offset: -1px !important;
}

.lu-search .lu-suggest[hidden] { display: none !important; }
/* ==================================================== Figma homepage components
   Transcribed from Home.tsx: the hand-drawn brand underline, the By City / By State
   pill tabs over plain link columns, the four-across practice cards with icon chips,
   and the FAQ whose toggle rotates a plus into a cross.
   -------------------------------------------------------------------------------- */

/* --- the hand-drawn underline under "Attorneys Near Me" -------------------- */

.brand-underline {
	white-space: nowrap !important;
	position: relative !important;
}

.brand-underline::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: -0.15em !important;
	height: 0.42em !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9C40 3 120 2 198 6' stroke='%23f97316' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 50% / 100% 100% no-repeat !important;
}

/* --- hero: badge pill, promise list -------------------------------------- */

.lu-hero-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 16px !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--lu-brand-600) !important;
	background: var(--lu-brand-50) !important;
	border-radius: var(--lu-radius-pill) !important;
	outline: 1px solid var(--lu-brand-100) !important;
	outline-offset: -1px !important;
}

.lu-hero-badge .lu-icon {
	width: 16px !important;
	height: 16px !important;
	fill: var(--lu-accent-500) !important;
	stroke: none !important;
}

.lu-hero-facts {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 24px !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: var(--lu-ink-700) !important;
}

.lu-hero-facts span {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.lu-hero-facts .lu-icon {
	width: 20px !important;
	height: 20px !important;
	color: var(--lu-brand-600) !important;
}

.lu-promises {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.lu-promises li {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	font-size: 1.125rem !important;
	line-height: 1.55 !important;
	color: var(--lu-ink-700) !important;
}

.lu-promises__tick {
	display: grid !important;
	place-items: center !important;
	flex: 0 0 24px !important;
	width: 24px !important;
	height: 24px !important;
	margin-top: 4px !important;
	border-radius: 50% !important;
	background: var(--lu-brand-600) !important;
	color: #fff !important;
}

.lu-promises__tick svg {
	width: 14px !important;
	height: 14px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 3 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}

/* --- By City / By State tabs + link columns ------------------------------- */

.lu-pilltabs {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 12px !important;
	max-width: 36rem !important;
	margin: 0 auto !important;
}

.lu-pilltab {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 16px 24px !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--lu-brand-600) !important;
	background: var(--lu-brand-50) !important;
	border: 0 !important;
	border-radius: var(--lu-radius-pill) !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

.lu-pilltab .lu-icon { width: 20px !important; height: 20px !important; }
.lu-pilltab:hover { background: var(--lu-brand-100) !important; }

.lu-pilltab.is-active {
	color: #fff !important;
	background: var(--lu-brand-600) !important;
	box-shadow: var(--lu-shadow-md) !important;
}

.lu-links__panels { margin-top: 40px !important; }

.lu-linkgrid {
	display: grid !important;
	column-gap: 32px !important;
	row-gap: 8px !important;
	grid-template-columns: repeat(var(--lu-cols, 5), minmax(0, 1fr)) !important;
}

.lu-linkgrid--4 { --lu-cols: 4; }
.lu-linkgrid--5 { --lu-cols: 5; }

@media (max-width: 1024px) { .lu-linkgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .lu-linkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

.lu-linkgrid__item {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px !important;
	text-decoration: none !important;
	border-radius: var(--lu-radius-sm) !important;
	transition: background-color 0.15s ease !important;
}

.lu-linkgrid__item:hover { background: var(--lu-cloud) !important; }

.lu-linkgrid__item span {
	font-weight: 600 !important;
	color: var(--lu-ink-700) !important;
}

.lu-linkgrid__item:hover span { color: var(--lu-brand-600) !important; }

.lu-linkgrid__item .lu-icon { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; }
.lu-icon--sun { color: var(--lu-sun-500) !important; }

/* --- practice-area cards --------------------------------------------------- */

.lu-areas {
	display: grid !important;
	gap: 16px !important;
	grid-template-columns: repeat(var(--lu-cols, 4), minmax(0, 1fr)) !important;
}

.lu-areas--3 { --lu-cols: 3; }
.lu-areas--4 { --lu-cols: 4; }

@media (max-width: 1024px) { .lu-areas { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .lu-areas { grid-template-columns: minmax(0, 1fr) !important; } }

.lu-area {
	display: flex !important;
	flex-direction: column !important;
	padding: 24px !important;
	text-decoration: none !important;
	text-align: left !important;
	background: var(--lu-cloud) !important;
	border-radius: var(--lu-radius-lg) !important;
	box-shadow: var(--lu-shadow-sm) !important;
	outline: 1px solid var(--lu-border) !important;
	outline-offset: -1px !important;
	border-bottom: 2px solid transparent !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.lu-area:hover {
	transform: translateY(-4px) !important;
	box-shadow: var(--lu-shadow-md) !important;
	border-bottom-color: var(--lu-sun-500) !important;
}

.lu-area__chip {
	display: grid !important;
	place-items: center !important;
	width: 48px !important;
	height: 48px !important;
	border-radius: var(--lu-radius-md) !important;
	background: var(--lu-brand-50) !important;
	color: var(--lu-brand-600) !important;
	transition: background-color 0.2s ease, color 0.2s ease !important;
}

.lu-area__chip .lu-icon { width: 24px !important; height: 24px !important; }

.lu-area:hover .lu-area__chip {
	background: var(--lu-brand-600) !important;
	color: #fff !important;
}

.lu-area__title {
	display: block !important;
	margin-top: 16px !important;
	font-size: 1.25rem !important;
	line-height: 1.25 !important;
	font-weight: 800 !important;
	color: var(--lu-ink-900) !important;
}

.lu-area__text {
	display: block !important;
	flex: 1 !important;
	margin-top: 4px !important;
	font-size: 0.875rem !important;
	line-height: 1.55 !important;
	color: var(--lu-ink-500) !important;
}

.lu-area__cta {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	margin-top: 16px !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	color: var(--lu-brand-600) !important;
}

.lu-area__cta .lu-icon {
	width: 16px !important;
	height: 16px !important;
	transition: transform 0.15s ease !important;
}

.lu-area:hover .lu-area__cta .lu-icon { transform: translateX(4px) !important; }

/* --- "How a lawyer can help you" cards ------------------------------------ */

.lu-help {
	display: grid !important;
	gap: 24px !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 1024px) { .lu-help { grid-template-columns: minmax(0, 1fr) !important; } }

.lu-help__card {
	padding: 32px !important;
	background: var(--lu-cloud) !important;
	border: 1px solid var(--lu-border) !important;
	border-radius: var(--lu-radius-lg) !important;
	box-shadow: var(--lu-shadow-xs) !important;
}

.lu-help__chip {
	display: grid !important;
	place-items: center !important;
	width: 48px !important;
	height: 48px !important;
	border-radius: var(--lu-radius-md) !important;
	background: rgba(245, 179, 1, 0.15) !important;
	color: var(--lu-accent-600) !important;
}

.lu-help__chip svg { width: 24px !important; height: 24px !important; }

.lu-help__title {
	margin: 16px 0 0 !important;
	font-size: 1.5rem !important;
	line-height: 1.25 !important;
	font-weight: 800 !important;
	color: var(--lu-ink-900) !important;
}

.lu-help__body {
	margin: 8px 0 0 !important;
	line-height: 1.65 !important;
	color: var(--lu-ink-500) !important;
}

/* --- FAQ ------------------------------------------------------------------- */

.lu-faq {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.lu-faq__item {
	overflow: hidden !important;
	background: var(--lu-cloud) !important;
	border-radius: var(--lu-radius-lg) !important;
	outline: 1px solid var(--lu-border) !important;
	outline-offset: -1px !important;
}

.lu-faq__q {
	display: flex !important;
	width: 100% !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	padding: 24px !important;
	text-align: left !important;
	font-family: inherit !important;
	background: none !important;
	border: 0 !important;
	cursor: pointer !important;
}

.lu-faq__label {
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: var(--lu-ink-900) !important;
}

.lu-faq__toggle {
	display: grid !important;
	place-items: center !important;
	flex: 0 0 32px !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: var(--lu-brand-50) !important;
	color: var(--lu-brand-600) !important;
	transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease !important;
}

.lu-faq__toggle svg { width: 16px !important; height: 16px !important; }

.lu-faq__item.is-open .lu-faq__toggle {
	transform: rotate(45deg) !important;
	background: var(--lu-brand-600) !important;
	color: #fff !important;
}

.lu-faq__panel {
	display: grid !important;
	grid-template-rows: 0fr !important;
	transition: grid-template-rows 0.3s ease !important;
}

.lu-faq__item.is-open .lu-faq__panel { grid-template-rows: 1fr !important; }

.lu-faq__inner { overflow: hidden !important; }

.lu-faq__inner p {
	margin: 0 !important;
	padding: 0 24px 24px !important;
	line-height: 1.65 !important;
	color: var(--lu-ink-500) !important;
}

/* No JavaScript: every answer stays readable rather than collapsed shut. */
.no-js .lu-faq__panel { grid-template-rows: 1fr !important; }

/* --- the dark closing CTA card -------------------------------------------- */

.lu-cta-card {
	position: relative !important;
	overflow: hidden !important;
	padding: 64px !important;
	border-radius: var(--lu-radius-xl) !important;
	background: var(--lu-ink-950) !important;
}

@media (max-width: 640px) { .lu-cta-card { padding: 40px 24px !important; } }

.lu-cta-card::before,
.lu-cta-card::after {
	content: "" !important;
	position: absolute !important;
	border-radius: 50% !important;
	pointer-events: none !important;
	filter: blur(64px) !important;
}

.lu-cta-card::before {
	top: -80px !important;
	right: -80px !important;
	width: 320px !important;
	height: 320px !important;
	background: rgba(37, 99, 235, 0.4) !important;
}

.lu-cta-card::after {
	bottom: -96px !important;
	left: 40px !important;
	width: 256px !important;
	height: 256px !important;
	background: rgba(245, 179, 1, 0.15) !important;
}

.lu-cta-card__inner {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 32px !important;
}

@media (min-width: 1024px) {
	.lu-cta-card__inner {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
}

.lu-cta-card__copy { max-width: 36rem !important; }

.lu-cta-card__eyebrow {
	margin: 0 !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--lu-accent-500) !important;
}

.lu-cta-card__title {
	margin: 8px 0 0 !important;
	font-size: clamp(1.75rem, 3.5vw, 2rem) !important;
	line-height: 1.15 !important;
	font-weight: 800 !important;
	color: #fff !important;
}

.lu-cta-card__text {
	margin: 12px 0 0 !important;
	font-size: 1.125rem !important;
	line-height: 1.65 !important;
	color: rgba(255, 255, 255, 0.72) !important;
}

.lu-cta-card__btn {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 16px 40px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	color: var(--lu-ink-950) !important;
	background: var(--lu-accent-500) !important;
	border-radius: var(--lu-radius-md) !important;
	transition: background-color 0.15s ease, transform 0.1s ease !important;
}

.lu-cta-card__btn:hover { background: var(--lu-accent-400) !important; color: var(--lu-ink-950) !important; }
.lu-cta-card__btn:active { transform: scale(0.98) !important; }

.lu-cta-card__btn svg {
	width: 20px !important;
	height: 20px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	transition: transform 0.15s ease !important;
}

.lu-cta-card__btn:hover svg { transform: translateX(4px) !important; }

/* --- kit overrides for the new controls ------------------------------------ */

.lu-pilltabs .lu-pilltab {
	padding: 16px 24px !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--lu-brand-600) !important;
	fill: currentColor !important;
	background-color: var(--lu-brand-50) !important;
	border-radius: var(--lu-radius-pill) !important;
}

.lu-pilltabs .lu-pilltab:hover { background-color: var(--lu-brand-100) !important; }

.lu-pilltabs .lu-pilltab.is-active {
	color: #fff !important;
	background-color: var(--lu-brand-600) !important;
}

.lu-faq .lu-faq__q {
	padding: 24px !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: var(--lu-ink-900) !important;
	fill: currentColor !important;
	background-color: transparent !important;
	border-radius: 0 !important;
}

.lu-faq .lu-faq__q:hover,
.lu-faq .lu-faq__q:focus {
	background-color: transparent !important;
	color: var(--lu-ink-900) !important;
}

/* The theme's closed slide-out nav panel is position:fixed with opacity:0 but stays in
   the layout, and on phones it measures wider than the viewport — which gave the whole
   site ~29px of horizontal scroll. `clip` (unlike `hidden`) does not create a scroll
   container, so the sticky header keeps working. */
html {
	overflow-x: clip !important;
}

/* The Bevel build server normalises icon-box shape colours to a kit global, which turns
   the "How a lawyer can help you" chips brand blue. The design uses the accent tint. */
.lu-help-box .elementor-icon {
	background-color: rgba(245, 179, 1, 0.15) !important;
	color: var(--lu-accent-600) !important;
	fill: var(--lu-accent-600) !important;
}

/* The FAQ column is max-w-3xl in the design. */
.lu-faq {
	max-width: 768px !important;
	margin-inline: auto !important;
}

/* ================================================= Find a Lawyer hub (dark hero)
   FindLawyerHub.tsx: a brand-950 band with two blurred colour blobs, a white/40
   breadcrumb, a translucent badge, an accent word in the h1, and the search sitting
   in a frosted white/10 card. */

.lu-areas--plain .lu-area { border-bottom-color: transparent !important; }
.lu-areas--plain .lu-area:hover { border-bottom-color: transparent !important; }

/* The band stays overflow:visible so the city dropdown can escape it, exactly as the
   design does; `html { overflow-x: clip }` keeps the blobs from creating scroll.
   The blobs are real spans, not ::before/::after — Elementor already uses both
   pseudo-elements on .e-con for its background overlay. */
.lu-darkhero {
	position: relative !important;
	overflow: visible !important;
}

.lu-blob {
	position: absolute !important;
	z-index: 0 !important;
	display: block !important;
	border-radius: 50% !important;
	pointer-events: none !important;
	filter: blur(64px) !important;
}

.lu-blob--a {
	top: -128px !important;
	right: -128px !important;
	width: 480px !important;
	height: 480px !important;
	background: rgba(29, 78, 216, 0.3) !important;
}

.lu-blob--b {
	bottom: 0 !important;
	left: -96px !important;
	width: 320px !important;
	height: 320px !important;
	background: rgba(245, 179, 1, 0.1) !important;
}

/* The blobs must resolve against the BAND, so the widget that holds them must not
   become their containing block (Elementor positions widget wrappers). */
.lu-blobs,
.lu-blobs > .elementor-widget-container {
	position: static !important;
}

/* Keep the copy above the blobs without making .e-con-inner a containing block for
   them — z-index alone is enough once the wrapper above is static. */
.lu-darkhero > .e-con-inner > .elementor-element {
	position: relative !important;
	z-index: 1 !important;
}

.lu-hub-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 16px !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--lu-accent-300) !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border-radius: var(--lu-radius-pill) !important;
}

.lu-hub-badge .lu-icon { width: 16px !important; height: 16px !important; }

.lu-hub-facts {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 24px !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: rgba(255, 255, 255, 0.6) !important;
}

.lu-hub-facts span {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.lu-hub-facts .lu-icon {
	width: 20px !important;
	height: 20px !important;
	color: var(--lu-accent-400) !important;
}

/* The frosted card the search sits in. */
.lu-glass {
	padding: 32px !important;
	border-radius: var(--lu-radius-xl) !important;
	background: rgba(255, 255, 255, 0.1) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	outline: 1px solid rgba(255, 255, 255, 0.15) !important;
	outline-offset: -1px !important;
}

.lu-glass__label {
	margin: 0 0 12px !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--lu-accent-300) !important;
}

/* A section header with a "See all" link opposite the intro. */
.lu-seeall {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	color: var(--lu-brand-600) !important;
	white-space: nowrap !important;
}

.lu-seeall:hover { color: var(--lu-brand-700) !important; }

.lu-seeall svg {
	width: 16px !important;
	height: 16px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}

/* The accent word inside the hub h1, and the frosted card the search sits in. */
.lu-accent-word { color: var(--lu-accent-400) !important; }

.lu-glass-card {
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	outline: 1px solid rgba(255, 255, 255, 0.15) !important;
	outline-offset: -1px !important;
}

.lu-glass__label {
	margin: 0 !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--lu-accent-300) !important;
}

/* The theme's global link colour beats the dark-breadcrumb rule, so the trail came out
   brand blue on the dark hub hero. Opacities match the design (40% / 70%). */
.lu-breadcrumbs--dark,
.lu-breadcrumbs--dark a,
.lu-breadcrumbs--dark span {
	color: rgba(255, 255, 255, 0.4) !important;
}

.lu-breadcrumbs--dark a:hover {
	color: rgba(255, 255, 255, 0.8) !important;
}

.lu-breadcrumbs--dark [aria-current] {
	color: rgba(255, 255, 255, 0.7) !important;
}

.lu-breadcrumbs--dark .lu-breadcrumbs__sep {
	color: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================ Practice Areas hub (two-up rows)
   PracticeAreasHub.tsx: a 56px chip beside the copy, two across, with the long
   contingency blurb and a per-area link label. */

.lu-arealist {
	display: grid !important;
	gap: 24px !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
	.lu-arealist { grid-template-columns: minmax(0, 1fr) !important; }
}

.lu-arearow {
	display: flex !important;
	align-items: flex-start !important;
	gap: 24px !important;
	padding: 32px !important;
	text-decoration: none !important;
	background: var(--lu-cloud) !important;
	border-radius: var(--lu-radius-xl) !important;
	box-shadow: var(--lu-shadow-sm) !important;
	outline: 1px solid var(--lu-border) !important;
	outline-offset: -1px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.lu-arearow:hover {
	transform: translateY(-2px) !important;
	box-shadow: var(--lu-shadow-md) !important;
}

.lu-arearow__chip {
	display: grid !important;
	place-items: center !important;
	flex: 0 0 56px !important;
	width: 56px !important;
	height: 56px !important;
	margin-top: 4px !important;
	border-radius: var(--lu-radius-md) !important;
	background: var(--lu-brand-50) !important;
	color: var(--lu-brand-600) !important;
	transition: background-color 0.2s ease, color 0.2s ease !important;
}

.lu-arearow__chip .lu-icon { width: 28px !important; height: 28px !important; }

.lu-arearow:hover .lu-arearow__chip {
	background: var(--lu-brand-600) !important;
	color: #fff !important;
}

.lu-arearow__body {
	flex: 1 !important;
	min-width: 0 !important;
}

.lu-arearow__title {
	display: block !important;
	font-size: 1.5rem !important;
	line-height: 1.25 !important;
	font-weight: 800 !important;
	color: var(--lu-ink-900) !important;
}

.lu-arearow__text {
	display: block !important;
	margin-top: 4px !important;
	font-size: 1rem !important;
	line-height: 1.65 !important;
	color: var(--lu-ink-500) !important;
}

.lu-arearow__cta {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	margin-top: 12px !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	color: var(--lu-brand-600) !important;
}

.lu-arearow__cta .lu-icon {
	width: 16px !important;
	height: 16px !important;
	transition: transform 0.15s ease !important;
}

.lu-arearow:hover .lu-arearow__cta .lu-icon { transform: translateX(4px) !important; }

/* The hub CTA carries a badge pill rather than a plain eyebrow. */
.lu-cta-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 16px !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--lu-accent-400) !important;
	background: rgba(245, 179, 1, 0.15) !important;
	border-radius: var(--lu-radius-pill) !important;
}

.lu-cta-badge .lu-icon { width: 16px !important; height: 16px !important; }

/* The single-blob variant of the dark CTA card. */
.lu-cta-card--one::after { display: none !important; }

/* The soft wash behind the attorney profile head. */
.lu-profile-wash {
	position: relative !important;
	overflow: hidden !important;
}

.lu-blob--wash {
	top: -240px !important;
	right: -240px !important;
	width: 560px !important;
	height: 560px !important;
	background: rgba(219, 230, 255, 0.6) !important;
	z-index: 0 !important;
}

/* The Practice Areas hero blobs are sized differently from the Find a Lawyer ones. */
.lu-blob--pa-a {
	top: -96px !important;
	right: -96px !important;
	width: 384px !important;
	height: 384px !important;
	background: rgba(47, 99, 246, 0.2) !important;
}

.lu-blob--pa-b {
	bottom: 0 !important;
	left: -64px !important;
	width: 256px !important;
	height: 256px !important;
	background: rgba(245, 179, 1, 0.15) !important;
}

/* The badge pill sits above the title in the hub CTA. */
.lu-cta-card__copy .lu-cta-badge + .lu-cta-card__title { margin-top: 12px !important; }

/* The profile split: a fixed 320px sidebar beside a fluid main column.
   Both halves are needed — a flex item defaults to min-width:auto, so the main
   column refuses to shrink below its content and the sidebar absorbs the shortfall
   (it was collapsing to 243px). */
.lu-aside-col {
	flex: 0 0 320px !important;
	max-width: 320px !important;
}

.lu-main-col {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

@media (max-width: 1024px) {
	.lu-aside-col {
		flex: 1 1 100% !important;
		max-width: none !important;
	}
}

/* ============================================ Attorney profile vertical rhythm
   Everything the credentials part renders lives inside ONE Elementor widget, so the
   column's widget gap never reached it and Education / Affiliations / Serves / badges
   / callout sat flush against each other. The design's main column is gap-(--space-7)
   = 48px between blocks, with the two credential lists paired at 24px.

   The Elementor column carries a 12px gap (the heading-to-body step); the two parts
   that need the full 48px add the remaining 36px themselves. */

.lu-credentials {
	display: flex !important;
	flex-direction: column !important;
	gap: 48px !important;
	margin-top: 36px !important;
}

.lu-credentials__group {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
}

.lu-profile__about-h {
	margin-top: 36px !important;
}

/* The header block: badge, h1, firm, rating — the design's mt-4 / mt-2 / mt-3. */
.lu-profile__head {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
}

.lu-profile__head .lu-badge-pill + .lu-profile__name { margin-top: 16px !important; }
.lu-profile__head .lu-profile__name + .lu-profile__firm { margin-top: 8px !important; }
.lu-profile__head .lu-stars { margin-top: 12px !important; }

/* Heading-to-list inside a credential block. */
.lu-profile__block {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.lu-profile__block > .lu-list,
.lu-profile__block > .lu-serves { margin: 0 !important; }