/* ============================================================
   Mirador Law - Personal Injury Landing v4
   All rules scoped under .mdl-pi-v4 to avoid bleed.
   Brand tokens match home-v4 / header-v4.
   ============================================================ */

.mdl-pi-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-bg-light: #F3F5F7;
	--mdl-card-bg: #F4F4F4;
	--mdl-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--mdl-container: 1366px;
	--mdl-gutter: 32px;
	font-family: var(--mdl-font);
	color: var(--mdl-paynes);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.mdl-pi-v4 *, .mdl-pi-v4 *::before, .mdl-pi-v4 *::after { box-sizing: border-box; }

/* Shared container */
.mdl-pi-v4 .mdl-pi-hero__inner,
.mdl-pi-v4 .mdl-pi-crisis__inner,
.mdl-pi-v4 .mdl-pi-why__inner,
.mdl-pi-v4 .mdl-pi-testimonials__wrap,
.mdl-pi-v4 .mdl-pi-results__wrap,
.mdl-pi-v4 .mdl-pi-team__wrap,
.mdl-pi-v4 .mdl-pi-faq__wrap,
.mdl-pi-v4 .mdl-pi-cta__inner {
	max-width: var(--mdl-container);
	margin: 0 auto;
	padding-left: var(--mdl-gutter);
	padding-right: var(--mdl-gutter);
	width: 100%;
}

