/* ============================================================
   Mirador Law — Single Team Page (Individual) v4 stylesheet
   Spec: Figma MDR-OCA-AttorneyBio-v3
   Scoped under .mdl-team-v4 so every rule wins specificity over
   Bootstrap, theme-style.css, home-style.css, and responsive.css.
   Breakpoints: 1200 / 992 / 768 / 600.
   ============================================================ */

.mdl-team-v4,
.mdl-team-v4 *,
.mdl-team-v4 *::before,
.mdl-team-v4 *::after {
	box-sizing: border-box;
}
.mdl-team-v4 {
	--mdl-gold:        #CAA45D;
	--mdl-gold-dark:   #B5903F;
	--mdl-prussian:    #243952;
	--mdl-slate:       #4E6072;
	--mdl-slate-light: #647C90;
	--mdl-paynes:      #506272;
	--mdl-light-blue:  #BECCD7;
	--mdl-azure:       #E8F6F8;
	--mdl-brand-black: #18020C;
	--mdl-font:        'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--mdl-container:   1397px;
	--mdl-gutter:      32px;

	font-family: var(--mdl-font);
	color: var(--mdl-paynes);
	line-height: 1.5;
	background: #fff;
}

.mdl-team-v4 .mdl-team-main__wrap,
.mdl-team-v4 .mdl-team-cta__inner {
	max-width: var(--mdl-container);
	margin-left: auto; margin-right: auto;
	padding-left: var(--mdl-gutter);
	padding-right: var(--mdl-gutter);
	width: 100%;
}

/* ============================================================
   MAIN GRID
   ============================================================ */
.mdl-team-v4 .mdl-team-main {
	background: #fff;
	padding: 60px 0 96px;
}
.mdl-team-v4 .mdl-team-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 385px;
	gap: 64px;
	align-items: start;
}

/* ============================================================
   LEFT: Content column
   ============================================================ */
.mdl-team-v4 .mdl-team-content { min-width: 0; }

/* Name + role block */
.mdl-team-v4 .mdl-team-name {
	font-family: var(--mdl-font);
	font-weight: 700;
	font-size: 46px;
	line-height: 58px;
	color: var(--mdl-prussian);
	text-transform: uppercase;
	margin: 0 0 12px;
	letter-spacing: 0;
}
.mdl-team-v4 .mdl-team-role {
	font-family: var(--mdl-font);
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
	color: var(--mdl-gold);
	margin: 0 0 28px;
	text-transform: none;
	letter-spacing: 0;
}

/* Bio paragraphs */
.mdl-team-v4 .mdl-team-bio {
	font-family: var(--mdl-font);
	font-weight: 400;
	font-size: 17px;
	line-height: 27px;
	color: var(--mdl-paynes);
}
.mdl-team-v4 .mdl-team-bio p {
	margin: 0 0 1.25em;
	font-size: 17px;
	line-height: 27px;
	color: var(--mdl-paynes);
}
.mdl-team-v4 .mdl-team-bio h2 {
	font-family: var(--mdl-font);
	font-weight: 700; font-size: 24px; line-height: 30px;
	color: var(--mdl-prussian);
	margin: 1.6em 0 .5em;
	text-transform: none;
}
.mdl-team-v4 .mdl-team-bio h3 {
	font-family: var(--mdl-font);
	font-weight: 600; font-size: 19px; line-height: 26px;
	color: var(--mdl-slate);
	margin: 1.4em 0 .4em;
}
.mdl-team-v4 .mdl-team-bio ul,
.mdl-team-v4 .mdl-team-bio ol {
	margin: 0 0 1.25em 1.25em;
	padding-left: 1em;
}
.mdl-team-v4 .mdl-team-bio li { margin: 0 0 .5em; font-size: 17px; line-height: 27px; }
.mdl-team-v4 .mdl-team-bio a {
	color: var(--mdl-gold);
	text-decoration: underline;
}
.mdl-team-v4 .mdl-team-bio a:hover { color: var(--mdl-gold-dark); }
.mdl-team-v4 .mdl-team-bio strong { color: var(--mdl-prussian); font-weight: 600; }

