/* Local Area Landing Pages
 * Palette and font sizing matched to /quote-2 (page-id 3936) — no
 * new colours introduced; all values either come from the main theme
 * stylesheet or from the existing quote-2 page-specific overrides.
 *
 * Theme greens used: #52772a (quote-2 primary), #cbddcb (hover),
 * #75b729 (.btn base), #54851D (.btn.dark / .d-green).
 * Theme greys used: #f7f7f7 (.grey-bg), #ececec (.grey-bg-3), #ddd (.grey-bg-2).
 * Text: #343434 (matches .how_w on quote-2) / body default #3b3b3b.
 */

/* ===================================================================
 * SHARED — section spacing, headings, eyebrows
 * =================================================================== */
.local-area-hero,
.local-area-trustbar,
.local-area-cards,
.local-area-villages,
.local-area-faq {
	font-family: 'Poppins', sans-serif;
	color: #343434;
	line-height: 1.55;
}

.local-area-cards,
.local-area-villages,
.local-area-faq {
	padding: 60px 0;
}

.local-area-cards .container,
.local-area-villages .container,
.local-area-faq .container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.local-area-eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #343434;
	margin: 0 auto 30px;
	text-align: center;
	background: #ececec;
	padding: 8px 18px;
	border-radius: 6px;
}

/* Wrap the eyebrow to keep it centred in section header */
.local-area-cards__header,
.local-area-villages__header,
.local-area-faq__header {
	text-align: center;
}

.local-area-heading {
	font-size: 2em;
	font-weight: 700;
	line-height: 1.2;
	color: #52772a;
	margin: 0 auto 50px;
	text-align: center;
	max-width: 800px;
}

@media (max-width: 720px) {
	.local-area-heading { font-size: 1.5em; }
}