/* H2 shared */
.mdl-pi-v4 .mdl-pi-h2 {
	font-family: var(--mdl-font);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--mdl-prussian);
	margin: 0 0 16px;
	/* Long titles must wrap inside narrow viewports */
	overflow-wrap: break-word;
	word-wrap: break-word;
	max-width: 100%;
}
.mdl-pi-v4 .mdl-pi-h2--white { color: #fff !important; }
.mdl-pi-v4 .mdl-pi-h2--azure { color: #E8F6F8 !important; }

/* Buttons */
.mdl-pi-v4 .mdl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 36px;
	border-radius: 0;
	font-family: var(--mdl-font);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none !important;
	border: 0;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.mdl-pi-v4 .mdl-btn--gold {
	background: var(--mdl-gold);
	color: #fff !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 1px;
}
.mdl-pi-v4 .mdl-btn--gold:hover { background: var(--mdl-gold-dark); }
.mdl-pi-v4 .mdl-btn--sm { padding: 14px 60px; font-size: 16px; }

/* ============ SECTION 1: HERO ============ */
.mdl-pi-v4 .mdl-pi-hero {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	min-height: 560px;
	display: flex;
	padding: 80px 32px;
}
.mdl-pi-v4 .mdl-pi-hero--align-top    { align-items: flex-start; }
.mdl-pi-v4 .mdl-pi-hero--align-center { align-items: center; }
.mdl-pi-v4 .mdl-pi-hero--align-bottom { align-items: flex-end; }
.mdl-pi-v4 .mdl-pi-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
.mdl-pi-v4 .mdl-pi-hero__title {
	font-family: var(--mdl-font);
	font-weight: 700;
	font-size: 64px;
	line-height: 1.1;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0;
	color: #fff;
}
.mdl-pi-v4 .mdl-pi-hero__sub {
	font-size: 21px;
	line-height: 31px;
	color: #fff;
	max-width: 760px;
	margin: 0;
	font-weight: 600;
}
.mdl-pi-v4 .mdl-pi-hero__phone {
	font-size: 17px;
	color: #fff;
	margin: 17px 0 0;
}
.mdl-pi-v4 .mdl-pi-hero__phone a {
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
}
.mdl-pi-v4 .mdl-pi-hero__phone a:hover { color: var(--mdl-gold) !important; }

/* ============ SECTION 2: FROM CRISIS TO RECOVERY ============ */
.mdl-pi-v4 .mdl-pi-crisis {
	background: var(--mdl-light-blue);
	color: var(--mdl-paynes);
	padding: 96px 0;
}
.mdl-pi-v4 .mdl-pi-crisis.has-bg {
	background-color: var(--mdl-light-blue);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.mdl-pi-v4 .mdl-pi-crisis__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 48px;
	align-items: center;
	margin-bottom: 56px;
}
.mdl-pi-v4 .mdl-pi-crisis .mdl-pi-h2 {
	color: #243952 !important;
	margin-bottom: 20px;
}
.mdl-pi-v4 .mdl-pi-crisis__copy p {
	color: #506272;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.6;
	margin: 0 0 16px;
}
.mdl-pi-v4 .mdl-pi-crisis__copy p:last-child { margin-bottom: 0; }
.mdl-pi-v4 .mdl-pi-crisis__logo {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	opacity: .65;
}
.mdl-pi-v4 .mdl-pi-crisis__logo img {
	max-width: 220px;
	max-height: 220px;
	width: auto;
	height: auto;
	display: block;
}

/* Cards grid - kept dark slate with white text */
.mdl-pi-v4 .mdl-pi-crisis__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.mdl-pi-v4 .mdl-pi-card {
	position: relative;
	background: #879BAB;
	border: 1px solid rgba(255, 255, 255, .08);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;                /* tight - icon and text almost touching */
	padding: 0 24px;         /* zero top AND bottom padding per request */
	color: #fff !important;
	text-decoration: none !important;
	min-height: 132px;
	transition: background-color .2s ease, transform .2s ease;
}
.mdl-pi-v4 .mdl-pi-card:hover {
	background: rgba(78, 96, 114, .92);
	transform: translateY(-2px);
}
/* Icon hard-locked to 88x88 regardless of source dimensions.
   object-fit:contain centers the source inside the box, preserving
   aspect ratio so a 80x80 PNG and a 200x100 SVG both render identically.
   !important defeats the existing theme's img { max-width: 100% } rule. */
/* Fix vertical alignment on the card container */
.mdl-pi-v4 .mdl-pi-card {
    justify-content: flex-start; /* pushes content to top */
    align-items: center;         /* keeps content horizontally centered */
}

.mdl-pi-v4 .mdl-pi-card__icon {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    flex: 0 0 auto;
}

.mdl-pi-v4 .mdl-pi-card__title {
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    line-height: 1.2;
    margin: 0 !important;
    padding: 0 0 14px !important;  /* breathing room before card bottom edge */
}
.mdl-pi-v4 .mdl-pi-card__arrow {
	position: absolute;
	bottom: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Custom uploaded arrow: strip wrapper styling, let the user's image show
   full size with its own colors and background intact. */
.mdl-pi-v4 .mdl-pi-card__arrow--custom {
	background: transparent !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	box-shadow: none !important;
}
.mdl-pi-v4 .mdl-pi-card__arrow--custom .mdl-pi-card__arrow-img {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	filter: none !important;       /* keep original colors */
	opacity: 1 !important;
}
/* Default (uploaded arrow w/o the --custom path, e.g. legacy) - keeps the
   white-locked small look. Custom path above overrides this. */
.mdl-pi-v4 .mdl-pi-card__arrow-img {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	max-width: 18px !important;
	min-height: 18px !important;
	max-height: 18px !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	filter: brightness(0) invert(1);
}

/* The 10th card centers on its own row */
.mdl-pi-v4 .mdl-pi-card:nth-child(10) {
	grid-column: 2 / 3;
}

/* ============ SECTION 3: WHY CHOOSE ============ */
/* ============================================================
   WHY CHOOSE MIRADOR — Figma MDL-OCA-PersonalInjury-Landing-Div
   Section 1476×586 white. Heading 32/38 prussian uppercase center.
   Subhead 21/31 paynes center. Divider: two 108×2.5 gold double-
   lines flanking a 47.85×44 centered logo. Grid of 4 cards
   (280px each) with 18/28 paynes headings and 17/27 brand-black
   body copy.
   ============================================================ */
.mdl-pi-v4 .mdl-pi-why {
	background: #fff;
	padding: 96px 0;
}
.mdl-pi-v4 .mdl-pi-why__inner {
	text-align: center;
	max-width: 1354px;
	margin: 0 auto;
}
.mdl-pi-v4 .mdl-pi-why__inner .mdl-pi-h2 {
	font-family: var(--mdl-font);
	font-weight: 700;
	font-size: 32px;
	line-height: 38px;
	text-transform: uppercase;
	color: var(--mdl-prussian);
	margin: 0 0 12px;
	letter-spacing: 0;
}
.mdl-pi-v4 .mdl-pi-why__sub {
	font-family: var(--mdl-font);
	font-weight: 600;
	font-size: 21px;
	line-height: 31px;
	color: var(--mdl-paynes);
	margin: 0 0 36px;
	text-align: center;
	text-transform: none;
}

/* Decorative divider: two 108×2.5px gold lines per side, stacked 6px
   apart, with a customizable 47.85×44 logo slot centered between. */
.mdl-pi-v4 .mdl-pi-why__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;                  /* zero — line/mark/line carry their own margins */
	margin: 0 auto 56px;
	width: 318px;
	max-width: 100%;
	height: 44px;
}
.mdl-pi-v4 .mdl-pi-why__line {
	flex: 0 0 108px;
	/* Figma: each side has two 2.5px gold strips whose top edges sit 6px apart
	   (Vector 5 top 4898, Vector 6 top 4904). Container = 2.5 + 3.5 + 2.5 = 8.5px. */
	height: 8.5px;
	background: transparent;
	border: 0;
	position: relative;
}
.mdl-pi-v4 .mdl-pi-why__line::before,
.mdl-pi-v4 .mdl-pi-why__line::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 2.5px;
	background: var(--mdl-gold);
}
.mdl-pi-v4 .mdl-pi-why__line::before { top: 0; }
.mdl-pi-v4 .mdl-pi-why__line::after  { bottom: 0; }
.mdl-pi-v4 .mdl-pi-why__mark {
	flex: 0 0 auto;
	width: 47.85px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Figma: line groups sit 102px apart (left line ends at x=670, right starts
	   at x=772). Margin = (102 − 47.85) / 2 ≈ 27.075px on each side. */
	margin: 0 27px;
}
.mdl-pi-v4 .mdl-pi-why__mark svg,
.mdl-pi-v4 .mdl-pi-why__mark img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* 4-column grid below the divider */
.mdl-pi-v4 .mdl-pi-why__grid {
	display: grid;
	grid-template-columns: repeat(4, 280px);
	column-gap: 78px;
	row-gap: 32px;
	text-align: left;
	justify-content: center;
	margin-top: 0;
}
.mdl-pi-v4 .mdl-pi-why__col {
	width: 280px;
}
.mdl-pi-v4 .mdl-pi-why__h4 {
	font-family: var(--mdl-font);
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
	color: var(--mdl-paynes);
	margin: 0 0 12px;
	letter-spacing: 0;
	text-transform: none;       /* explicit override - some parent themes set h4 { text-transform: uppercase } globally */
}
.mdl-pi-v4 .mdl-pi-why__col p {
	color: #18020C;          /* brand black per figma */
	font-family: var(--mdl-font);
	font-weight: 400;
	font-size: 17px;
	line-height: 27px;
	margin: 0;
}

/* ============ SECTION 4: WHAT TO EXPECT ============
   Background split: top half is the road image, bottom half is light blue.
   The card sits centered and visually spans both halves.
*/
/* ============================================================
   WHAT TO EXPECT — Figma MDL-OCA-PersonalInjury Section
   Outer section: aerial road photo background.
   Inner card (Frame 43): 1236×488, slate-tinted, optional geometric
   pattern bg (uploaded by user). Centered content with 48px stack gap.
     Heading area (Frame 42): 1027×122, 18px gap
       Heading:  Montserrat 700 / 32 / 38 uppercase, Azure #E8F6F8
       Sub:      Montserrat 600 / 21 / 31, white
     Cards row (Group 47): 1236×218, five 237.21×218 cards, ~12.5px gap
       Card bg:  Light Blue #BECCD7, padding 30 24
       Inner col (Frame 33): 189.21×158, gap 24
         Title:  Montserrat 600 / 18 / 28, Prussian
         Rule:   72×2.5 Gold
         Body:   Montserrat 400 / 17 / 27, Paynes
     Button (Frame): 584×52, padding 14 60, Gold bg, white text
       Montserrat 500 / 16 / 24 uppercase 1px tracking
   ============================================================ */
.mdl-pi-v4 .mdl-pi-expect {
	position: relative;
	background-color: var(--mdl-light-blue);   /* fills the BOTTOM half */
	padding: 0;
	overflow: hidden;
}
.mdl-pi-v4 .mdl-pi-expect::before {
	/* TOP-HALF background only — the road photo lives here, light-blue
	   from the section's own background-color shows in the bottom half. */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background-image: var(--mdl-pi-s4-bg, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--mdl-slate);   /* fallback if no image set */
	z-index: 0;
	pointer-events: none;
}
.mdl-pi-v4 .mdl-pi-expect__card {
	position: relative;
	z-index: 1;
	max-width: 1236px;
	width: calc(100% - 48px);
	margin: 80px auto;
	padding: 60px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	/* Solid slate fill UNDER the optional uploaded pattern. No blend mode,
	   no scrim, no transparency — the user's pattern renders at full
	   strength on top of the slate fill (so use a PNG with transparency
	   if you want the slate to show through the pattern's negative space). */
	background-color: var(--mdl-slate);
	background-image: var(--mdl-pi-s4-card-bg, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
}

/* Heading + sub block (Frame 42) — single flex child of the card so the
   48px card-gap doesn't apply between heading and sub. The two share an
   18px internal stack-gap per figma. */
.mdl-pi-v4 .mdl-pi-expect__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 1027px;
}
.mdl-pi-v4 .mdl-pi-expect__card .mdl-pi-h2 {
	font-family: var(--mdl-font);
	font-weight: 700;
	font-size: 32px;
	line-height: 38px;
	text-transform: uppercase;
	max-width: 1027px;
	margin: 0;
	color: #E8F6F8;
}
.mdl-pi-v4 .mdl-pi-expect__sub {
	font-family: var(--mdl-font);
	font-weight: 600;
	font-size: 21px;
	line-height: 31px;
	color: #fff;
	max-width: 1027px;
	margin: 0;
	text-align: center;
}

/* Cards row (Group 47) — 5 cards × 237.21 + 4 × 12.5px gaps = 1236px */
.mdl-pi-v4 .mdl-pi-expect__grid {
	width: 100%;
	max-width: 1236px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	column-gap: 12.5px;
	row-gap: 16px;
	margin: 0;
}

/* Individual card (Frame 4/13/14/15/16) */
.mdl-pi-v4 .mdl-pi-expect__step {
	background: var(--mdl-light-blue);   /* #BECCD7 */
	color: var(--mdl-prussian);
	padding: 30px 24px;
	min-height: 218px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;                            /* Frame 33 inner gap */
	text-align: center;
}
.mdl-pi-v4 .mdl-pi-expect__step-h {
	font-family: var(--mdl-font);
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
	color: var(--mdl-prussian);          /* #243952 */
	margin: 0;
	letter-spacing: 0;
	text-transform: none;
}
.mdl-pi-v4 .mdl-pi-expect__step-rule {
	display: block;
	width: 72px;
	height: 2.5px;
	background: var(--mdl-gold);          /* #CAA45D */
	flex: none;
}
.mdl-pi-v4 .mdl-pi-expect__step-b {
	font-family: var(--mdl-font);
	font-weight: 400;
	font-size: 17px;
	line-height: 27px;
	color: var(--mdl-paynes);            /* #506272 */
	margin: 0;
	text-align: center;
}

/* CTA button (584×52, padding 14 60) */
.mdl-pi-v4 .mdl-pi-expect__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 584px;
	max-width: 100%;
	padding: 14px 60px;
	background: var(--mdl-gold);
	color: #fff !important;
	font-family: var(--mdl-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	border: 0;
	margin: 0;
	transition: background-color .2s ease;
}
.mdl-pi-v4 .mdl-pi-expect__btn:hover { background: var(--mdl-gold-dark); }

/* ============ SECTION 5: TESTIMONIALS ============ */
.mdl-pi-v4 .mdl-pi-testimonials {
	background: var(--mdl-bg-light);
	padding: 96px 0;
}
.mdl-pi-v4 .mdl-pi-testimonials__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
	flex-wrap: wrap;
	gap: 16px;
}
.mdl-pi-v4 .mdl-pi-testimonials__head .mdl-pi-h2 { margin: 0; }
.mdl-pi-v4 .mdl-pi-testimonials__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.mdl-pi-v4 .mdl-pi-test-card {
	display: flex;
	flex-direction: column;
	background: var(--mdl-prussian);
	text-decoration: none !important;
	color: #fff !important;
	overflow: hidden;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}