/* Horizontal dividers between sections */
.mdl-team-v4 .mdl-team-divider {
	height: 1px;
	background: var(--mdl-slate-light);
	border: 0;
	margin: 50px 0;
}

/* Section heading row: title left, arrows right.
   Flex with `space-between` + a 40px guaranteed gap. Title has nowrap
   but NO truncation — if it really doesn't fit, allow wrap on small
   viewports via the mobile breakpoint. */
.mdl-team-v4 .mdl-team-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin: 0 0 28px;
}
.mdl-team-v4 .mdl-team-section-title {
	font-family: var(--mdl-font);
	font-weight: 700;
	font-size: 32px;
	line-height: 38px;
	text-transform: uppercase;
	color: var(--mdl-prussian);
	margin: 0;
	letter-spacing: 0;
	white-space: nowrap;
	flex: 0 1 auto;
}

/* Carousel arrows (Media + Associations) — sit tight on the right */
.mdl-team-v4 .mdl-team-arrows {
	display: inline-flex;
	align-items: center;     /* keep both buttons on the same horizontal axis */
	gap: 5px;                /* gap between the two arrow images */
	flex: 0 0 auto;
}

/* Custom arrow buttons — compact 52×52 box that crops the user's PNG
   to show just the meaningful icon (the circle at one edge), hiding
   the transparent canvas / line tail that's making them look spread out.
   All !important to defeat the legacy `button:not(...)` rules in
   style-2025-05-12.css. */
.mdl-team-v4 .mdl-team-carousel__prev.has-custom-arrow,
.mdl-team-v4 .mdl-team-carousel__next.has-custom-arrow,
.mdl-team-v4 .mdl-team-carousel__prev.has-custom-arrow:hover,
.mdl-team-v4 .mdl-team-carousel__next.has-custom-arrow:hover,
.mdl-team-v4 .mdl-team-carousel__prev.has-custom-arrow:focus,
.mdl-team-v4 .mdl-team-carousel__next.has-custom-arrow:focus {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-color: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 54px !important;
	height: 54px !important;
	min-width: 54px !important;
	max-width: 54px !important;
	min-height: 54px !important;
	max-height: 54px !important;
	color: inherit !important;
	font: inherit !important;
	text-transform: none !important;
	text-decoration: none !important;
	letter-spacing: normal !important;
	line-height: 0 !important;
	cursor: pointer !important;
	outline: none !important;
	box-shadow: none !important;
	overflow: hidden !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 54px !important;
}
.mdl-team-v4 .mdl-team-carousel__prev.has-custom-arrow[disabled],
.mdl-team-v4 .mdl-team-carousel__next.has-custom-arrow[disabled] {
	cursor: default !important;
}
.mdl-team-v4 .mdl-team-carousel__prev.has-custom-arrow img,
.mdl-team-v4 .mdl-team-carousel__next.has-custom-arrow img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;          /* fills 52x52, crops the rest */
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* Crop position: left arrow PNG has its circle on the LEFT, right arrow
   PNG has its circle on the RIGHT. Show only that edge of each. */
.mdl-team-v4 .mdl-team-carousel__prev.has-custom-arrow img {
	object-position: left center !important;
}
.mdl-team-v4 .mdl-team-carousel__next.has-custom-arrow img {
	object-position: right center !important;
}

/* Carousel viewport / track */
.mdl-team-v4 .mdl-team-carousel { width: 100%; }
.mdl-team-v4 .mdl-team-carousel__viewport {
	width: 100%;
	overflow: hidden;
}
.mdl-team-v4 .mdl-team-carousel__track {
	display: flex;
	gap: 24px;
	transition: transform .35s ease;
	will-change: transform;
}

/* ============================================================
   MEDIA section
   ============================================================ */
.mdl-team-v4 .mdl-team-media__list .mdl-team-carousel__slide {
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
}
/* One media slide shows at a time, so any track gap would let the NEXT
   slide's edge peek in on the right. Zero the gap for the media list
   (the logos list, which shows 3-up, keeps its own gap). */