/* Section background variation using only theme greys. */
.local-area-cards    { background: #f7f7f7; padding-bottom: 80px; }
.local-area-villages { background: #fff; }
.local-area-faq      { background: #f7f7f7; }

/* Site-theme blocks rendered inside the local-area page also get
 * targeted backgrounds (these classes only resolve here). */
.page-section.text-image-block--wrap.about-shrekfeet-guildford { background: #fff; padding: 60px 0; }
.page-section.text-image-block--wrap.meet-technician { background: #f7f7f7; padding: 60px 0; }
.page-section.text-block.a-programme-built-around-your-lawn { background: #f7f7f7; padding: 70px 0 50px; margin-top: 0; }
.page-block.multi-cols { background: #f7f7f7; padding: 0 0 60px; }
.page-section.text-block.guildford-rating { background: #fff; padding: 20px 0; border-bottom: 1px solid #ddd; margin-bottom: 0; }

/* Safe-strap (text_block.safe-strap) — bright yellow-green strap with the
 * brand bee centred and positioned half-out of the strap's top edge.
 * Sits between the problem cards and the programme heading. */
.page-section.text-block.safe-strap {
	background: #afcb08;
	padding: 0;
	text-align: center;
	position: relative;
	overflow: visible;
}
.page-section.text-block.safe-strap .container {
	max-width: 700px;
	text-align: center;
	padding-top: 70px;       /* clears the bottom half of the bee */
	padding-bottom: 50px;
	position: relative;
}
/* Bee sits with ~60% inside the strap and ~40% above. Bumped up to 150px
 * with top: -50px (down from 120px / -60px). */
.page-section.text-block.safe-strap .safe-strap__bee {
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
	width: 150px;
	height: auto;
	margin: 0;
	z-index: 1;
}
.page-section.text-block.safe-strap .title {
	font-size: 2em;
	font-weight: 700;
	color: #fff;
	margin: 0 auto 8px;
	line-height: 1.2;
}
.page-section.text-block.safe-strap p {
	color: #fff;
	max-width: 56ch;
	margin: 0 auto;
	font-size: 1em;
	line-height: 1.5;
}
@media (max-width: 720px) {
	.page-section.text-block.safe-strap .container { padding-top: 64px; padding-bottom: 48px; }
	.page-section.text-block.safe-strap .title { font-size: 1.3em; }
	.page-section.text-block.safe-strap .safe-strap__bee { width: 108px; top: -36px; }
}

/* ===================================================================
 * HERO — matches quote-2's home_type_banner pattern (image + overlay
 * + white text). Fallback bg uses theme dark green if no image is set.
 * =================================================================== */
.local-area-hero {
	position: relative;
	background: #54851D;       /* theme dark green fallback when no image */
	color: #fff;
	overflow: hidden;
	text-align: center;
}

.local-area-hero__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Dark overlay sits above the bg image and below the content — matches
 * quote-2 home_type_banner approach (rgba(0,0,0,0.5)). Ensures any image
 * uploaded keeps the white hero text readable. */
.local-area-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1;
	pointer-events: none;
}

.local-area-hero__inner {
	position: relative;
	z-index: 2;
	padding: 100px 0 70px;
}

.local-area-hero__inner .container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.local-area-hero__eyebrow {
	display: inline-block;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 6px 18px;
	border-radius: 6px;
	margin-bottom: 28px;
	text-transform: none;
}

.local-area-hero__headline {
	font-size: 3em;
	line-height: 1.2;
	font-weight: 800;
	margin: 0 auto 18px;
	max-width: 22ch;
	color: #fff;
}
/* Clear the floated bee before the subhead / CTAs so they don't sit beside it */
.local-area-hero__headline::after {
	content: "";
	display: block;
	clear: both;
}

.local-area-hero__sub {
	font-size: 1.1em;
	line-height: 1.5;
	max-width: 60ch;
	margin: 0 auto 32px;
	color: #fff;
}

.local-area-hero__sub p { margin: 0; }

.local-area-hero__ctas {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}

/* CTAs follow quote-2's lawn_renovation pattern: white bg, green text,
 * light-green hover. Matches the existing site button shape (50px radius,
 * weight 800). */
.local-area-hero__cta {
	display: inline-block;
	padding: 8px 36px 10px;
	font-size: 1.15em;
	font-weight: 800;
	border-radius: 50px;
	border: 3px solid transparent;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

/* Both hero CTAs share the same style — white bg, green text, light-green
 * hover. (Was: primary solid + secondary outlined.) */
.local-area-hero__cta--primary,
.local-area-hero__cta--secondary {
	background: #fff;
	border-color: #fff;
	color: #52772a;
}
.local-area-hero__cta--primary:hover,
.local-area-hero__cta--secondary:hover {
	background: #cbddcb;
	border-color: #cbddcb;
	color: #52772a;
}

@media (max-width: 720px) {
	.local-area-hero__inner { padding: 64px 0 48px; }
	.local-area-hero__headline { font-size: 2em; }
	.local-area-hero__sub { font-size: 1em; }
	.local-area-hero__cta { font-size: 0.8em; padding: 8px 20px 7px; }
}

/* Bee — exact quote-2 spec. Lives inside the H1, float-left with negative
 * top margin so it overlaps the area above. The breakpoints mirror the
 * .page-id-3936 .inline-bee rules from quote-2's CSS verbatim. */
.local-area-hero__headline .inline-bee {
	float: left;
	margin-top: -46px;
	width: 120px;
	height: auto;
	margin-right: 0;
}
@media (max-width: 1200px) {
	.local-area-hero__headline .inline-bee {
		max-width: 100px;
		height: auto;
		margin: -94px 0 0 -51px;
	}
}
@media (max-width: 992px) {
	.local-area-hero__headline .inline-bee {
		max-width: 93px;
		height: auto;
		margin: -90px 0 0 -5px;
	}
}
@media (max-width: 768px) {
	.local-area-hero__headline .inline-bee {
		float: left;
		margin-top: -85px;
		width: 86px;
	}
}

/* ===================================================================
 * TRUST BAR — uses theme grey, theme dark-green accent on rating
 * =================================================================== */
.local-area-trustbar {
	background: #f7f7f7;
	border-bottom: 1px solid #ececec;
	padding: 22px 0;
	color: #343434;
}

.local-area-trustbar__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.local-area-trustbar__tech {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 auto;
}

.local-area-trustbar__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: #ececec;
}

.local-area-trustbar__avatar--placeholder {
	border: 1.5px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #3b3b3b;
	font-size: 1.25rem;
}

.local-area-trustbar__tech-text { display: flex; flex-direction: column; }
.local-area-trustbar__name { font-weight: 600; color: #343434; font-size: 0.95em; }
.local-area-trustbar__subtitle { font-size: 0.85em; color: #3b3b3b; }

.local-area-trustbar__stat {
	display: flex;
	flex-direction: column;
	text-align: right;
}

.local-area-trustbar__stat-value {
	font-size: 1.1em;
	font-weight: 700;
	color: #52772a;
}

.local-area-trustbar__star { color: #f4b400; margin-left: 2px; }
.local-area-trustbar__stat-label { font-size: 0.8em; color: #3b3b3b; }

@media (max-width: 600px) {
	.local-area-trustbar__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
	.local-area-trustbar__stat { text-align: left; flex-direction: row; gap: 8px; align-items: baseline; }
}

/* ===================================================================
 * ABOUT (existing .text-image-block--wrap) — single centred column
 * =================================================================== */
.page-section.text-image-block--wrap.about-shrekfeet-guildford .text-image-block {
	display: block !important;
	text-align: center;
}
.page-section.text-image-block--wrap.about-shrekfeet-guildford .text-image-block_text {
	width: 100% !important;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 !important;
	text-align: center;
}
.page-section.text-image-block--wrap.about-shrekfeet-guildford .text-image-block_image,
.page-section.text-image-block--wrap.about-shrekfeet-guildford .page-section_side {
	display: none !important;
}
.page-section.text-image-block--wrap.about-shrekfeet-guildford .text-image-block_text .title {
	text-align: center;
	font-size: 2em;
	font-weight: 700;
	line-height: 1.2;
	max-width: 32ch;
	color: #52772a;
	margin: 0 auto 20px;
}
.page-section.text-image-block--wrap.about-shrekfeet-guildford .text-image-block_text p {
	max-width: 90ch;
	margin-left: auto;
	margin-right: auto;
	color: #343434;
}

@media (max-width: 720px) {
	.page-section.text-image-block--wrap.about-shrekfeet-guildford .text-image-block_text .title { font-size: 1.5em; }
}

/* ===================================================================
 * PROBLEM CARDS — left-aligned content (multi-column rule), section
 * heading centred.
 * =================================================================== */
.local-area-cards__header { margin-bottom: 56px; }

.local-area-cards__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

@media (max-width: 720px) { .local-area-cards__grid { grid-template-columns: 1fr; } }

.local-area-card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: left;
}
/* Media is visually first (top of column, left of row) without reversing
 * the flex direction — keeps unused space at the BOTTOM of the card, not
 * the top, so all card media areas sit flush at the top. */
.local-area-card__media { order: -1; }
/* Content grows to consume any remaining vertical space, so the card
 * stays tight regardless of how grid stretches its height. */
.local-area-card__content { flex: 1; }

.local-area-card--full { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }

@media (max-width: 720px) { .local-area-card--full { flex-direction: column; } }

.local-area-card--full .local-area-card__content { flex: 1 1 60%; }
.local-area-card--full .local-area-card__media { flex: 1 1 40%; min-height: 240px; }

.local-area-card__title {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 1.2em;
	font-weight: 700;
	color: #343434;
	margin: 0 0 14px;
	line-height: 1.3;
}

.local-area-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: #52772a;
	flex-shrink: 0;
	margin-top: 2px;
}

.local-area-card__icon svg { width: 24px; height: 24px; }
.local-area-icon__dot { width: 8px; height: 8px; background: #52772a; border-radius: 50%; }

/* Hide problem-card icons per amend round 2 */
.local-area-card__icon { display: none !important; }
.local-area-card__title { gap: 0; }

.local-area-card__body { font-size: 0.95em; color: #343434; line-height: 1.65; }
.local-area-card__body p { margin: 0 0 12px; }
.local-area-card__body p:last-child { margin-bottom: 0; }

.local-area-card__media {
	background: #f7f7f7;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 220px;     /* fixed so every card's media is identical */
	flex-shrink: 0;
	width: 100%;
}

.local-area-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.local-area-card__media--placeholder {
	border: 1.5px dashed #ddd;
	background: transparent;
	color: #3b3b3b;
	font-size: 0.85em;
	font-style: italic;
	text-align: center;
	padding: 24px;
}

/* ===================================================================
 * PROGRAMME HEADING (text_block.a-programme-built-around-your-lawn)
 * =================================================================== */
.page-section.text-block.a-programme-built-around-your-lawn .container {
	max-width: 800px;
	text-align: center;
}
/* Match the other section titles on the page — green #52772a, 2em, weight 700 */
.page-section.text-block.a-programme-built-around-your-lawn .title {
	font-size: 2em;
	font-weight: 700;
	color: #52772a;
	margin-bottom: 20px;
}
.page-section.text-block.a-programme-built-around-your-lawn p {
	color: #343434;
}

/* ===================================================================
 * 3-STEP PROCESS (multi_columns)
 * Mirrors quote-2's .page-id-3936 .title.smaller.green pattern:
 * big green numbers (7.5rem on quote-2, 6em here for balance). Cards
 * centred to match the original "How it Works" presentation.
 * =================================================================== */
.page-block.multi-cols .container { max-width: 1180px; padding: 0 24px; }
.page-block.multi-cols h4.title { display: none; }

.page-block.multi-cols .multi-cols-wrap {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 720px) {
	.page-block.multi-cols .multi-cols-wrap { grid-template-columns: 1fr; }
}

/* No card boxes — matches quote-2 layout exactly */
.page-block.multi-cols .cols-3 {
	background: transparent;
	border: 0;
	padding: 0;
	text-align: center;
	display: block;
	width: 100% !important;
}

.page-block.multi-cols .cols-3 img.m-b-10 { display: none; }

/* Big green numbers — quote-2's exact .page-id-3936 .title.smaller.green spec */
.page-block.multi-cols .cols-3 .title.smaller.green {
	display: block !important;
	background: transparent;
	color: #52772a;
	width: auto;
	height: auto;
	font-size: 7.5rem;
	font-weight: 800;
	line-height: 1em;
	text-align: center;
	margin: 0;
	border-radius: 0;
}

/* Step title — quote-2's exact .how_item_title spec.
 * Quote-2 sets no font-size on .how_item_title — but the theme's
 * reset (font-size: 100% on all elements including h3) clamps it to
 * body size. Browser default h3 is ~1.17em; restore that so the title
 * has visual weight under the 7.5rem number. */
.page-block.multi-cols .how_item_title {
	text-align: center;
	line-height: 1.3em;
	max-width: 236px;
	margin: 0 auto 8px;
	color: #343434;
	font-size: 1.3em;
	font-weight: 700;
}

/* Step body — quote-2's exact .how_text spec.
 * Same approach: quote-2 doesn't set font-size on .how_text. */
.page-block.multi-cols .how_text {
	text-align: center;
	max-width: 75%;
	margin: 0 auto;
	color: #343434;
	line-height: 1.55;
}

/* ===================================================================
 * PILLS (village pills + badges) — theme greys, no new colours
 * =================================================================== */
.local-area-pill {
	display: inline-block;
	padding: 9px 18px;
	font-size: 0.95em;
	background: #fff;
	color: #343434;
	border: 1px solid #ddd;
	border-radius: 50px;
	line-height: 1.2;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Subtle hover on the village pills (decorative — they're not clickable). */
.local-area-villages__pills .local-area-pill:hover {
	background: #cbddcb;
	border-color: #52772a;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(82, 119, 42, 0.15);
}
.local-area-villages__pills .local-area-pill--highlight:hover {
	background: #4b833c;
	border-color: #4b833c;
	color: #fff;
}

.local-area-pill--badge {
	background: #f7f7f7;
	color: #52772a;
	border-color: #ececec;
	font-weight: 600;
	font-size: 0.85em;
	margin-top: 8px;
}

.local-area-pill--highlight {
	background: #52772a;
	color: #fff;
	border-color: #52772a;
	font-weight: 600;
}

/* ===================================================================
 * VILLAGE PILLS SECTION
 * =================================================================== */
/* Match the cards section spacing — header margin-bottom 56px, intro
 * sits tight under the heading (no extra margin) so it doesn't add a
 * second layer of whitespace before the pills. */
.local-area-villages__header { margin-bottom: 56px; text-align: center; }
.local-area-villages__intro {
	font-size: 1em;
	color: #343434;
	margin: 0 auto;
	max-width: 60ch;
	text-align: center;
}
.local-area-villages__intro p { margin: 0; }

.local-area-villages__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: center;
}

/* ===================================================================
 * FAQ ACCORDION
 * =================================================================== */
.local-area-faq__header { margin-bottom: 24px; }
.local-area-faq__list { display: flex; flex-direction: column; max-width: 800px; margin: 0 auto; }

.local-area-faq__item {
	border-top: 1px solid #ddd;
	padding: 22px 0;
}

.local-area-faq__item:last-child { border-bottom: 1px solid #ddd; }

.local-area-faq__question {
	font-size: 1.05em;
	font-weight: 600;
	color: #343434;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.local-area-faq__question::-webkit-details-marker { display: none; }

.local-area-faq__question::after {
	content: '+';
	font-size: 1.5em;
	color: #52772a;
	font-weight: 400;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.local-area-faq__item[open] .local-area-faq__question::after {
	content: '−';
}

.local-area-faq__answer {
	padding: 14px 0 0;
	font-size: 0.97em;
	color: #343434;
	line-height: 1.65;
	max-width: 70ch;
}

.local-area-faq__answer p { margin: 0 0 12px; }
.local-area-faq__answer p:last-child { margin-bottom: 0; }

/* ===================================================================
 * CTA FOOTER (lawn_renovation) — match quote-2 exactly: dark green BG,
 * white buttons with #52772a text, #cbddcb hover.
 * =================================================================== */
/* CTA block — quote-2 exact match: bright bg image (no darken overlay),
 * compact padding, matching .p-tb-40 baseline. */
.lawn_renovation {
	background-color: #54851D;
	color: #fff;
	font-weight: 700;
	font-size: 20px;
	padding: 40px 0 !important;
}
.lawn_renovation .container { position: relative; }

/* The CTA WITHOUT a background image (i.e. "Request a lawn assessment")
 * gets its own brand green and wider body copy. */
.lawn_renovation:not([style]) {
	background-color: #4b833c;
}
.lawn_renovation:not([style]) p {
	max-width: 800px;
}
.lawn_renovation .container { max-width: 800px; text-align: center; }
.lawn_renovation .title {
	color: #fff;
	font-size: 1.9em;
	font-weight: 700;
	margin-bottom: 16px;
}
.lawn_renovation p {
	color: #fff;
	font-size: 1em;
	max-width: 500px;
	margin: 0 auto 24px;
	line-height: 1.5;
}

.lawn_renovation .btn-block {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: nowrap;
	align-items: center;
}

/* Quote-2 lawn_renovation button overrides — exact spec from page-id-3936 */
.lawn_renovation .btn,
.lawn_renovation .btn.dark {
	background: #fff;
	border-color: #fff;
	color: #52772a;
	font-size: 1.15em;
	font-weight: 800;
	padding: 8px 36px 10px;
	border-radius: 50px;
	white-space: nowrap;
	margin: 0 !important; /* override theme's m-r-10 / m-l-10 */
}
.lawn_renovation .btn:hover,
.lawn_renovation .btn.dark:hover {
	background: #cbddcb;
	border-color: #cbddcb;
	color: #52772a;
	box-shadow: none;
}

@media (max-width: 720px) {
	.lawn_renovation { padding: 56px 0 !important; }
	.lawn_renovation .title { font-size: 1.5em; }
	.lawn_renovation .btn-block { flex-wrap: wrap; }
	.lawn_renovation .btn,
	.lawn_renovation .btn.dark { font-size: 0.85em; padding: 8px 18px 7px; }
}

/* ===================================================================
 * RATING BAR (text_block.guildford-rating)
 * Re-uses the same markup as quote-2's rating block (.rating_con).
 * White background here (quote-2 uses grey).
 * =================================================================== */
.page-section.text-block.guildford-rating .container { max-width: 800px; }
.page-section.text-block.guildford-rating .multi-cols-wrap {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 80px;
	flex-wrap: nowrap;
}
.page-section.text-block.guildford-rating .cols-2 {
	display: flex;
	align-items: center;
	gap: 12px;
	width: auto !important;
	flex: 0 0 auto;
}
@media (max-width: 600px) {
	.page-section.text-block.guildford-rating .multi-cols-wrap {
		flex-wrap: wrap;
		gap: 16px;
		justify-content: center;
	}
	.page-section.text-block.guildford-rating .cols-2 {
		width: 100% !important;
		justify-content: center;
	}
}
.page-section.text-block.guildford-rating .rate_t {
	font-size: 52px;
	font-weight: 800;
	line-height: 1;
}
.page-section.text-block.guildford-rating .rate_t_r {
	font-size: 16px;
	font-weight: 700;
	color: #343434;
	margin-left: 8px;
}
.page-section.text-block.guildford-rating .google-stars {
	display: flex;
	align-items: center;
	gap: 4px;
}
.page-section.text-block.guildford-rating .google-stars svg {
	width: 22px;
	height: 24px;
	fill: #fbc52f;
}
@media (max-width: 600px) {
	.page-section.text-block.guildford-rating .multi-cols-wrap { gap: 16px; }
	.page-section.text-block.guildford-rating .rate_t { font-size: 36px; }
}

/* ===================================================================
 * MEET YOUR TECHNICIAN (text_image.meet-technician)
 * 2-column: text + image. Theme's default text_image layout already
 * handles the columns — we just style it.
 * =================================================================== */
.page-section.text-image-block--wrap.meet-technician .text-image-block {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: 40px;
	max-width: 1180px;
	margin: 0 auto;
}
.page-section.text-image-block--wrap.meet-technician .text-image-block_text {
	flex: 1 1 auto;
	padding-right: 0;
}
/* Technician photo — small circular avatar (matches trust-bar style) */
.page-section.text-image-block--wrap.meet-technician .text-image-block_image,
.page-section.text-image-block--wrap.meet-technician .text-image-block_image--img {
	flex: 0 0 140px;
	width: 140px !important;
	height: 140px !important;
	border-radius: 50%;
	overflow: hidden;
	object-fit: cover;
	max-width: 140px;
}
/* Match .local-area-card__title-text spec (font-size: 1.2em, weight 700, dark) */
.page-section.text-image-block--wrap.meet-technician .title {
	font-size: 1.2em;
	font-weight: 700;
	color: #343434;
	line-height: 1.3;
	margin: 0 0 14px;
	text-align: left;
}
.page-section.text-image-block--wrap.meet-technician p {
	font-size: 1em;
	color: #343434;
	line-height: 1.65;
	margin: 0;
}
@media (max-width: 720px) {
	.page-section.text-image-block--wrap.meet-technician .text-image-block {
		flex-direction: column;
		gap: 24px;
	}
	.page-section.text-image-block--wrap.meet-technician .title { font-size: 1.5em; }
}