/* Kill theme's gold hover border on testimonial cards / video triggers */
.mdl-pi-v4 .mdl-pi-test-card,
.mdl-pi-v4 .mdl-pi-test-card:hover,
.mdl-pi-v4 .mdl-pi-test-card:focus,
.mdl-pi-v4 .mdl-pi-test-card:focus-within,
.mdl-pi-v4 .mdl-pi-test-card__media,
.mdl-pi-v4 .mdl-pi-test-card__media:hover,
.mdl-pi-v4 .mdl-pi-test-card__media:focus,
.mdl-pi-v4 .mdl-pi-test-card .mdl-video-trigger,
.mdl-pi-v4 .mdl-pi-test-card .mdl-video-trigger:hover,
.mdl-pi-v4 .mdl-pi-test-card .mdl-video-trigger:focus,
.mdl-pi-v4 .mdl-pi-test-card .mdl-video-trigger:focus-visible {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}
.mdl-pi-v4 .mdl-pi-test-card__media {
	position: relative;
	height: 320px;
	background: var(--mdl-slate);
	overflow: hidden;
}
.mdl-pi-v4 .mdl-pi-test-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none !important;
	min-width: 100%;
	object-fit: cover !important;
	display: block;
}
.mdl-pi-v4 .mdl-pi-test-card__play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 64px; height: 64px;
}
.mdl-pi-v4 .mdl-pi-test-card__body {
	padding: 24px;
	text-align: center;
}
.mdl-pi-v4 .mdl-pi-test-card__name {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
}
.mdl-pi-v4 .mdl-pi-test-card__desc {
	color: var(--mdl-gold);
	font-size: 14px;
	font-style: italic;
}