.mdl-team-v4 .mdl-team-media__list .mdl-team-carousel__track {
	gap: 0;
}
.mdl-team-v4 .mdl-team-media__item {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--mdl-slate);
	overflow: hidden;
}
.mdl-team-v4 .mdl-team-media__poster {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
}
.mdl-team-v4 .mdl-team-media__play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	/* Lock dimensions with min/max so nothing downstream can stretch it */
	width: 88px !important;
	height: 88px !important;
	min-width: 88px !important;
	min-height: 88px !important;
	max-width: 88px !important;
	max-height: 88px !important;
	border-radius: 50% !important;
	background: #CAA45D !important;
	background-color: #CAA45D !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: background-color .2s ease, transform .15s ease;
}
.mdl-team-v4 .mdl-team-media__play:hover {
	background: var(--mdl-gold-dark) !important;
	transform: translate(-50%, -50%) scale(1.05);
}
.mdl-team-v4 .mdl-team-media__play svg {
	width: 32px !important;
	height: 36px !important;
	display: block !important;
	pointer-events: none;
}
.mdl-team-v4 .mdl-team-media__play svg path {
	fill: #fff !important;
}
.mdl-team-v4 .mdl-team-media__embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ============================================================
   ASSOCIATIONS section (logo grid carousel)
   ============================================================ */
/* The shared `.mdl-team-carousel__viewport` uses `overflow:hidden`, which clips
   both axes. For the logo carousel that vertical clip shaves the bottom edge /
   hover-lift of the cards — only visible when "Associations and Memberships" is
   the LAST section (no Press block beneath it to mask it). Clip the X axis only
   (`overflow-x: clip` does NOT force the Y axis to `auto` the way `hidden` does),
   so the carousel still hides extra logos horizontally but the card bottoms show
   in full. `overflow-clip-margin` leaves a little room for the hover shadow. */
.mdl-team-v4 .mdl-team-logos__list .mdl-team-carousel__viewport {
	overflow: visible;
	overflow-x: clip;
	overflow-clip-margin: 10px;
}
.mdl-team-v4 .mdl-team-logos__list .mdl-team-carousel__slide {
	flex: 0 0 calc((100% - 48px) / 3);
}
/* Logo card per figma: white frame with light-blue border, square aspect,
   image centered inside with breathing room. */
.mdl-team-v4 .mdl-team-logo {
	width: 100%;
	aspect-ratio: 1;
	background: #fff;
	border: 1px solid var(--mdl-light-blue);
	padding: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease;
}
.mdl-team-v4 a.mdl-team-logo:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(0,0,0,.08);
}
.mdl-team-v4 .mdl-team-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* ============================================================
   RECENT PRESS section
   ============================================================ */
.mdl-team-v4 .mdl-team-press__see-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	font-family: var(--mdl-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: var(--mdl-gold);
	color: #fff !important;
	text-decoration: none !important;
	border: 0;
	transition: background-color .2s ease;
}
.mdl-team-v4 .mdl-team-press__see-all:hover { background: var(--mdl-gold-dark); }

.mdl-team-v4 .mdl-team-press__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
/* All press/news cards that mention this attorney render; they wrap into
   rows of two on desktop and stack on mobile. No artificial cap. */
.mdl-team-v4 .mdl-team-press-card {
	background: #fff;
	border: 1px solid var(--mdl-light-blue);
	padding: 25px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 330px;
	text-decoration: none !important;
	color: inherit;
	transition: transform .2s ease, box-shadow .2s ease;
}
.mdl-team-v4 .mdl-team-press-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(0,0,0,.08);
}
.mdl-team-v4 .mdl-team-press-card__title {
	font-family: var(--mdl-font);
	font-weight: 600;
	font-size: 21px;
	line-height: 31px;
	color: var(--mdl-prussian);
	margin: 0;
}
.mdl-team-v4 .mdl-team-press-card__hr {
	height: 1px;
	background: var(--mdl-light-blue);
	border: 0;
	margin: 0;
}
.mdl-team-v4 .mdl-team-press-card__excerpt {
	font-family: var(--mdl-font);
	font-weight: 400;
	font-size: 17px;
	line-height: 27px;
	color: var(--mdl-brand-black);
	margin: 0;
	/* Truncate to 4 lines so press cards align in a clean row */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 0 0 auto;
}
.mdl-team-v4 .mdl-team-press-card__more {
	font-family: var(--mdl-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--mdl-gold);
}
.mdl-team-v4 .mdl-team-press-card:hover .mdl-team-press-card__more { color: var(--mdl-gold-dark); }

