/*
 * Arbor Law — Team Member (People) Bio styles.
 * Three distinct visual treatments for one expertise module, designed
 * to be composed in Elementor (headings + container chrome are widgets;
 * the dynamic lists are shortcodes).
 *
 *   1. Services  → numbered editorial index            (.al-tm-expertise__services)
 *   2. Sectors   → two-column editorial directory      (.al-tm-expertise__sectors)
 *   3. Solutions → inline "Delivers through X · Y"     (.al-tm-expertise__solutions)
 *
 * Brand tokens — sourced from the Elementor Default Kit so the editor can
 * recolour the whole site by changing kit values. Solid colour usages
 * reference Elementor kit CSS variables with the brand hex as fallback;
 * alpha-blended tints are written as rgba() of the same source colours.
 *
 *   Fonts:    Satoshi (display), Lato (body)
 *   Colours:  --e-global-color-primary       Arbor Green
 *             --e-global-color-secondary     Ink
 *             --e-global-color-accent        Sage
 *             --e-global-color-al_off_white  Off white
 *             --e-global-color-al_border     Border line
 *             --e-global-color-cc45519       White
 */

/* === Outer container (when shortcode is used standalone) === */
.al-tm-expertise {
	background: var(--e-global-color-al_off_white, #F2F1ED);
	padding: 96px 0;
}
@media (max-width: 1024px) { .al-tm-expertise { padding: 72px 0; } }
@media (max-width: 767px) { .al-tm-expertise { padding: 56px 0; } }

.al-tm-expertise__inner {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 32px;
}
@media (max-width: 767px) { .al-tm-expertise__inner { padding: 0 24px; } }

/* === Module spacing — when blocks are placed independently in Elementor === */
.al-tm-expertise__block + .al-tm-expertise__block {
	margin-top: 56px;
}
@media (max-width: 767px) {
	.al-tm-expertise__block + .al-tm-expertise__block { margin-top: 44px; }
}

/* === Elementor inner-wrap container — constrains content to editorial measure === */
.al-tm-expertise-wrap {
	max-width: 880px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* === Section header (eyebrow + headline) ===
 * Tight 20px top + bottom across all breakpoints — the header sits
 * directly under the page-level Introduction section which already
 * provides generous separation, so a smaller intrinsic gap keeps the
 * header visually paired with its first content block (Services) below. */
.al-tm-expertise__header {
	padding: 20px 0;
	margin: 0;
}

.al-tm-expertise__eyebrow {
	font-family: 'Satoshi', sans-serif;
	font-weight: 500;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: rgba(16, 85, 90, 0.75);
	margin: 0 0 20px;
}

.al-tm-expertise__heading {
	font-family: 'Satoshi', sans-serif;
	font-weight: 700;
	font-size: 56px;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--e-global-color-secondary, #1F2328);
	margin: 0;
	max-width: 18ch;
}
@media (max-width: 1024px) { .al-tm-expertise__heading { font-size: 44px; } }
@media (max-width: 767px) { .al-tm-expertise__heading { font-size: 34px; } }
.al-tm-expertise__heading-stop { color: rgba(16, 85, 90, 0.95); }

/* === Shared section label — bound to the kit's "Titles - Sections"
 * preset (Satoshi 300, 43/34/30 px desktop/tablet/mobile). Used above
 * Services and Sectors blocks. The Solutions overline below uses the
 * same preset on the dark panel (cream colour). */
.al-tm-expertise__section-label {
	font-family: var(--e-global-typography-35429c7-font-family, "Satoshi"), sans-serif;
	font-weight: var(--e-global-typography-35429c7-font-weight, 300);
	font-size: var(--e-global-typography-35429c7-font-size, 43px);
	line-height: var(--e-global-typography-35429c7-line-height, 1.2em);
	letter-spacing: var(--e-global-typography-35429c7-letter-spacing, 0);
	text-transform: none;
	color: var(--e-global-color-secondary, #1F2328);
	margin: 0 0 32px;
}
@media (max-width: 1024px) {
	.al-tm-expertise__section-label {
		font-size: var(--e-global-typography-35429c7-font-size-tablet, 34px);
		line-height: var(--e-global-typography-35429c7-line-height-tablet, 1.2em);
	}
}
@media (max-width: 767px) {
	.al-tm-expertise__section-label {
		font-size: var(--e-global-typography-35429c7-font-size-mobile, 30px);
		line-height: var(--e-global-typography-35429c7-line-height-mobile, 1.2em);
		margin: 0 0 24px;
	}
}

/* =============================================================
 * 1. SERVICES — numbered editorial index
 * ============================================================= */
.al-tm-expertise__services {
	padding: 80px 0;
}
@media (max-width: 1024px) {
	.al-tm-expertise__services { padding: 60px 0; }
}
@media (max-width: 767px) {
	.al-tm-expertise__services { padding: 50px 0; }
}

.al-tm-expertise__index {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(31, 35, 40, 0.12);
}
.al-tm-expertise__index-item {
	border-bottom: 1px solid rgba(31, 35, 40, 0.12);
}

.al-tm-expertise__index-link {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 28px;
	row-gap: 4px;
	align-items: baseline;
	padding: 28px 0;
	text-decoration: none;
	color: inherit;
	transition: padding-left 0.25s ease;
}
.al-tm-expertise__index-link:hover { padding-left: 8px; }
@media (max-width: 767px) {
	.al-tm-expertise__index-link {
		grid-template-columns: 1fr auto;
		column-gap: 16px;
		padding: 22px 0;
	}
	.al-tm-expertise__index-link:hover { padding-left: 4px; }
}

.al-tm-expertise__index-num {
	display: none;
}

.al-tm-expertise__index-content { min-width: 0; }

.al-tm-expertise__index-title {
	display: block;
	font-family: 'Satoshi', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--e-global-color-secondary, #1F2328);
	transition: color 0.2s ease;
}
.al-tm-expertise__index-link:hover .al-tm-expertise__index-title { color: var(--e-global-color-primary, #10555A); }
@media (max-width: 767px) { .al-tm-expertise__index-title { font-size: 19px; } }

.al-tm-expertise__index-desc {
	display: block;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(31, 35, 40, 0.65);
	margin: 8px 0 0;
	max-width: 58ch;
}
@media (max-width: 767px) { .al-tm-expertise__index-desc { font-size: 14px; } }

.al-tm-expertise__index-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(31, 35, 40, 0.18);
	color: var(--e-global-color-secondary, #1F2328);
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
	margin-top: 6px;
}
.al-tm-expertise__index-link:hover .al-tm-expertise__index-arrow {
	background: var(--e-global-color-primary, #10555A);
	border-color: var(--e-global-color-primary, #10555A);
	color: #FFFFFF;
	transform: translateX(4px);
}
@media (max-width: 767px) {
	.al-tm-expertise__index-arrow { width: 36px; height: 36px; }
	.al-tm-expertise__index-arrow svg { width: 16px; height: 16px; }
}

/* =============================================================
 * 2. SECTORS — three-column editorial directory, full viewport
 *
 * Each sector cell is a short top-rule + small-caps tracked NAME
 * + a 1-line muted descriptor. Reads like a magazine "index of
 * industries" — visually distinct from the numbered Services list
 * above and the dark Solutions panel below.
 *
 * Layout: full-bleed (100vw) so the band reads as a wider editorial
 * spread; inner content constrained to the 1140px kit container.
 * Cells lock to 1/3 column width on desktop so a single sector still
 * sits at 1/3, not stretched across the row.
 * ============================================================= */
.al-tm-expertise__sectors {
	margin-left: 50%;
	margin-right: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
	padding: 80px max(32px, calc((100vw - 1140px) / 2));
	box-sizing: border-box;
}
@media (max-width: 1024px) {
	.al-tm-expertise__sectors { padding: 60px 48px; }
}
@media (max-width: 767px) {
	.al-tm-expertise__sectors { padding: 50px 24px; }
}

.al-tm-expertise__directory {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 48px;
	row-gap: 40px;
}
@media (max-width: 1024px) {
	.al-tm-expertise__directory {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 40px;
		row-gap: 32px;
	}
}
@media (max-width: 767px) {
	.al-tm-expertise__directory {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 24px;
	}
}

.al-tm-expertise__directory-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
	padding-top: 20px;
	position: relative;
	transition: transform 0.25s ease;
	height: 100%;
}
.al-tm-expertise__directory-item:hover { transform: translateY(-2px); }

.al-tm-expertise__directory-rule {
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 2px;
	background: rgba(16, 85, 90, 0.65);
	transition: width 0.3s ease, background 0.2s ease;
}
.al-tm-expertise__directory-item:hover .al-tm-expertise__directory-rule {
	width: 64px;
	background: var(--e-global-color-primary, #10555A);
}

.al-tm-expertise__directory-name {
	display: block;
	font-family: 'Satoshi', sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--e-global-color-secondary, #1F2328);
	transition: color 0.2s ease;
}
.al-tm-expertise__directory-item:hover .al-tm-expertise__directory-name {
	color: var(--e-global-color-primary, #10555A);
}

.al-tm-expertise__directory-desc {
	display: block;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(31, 35, 40, 0.65);
	margin: 10px 0 0;
}
@media (max-width: 767px) {
	.al-tm-expertise__directory-desc { font-size: 14px; }
}

/* Circle-arrow link indicator — mirrors the Services index arrow so
   Sectors cells read as the same class of link affordance. Sits 24px
   below the description (or name, if no description). The grid still
   stretches all cells in a row to equal height, but arrows align to
   their own content, not to each other. */
.al-tm-expertise__directory-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: 24px;
	border-radius: 50%;
	border: 1px solid rgba(31, 35, 40, 0.18);
	color: var(--e-global-color-secondary, #1F2328);
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.al-tm-expertise__directory-item:hover .al-tm-expertise__directory-arrow {
	background: var(--e-global-color-primary, #10555A);
	border-color: var(--e-global-color-primary, #10555A);
	color: #FFFFFF;
	transform: translateX(4px);
}
@media (max-width: 767px) {
	.al-tm-expertise__directory-arrow { width: 36px; height: 36px; }
	.al-tm-expertise__directory-arrow svg { width: 16px; height: 16px; }
}

/* =============================================================
 * 3. SOLUTIONS — dark Arbor Green feature panel.
 *    A real chapter break inside the off-white module: contrast
 *    background, oversized chapter numbers, generous spacing,
 *    cream typography. Makes Solutions feel like a curated,
 *    high-value showcase — distinct from the numbered Services
 *    chapters above and the small-caps Sectors directory below.
 * ============================================================= */
/* Full-bleed: the section breaks out of the 880px inner column to
   span the full viewport width — a real cinematic chapter break. */
.al-tm-expertise__solutions {
	margin-left: 50%;
	margin-right: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
	position: relative;
}

.al-tm-expertise__solutions-panel {
	background: var(--e-global-color-primary, #10555A);
	color: rgba(242, 241, 237, 0.92);
	border-radius: 0;
	padding: 80px max(32px, calc((100vw - 1140px) / 2));
	position: relative;
	overflow: hidden;
}
@media (max-width: 1024px) {
	.al-tm-expertise__solutions-panel { padding: 60px 48px; }
}
@media (max-width: 767px) {
	.al-tm-expertise__solutions-panel { padding: 50px 24px; }
}

.al-tm-expertise__solutions-overline {
	font-family: var(--e-global-typography-35429c7-font-family, "Satoshi"), sans-serif;
	font-weight: var(--e-global-typography-35429c7-font-weight, 300);
	font-size: var(--e-global-typography-35429c7-font-size, 43px);
	line-height: var(--e-global-typography-35429c7-line-height, 1.2em);
	letter-spacing: var(--e-global-typography-35429c7-letter-spacing, 0);
	text-transform: none;
	color: var(--e-global-color-al_off_white, #F2F1ED);
	margin: 0 0 24px;
}
@media (max-width: 1024px) {
	.al-tm-expertise__solutions-overline {
		font-size: var(--e-global-typography-35429c7-font-size-tablet, 34px);
		line-height: var(--e-global-typography-35429c7-line-height-tablet, 1.2em);
	}
}
@media (max-width: 767px) {
	.al-tm-expertise__solutions-overline {
		font-size: var(--e-global-typography-35429c7-font-size-mobile, 30px);
		line-height: var(--e-global-typography-35429c7-line-height-mobile, 1.2em);
		margin: 0 0 20px;
	}
}

.al-tm-expertise__solutions-rule {
	display: block;
	width: 40px;
	height: 1px;
	background: rgba(242, 241, 237, 0.45);
	margin: 0 0 48px;
}
@media (max-width: 767px) {
	.al-tm-expertise__solutions-rule { margin: 0 0 36px; }
}

.al-tm-expertise__solutions-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 56px;
	row-gap: 56px;
}
/* Single-item profile: featured lead treatment so the panel doesn't
   read as a half-empty 2-col placeholder. */
.al-tm-expertise__solutions-list:has(> .al-tm-expertise__solutions-item:only-child) {
	grid-template-columns: 1fr;
}
.al-tm-expertise__solutions-list:has(> .al-tm-expertise__solutions-item:only-child) .al-tm-expertise__solutions-card {
	max-width: 620px;
}
@media (max-width: 1024px) {
	.al-tm-expertise__solutions-list {
		column-gap: 40px;
		row-gap: 48px;
	}
}
@media (max-width: 767px) {
	.al-tm-expertise__solutions-list {
		grid-template-columns: 1fr;
		row-gap: 36px;
	}
}

.al-tm-expertise__solutions-item {
	min-width: 0;
	position: relative;
}
/* Vertical hairline divider between the two cells in each row.
   In a 2-col layout, every odd-indexed item starts a new row, so its
   ::before is suppressed. */
.al-tm-expertise__solutions-item + .al-tm-expertise__solutions-item::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: -28px;
	width: 1px;
	background: rgba(242, 241, 237, 0.18);
}
.al-tm-expertise__solutions-item:nth-child(2n+1)::before { display: none; }
@media (max-width: 1024px) {
	.al-tm-expertise__solutions-item + .al-tm-expertise__solutions-item::before { left: -20px; }
}
@media (max-width: 767px) {
	.al-tm-expertise__solutions-item + .al-tm-expertise__solutions-item::before { display: none; }
}

.al-tm-expertise__solutions-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 0;
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition: transform 0.3s ease;
}
.al-tm-expertise__solutions-card:hover {
	transform: translateY(-2px);
}

/* Chapter numerals hidden per design decision — kept in DOM for backward
   compatibility and easy reinstatement if the design changes. */
.al-tm-expertise__solutions-num {
	display: none;
}

.al-tm-expertise__solutions-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
}

.al-tm-expertise__solutions-name {
	display: block;
	font-family: 'Satoshi', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--e-global-color-al_off_white, #F2F1ED);
	transition: color 0.2s ease;
}
.al-tm-expertise__solutions-card:hover .al-tm-expertise__solutions-name {
	color: #FFFFFF;
}
@media (max-width: 1024px) {
	.al-tm-expertise__solutions-name { font-size: 20px; }
}
@media (max-width: 767px) {
	.al-tm-expertise__solutions-name { font-size: 19px; }
}

.al-tm-expertise__solutions-desc {
	display: block;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(242, 241, 237, 0.72);
	margin: 0;
}
@media (max-width: 767px) {
	.al-tm-expertise__solutions-desc { font-size: 14px; line-height: 1.65; }
}

/* Arrow hidden in horizontal layout — cell-as-link signal is the
   number + title hover state. Kept in DOM for backward compat. */
.al-tm-expertise__solutions-arrow {
	display: none;
}

/* "Learn more →" CTA — bound to the kit's "Buttons 2" preset
 * (Satoshi 600 / 13px / uppercase / 0.5 letter-spacing). Sits at the
 * bottom of each card; pushed to the end of the flex body so cards
 * with shorter descriptions still align the CTA along the row. */
.al-tm-expertise__solutions-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
	font-family: var(--e-global-typography-7072858-font-family, "Satoshi"), sans-serif;
	font-weight: var(--e-global-typography-7072858-font-weight, 600);
	font-size: var(--e-global-typography-7072858-font-size, 13px);
	line-height: var(--e-global-typography-7072858-line-height, 20px);
	letter-spacing: var(--e-global-typography-7072858-letter-spacing, 0.5px);
	text-transform: var(--e-global-typography-7072858-text-transform, uppercase);
	color: var(--e-global-color-al_off_white, #F2F1ED);
	transition: color 0.2s ease, gap 0.25s ease;
}
.al-tm-expertise__solutions-card:hover .al-tm-expertise__solutions-cta {
	color: #FFFFFF;
	gap: 14px;
}

.al-tm-expertise__solutions-cta-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
	line-height: 1;
}
.al-tm-expertise__solutions-card:hover .al-tm-expertise__solutions-cta-arrow {
	transform: translateX(2px);
}

/* =============================================================
 * 4. LEGAL SPECIALTIES — full-bleed white feature panel.
 *    Mirrors the Solutions panel structure (overline, rule,
 *    2-col grid) but inverts the colour stack: white surface,
 *    Arbor Green typography, green-tint hairlines. Rows are
 *    informational (no link target), so cards render as divs
 *    with no "Learn more" CTA and no hover translate.
 * ============================================================= */
.al-tm-expertise__legal {
	margin-left: 50%;
	margin-right: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
	position: relative;
}

.al-tm-expertise__legal-panel {
	background: #FFFFFF;
	color: var(--e-global-color-secondary, #1F2328);
	border-radius: 0;
	padding: 80px max(32px, calc((100vw - 1140px) / 2));
	position: relative;
	overflow: hidden;
}
@media (max-width: 1024px) {
	.al-tm-expertise__legal-panel { padding: 60px 48px; }
}
@media (max-width: 767px) {
	.al-tm-expertise__legal-panel { padding: 50px 24px; }
}

.al-tm-expertise__legal-overline {
	font-family: var(--e-global-typography-35429c7-font-family, "Satoshi"), sans-serif;
	font-weight: var(--e-global-typography-35429c7-font-weight, 300);
	font-size: var(--e-global-typography-35429c7-font-size, 43px);
	line-height: var(--e-global-typography-35429c7-line-height, 1.2em);
	letter-spacing: var(--e-global-typography-35429c7-letter-spacing, 0);
	text-transform: none;
	color: var(--e-global-color-primary, #10555A);
	margin: 0 0 24px;
}
@media (max-width: 1024px) {
	.al-tm-expertise__legal-overline {
		font-size: var(--e-global-typography-35429c7-font-size-tablet, 34px);
		line-height: var(--e-global-typography-35429c7-line-height-tablet, 1.2em);
	}
}
@media (max-width: 767px) {
	.al-tm-expertise__legal-overline {
		font-size: var(--e-global-typography-35429c7-font-size-mobile, 30px);
		line-height: var(--e-global-typography-35429c7-line-height-mobile, 1.2em);
		margin: 0 0 20px;
	}
}

.al-tm-expertise__legal-rule {
	display: block;
	width: 40px;
	height: 1px;
	background: rgba(16, 85, 90, 0.35);
	margin: 0 0 48px;
}
@media (max-width: 767px) {
	.al-tm-expertise__legal-rule { margin: 0 0 36px; }
}

.al-tm-expertise__legal-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 56px;
	row-gap: 56px;
}
.al-tm-expertise__legal-list:has(> .al-tm-expertise__legal-item:only-child) {
	grid-template-columns: 1fr;
}
.al-tm-expertise__legal-list:has(> .al-tm-expertise__legal-item:only-child) .al-tm-expertise__legal-card {
	max-width: 620px;
}
@media (max-width: 1024px) {
	.al-tm-expertise__legal-list {
		column-gap: 40px;
		row-gap: 48px;
	}
}
@media (max-width: 767px) {
	.al-tm-expertise__legal-list {
		grid-template-columns: 1fr;
		row-gap: 36px;
	}
}

.al-tm-expertise__legal-item {
	min-width: 0;
	position: relative;
}
/* Vertical hairline between the two cells in each row; suppressed for
   odd-indexed items (each starts a new row in the 2-col grid). */
.al-tm-expertise__legal-item + .al-tm-expertise__legal-item::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: -28px;
	width: 1px;
	background: rgba(16, 85, 90, 0.15);
}
.al-tm-expertise__legal-item:nth-child(2n+1)::before { display: none; }
@media (max-width: 1024px) {
	.al-tm-expertise__legal-item + .al-tm-expertise__legal-item::before { left: -20px; }
}
@media (max-width: 767px) {
	.al-tm-expertise__legal-item + .al-tm-expertise__legal-item::before { display: none; }
}

.al-tm-expertise__legal-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 0;
	height: 100%;
}

.al-tm-expertise__legal-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
}

.al-tm-expertise__legal-name {
	display: block;
	font-family: 'Satoshi', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--e-global-color-primary, #10555A);
}
@media (max-width: 1024px) {
	.al-tm-expertise__legal-name { font-size: 20px; }
}
@media (max-width: 767px) {
	.al-tm-expertise__legal-name { font-size: 19px; }
}

.al-tm-expertise__legal-desc {
	display: block;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(31, 35, 40, 0.72);
	margin: 0;
}
@media (max-width: 767px) {
	.al-tm-expertise__legal-desc { font-size: 14px; line-height: 1.65; }
}

/* Legacy inline-sentence styles (kept for backward compat with
   [arbor_team_solutions_inline]). New templates should use
   [arbor_team_solutions_list]. */
.al-tm-expertise__context-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	column-gap: 32px;
	align-items: baseline;
}
@media (max-width: 767px) {
	.al-tm-expertise__context-row {
		grid-template-columns: 1fr;
		row-gap: 8px;
	}
}

.al-tm-expertise__context-label {
	font-family: 'Satoshi', sans-serif;
	font-weight: 500;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: rgba(16, 85, 90, 0.75);
	margin: 0;
}

.al-tm-expertise__context-items {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.55;
	color: var(--e-global-color-secondary, #1F2328);
	margin: 0;
}
@media (max-width: 767px) { .al-tm-expertise__context-items { font-size: 16px; } }

.al-tm-expertise__context-link {
	color: var(--e-global-color-secondary, #1F2328);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.3s ease, color 0.2s ease;
}
.al-tm-expertise__context-link:hover {
	color: var(--e-global-color-primary, #10555A);
	background-size: 100% 1px;
}

.al-tm-expertise__context-sep {
	color: rgba(31, 35, 40, 0.35);
	margin: 0 2px;
}

/* === Focus states === */
.al-tm-expertise__index-link:focus-visible,
.al-tm-expertise__directory-item:focus-visible,
.al-tm-expertise__solutions-item:focus-visible,
.al-tm-expertise__context-link:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #10555A);
	outline-offset: 4px;
	border-radius: 2px;
}

/* =============================================================
 * BIO TESTIMONIAL — [arbor_team_testimonial_bio]
 *
 * Renders the first row of the team_member's ACF testimonials
 * repeater, styled to match the existing carousel slide (loop
 * template 476) so it sits naturally inside the dark Arbor-Green
 * testimonial section with no visual seam between the two systems.
 *
 * Slide typography spec (mirrored from the loop template):
 *   Quote:  Satoshi 300, 32 / 26 / 22 px desktop/tablet/mobile,
 *           48 / 38 / 32 line-height, white, 32px bottom margin
 *   Rule:   32 × 2 px, Sage (#6F8C86), left-aligned, 16px below
 *   Name:   Satoshi 500, 16 px, 1.4em line-height, white,
 *           8px bottom margin
 *   Org:    Lato 400, 14 px, 1.4em line-height, white 50% alpha,
 *           -18px top margin (sits tight under name)
 *
 * When the body has `al-bio-has-acf-testimonial` (set in
 * arbor-law-core.php), the loop-carousel block is hidden and this
 * widget takes over. Otherwise the carousel renders normally.
 * ============================================================= */

.al-tm-testimonial-bio {
	display: none;
	max-width: 573px;
	margin: 0;
	text-align: left;
}
body.al-bio-has-acf-testimonial .al-tm-testimonial-bio {
	display: block;
}

body.al-bio-has-acf-testimonial .al-tm-testimonial-carousel,
body.al-bio-has-acf-testimonial .elementor-widget-loop-carousel:has(.al-tm-testimonial-carousel) {
	display: none !important;
}

/* Single bio testimonial = no need for prev/next arrows. The
   existing carousel JS already hides .al-testimonial-nav when the
   slide count is ≤ 1, but it won't run while the carousel itself
   is hidden, so we suppress the nav here too. */
body.al-bio-has-acf-testimonial .al-testimonial-nav {
	display: none !important;
}

.al-tm-testimonial-bio__quote {
	font-family: 'Satoshi', sans-serif;
	font-weight: 300;
	font-size: 32px;
	line-height: 48px;
	letter-spacing: 0;
	color: #FFFFFF;
	margin: 0 0 32px;
}
@media (max-width: 1024px) {
	.al-tm-testimonial-bio__quote { font-size: 26px; line-height: 38px; }
}
@media (max-width: 767px) {
	.al-tm-testimonial-bio__quote { font-size: 22px; line-height: 32px; }
}

.al-tm-testimonial-bio__rule {
	width: 32px;
	height: 2px;
	background: var(--e-global-color-accent, #6F8C86);
	border: 0;
	margin: 0 0 16px;
}

.al-tm-testimonial-bio__name {
	font-family: 'Satoshi', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4em;
	color: #FFFFFF;
	margin: 0 0 8px;
}

.al-tm-testimonial-bio__org {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4em;
	color: rgba(255, 255, 255, 0.5);
	margin: -18px 0 0;
}

/* ===========================================================
 * Bio Testimonial Video — hide the section by default; reveal
 * only when the body has `al-tm-has-testimonial-video` (added
 * by the body_class filter in arbor-law-core.php when the
 * team_member's `testimonial_video_url` ACF field is set).
 * ----------------------------------------------------------- */
.al-tm-testimonial-video {
	display: none !important;
}
body.al-tm-has-testimonial-video .al-tm-testimonial-video {
	display: flex !important;
}