/* ============ SECTION 6: CASE RESULTS ============ */
.mdl-pi-v4 .mdl-pi-results {
	background: #647C90;
	padding: 96px 0;
}
.mdl-pi-v4 .mdl-pi-results__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
	flex-wrap: wrap;
	gap: 16px;
}
.mdl-pi-v4 .mdl-pi-results__head .mdl-pi-h2 { margin: 0; }
.mdl-pi-v4 .mdl-pi-results__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.mdl-pi-v4 .mdl-pi-result {
	background: #4E6072;
	border-top: 3px solid var(--mdl-gold);
	padding: 32px 24px;
	text-align: center;
	text-decoration: none !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform .2s ease;
}
.mdl-pi-v4 .mdl-pi-result:hover { transform: translateY(-2px); }
.mdl-pi-v4 .mdl-pi-result__amount {
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 1px;
}
.mdl-pi-v4 .mdl-pi-result__desc {
	color: #fff;
	font-size: 15px;
	line-height: 1.4;
}
.mdl-pi-v4 .mdl-pi-result__more {
	margin-top: 8px;
	color: var(--mdl-gold);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
}

/* ============ SECTION 7: TEAM ============ */
.mdl-pi-v4 .mdl-pi-team {
	background: #fff;
	padding: 96px 0;
}
.mdl-pi-v4 .mdl-pi-team__wrap { text-align: center; }
.mdl-pi-v4 .mdl-pi-team__wrap .mdl-pi-h2 { margin-bottom: 48px; }
.mdl-pi-v4 .mdl-pi-team__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	max-width: 1100px;
	margin: 0 auto;
}
.mdl-pi-v4 .mdl-pi-team__card {
	display: flex;
	flex-direction: column;
	text-decoration: none !important;
	background: transparent;
	/* Same hover behavior as case-result + recent press cards:
	   gentle 3px lift with soft drop-shadow on hover/focus, smooth
	   transition. Name shifts to gold for a subtle accent. */
	transition: transform .2s ease, box-shadow .2s ease;
	cursor: pointer;
}
.mdl-pi-v4 .mdl-pi-team__card:hover,
.mdl-pi-v4 .mdl-pi-team__card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(0,0,0,.18);
}
.mdl-pi-v4 .mdl-pi-team__card:focus-visible { outline: 2px solid var(--mdl-gold); outline-offset: 2px; }
.mdl-pi-v4 .mdl-pi-team__card:hover .mdl-pi-team__name { color: var(--mdl-gold); }
.mdl-pi-v4 .mdl-pi-team__photo {
	position: relative;
	height: 360px;
	overflow: hidden;
	background: var(--mdl-card-bg);
}
.mdl-pi-v4 .mdl-pi-team__photo img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	/* Anchor the photo to the TOP of the frame at every breakpoint so faces
	   stay in view when the frame is shorter than the source image's aspect.
	   Applies to PI page + About page (both use this scope) on desktop, tablet
	   and mobile — the base rule cascades into every responsive override. */
	object-position: top center;
	max-width: none !important;
}
.mdl-pi-v4 .mdl-pi-team__body {
	background: var(--mdl-prussian);
	padding: 20px 16px;
	text-align: center;
}
.mdl-pi-v4 .mdl-pi-team__name {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 6px;
}
.mdl-pi-v4 .mdl-pi-team__title {
	color: var(--mdl-gold);
	font-size: 18px;
	font-weight: 600;
}