/* ============================================================
   RIGHT: Slate sidebar
   ============================================================ */
.mdl-team-v4 .mdl-team-sidebar {
	background: var(--mdl-slate-light);
	align-self: stretch;
}
.mdl-team-v4 .mdl-team-sidebar__inner {
	display: flex;
	flex-direction: column;
	padding: 35px 28px 35px;
	gap: 32px;
}

/* Headshot block */
.mdl-team-v4 .mdl-team-headshot {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 315px;
}
.mdl-team-v4 .mdl-team-headshot__img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--mdl-prussian);
	/* Slightly landscape per design (315×283 → ~1.11:1).
	   `object-position: top center` keeps faces from being cropped at the chin
	   when the source photo is taller — focal point stays at the top of the frame. */
	aspect-ratio: 315 / 283;
	object-fit: cover;
	object-position: top center;
}
.mdl-team-v4 .mdl-team-headshot__bar {
	display: block;
	width: 120px;
	height: 6px;
	background: var(--mdl-gold);
	margin: 0 auto;
	position: relative;
	top: -3px;
}

/* Mobile-only headshot: duplicated at the top of the content column for small
   screens (see single-team.php). Hidden on desktop — the sidebar headshot is
   the one that shows here. The mobile rules below flip this at <= 992px. */
.mdl-team-v4 .mdl-team-headshot--mobile { display: none; }

/* ============================================================
 * Sidebar section heading icons (Education / Certifications / etc.)
 * Optional — only render when an icon is uploaded in the customizer.
 * The icon sits inline-flex with the heading text, 22×22 baseline.
 * ============================================================ */
.mdl-team-v4 .mdl-team-list-section__title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.mdl-team-v4 .mdl-team-list-section__icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
}
.mdl-team-v4 .mdl-team-list-section__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Heading is white on slate sidebar — invert dark icons to white via filter.
	   Override per-icon by adding a `--mdl-icon-filter: none` inline style if needed. */
	filter: var(--mdl-icon-filter, brightness(0) invert(1));
}

/* ============================================================
 * CTA card button icons (Call / Free Consultation)
 * Already-rendered inline SVGs are the default. Uploaded icons
 * replace them via the .mdl-team-card-btn__icon--custom variant.
 * ============================================================ */
.mdl-team-v4 .mdl-team-card-btn__icon--custom {
	display: inline-flex;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
}
.mdl-team-v4 .mdl-team-card-btn__icon--custom img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: var(--mdl-icon-filter, brightness(0) invert(1));
}