/* 7-person layout: 3 + 3 + 1 centered */
.mdl-pi-v4 .mdl-pi-team__card:nth-child(7) {
	grid-column: 2 / 3;
}

/* ============ SECTION 8: FAQ ============ */
.mdl-pi-v4 .mdl-pi-faq {
	background: #fff;
	padding: 96px 0;
}
.mdl-pi-v4 .mdl-pi-faq__wrap { text-align: center; }
.mdl-pi-v4 .mdl-pi-faq__sub {
	color: #506272;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 auto 40px;
	max-width: 1000px;
}
/* FAQ — single container with internal row dividers (one box look) */
.mdl-pi-v4 .mdl-pi-faq__list {
	max-width: 1100px;
	margin: 0 auto;
	text-align: left;
	border: 1px solid #E0E4E8;
	background: #fff;
}
.mdl-pi-v4 .mdl-pi-faq__item {
	border: 0;
	margin: 0;
	background: transparent;
	border-top: 1px solid #E0E4E8;
}
.mdl-pi-v4 .mdl-pi-faq__item:first-child {
	border-top: 0;
}
.mdl-pi-v4 .mdl-pi-faq__item[open] .mdl-pi-faq__q {
	border-bottom: 2px solid var(--mdl-gold);
}
.mdl-pi-v4 .mdl-pi-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
	color: #506272;
	font-size: 18px;
	font-weight: 600;
	transition: color .2s ease, padding .25s ease;
}
.mdl-pi-v4 .mdl-pi-faq__item[open] .mdl-pi-faq__q {
	color: var(--mdl-prussian);
	border-bottom: 2px solid var(--mdl-gold);
}
.mdl-pi-v4 .mdl-pi-faq__q:hover {
	color: var(--mdl-prussian);
}
.mdl-pi-v4 .mdl-pi-faq__q::-webkit-details-marker { display: none; }
.mdl-pi-v4 .mdl-pi-faq__chev {
	flex-shrink: 0;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1), color .2s ease;
	color: var(--mdl-slate-light);
}
.mdl-pi-v4 .mdl-pi-faq__item:hover .mdl-pi-faq__chev,
.mdl-pi-v4 .mdl-pi-faq__item[open] .mdl-pi-faq__chev {
	color: var(--mdl-gold);
}
.mdl-pi-v4 .mdl-pi-faq__item[open] .mdl-pi-faq__chev {
	transform: rotate(180deg);
}
/* Smooth height animation for the answer.
   `<details>` doesn't natively animate, so we use the modern
   grid-template-rows trick: 0fr (collapsed) → 1fr (open). The
   inner div needs overflow:hidden so children can be clipped
   during the transition. Plus a fade for extra polish. */
.mdl-pi-v4 .mdl-pi-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	color: var(--mdl-paynes);
	font-size: 17px;
	line-height: 1.6;
	background: transparent;
	border: 0;
	opacity: 0;
	transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1),
				opacity .25s ease .05s;
}
.mdl-pi-v4 .mdl-pi-faq__item[open] .mdl-pi-faq__a {
	grid-template-rows: 1fr;
	opacity: 1;
}
.mdl-pi-v4 .mdl-pi-faq__a > * {
	min-height: 0;
	padding: 20px 24px;
}
.mdl-pi-v4 .mdl-pi-faq__a p { margin: 0; }

/* ============ SECTION 9: CTA BEFORE FOOTER ============ */
.mdl-pi-v4 .mdl-pi-cta {
	background: var(--mdl-light-blue);
	padding: 72px 0;
	text-align: center;
}
.mdl-pi-v4 .mdl-pi-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.mdl-pi-v4 .mdl-pi-cta__eyebrow {
	color: #243952;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0px;
	margin: 0;
	text-transform: uppercase;
}
.mdl-pi-v4 .mdl-pi-cta__sub {
	color: #506272;
	font-size: 21px;
	font-weight: 600;
	margin: 0;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
	.mdl-pi-v4 .mdl-pi-hero__title { font-size: 48px; }
	.mdl-pi-v4 .mdl-pi-h2 { font-size: 26px; }
	.mdl-pi-v4 .mdl-pi-crisis__grid { grid-template-columns: repeat(2, 1fr); }
	.mdl-pi-v4 .mdl-pi-card:nth-child(10) { grid-column: auto; }
	.mdl-pi-v4 .mdl-pi-why__grid { grid-template-columns: repeat(2, 1fr); }
	.mdl-pi-v4 .mdl-pi-expect__grid { grid-template-columns: repeat(3, 1fr); column-gap: 12.5px; row-gap: 16px; }
	.mdl-pi-v4 .mdl-pi-expect__card .mdl-pi-h2 { font-size: 28px; line-height: 34px; }
	.mdl-pi-v4 .mdl-pi-expect__sub { font-size: 18px; line-height: 28px; }
	.mdl-pi-v4 .mdl-pi-results__grid { grid-template-columns: repeat(2, 1fr); }
	.mdl-pi-v4 .mdl-pi-team__grid { grid-template-columns: repeat(2, 1fr); }
	.mdl-pi-v4 .mdl-pi-team__card:nth-child(7) { grid-column: auto; }
}