/* Sidebar list section (Education / Certifications / Court Admissions / Honors) */
.mdl-team-v4 .mdl-team-list-section {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mdl-team-v4 .mdl-team-list-section__title {
	font-family: var(--mdl-font);
	font-weight: 600;
	font-size: 21px;
	line-height: 31px;
	color: #fff;
	margin: 0;
	letter-spacing: 0;
}
.mdl-team-v4 .mdl-team-list-section ul {
	margin: 0;
	padding: 0 0 0 1.25em;
	list-style: disc;
	list-style-position: outside;
}
.mdl-team-v4 .mdl-team-list-section li {
	font-family: var(--mdl-font);
	font-weight: 600;
	font-size: 17px;
	line-height: 26px;
	color: var(--mdl-azure);
	margin: 0 0 8px;
}
.mdl-team-v4 .mdl-team-list-section li::marker { color: var(--mdl-azure); }
.mdl-team-v4 .mdl-team-list-section li:last-child { margin-bottom: 0; }

/* Sidebar consultation card — light-blue bg per figma */
.mdl-team-v4 .mdl-team-card {
	background: var(--mdl-light-blue);
	padding: 28px 17px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 19px;
}
.mdl-team-v4 .mdl-team-card__logo {
	width: 90px;
	margin-bottom: 4px;
}
.mdl-team-v4 .mdl-team-card__logo svg,
.mdl-team-v4 .mdl-team-card__logo img {
	width: 100%;
	height: auto;
	display: block;
}
.mdl-team-v4 .mdl-team-card__title {
	font-family: var(--mdl-font);
	font-weight: 600;
	font-size: 21px;
	line-height: 31px;
	color: var(--mdl-prussian);
	text-align: center;
	margin: 0;
}
.mdl-team-v4 .mdl-team-card__body {
	font-family: var(--mdl-font);
	font-weight: 600;
	font-size: 17px;
	line-height: 26px;
	color: var(--mdl-paynes);
	text-align: center;
	margin: 0;
}

/* Gold buttons inside the card */
.mdl-team-v4 .mdl-team-card-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: var(--mdl-gold);
	padding: 12px 18px;
	font-family: var(--mdl-font);
	font-weight: 500;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff !important;
	text-decoration: none !important;
	border: 0;
	transition: background-color .2s ease;
}
.mdl-team-v4 .mdl-team-card-btn:hover {
	background: var(--mdl-gold-dark);
	color: #fff !important;
}
.mdl-team-v4 .mdl-team-card-btn__icon {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mdl-team-v4 .mdl-team-card-btn__icon svg {
	width: 100%; height: 100%;
	display: block;
}
.mdl-team-v4 .mdl-team-card-btn__label {
	flex: 1;
	text-align: center;
}

/* ============================================================
   CTA — From Crisis To Clarity
   ============================================================ */
.mdl-team-v4 .mdl-team-cta {
	background: var(--mdl-light-blue);
	padding: 90px 0;
	text-align: center;
}
.mdl-team-v4 .mdl-team-cta__inner {
	display: flex; flex-direction: column; align-items: center;
	gap: 24px;
	max-width: 1052px;
}
.mdl-team-v4 .mdl-team-cta__eyebrow {
	color: var(--mdl-prussian);
	font-family: var(--mdl-font);
	font-weight: 600; font-size: 22px; line-height: 42px;
	text-transform: uppercase; margin: 0;
}
.mdl-team-v4 .mdl-team-cta__title {
	color: var(--mdl-prussian);
	font-family: var(--mdl-font);
	font-weight: 700; font-size: 32px; line-height: 38px;
	text-transform: uppercase; margin: 0;
}
.mdl-team-v4 .mdl-team-cta__sub {
	color: var(--mdl-paynes);
	font-family: var(--mdl-font);
	font-weight: 600; font-size: 21px; line-height: 31px;
	margin: 0; text-align: center;
}
.mdl-team-v4 .mdl-team-cta__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 60px;
	font-family: var(--mdl-font);
	font-weight: 500; font-size: 16px; line-height: 24px;
	letter-spacing: 1px; text-transform: uppercase;
	background: var(--mdl-gold);
	color: #fff !important;
	text-decoration: none !important;
	border: 0;
	transition: background-color .2s ease;
	margin-top: 10px;
	min-width: 380px;
}
.mdl-team-v4 .mdl-team-cta__btn:hover { background: var(--mdl-gold-dark); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1200px) {
	.mdl-team-v4 .mdl-team-grid {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 40px;
	}
}
@media (max-width: 992px) {
	.mdl-team-v4 .mdl-team-main { padding: 48px 0 72px; }
	.mdl-team-v4 .mdl-team-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* Photo to the TOP on mobile: the stacked sidebar would otherwise drop the
	   headshot to the very bottom of the page. Show the duplicated headshot
	   above the name, and hide the sidebar copy so the photo appears once. */
	.mdl-team-v4 .mdl-team-sidebar .mdl-team-headshot { display: none; }
	.mdl-team-v4 .mdl-team-content .mdl-team-headshot--mobile {
		display: block;
		width: 100%;
		max-width: 340px;
		margin: 0 auto 30px;
	}
	.mdl-team-v4 .mdl-team-name { font-size: 38px; line-height: 46px; }
	.mdl-team-v4 .mdl-team-role { font-size: 17px; line-height: 26px; }
	.mdl-team-v4 .mdl-team-section-title { font-size: 26px; line-height: 32px; }
	.mdl-team-v4 .mdl-team-divider { margin: 36px 0; }
	.mdl-team-v4 .mdl-team-press__grid { gap: 16px; }   /* keep one row; just tighten gap on tablet */
	.mdl-team-v4 .mdl-team-press-card { min-height: 0; }
	.mdl-team-v4 .mdl-team-logos__list .mdl-team-carousel__slide {
		flex: 0 0 calc((100% - 24px) / 2);
	}
	.mdl-team-v4 .mdl-team-sidebar { max-width: 480px; margin: 0 auto; align-self: auto; }

	.mdl-team-v4 .mdl-team-cta { padding: 64px 20px; }
	.mdl-team-v4 .mdl-team-cta__eyebrow { font-size: 18px; line-height: 28px; }
	.mdl-team-v4 .mdl-team-cta__sub     { font-size: 18px; line-height: 28px; }
	.mdl-team-v4 .mdl-team-cta__btn     { min-width: 280px; }
}
@media (max-width: 768px) {
	.mdl-team-v4 { --mdl-gutter: 20px; }
	.mdl-team-v4 .mdl-team-main { padding: 36px 0 56px; }
	.mdl-team-v4 .mdl-team-name { font-size: 32px; line-height: 40px; margin-bottom: 8px; }
	.mdl-team-v4 .mdl-team-role { font-size: 16px; line-height: 24px; margin-bottom: 20px; }
	.mdl-team-v4 .mdl-team-section-title { font-size: 22px; line-height: 28px; white-space: normal; }
	/* Mobile: stack the heading and arrows vertically, both left-aligned so
	   the arrows sit directly under the heading and line up with it. */
	.mdl-team-v4 .mdl-team-section-head {
		margin-bottom: 20px;
		gap: 16px;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	.mdl-team-v4 .mdl-team-section-title { flex: 1 1 auto; width: 100%; }
	.mdl-team-v4 .mdl-team-arrows { justify-content: flex-start; margin-left: 0; align-self: flex-start; }
	.mdl-team-v4 .mdl-team-divider { margin: 30px 0; }

	.mdl-team-v4 .mdl-team-logos__list .mdl-team-carousel__slide {
		flex: 0 0 calc((100% - 12px) / 2);
	}
	.mdl-team-v4 .mdl-team-carousel__track { gap: 12px; }

	.mdl-team-v4 .mdl-team-media__play { width: 60px; height: 60px; }
	.mdl-team-v4 .mdl-team-media__play svg { width: 22px; height: 26px; }

	.mdl-team-v4 .mdl-team-sidebar__inner { padding: 28px 22px; gap: 26px; }
	.mdl-team-v4 .mdl-team-list-section__title { font-size: 19px; line-height: 28px; }
	.mdl-team-v4 .mdl-team-list-section li { font-size: 15px; line-height: 24px; }
	.mdl-team-v4 .mdl-team-card__title { font-size: 19px; line-height: 28px; }
	.mdl-team-v4 .mdl-team-card__body  { font-size: 15px; line-height: 24px; }
	.mdl-team-v4 .mdl-team-card-btn { font-size: 14px; padding: 12px 14px; gap: 8px; }
	.mdl-team-v4 .mdl-team-card-btn__icon { width: 22px; height: 22px; }

	.mdl-team-v4 .mdl-team-cta__btn { width: 100%; max-width: 320px; min-width: 0; padding: 14px 24px; }
}
@media (max-width: 600px) {
	.mdl-team-v4 .mdl-team-name { font-size: 28px; line-height: 36px; }
	.mdl-team-v4 .mdl-team-logos__list .mdl-team-carousel__slide {
		flex: 0 0 100%;
	}
	/* On phones the press/news cards stack into a single column so each
	   has room to breathe. All related cards still render. */
	.mdl-team-v4 .mdl-team-press__grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		overflow: visible;
	}
}


/* ---------- Sticky sidebar ----------
 * Attorney sidebar follows the reader down the bio on wide screens. */
@media (min-width: 961px) {
	.mdl-team-v4 .mdl-team-sidebar {
		position: -webkit-sticky;
		position: sticky;
		top: 90px;
		align-self: start;
	}
}