@media (max-width: 768px) {
	.mdl-pi-v4 .mdl-pi-hero { padding: 80px 16px; }
	.mdl-pi-v4 .mdl-pi-hero__title { font-size: 36px; }
	.mdl-pi-v4 .mdl-pi-hero__sub { font-size: 17px; }
	.mdl-pi-v4 .mdl-pi-crisis,
	.mdl-pi-v4 .mdl-pi-why,
	.mdl-pi-v4 .mdl-pi-testimonials,
	.mdl-pi-v4 .mdl-pi-results,
	.mdl-pi-v4 .mdl-pi-team,
	.mdl-pi-v4 .mdl-pi-faq,
	.mdl-pi-v4 .mdl-pi-cta { padding: 56px 0; }
	.mdl-pi-v4 .mdl-pi-crisis__top { grid-template-columns: 1fr; gap: 24px; }
	.mdl-pi-v4 .mdl-pi-crisis__logo { justify-content: center; }
	.mdl-pi-v4 .mdl-pi-crisis__grid { grid-template-columns: 1fr; }
	.mdl-pi-v4 .mdl-pi-why__grid { grid-template-columns: 1fr; }
	.mdl-pi-v4 .mdl-pi-expect { padding: 56px 16px; }
	.mdl-pi-v4 .mdl-pi-expect__card { padding: 40px 20px; gap: 32px; }
	.mdl-pi-v4 .mdl-pi-expect__grid { grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 12px; }
	.mdl-pi-v4 .mdl-pi-expect__card .mdl-pi-h2 { font-size: 22px; line-height: 28px; }
	.mdl-pi-v4 .mdl-pi-expect__sub { font-size: 16px; line-height: 24px; margin-top: 12px; }
	.mdl-pi-v4 .mdl-pi-expect__step { padding: 24px 18px; min-height: 0; gap: 18px; }
	.mdl-pi-v4 .mdl-pi-expect__step-h { font-size: 16px; line-height: 24px; }
	.mdl-pi-v4 .mdl-pi-expect__step-b { font-size: 14px; line-height: 22px; }
	.mdl-pi-v4 .mdl-pi-expect__btn { width: 100%; }
	.mdl-pi-v4 .mdl-pi-testimonials__grid { grid-template-columns: 1fr; }
	/* FAQ: smaller text + tighter padding so questions fit on fewer lines */
	.mdl-pi-v4 .mdl-pi-faq__q {
		font-size: 15px;
		line-height: 1.35;
		padding: 16px 16px;
	}
	.mdl-pi-v4 .mdl-pi-faq__a { font-size: 14px; line-height: 1.5; }
	.mdl-pi-v4 .mdl-pi-faq__a > div,
	.mdl-pi-v4 .mdl-pi-faq__a p { padding: 14px 16px 16px; }
	.mdl-pi-v4 .mdl-pi-faq__chev { width: 16px; height: 16px; }
	/* Add breathing room between FAQ cards on mobile */
	.mdl-pi-v4 .mdl-pi-faq__item {
		margin-bottom: 12px;
		border: 1px solid #E0E4E8;
		border-radius: 6px;
		overflow: hidden;
	}
	.mdl-pi-v4 .mdl-pi-faq__item:first-child { border-top: 1px solid #E0E4E8; }
	.mdl-pi-v4 .mdl-pi-faq__list { display: block; }
	.mdl-pi-v4 .mdl-pi-test-card__media { height: 220px; }
	.mdl-pi-v4 .mdl-pi-results__grid { grid-template-columns: 1fr; }
	.mdl-pi-v4 .mdl-pi-team__grid { grid-template-columns: 1fr; }
	.mdl-pi-v4 .mdl-pi-team__photo { height: 320px; }
	.mdl-pi-v4 .mdl-pi-h2 { font-size: 22px; }

	/* CTA buttons: allow wrap on narrow phones so long labels don't overflow */
	.mdl-pi-v4 .mdl-btn,
	.mdl-pi-v4 .mdl-pi-cta .mdl-btn,
	.mdl-pi-v4 .mdl-pi-expect__btn {
		white-space: normal !important;
		max-width: 100% !important;
		padding: 14px 24px !important;
		font-size: 13px !important;
		line-height: 1.35 !important;
		letter-spacing: 1px !important;
	}
	.mdl-pi-v4 .mdl-pi-cta { padding: 48px 20px; }
}

/* Extra-narrow phones (≤ 380 px). */
@media (max-width: 380px) {
	.mdl-pi-v4 .mdl-pi-h2 { font-size: 19px; line-height: 26px; letter-spacing: 1px; }
	.mdl-pi-v4 .mdl-pi-hero__title { font-size: 28px; }
	.mdl-pi-v4 .mdl-pi-cta { padding: 40px 14px; }
	.mdl-pi-v4 .mdl-pi-cta .mdl-btn,
	.mdl-pi-v4 .mdl-btn {
		font-size: 12px !important;
		padding: 12px 18px !important;
	}
}
/* ==========================================================================
   "Ready to discuss your case?" CTA band.
   Shared between Location (v4) and Practice-Area / location-by-service pages.
   Phone button links to the page's matched office number. Uses the site's
   CTA palette: soft blue-grey panel, prussian heading, slate body, gold button.
   ========================================================================== */
.mdl-ready-cta {
	background: #BECCD7;
	padding: 56px 32px;
	margin: 0;
}
.mdl-ready-cta__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
}
.mdl-ready-cta__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	color: #243952;
	text-transform: uppercase;
	margin: 0;
}
.mdl-ready-cta__body {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 21px;
	line-height: 1.5;
	color: #506272;
	margin: 0;
	max-width: 760px;
}
.mdl-ready-cta__btn {
	margin-top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 44px;
}
.mdl-ready-cta__icon { flex-shrink: 0; }
/* Uploaded custom icon (Customizer) — fixed box so it matches the built-in
   SVG size; contain keeps any aspect ratio without distortion. */
.mdl-ready-cta__icon--custom { width: 18px; height: 18px; object-fit: contain; }

/* ==========================================================================
   UNIVERSAL "card" variant of the Ready-to-discuss CTA.
   Applied on every rendered CTA (via mdl_render_ready_cta) so the design is
   identical on location hubs, service pages, and location-by-service pages:
   a contained blue-grey card, heading on top, body left + Call button right.
   ========================================================================== */
.mdl-ready-cta.mdl-ready-cta--card {
	background: #BECCD7;
	padding: 22px 28px;
	margin: 32px 0 0;
	border-radius: 4px;
}
.mdl-ready-cta--card .mdl-ready-cta__inner {
	max-width: none;
	margin: 0;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	gap: 6px 24px;          /* tighter row gap so title + paragraph sit closer */
}
.mdl-ready-cta--card .mdl-ready-cta__title {
	font-size: 26px;
	flex: 1 1 100%;
	margin: 0 !important;
}
.mdl-ready-cta--card .mdl-ready-cta__body {
	font-size: 18px;
	max-width: 60%;
	flex: 1 1 auto;
	margin: 0 !important;
	align-self: center;
}
.mdl-ready-cta--card .mdl-ready-cta__btn {
	margin: 0 0 0 auto;          /* push Call button to the right edge */
	padding: 14px 36px;
	flex: 0 0 auto;
	align-self: center;
	line-height: 1;              /* keep the button text/icon centred in its box */
}
@media (max-width: 575px) {
	.mdl-ready-cta.mdl-ready-cta--card { padding: 18px 18px; }
	.mdl-ready-cta--card .mdl-ready-cta__inner { flex-direction: column; align-items: flex-start; }
	.mdl-ready-cta--card .mdl-ready-cta__title { font-size: 22px; }
	.mdl-ready-cta--card .mdl-ready-cta__body { max-width: none; }
	.mdl-ready-cta--card .mdl-ready-cta__btn { margin: 4px 0 0; }
}

@media (max-width: 575px) {
	.mdl-ready-cta { padding: 40px 20px; }
	.mdl-ready-cta__title { font-size: 24px; }
	.mdl-ready-cta__body { font-size: 17px; line-height: 1.5; }
}

/* ==========================================================================
   Location (v4) HUB column: left-align the in-column FAQ and Ready CTA.
   Scoped to the hub wrappers (.mdl-loc-v4__faq-wrap / __cta-wrap) so this does
   NOT affect the standalone FAQ page, which also carries .mdl-location-v4 but
   must stay centered.
   ========================================================================== */
.mdl-location-v4 .mdl-loc-v4__faq-wrap .mdl-pi-faq__wrap { text-align: left; }
.mdl-location-v4 .mdl-loc-v4__faq-wrap .mdl-pi-faq .mdl-pi-h2,
.mdl-location-v4 .mdl-loc-v4__faq-wrap .mdl-pi-faq__sub { text-align: left; margin-left: 0; margin-right: 0; }
.mdl-location-v4 .mdl-loc-v4__faq-wrap .mdl-pi-faq__list { margin-left: 0; margin-right: 0; }

/* The Ready CTA on location pages uses the SAME universal .mdl-ready-cta--card
   design as the service pages — no per-location overrides (those caused extra
   height and button misalignment). */