/**
 * Location templates. Royal Coral tokens, matching the approved .dc.html files.
 *
 * Container is 1440px with 24px gutters, full-bleed section backgrounds. Never boxed.
 *
 * CONTRAST: SOLID CTA BUTTONS ARE THE BRAND CORAL #FF7A66 WITH WHITE TEXT, BY EXPLICIT
 * AND REPEATED CLIENT DECISION. THAT PAIRING MEASURES 2.55:1 AND FAILS WCAG 2.1 AA,
 * WHICH REQUIRES 4.5:1 FOR NORMAL TEXT AND 3:1 FOR LARGE TEXT. It is shipped anyway
 * because the client has instructed it three times and is entitled to that call on their
 * own brand. This note exists so nobody later reads the code as an oversight, quietly
 * "fixes" it, and hands the client back a change they have already rejected three times.
 *
 * THIS REPLACES THE OPPOSITE RULE. An earlier pass darkened the fill to #CC4630 to reach
 * 4.68:1 with white, and the note here said the brand coral must NEVER be a solid button
 * fill carrying white text. That rule is withdrawn. The measurement it rested on is
 * unchanged and still true; the decision drawn from it is no longer ours to make.
 *
 *   --mc-coral      #FF7A66   brand coral. Eyebrows, accent words, icon tiles, chip
 *                             hovers, decorative washes — and, now, the solid button fill.
 *   --mc-coral-btn  #FF7A66   the SOLID BUTTON FILL. The same brand coral, kept as its
 *                             own token so the two uses can be separated again in one
 *                             line if the decision is ever revisited. White on it is
 *                             2.55:1. See above.
 *   --mc-coral-btn-hi #F2634D its hover. Visibly darker than the rest state at a glance,
 *                             which is what keeps the control legible as a control.
 *                             White on it is 2.98:1.
 *
 * WHAT DID NOT CHANGE. Every non-button use of coral is untouched, and no text colour
 * anywhere else was weakened to match. The ghost pills on the closing band, the footer
 * and the navy sections keep the contrast work recorded further down this file.
 *
 * SHAPE IS A SETTING, NOT A CONSTANT, AND THERE ARE NOW TWO OF THEM.
 *
 * --mc-btn-radius defaults to the design's 999px pill; Business Info > Appearance >
 * Button shape switches it to 10px. --mc-img-radius is the same idea for photographs,
 * cards and media frames: Image shape > Square emits `--mc-img-radius: 0` and every
 * media rule below reads `var( --mc-img-radius, <its own design radius> )`, so Rounded
 * emits nothing at all and the design's per-element radii survive untouched. That is
 * why the fallbacks differ from rule to rule and must not be normalised to one number.
 *
 * MC_Templates::enqueue() writes both as :root declarations immediately after this file
 * loads, through wp_add_inline_style so source order decides. :root and not .mc-loc,
 * because parts/hero.php renders ABOVE <main class="mc-loc"> and would otherwise miss
 * both tokens — the trap recorded against --mc-shell and --mc-font-h below.
 */

/*
 * :root, not .mc-loc.
 *
 * These three tokens have to resolve in the header, the footer, the mega panels and the
 * sticky action bar as well as inside .mc-loc, and none of those is a descendant of it.
 * Declaring them on the document element lets every one of them inherit, and nothing
 * else in this file re-declares them, so there is no cascade to lose.
 */
:root {
	--mc-coral-btn: #FF7A66;
	--mc-coral-btn-hi: #F2634D;
	--mc-btn-radius: 999px;

	/*
	 * The one seam the non-Latin scripts arrive through.
	 *
	 * A font stack is resolved PER CODEPOINT, so the way to let a Korean or an
	 * Arabic page render without restyling anything is to leave one slot at the end
	 * of the two stacks below and fill it only on the pages that need it. On every
	 * Latin page this is the word sans-serif and the computed font-family is
	 * character for character what it was before this line existed.
	 *
	 * DECLARED ON :root ON PURPOSE. --mc-font-h and --mc-font-b are declared on
	 * .mc-loc and .mc-hero, and a custom property is substituted at computed-value
	 * time on the element that DECLARES it - so a value on .mc-hero may read a
	 * property inherited from :root, which is this direction, and NOT the other way
	 * round, which is the trap recorded against --mc-font-b above.
	 *
	 * MC_Fonts::script_vars_css() overrides it, and only for the ten languages
	 * whose script the Latin families cannot draw.
	 */
	--mc-script: sans-serif;
}

/*
 * .mc-hero is listed beside .mc-loc, and that is a bug fix rather than tidying.
 *
 * parts/hero.php renders ABOVE <main class="mc-loc"> on every Page template, so none of
 * these tokens resolved inside the hero: --mc-shell was unset, which made max-width
 * invalid and left the hero band full-bleed at 1905px while every section below it sat at
 * 1440px, and --mc-font-h never reached the H1, so the largest heading on the site
 * rendered in the theme's body face. Declaring the same block on .mc-hero fixes both
 * without moving the markup. The hero on the location templates is already inside
 * .mc-loc, so it simply inherits the same values twice.
 */
/*
 * .mc-actnow JOINS THE TWO ROOTS, AND IT IS NOT COSMETIC.
 *
 * MEASURED: the act-now band renders as a DIRECT CHILD OF BODY - templates/page-home.php
 * prints it above <main class="mc-loc">, the same as parts/hero.php - so not one token
 * below reached it. getComputedStyle on the band returned the empty string for
 * --mc-navy, --mc-coral, --mc-tint, --mc-ink, --mc-sky and --mc-font-h alike.
 *
 * A var() that resolves to nothing is INVALID AT COMPUTED-VALUE TIME, which for an
 * inherited property means "inherit" rather than "ignore". So the phone button, which
 * declares color: var( --mc-navy ), was quietly taking its colour from whatever the
 * band inherited: harmless while the band was white, and #C3D9EE on #FFFFFF at 1.45:1
 * the moment the band went navy. The tick tile had been failing the same way all along,
 * with no background and no colour of its own.
 *
 * .mc-hero is on this selector for exactly this reason. The fix is to say so once here
 * rather than to restate ten literal hexes further down the file, where they would go
 * stale the first time the palette moves.
 */
.mc-loc,
.mc-hero,
.mc-actnow {
	--mc-navy: #174A7E;
	--mc-sky: #2B8FE5;
	--mc-coral: #FF7A66;
	--mc-coral-hi: #f2634d;
	--mc-ink: #253746;
	--mc-muted: #4a5c6b;
	--mc-muted-2: #607080;
	--mc-sec: #33475a;
	--mc-tint: #EAF6FF;
	--mc-tint-hi: #d7ecff;
	--mc-coral-tint: #FFEDE9;
	--mc-line: #dbe7f1;
	--mc-divider: #c3d0da;
	--mc-grad: linear-gradient( 120deg, #2B8FE5, #174A7E );
	/*
	 * Fallback stacks chosen for shape, not convenience.
	 *
	 * Sora is a geometric grotesque, so Poppins and Century Gothic are the closest
	 * things likely to be installed; Segoe UI and system-ui catch the rest. Source Sans
	 * 3 is a humanist sans, and Segoe UI and Roboto sit far closer to it than the
	 * default system-ui does on macOS. Between the swap and the real face arriving, the
	 * page should look like a slightly different font, not a different design.
	 */
	--mc-font-h: 'Sora', 'Poppins', 'Century Gothic', 'Segoe UI', system-ui, -apple-system, var( --mc-script );
	--mc-font-b: 'Source Sans 3', 'Segoe UI', 'Roboto', system-ui, -apple-system, var( --mc-script );
	--mc-shell: 1440px;

	font-family: var( --mc-font-b );
	color: var( --mc-ink );
	line-height: 1.7;
}

/* Level modifiers. Only the index differs today; the other three are kept as hooks so a
   later tweak has somewhere to land without touching the templates. */
.mc-loc--index .mc-hero { padding-bottom: 34px; }
.mc-loc--index .mc-section:first-of-type { padding-top: 0; }

.mc-loc h1, .mc-loc h2, .mc-loc h3, .mc-hero h1 {
	font-family: var( --mc-font-h );
	color: var( --mc-navy );
	letter-spacing: -.02em;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

/*
 * THE ACT-NOW BAND HEADING, WHICH THE RULE ABOVE CANNOT REACH.
 *
 * MEASURED BEFORE: .mc-actnow h2 computed to "Source Sans 3" - the body face -
 * while every other h2 on the site computed to the heading face. The band is
 * printed by templates/page-home.php as a DIRECT CHILD OF BODY, above
 * <main class="mc-loc">, so .mc-loc h2 never matched it, and .mc-h2 carries only
 * font-size and font-weight. The heading was the one on the page in the wrong face.
 *
 * WHY THIS IS A SEPARATE RULE RATHER THAN THREE MORE SELECTORS ON THE ONE ABOVE.
 * That rule also declares color: var( --mc-navy ). This band is navy: its
 * background is --mc-navy and its heading is white by inheritance from
 * .mc-section--navy. Adding .mc-actnow to a selector that sets a navy colour would
 * paint a navy heading onto a navy background and lose it completely. Only the
 * typography is shared here.
 *
 * DELIBERATELY NOT COPIED: color, margin and line-height. The first would break
 * the band, and the other two would move boxes that are already correct. This
 * changes the face and nothing else.
 */
.mc-actnow h1,
.mc-actnow h2,
.mc-actnow h3 {
	font-family: var( --mc-font-h );
	letter-spacing: -.02em;
}

.mc-loc p, .mc-hero p { margin: 0 0 1.1em; text-wrap: pretty; }

/*
 * .mc-hero a is DELIBERATELY not added here, and this is the cascade trap this file has
 * been bitten by three times. `.mc-loc a` is 0,1,1; `.mc-btn--primary` is 0,1,0 and loses
 * to it. Extending the rule into the hero would repaint both hero buttons navy, which is
 * the one place on the page where the call to action has to be unmistakable.
 */
.mc-loc a { color: var( --mc-navy ); }
.mc-loc a:hover { color: var( --mc-sky ); }

.mc-wrap { max-width: var( --mc-shell ); margin: 0 auto; padding: 0 24px; width: 100%; }
.mc-wrap--narrow { max-width: 940px; }

.mc-section { padding: 72px 0; }
.mc-section--tint { background: var( --mc-tint ); }
.mc-section--tight { padding: 0 0 40px; }
.mc-section--navy { background: var( --mc-navy ); color: #c3d9ee; }
.mc-section--navy h2, .mc-section--navy h3 { color: #fff; }

.mc-h1 { font-size: clamp( 34px, 4.6vw, 56px ); font-weight: 800; }
.mc-h2 { font-size: clamp( 28px, 3.2vw, 42px ); font-weight: 700; }
.mc-h3 { font-size: 22px; font-weight: 700; }
.mc-lead { font-size: 18.5px; color: var( --mc-muted ); line-height: 1.72; max-width: 68ch; }

/* The answer-first paragraph. Slightly darker and heavier than the intro that follows,
   because it is the sentence the page is actually built around. */
.mc-answer { color: var( --mc-sec ); font-weight: 500; }
.mc-section--navy .mc-lead { color: #c3d9ee; }

.mc-eyebrow {
	display: block;
	font-family: var( --mc-font-h );
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --mc-coral );
	margin-bottom: 10px;
}

.mc-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var( --mc-tint );
	color: var( --mc-sky );
	font-family: var( --mc-font-h );
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 999px;
}

.mc-note {
	background: var( --mc-tint );
	border-inline-start: 3px solid var( --mc-sky );
	padding: 10px 14px;
	font-size: 14.5px;
	color: var( --mc-sec );
	border-radius: 0 10px 10px 0;
	margin: 14px 0;
}

/* ---- Buttons ---- */

.mc-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var( --mc-font-b );
	font-weight: 700;
	font-size: 16px;
	border: 2px solid transparent;
	/* The shape setting. Fallback literal so a stylesheet loaded without the
	   :root block above — a cached copy, a partial deploy — still draws pills. */
	border-radius: var( --mc-btn-radius, 999px );
	padding: 15px 28px;
	min-height: 52px;
	cursor: pointer;
	text-decoration: none;
	transition: background .25s, transform .25s, box-shadow .25s;
}

.mc-btn:hover { transform: translateY( -2px ); }
.mc-btn--block { width: 100%; justify-content: center; }

.mc-btn--primary {
	background: var( --mc-coral-btn );
	/* White on the brand coral. 2.55:1, below AA, and a deliberate client decision.
	   See the CONTRAST note at the top of this file before changing either value. */
	color: #FFFFFF;
	box-shadow: 0 8px 18px rgba( 255, 122, 102, .40 );
}
.mc-btn--primary:hover { background: var( --mc-coral-btn-hi ); color: #fff; }

.mc-btn--light { background: #fff; color: var( --mc-navy ); border-color: var( --mc-tint ); }
.mc-btn--light:hover { background: var( --mc-tint-hi ); color: var( --mc-navy ); }

.mc-btn--ghost { background: transparent; color: var( --mc-navy ); border-color: var( --mc-line ); }
.mc-btn--ghost:hover { background: var( --mc-tint ); }

.mc-btn--ghost-d { background: rgba( 255, 255, 255, .14 ); color: #fff; border-color: rgba( 255, 255, 255, .4 ); }
.mc-btn--ghost-d:hover { background: rgba( 255, 255, 255, .24 ); color: #fff; }

.mc-loc :focus-visible, .mc-hero :focus-visible { outline: 3px solid var( --mc-navy ); outline-offset: 2px; }

/* ---- Breadcrumb ---- */

.mc-crumb { font-size: 13.5px; color: var( --mc-muted-2 ); padding: 14px 0; }
/* align-items:center, because the crumbs are not all the same kind of box. The links
   carry 11px vertical padding for a 44px touch target; the CURRENT crumb is bare text with
   none. A flex row defaults to stretch, so every li was forced to the 45px height of the
   padded links, and inside that box the padded text centred while the bare text sat at the
   top - the last item rendered ~11px higher than the rest. Centring the cross axis puts
   every baseline on one line without shrinking the tap target. */
.mc-crumb ol { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.mc-crumb ol::-webkit-scrollbar { display: none; }
.mc-crumb li + li::before { content: "/"; color: var( --mc-divider ); margin-inline-end: 8px; }
.mc-crumb a { color: var( --mc-muted-2 ); display: inline-block; padding: 11px 2px; }

/* ---- Hero ---- */

.mc-hero { padding: 26px 0 62px; }
.mc-hero__grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 52px; align-items: center; }
/* 4/3.4, which is what the approved service, about and city designs specify. The old
   4/3 was a squarer frame than any design asked for and hard-cropped every photograph
   top and bottom. The home page takes a taller frame again, further down this file. */
.mc-hero__img { position: relative; border-radius: var( --mc-img-radius, 28px ); overflow: hidden; box-shadow: 0 24px 50px rgba( 23, 74, 126, .18 ); aspect-ratio: 4/3.4; }
.mc-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.mc-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.mc-cta-row--center { justify-content: center; }

/* ---- Chips ---- */

.mc-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-chips--trust { margin-top: 22px; }
/* Replaces a style="margin-top:26px" on the home page's county chips. This file is the
   only place presentation is allowed to live. */
.mc-chips--spaced { margin-top: 26px; }
.mc-chip {
	display: inline-block;
	background: #fff;
	border: 1.5px solid var( --mc-tint );
	border-radius: 999px;
	padding: 11px 19px;
	font-family: var( --mc-font-h );
	font-weight: 600;
	font-size: 15px;
	transition: border-color .2s, transform .2s;
}
.mc-chip:hover { border-color: var( --mc-sky ); transform: translateY( -2px ); }
.mc-chip a { text-decoration: none; }

.mc-chip-t {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var( --mc-tint );
	color: var( --mc-navy );
	font-family: var( --mc-font-h );
	font-weight: 600;
	font-size: 13.5px;
	padding: 9px 16px;
	border-radius: 999px;
}
.mc-chip-t svg { color: var( --mc-sky ); flex: none; }

/* ---- Icon tiles ---- */

.mc-itile { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.mc-itile--blue { background: var( --mc-tint ); color: var( --mc-sky ); }
.mc-itile--coral { background: var( --mc-coral-tint ); color: var( --mc-coral ); }
.mc-section--navy .mc-itile--blue { background: rgba( 255, 255, 255, .12 ); color: #8fc9f5; }
.mc-section--navy .mc-itile--coral { background: rgba( 255, 122, 102, .18 ); color: #FFB3A5; }

/* ---- Grids ---- */

.mc-service-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 20px; margin-top: 30px; }
.mc-service-card {
	background: #fff;
	border: 1px solid var( --mc-tint );
	border-radius: var( --mc-img-radius, 22px );
	padding: 26px;
	text-decoration: none;
	transition: transform .25s, border-color .25s, box-shadow .25s;
}
.mc-service-card:hover { transform: translateY( -4px ); border-color: var( --mc-sky ); box-shadow: 0 16px 34px rgba( 23, 74, 126, .1 ); }
.mc-service-card h3 { margin: 15px 0 6px; font-size: 19px; }
.mc-service-card p { font-size: 15px; color: var( --mc-muted ); margin-bottom: 12px; }
.mc-more { font-family: var( --mc-font-h ); font-weight: 700; font-size: 14.5px; color: var( --mc-sky ); }

/*
 * Equal rows, and the place-type badge pinned to the bottom.
 *
 * Only some places carry a type badge - Vinings is a community, its neighbours are cities -
 * and a grid row stretches to its tallest item. One badge in the second row made every card
 * in THAT row 128px while the first row stayed at 97px. Two rows of different heights with
 * labels at different offsets is what makes the block look crowded, even though nothing
 * overflows and nothing is clipped.
 *
 * grid-auto-rows:1fr makes every row the height of the tallest card, so the rhythm is
 * uniform. Pushing the badge down with margin-top:auto keeps the city name and description
 * at the same height in every card, badge or no badge.
 */
.mc-city-grid { display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 20px; grid-auto-rows: 1fr; margin-top: 30px; }

/* Doubled to out-rank `.mc-loc a`, which is 0,1,1 - these cards are anchors. */
.mc-city-grid .mc-city-card { display: flex; flex-direction: column; align-items: flex-start; }
.mc-city-grid .mc-city-card__type { margin-top: auto; }
.mc-city-card {
	display: block;
	background: #fff;
	border: 1px solid var( --mc-tint );
	border-radius: var( --mc-img-radius, 18px );
	padding: 20px 22px;
	text-decoration: none;
	transition: transform .2s, border-color .2s, box-shadow .2s;
}
.mc-city-card:hover { transform: translateY( -3px ); border-color: var( --mc-sky ); box-shadow: 0 12px 26px rgba( 23, 74, 126, .08 ); }
.mc-city-card strong { display: block; font-family: var( --mc-font-h ); font-size: 17.5px; color: var( --mc-navy ); letter-spacing: -.02em; }
.mc-city-card span { display: block; font-size: 13px; color: var( --mc-muted-2 ); margin-top: 3px; }
.mc-city-card__type {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: var( --mc-tint );
	color: var( --mc-navy );
	border-radius: 6px;
	padding: 3px 8px;
	margin-top: 8px;
	font-family: var( --mc-font-h );
}

.mc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }

/* ---- Standards ---- */

.mc-standards { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 20px; margin-top: 32px; }
.mc-standard {
	background: rgba( 255, 255, 255, .07 );
	border: 1px solid rgba( 255, 255, 255, .14 );
	border-radius: var( --mc-img-radius, 22px );
	padding: 28px;
}
.mc-standard h3 { color: #fff; font-size: 18.5px; margin: 16px 0 10px; }
.mc-standard p { color: #c3d9ee; font-size: 15.5px; line-height: 1.68; margin: 0; }
.mc-guarantee { color: #a8c6e0; font-size: 14.5px; margin-top: 24px; max-width: 66ch; }

/* ---- Lists ---- */

.mc-pill-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 1.1em; list-style: none; }
.mc-pill-list li {
	background: #fff;
	border: 1.5px solid var( --mc-tint );
	border-radius: 999px;
	padding: 9px 17px;
	font-family: var( --mc-font-b );
	font-weight: 600;
	font-size: 15px;
	color: var( --mc-navy );
}

.mc-list { padding-inline-start: 1.2em; color: var( --mc-sec ); }
.mc-list li { margin-bottom: 8px; }

.mc-check-list { list-style: none; padding: 0; }
.mc-check-list li { position: relative; padding-inline-start: 30px; margin-bottom: 10px; color: var( --mc-sec ); }
.mc-check-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 7px;
	width: 18px;
	height: 10px;
	border-left: 2.5px solid var( --mc-sky );
	border-bottom: 2.5px solid var( --mc-sky );
	transform: rotate( -45deg );
}

.mc-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 18px; margin-top: 28px; }
.mc-steps li { text-align: center; }
.mc-steps__n {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 12px;
	border-radius: 16px;
	background: var( --mc-sky );
	color: #fff;
	font-family: var( --mc-font-h );
	font-weight: 800;
	font-size: 22px;
}
.mc-steps li:nth-child( even ) .mc-steps__n { background: var( --mc-coral ); color: var( --mc-ink ); }
.mc-steps strong { display: block; font-family: var( --mc-font-h ); font-size: 17px; color: var( --mc-navy ); }
.mc-steps span { display: block; font-size: 14px; color: var( --mc-muted ); margin-top: 4px; }

/* ---- Step illustrations ---- */

/* The halo is the design's own treatment for a cut-out figure: a radial wash that fades
   to nothing rather than a hard disc, so a transparent-background PNG sits on it without
   a visible edge. The figure is decorative — the step is fully described by the numeral,
   the heading and the sentence beside it — so the markup carries an empty alt and this
   rule never has to make room for a caption. */
.mc-steps__figure {
	display: block;
	width: 100%;
	max-width: 210px;
	height: 210px;
	margin: 0 auto 2px;
	background: radial-gradient( circle at 50% 64%, #fff 0%, var( --mc-tint-hi ) 52%, rgba( 215, 236, 255, 0 ) 72% );
}

.mc-steps__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow( 0 14px 22px rgba( 23, 74, 126, .18 ) );
}

/* Lifts the numeral onto the bottom of the figure, which is what stops the illustration
   and the number reading as two unrelated things stacked on top of each other. Only when
   a figure is actually present: with no attachment the numeral keeps its own spacing. */
.mc-steps__figure + .mc-steps__n { position: relative; margin-top: -16px; box-shadow: 0 8px 18px rgba( 23, 74, 126, .22 ); }

.mc-example-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 20px; margin-top: 26px; }
.mc-example { background: #fff; border: 1px solid var( --mc-tint ); border-radius: 18px; padding: 22px; }
.mc-example strong { display: block; font-family: var( --mc-font-h ); color: var( --mc-navy ); margin-bottom: 6px; }
.mc-example p { font-size: 15px; color: var( --mc-muted ); margin: 0; }

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

.mc-faq { margin-top: 26px; }
.mc-faq details { border: 1px solid var( --mc-tint ); border-radius: 18px; padding: 19px 24px; margin-bottom: 12px; background: #fff; transition: border-color .2s; }
.mc-faq details[open] { border-color: var( --mc-sky ); }

/* Hover affordance on pointer devices, so it is visibly a hover target before you
   commit to moving onto it. Touch devices never see this. */
@media ( hover: hover ) and ( pointer: fine ) {
	.mc-faq details:hover { border-color: var( --mc-sky ); box-shadow: 0 4px 14px rgba( 23, 74, 126, .07 ); }
	.mc-faq details[data-pinned] { border-color: var( --mc-coral ); }
}
.mc-faq summary {
	font-family: var( --mc-font-h );
	font-weight: 700;
	font-size: 17.5px;
	color: var( --mc-navy );
	letter-spacing: -.02em;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
	min-height: 30px;
}
.mc-faq summary::-webkit-details-marker { display: none; }
.mc-caret { color: var( --mc-sky ); transition: transform .25s; flex: none; }
.mc-faq details[open] .mc-caret { transform: rotate( 45deg ); }
.mc-faq details p { margin: 12px 0 0; font-size: 16px; color: var( --mc-sec ); }

/* ---- Form ---- */

.mc-quote { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: start; }
.mc-form { background: #fff; border: 1px solid var( --mc-tint ); border-radius: 26px; padding: 32px; box-shadow: 0 16px 38px rgba( 23, 74, 126, .1 ); }
.mc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Escape hatch from the two-column row. Without it these labels inherit nothing and
   sit at the row's column width on the widest breakpoints. */
.mc-form__full { display: block; width: 100%; grid-column: 1 / -1; }
.mc-form label { display: block; margin-bottom: 15px; }
.mc-form label > span { display: block; font-family: var( --mc-font-b ); font-weight: 600; font-size: 14px; color: var( --mc-navy ); margin-bottom: 6px; }
.mc-form input, .mc-form select, .mc-form textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1.5px solid var( --mc-line );
	border-radius: 12px;
	font-family: var( --mc-font-b );
	font-size: 16px;
	color: var( --mc-ink );
	min-height: 48px;
	background: #fff;
}
.mc-form input:focus, .mc-form select:focus, .mc-form textarea:focus {
	border-color: var( --mc-sky );
	box-shadow: 0 0 0 3px rgba( 43, 143, 229, .18 );
	outline: none;
}
.mc-hint { display: block; font-size: 12.5px; color: var( --mc-muted-2 ); margin-top: 5px; }
.mc-req { color: #b3261e; font-weight: 700; }
.mc-fine { font-size: 12.5px; color: var( --mc-muted-2 ); margin-top: 12px; text-align: center; line-height: 1.5; }

.mc-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var( --mc-sec ); margin-bottom: 10px; cursor: pointer; }
.mc-consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var( --mc-sky ); flex: none; }
.mc-consent span { font-family: var( --mc-font-b ); font-weight: 400; font-size: 14px; color: var( --mc-sec ); margin: 0; }

/* The design's contact-method cards. Bordered rather than loose rows, because six
   methods stacked as bare text read as one paragraph with icons in it. */
.mc-contact-lines { margin-top: 26px; display: grid; gap: 12px; }
.mc-contact-line {
	display: flex;
	gap: 14px;
	align-items: center;
	background: #fff;
	border: 1.5px solid var( --mc-tint );
	border-radius: 18px;
	padding: 16px 20px;
	transition: border-color .2s, box-shadow .2s;
}
.mc-contact-line:hover { border-color: var( --mc-sky ); box-shadow: 0 10px 24px rgba( 23, 74, 126, .08 ); }
.mc-contact-line .mc-itile { width: 44px; height: 44px; border-radius: 13px; }
.mc-contact-line__body { min-width: 0; }
.mc-contact-line__body strong { display: block; font-family: var( --mc-font-h ); font-size: 13.5px; color: var( --mc-muted-2 ); font-weight: 600; }
/* overflow-wrap, because contact@matercleaningservices.com has no break opportunity and
   would otherwise push the card past the edge of its column. */
.mc-contact-line__value { display: block; font-family: var( --mc-font-h ); font-weight: 700; font-size: 17px; color: var( --mc-navy ); overflow-wrap: anywhere; }

/* ---- ZIP and map ---- */

.mc-zipbox { background: var( --mc-tint ); border-radius: 22px; padding: 24px; }
.mc-zipform { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-zipform input {
	flex: 1;
	min-width: 150px;
	padding: 13px 16px;
	border: 1.5px solid var( --mc-line );
	border-radius: 999px;
	font-family: var( --mc-font-b );
	font-size: 16px;
	min-height: 50px;
	background: #fff;
}
.mc-zipresult { margin-top: 14px; padding: 12px 16px; border-radius: 12px; font-size: 15px; border: 1px solid transparent; }
.mc-zipresult:empty { padding: 0; margin: 0; border: 0; }
.mc-zipresult.is-ok { background: #e4f7ef; color: #0b5f43; border-color: #a6dcc5; }
.mc-zipresult.is-warn { background: #fff3d6; color: #6b5210; border-color: #e0be63; }
.mc-zipresult.is-error { background: #fceceb; color: #8c1d18; border-color: #e7aaa5; }
.mc-zipresult__text { margin: 0; line-height: 1.6; }
.mc-zipresult__link { display: inline-block; margin-top: 8px; font-weight: 600; }
.mc-zipresult__cta { display: inline-flex; margin-top: 12px; padding: 12px 22px; min-height: 46px; font-size: 14.5px; }

.mc-map { position: relative; border-radius: var( --mc-img-radius, 22px ); overflow: hidden; aspect-ratio: 4/3; background: #e8f2fb; margin-top: 18px; }
.mc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mc-map__facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background:
		radial-gradient( circle at 30% 28%, rgba( 43, 143, 229, .16 ) 0%, transparent 46% ),
		radial-gradient( circle at 74% 70%, rgba( 255, 122, 102, .14 ) 0%, transparent 44% ),
		repeating-linear-gradient( 0deg, #dfeefb 0 1px, transparent 1px 34px ),
		repeating-linear-gradient( 90deg, #dfeefb 0 1px, transparent 1px 34px ),
		#f2f8fd;
	font-family: var( --mc-font-b );
}
.mc-map__facade strong { font-family: var( --mc-font-h ); font-size: 17px; color: var( --mc-navy ); }
.mc-map__hint { font-size: 13.5px; color: var( --mc-muted-2 ); }
.mc-map__pin { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var( --mc-sky ); box-shadow: 0 8px 20px rgba( 23, 74, 126, .18 ); }

/* ---- NAP and CTA ---- */

/*
 * The closing contact block.
 *
 * It used to be three columns of 15px text in a 30px box, which put the phone number —
 * the single most valuable thing on the page for a service business — at the same weight
 * as the small print. Enlarged to the proportions MaterContact.dc.html gives its contact
 * cards, and given the cut-out figure the design puts beside them. Everything below is a
 * size and spacing change; no new claim, no address and no price.
 */
.mc-nap {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 30px;
	align-items: center;
	background: var( --mc-tint );
	border-radius: 30px;
	padding: 44px 48px;
}

/* Two classes so it beats the single-column base above and the 1120px rule below it. */
.mc-nap.mc-nap--figure { grid-template-columns: minmax( 0, 250px ) minmax( 0, 1fr ); }

.mc-nap__cols { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 28px 40px; }
.mc-nap__item { display: flex; gap: 14px; align-items: flex-start; }
.mc-nap__item .mc-itile { width: 46px; height: 46px; border-radius: 14px; }
.mc-nap__body { min-width: 0; }
.mc-nap h3 { font-size: 18px; margin-bottom: 6px; }
.mc-nap p { font-size: 17px; color: var( --mc-sec ); margin: 0; line-height: 1.6; overflow-wrap: anywhere; }

/* Beats `.mc-nap p` (0,1,1) on class count, which is what lets the number step up to
   heading scale without the paragraph rule dragging it back to 17px. */
.mc-nap .mc-nap__phone { font-family: var( --mc-font-h ); font-weight: 800; font-size: 25px; letter-spacing: -.02em; }

/* Same halo as the step figures, same reason: these illustrations are transparent PNGs
   and a hard-edged disc behind them looks like a sticker. Decorative, empty alt. */
.mc-nap__figure {
	display: block;
	width: 100%;
	margin: 0;
	background: radial-gradient( circle at 50% 62%, #fff 0%, #ffffff00 70% );
}

.mc-nap__figure img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 260px;
	object-fit: contain;
	filter: drop-shadow( 0 18px 30px rgba( 23, 74, 126, .2 ) );
}

/*
 * NOT var( --mc-grad ), and the difference is measured rather than aesthetic.
 *
 * The shared gradient opens on #2B8FE5. White on #2B8FE5 is 3.41:1, which passes for
 * the 27-42px heading and fails for the 16px paragraph and for any 14.5px button label
 * sitting on it. The client's instruction for this band is that every word in it is
 * white, so the fill is the thing that had to move: this gradient opens on #1E6FB4,
 * where white is 5.27:1, and closes on the same #174A7E, where white is 9.06:1. The
 * coral wash in ::before lands white at 5.05:1 over the lighter end.
 *
 * --mc-grad itself is untouched. The mega promo card, the brand marks and the map
 * facade all still use it, and none of them carries 16px body text.
 */
.mc-cta-card {
	background: linear-gradient( 120deg, #1E6FB4, #174A7E );
	border-radius: 30px;
	padding: 56px 40px;
	text-align: center;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.mc-cta-card::before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba( 255, 122, 102, .16 );
	top: -160px;
	inset-inline-end: -100px;
}
.mc-cta-card > * { position: relative; }
.mc-cta-card h2 { color: #fff; margin-bottom: 12px; }
/* White, not the #dcefff tint the band used to carry. The client asked for every word
   in this section to be white and the fill above was darkened so it can be. */
.mc-cta-card p { color: #fff; max-width: 56ch; margin: 0 auto 24px; }

.mc-back { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- A to Z index ---- */

.mc-alpha { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.mc-alpha a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var( --mc-tint );
	font-family: var( --mc-font-h );
	font-weight: 700;
	text-decoration: none;
}
.mc-alpha a:hover { background: var( --mc-sky ); color: #fff; }
.mc-alpha-group { margin-bottom: 34px; }
.mc-alpha-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 10px; margin-top: 14px; }
.mc-alpha-list li { padding: 10px 14px; border: 1px solid var( --mc-tint ); border-radius: 12px; }
.mc-alpha-list a { font-family: var( --mc-font-b ); font-weight: 600; text-decoration: none; }
.mc-alpha-list span { display: block; font-size: 13px; color: var( --mc-muted-2 ); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; border: 0;
}

.mc-message { margin-top: 12px; font-size: 14.5px; }
.mc-message:empty { display: none; }
.mc-message--ok { color: #0b5f43; }
.mc-message--error { color: #b3261e; }

/* ---- Responsive ---- */

@media ( max-width: 1120px ) {
	.mc-service-grid, .mc-standards, .mc-example-grid { grid-template-columns: repeat( 2, 1fr ); }
	.mc-city-grid, .mc-alpha-list { grid-template-columns: repeat( 3, 1fr ); }
	/* Two classes, to out-rank `.mc-nap.mc-nap--figure` above rather than rely on order. */
	.mc-nap, .mc-nap.mc-nap--figure { grid-template-columns: minmax( 0, 1fr ); }
	.mc-nap__figure { max-width: 260px; margin: 0 auto; }
	.mc-steps { grid-template-columns: repeat( 2, 1fr ); }
}

@media ( max-width: 820px ) {
	.mc-section { padding: 48px 0; }
	.mc-wrap { padding: 0 18px; }
	.mc-hero__grid, .mc-split, .mc-quote { grid-template-columns: 1fr; gap: 30px; }
	.mc-hero__img { order: -1; }
	.mc-service-grid, .mc-standards, .mc-example-grid { grid-template-columns: 1fr; }
	.mc-city-grid, .mc-alpha-list { grid-template-columns: repeat( 2, 1fr ); }
	.mc-form__row { grid-template-columns: 1fr; }
	.mc-cta-card { padding: 38px 22px; }
	.mc-form { padding: 24px; }
	.mc-nap { padding: 30px 24px; }
	.mc-nap__cols { grid-template-columns: minmax( 0, 1fr ); gap: 22px; }
	.mc-nap .mc-nap__phone { font-size: 22px; }
	.mc-steps__figure { max-width: 170px; height: 170px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.mc-loc *, .mc-loc *::before { transition-duration: .001ms !important; animation-duration: .001ms !important; }
	.mc-btn:hover, .mc-service-card:hover, .mc-city-card:hover, .mc-chip:hover { transform: none; }
}

/* ==========================================================================
   SITE NAVIGATION
   ==========================================================================
   Added late, and the reason is worth recording: the navigation was built as
   data (menus, locations, permalinks) with no presentation layer at all. On a
   phone a twelve-item nested list containing fifteen counties simply reflowed
   down the page. A requirements audit caught it; nothing in the code failed.

   Mobile first. The drawer is the default state and the desktop bar is the
   enhancement, because that ordering is what stops the mobile case being an
   afterthought a second time.
   ========================================================================== */

.mc-topbar {
	background: var( --mc-navy );
	color: #fff;
	font-size: 14px;
}

.mc-topbar .mc-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.mc-topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.mc-topbar a:hover { text-decoration: underline; }

.mc-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var( --mc-line );
	box-shadow: 0 2px 12px rgba( 23, 74, 126, .06 );
}

.mc-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.mc-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* 44px minimum target. Anything smaller fails WCAG and, more practically,
	   gets mis-tapped by anyone holding a phone one-handed. */
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var( --mc-line );
	border-radius: 12px;
	background: #fff;
	font: inherit;
	font-weight: 700;
	color: var( --mc-navy );
	cursor: pointer;
}

.mc-nav__toggle-bars {
	display: block;
	position: relative;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.mc-nav__toggle-bars::before,
.mc-nav__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.mc-nav__toggle-bars::before { top: -6px; }
.mc-nav__toggle-bars::after { top: 6px; }

.mc-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mc-nav__list a {
	display: block;
	padding: 12px 4px;
	color: var( --mc-navy );
	text-decoration: none;
	font-weight: 600;
	min-height: 44px;
}

.mc-nav__list a:hover { color: var( --mc-sky ); }

.mc-nav__cta { white-space: nowrap; }

/* ---------- Mobile: drawer ---------- */

@media ( max-width: 979px ) {
	.mc-nav__list {
		position: fixed;
		inset: 0;
		z-index: 60;
		display: none;
		overflow-y: auto;
		padding: 88px 22px 40px;
		background: #fff;
	}

	.mc-nav[data-open="1"] .mc-nav__list { display: block; }

	/* Stops the page behind scrolling while the drawer is open. */
	body.mc-nav-open { overflow: hidden; }

	.mc-nav__list li { border-bottom: 1px solid var( --mc-tint ); }
	.mc-nav__list a { padding: 14px 0; font-size: 17px; }

	/*
	 * Sub-menus are indented rather than hidden behind an accordion.
	 *
	 * An accordion would be tidier and needs another interaction to discover.
	 * With fifteen counties under Service Areas the list is long either way, and
	 * a long scrollable list is easier to use one-handed than a set of taps that
	 * each reveal more taps.
	 */
	.mc-nav__list .sub-menu {
		list-style: none;
		margin: 0 0 8px;
		padding-inline-start: 16px;
		border-inline-start: 2px solid var( --mc-tint );
	}

	.mc-nav__list .sub-menu a { font-size: 15.5px; font-weight: 500; padding: 11px 0; }
	.mc-nav__list .sub-menu .sub-menu a { font-size: 15px; color: var( --mc-sec ); }

	.mc-nav__cta { display: none; }
}

/* ---------- Desktop: horizontal bar ---------- */

@media ( min-width: 980px ) {
	.mc-nav__toggle { display: none; }

	.mc-nav__list {
		display: flex;
		align-items: center;
		gap: 22px;
		flex: 1;
	}

	.mc-nav__list > li { position: relative; }

	.mc-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		inset-inline-start: 0;
		z-index: 70;
		display: none;
		min-width: 250px;
		max-height: 70vh;
		overflow-y: auto;
		list-style: none;
		margin: 0;
		padding: 10px;
		background: #fff;
		border: 1px solid var( --mc-line );
		border-radius: 16px;
		box-shadow: 0 18px 44px rgba( 23, 74, 126, .16 );
	}

	/*
	 * Opened on hover AND on focus-within.
	 *
	 * focus-within is what makes the menu usable from a keyboard at all: without
	 * it a Tab key moves focus into a sub-menu that is still display:none, so the
	 * focus ring vanishes and the user is navigating something invisible.
	 */
	.mc-nav__list > li:hover > .sub-menu,
	.mc-nav__list > li:focus-within > .sub-menu { display: block; }

	.mc-nav__list .sub-menu a { padding: 9px 10px; border-radius: 8px; font-weight: 500; }
	.mc-nav__list .sub-menu a:hover { background: var( --mc-tint ); }

	.mc-nav__list .sub-menu .sub-menu {
		position: static;
		display: block;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 12px;
		margin: 2px 0 6px;
		border-inline-start: 2px solid var( --mc-tint );
	}
}

/* ==========================================================================
   STICKY MOBILE ACTION BAR
   ==========================================================================
   chat.css already reserved 64px at the bottom of the viewport for this bar,
   so the chat bubble was floating above empty space. The reservation was
   correct and the bar was simply never built.
   ========================================================================== */

.mc-actionbar { display: none; }

@media ( max-width: 979px ) {
	.mc-actionbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 55;
		display: grid;
  /* FOUR CELLS SINCE BOOKING WAS ADDED, and the fourth was measured before it
     was added. At 320 CSS px - the narrowest phone anyone still ships - a cell
     is 76px and the widest label, Get a quote, needs 68 at the 13.5px below,
     leaving 5px of slack inside 2px padding either side. At 360 the slack is 15
     and at 390 it is 22. 14.5px was the old size and it forces the grid to
     78px at 320, which is min-content winning over 1fr: the bar stops being
     four equal cells. 13.5px keeps them equal at every width this bar exists at.

     WHY A CELL HERE AND NOT A FLOATING CALENDLY BADGE. See the note in
     templates/parts/site-footer-nav.php: the corner this badge defaults to
     already holds three controls and, on a phone, this bar underneath them. */
		grid-template-columns: repeat( 4, 1fr );
		background: #fff;
		border-top: 1px solid var( --mc-line );
		box-shadow: 0 -4px 18px rgba( 23, 74, 126, .10 );
		padding-bottom: env( safe-area-inset-bottom );
	}

	.mc-actionbar a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 56px;
		padding: 8px 4px;
		font-size: 13.5px;
		font-weight: 700;
		text-decoration: none;
		color: var( --mc-navy );
	}

	.mc-actionbar a + a { border-inline-start: 1px solid var( --mc-tint ); }
	.mc-actionbar a.is-primary { background: var( --mc-coral ); color: var( --mc-ink ); }

	/* Keeps the last section clear of the fixed bar. */
	body { padding-bottom: 56px; }
}

/* NARROWER THAN 360, AND THE NUMBER CAME OUT OF A MEASUREMENT AT 320.

   With four cells at 13.5px the label Get a quote needs 68px and the cell gives
   72 of usable width, so at 320 it wrapped to two lines and took the whole bar
   from 57px to 62 - five pixels the body padding-bottom above does not account
   for, so the last five pixels of every page sat under the bar. At 13px the
   label needs 65 and stays on one line at 320, and nowrap makes any future
   overflow show up in a measurement instead of silently reflowing again.

   A SEPARATE BLOCK RATHER THAN A NESTED ONE. The rules above live inside
   @media ( max-width: 979px ) and plain CSS does not nest media queries. */
@media ( max-width: 359px ) {
	.mc-actionbar a { font-size: 13px; white-space: nowrap; }
}

.mc-footer-nav { background: var( --mc-tint ); padding: 34px 0; margin-top: 40px; }
.mc-footer-nav__list,
.mc-legal-nav__list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.mc-footer-nav__list a,
.mc-legal-nav__list a { color: var( --mc-navy ); text-decoration: none; font-weight: 600; }
.mc-legal-nav__list a { font-weight: 500; font-size: 14.5px; color: var( --mc-sec ); }
.mc-footer-legal { max-width: 80ch; margin: 14px 0; font-size: 14.5px; color: var( --mc-sec ); }

/* ==========================================================================
   ===== Mega menu =====
   ==========================================================================
   The four service and area entries in the primary bar open a full-width
   panel. Everything in them is derived from mc_service and mc_location, so
   this file has to lay out a variable number of links and cards rather than
   a fixed set: every grid below uses minmax( 0, Nfr ) tracks, because a plain
   Nfr track refuses to shrink below its longest word and one long service
   name would push the panel wider than the viewport.

   HOW A PANEL IS SHOWN, in three layers, deliberately in this order:

     1. data-panel-open="1" on the item.  Set by mc-nav.js. The real mechanism.
     2. :focus-within on the item.        The no-JavaScript keyboard path:
                                          tabbing to the trigger reveals the
                                          panel, and only then are its links
                                          reachable. Desktop only, because on
                                          mobile the trigger keeps focus after
                                          a tap and the accordion would never
                                          close again.
     3. data-dismissed="1" suppresses 2.  Set when the user closes a panel
                                          while focus is still inside it.
                                          Without it, Escape and a second
                                          click both appear to do nothing.

   The panels are hidden with display:none rather than removed from the
   markup, so every service and county link stays in the document for a
   crawler whether or not any JavaScript ran.
   ========================================================================== */

/* ---------- Top bar ---------- */

.mc-topbar__area { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.mc-topbar__area svg { width: 15px; height: 15px; flex: none; color: var( --mc-coral ); }
.mc-topbar__contact { display: inline-flex; align-items: center; gap: 16px; }
.mc-topbar__contact a { color: var( --mc-coral ); font-weight: 700; }
.mc-topbar__hours { opacity: .8; }

/* ---------- Brand ---------- */

.mc-nav__brand { display: inline-flex; align-items: center; gap: 11px; flex: none; text-decoration: none; }
.mc-nav__logo { display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.mc-nav__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* The mark stands in for a logo nobody has uploaded. Brand-coloured, drawn in
   CSS, and never an <img> pointed at a file that does not exist. */
.mc-nav__logo--mark { background: var( --mc-grad ); border-radius: 13px; color: #fff; }
.mc-nav__logo--mark svg { width: 22px; height: 22px; }

.mc-nav__wordmark { font-family: var( --mc-font-h ); font-weight: 800; font-size: 19px; color: var( --mc-navy ); letter-spacing: -.02em; }

/* ---------- Triggers ---------- */

.mc-nav__trigger {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	min-height: 44px;
	padding: 12px 4px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	color: var( --mc-navy );
	cursor: pointer;
	text-align: start;
}

.mc-nav__trigger:hover { color: var( --mc-sky ); }
.mc-nav__item--mega[data-panel-open="1"] > .mc-nav__trigger { color: var( --mc-sky ); }

.mc-nav__caret {
	width: 7px;
	height: 7px;
	margin-inline-start: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg ) translate( -2px, -2px );
	transition: transform .2s;
	flex: none;
}

.mc-nav__item--mega[data-panel-open="1"] > .mc-nav__trigger .mc-nav__caret {
	transform: rotate( -135deg ) translate( -2px, -2px );
}

/* ---------- Panel shell ---------- */

.mc-mega { display: none; }
.mc-nav__item--mega[data-panel-open="1"] > .mc-mega { display: block; }

@keyframes mc-mega-in {
	from { opacity: 0; transform: translateY( -8px ) scale( .99 ); }
	to { opacity: 1; transform: none; }
}

@keyframes mc-mega-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.mc-mega__inner { display: grid; gap: 30px; padding: 28px 24px; max-width: var( --mc-shell ); margin: 0 auto; }
.mc-mega__inner--feature { grid-template-columns: minmax( 0, 3fr ) minmax( 0, 1.1fr ); }
.mc-mega__inner--promo { grid-template-columns: minmax( 0, 1.4fr ) minmax( 0, .9fr ); }
.mc-mega__inner--areas { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ) minmax( 0, 1.1fr ); }

.mc-mega__eyebrow {
	display: block;
	font-family: var( --mc-font-h );
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --mc-sky );
	margin-bottom: 12px;
}

/* ---------- Link columns ---------- */

.mc-mega__links { display: grid; gap: 2px; }
.mc-mega__links--2 { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); }
.mc-mega__links--3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); column-gap: 24px; }
.mc-mega__links--icon { gap: 6px; }

/* The list rules in the SITE NAVIGATION block above set display:block, 12px
   padding and a 44px minimum on every anchor inside .mc-nav__list. Those are
   right for a drawer row and wrong for a panel link, so they are reset here
   rather than made conditional up there, where the drawer is the base case. */
.mc-nav__list .mc-mega a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	border-radius: 8px;
	font-weight: 500;
	font-size: 14.5px;
	color: var( --mc-ink );
	text-decoration: none;
	transition: background .2s, color .2s;
}

.mc-nav__list .mc-mega a:hover { background: var( --mc-tint ); color: var( --mc-navy ); }

.mc-mega__link { justify-content: space-between; }
.mc-mega__arrow { color: var( --mc-coral ); opacity: .85; flex: none; }
.mc-mega__links--plain .mc-mega__link { padding: 7px 9px; font-size: 14px; }

/* ---------- Icon tiles ---------- */

.mc-mega__tile {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var( --mc-tint );
	color: var( --mc-sky );
	flex: none;
}

.mc-mega__tile--coral { width: 34px; height: 34px; border-radius: 9px; background: var( --mc-coral-tint ); color: var( --mc-coral ); }
.mc-mega__tile svg { width: 22px; height: 22px; }
.mc-mega__tile--coral svg { width: 18px; height: 18px; }

/* ---------- Commercial cards ---------- */

.mc-mega__cards { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 14px; }

.mc-nav__list .mc-mega .mc-mega__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 16px;
	border: 1.5px solid var( --mc-tint );
	border-radius: var( --mc-img-radius, 16px );
	transition: transform .25s, border-color .25s, box-shadow .25s;
}

.mc-nav__list .mc-mega .mc-mega__card:hover {
	background: none;
	transform: translateY( -4px );
	border-color: var( --mc-sky );
	box-shadow: 0 14px 28px rgba( 23, 74, 126, .12 );
}

.mc-mega__card-title { font-family: var( --mc-font-h ); font-weight: 700; font-size: 15px; color: var( --mc-navy ); }
.mc-mega__card-text { font-size: 12.5px; color: var( --mc-muted-2 ); line-height: 1.45; }

/* ---------- Featured card ---------- */

.mc-mega__feature { display: flex; flex-direction: column; background: var( --mc-tint ); border-radius: var( --mc-img-radius, 20px ); padding: 16px; }

.mc-mega__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var( --mc-img-radius, 14px );
	box-shadow: 0 12px 26px rgba( 23, 74, 126, .18 );
}

.mc-mega__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No featured image, and today that is every post on the site: the media
   library is empty. A solid brand block keeps the card's proportions and the
   panel's rhythm, where an <img> with no src would collapse to a broken icon
   and drag the title up with it. */
.mc-mega__media--empty { display: grid; place-items: center; background: var( --mc-grad ); color: #fff; }
.mc-mega__media--empty svg { width: 44px; height: 44px; opacity: .9; }

.mc-mega__feature-title { font-family: var( --mc-font-h ); font-weight: 700; font-size: 16px; color: var( --mc-navy ); margin: 14px 0 0; }
.mc-mega__feature-text { font-size: 13.5px; color: var( --mc-muted ); line-height: 1.5; margin: 6px 0 0; }

.mc-nav__list .mc-mega .mc-mega__more {
	display: inline-flex;
	padding: 14px 0 0;
	margin-top: auto;
	font-family: var( --mc-font-h );
	font-weight: 700;
	font-size: 14px;
	color: var( --mc-coral );
}

.mc-nav__list .mc-mega .mc-mega__more:hover { background: none; color: var( --mc-coral-hi ); }

/* ---------- Specialty promo ---------- */

.mc-mega__promo { display: flex; flex-direction: column; align-items: flex-start; background: var( --mc-grad ); border-radius: 20px; padding: 24px; color: #fff; }
.mc-mega__promo-title { font-family: var( --mc-font-h ); font-weight: 800; font-size: 19px; }
.mc-mega__promo-text { font-size: 13.5px; color: #dcefff; line-height: 1.5; margin: 8px 0 0; }

.mc-nav__list .mc-mega .mc-mega__promo-btn {
	margin-top: 16px;
	padding: 10px 18px;
	border-radius: var( --mc-btn-radius, 999px );
	/* Solid coral carrying text, so it takes the button token and white. */
	background: var( --mc-coral-btn );
	color: #fff;
	font-family: var( --mc-font-h );
	font-weight: 700;
	font-size: 13.5px;
}

.mc-nav__list .mc-mega .mc-mega__promo-btn:hover { background: var( --mc-coral-btn-hi ); color: #fff; }

/* ---------- Coverage card ---------- */

.mc-mega__coverage { display: flex; flex-direction: column; align-items: flex-start; background: var( --mc-tint ); border-radius: 20px; padding: 22px; }
.mc-mega__coverage-title { font-family: var( --mc-font-h ); font-weight: 800; font-size: 17px; color: var( --mc-navy ); }
.mc-mega__coverage-text { font-size: 13.5px; color: var( --mc-muted ); line-height: 1.5; margin: 8px 0 0; }

.mc-nav__list .mc-mega .mc-mega__coverage-btn {
	margin-top: 16px;
	padding: 11px 20px;
	border-radius: var( --mc-btn-radius, 999px );
	background: var( --mc-sky );
	color: #fff;
	font-family: var( --mc-font-h );
	font-weight: 700;
	font-size: 13.5px;
}

.mc-nav__list .mc-mega .mc-mega__coverage-btn:hover { background: var( --mc-navy ); color: #fff; }

/* Three classes, to beat the margin-top:auto on .mc-mega__more above. This is
   the one place the link is not the last thing in its card, so pushing it to
   the bottom would leave it floating away from the button it belongs with. */
.mc-nav__list .mc-mega .mc-mega__coverage .mc-mega__more { margin-top: 4px; padding-top: 10px; }

/* ---------- Phone and CTA ---------- */

.mc-nav__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.mc-nav__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var( --mc-navy ); text-decoration: none; white-space: nowrap; }
.mc-nav__phone-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var( --mc-tint ); color: var( --mc-sky ); flex: none; }
.mc-nav__cta { padding: 12px 22px; min-height: 46px; font-size: 15px; }

/* ---------- Scrim ---------- */

.mc-nav__scrim { display: none; }

/*
 * The bar has to out-rank the scrim, and simply being earlier in the markup is not
 * enough to achieve that.
 *
 * .mc-nav__scrim is position:fixed with z-index:auto, so it paints above every
 * NON-positioned descendant of .mc-nav — and this bar was position:static. The scrim
 * therefore covered the triggers themselves. Because it is a sibling of the list
 * rather than a child of the item, the pointer landing on it fired mouseleave on the
 * item that had just opened: the panel closed, the scrim went with it, the pointer
 * was over the trigger again, mouseenter fired, and the cycle repeated several times
 * a second. What that looks like to a user is a menu strobing under the mouse, and
 * elementFromPoint over a trigger returning the scrim instead of the button.
 *
 * Positioning the bar and giving it a rank above the scrim is the whole fix. The
 * panels sit at z-index 70 and stay above both.
 */
.mc-nav__inner { position: relative; z-index: 2; }

/* ---------- Desktop ---------- */

@media ( min-width: 980px ) {
	/*
	 * position:static beats the position:relative the SITE NAVIGATION block
	 * gives every top-level item. A relatively positioned <li> would become the
	 * containing block and the panel would be as wide as its own trigger.
	 * Static hands that job back to .mc-nav, which is sticky and therefore
	 * positioned, so left:0/right:0 resolves to the full width of the bar.
	 */
	.mc-nav__list { gap: 2px; }
	/*
	 * Must out-specify `.mc-nav__list > li { position: relative }` above, which exists
	 * for the old width-of-the-item sub-menu dropdowns. A bare `.mc-nav__item--mega`
	 * is 0,1,0 and loses to that rule's 0,1,1, which leaves the item as the containing
	 * block and collapses every mega panel to the ~130px width of its own trigger.
	 * The panel still opens, so it reads as a styling accident rather than a cascade
	 * problem. Static here hands the containing block back to .mc-nav, which is what
	 * makes left:0/right:0 span the viewport.
	 */
	.mc-nav__list > .mc-nav__item--mega { position: static; }

	.mc-nav__list > .mc-nav__item > a,
	.mc-nav__list > .mc-nav__item > .mc-nav__trigger {
		width: auto;
		padding: 10px 12px;
		border-radius: 8px;
		font-size: 15px;
		color: var( --mc-ink );
	}

	.mc-nav__list > .mc-nav__item > a:hover,
	.mc-nav__list > .mc-nav__item > .mc-nav__trigger:hover { background: var( --mc-tint ); color: var( --mc-sky ); }

	.mc-nav__caret { margin-inline-start: 0; }

	.mc-mega {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 70;
		background: #fff;
		border-top: 1px solid var( --mc-tint );
		box-shadow: 0 24px 44px rgba( 23, 74, 126, .16 );
		max-height: calc( 100vh - 100% );
		overflow-y: auto;
	}

	.mc-nav__item--mega[data-panel-open="1"] > .mc-mega,
	.mc-nav__item--mega:focus-within:not( [data-dismissed="1"] ) > .mc-mega {
		display: block;
		animation: mc-mega-in .28s ease;
	}

	.mc-nav__list .mc-mega a { min-height: 0; }

	.mc-nav[data-panel="1"] .mc-nav__scrim {
		display: block;
		position: fixed;
		inset: 0;
		/* Explicitly below .mc-nav__inner (2) and the panels (70). See the note by
		   .mc-nav__inner: an auto z-index here is what put the scrim over the bar. */
		z-index: 1;
		background: rgba( 18, 58, 99, .28 );
		animation: mc-mega-fade .22s ease;
	}
}

/* ---------- Mobile: the panels become drawer accordions ---------- */

@media ( max-width: 979px ) {
	/*
	 * No overlays down here. The drawer is already a full-screen overlay, and a
	 * second one on top of it leaves no way back: the panel would cover the
	 * drawer, the drawer would cover the page, and Escape would have to be
	 * pressed twice to reach content the user can see. Inline accordions keep
	 * one surface and one back gesture.
	 */
	.mc-nav__brand { max-width: 60%; }
	.mc-nav__wordmark { font-size: 17px; }
	.mc-nav__actions { display: none; }

	/*
	 * Lift the bar above the open drawer.
	 *
	 * The drawer is .mc-nav__list at z-index 60 and it comes after the bar in
	 * the source, so it painted straight over the toggle that opened it: the
	 * only way out was the Escape key, which is not a gesture a phone has. The
	 * 88px of top padding on the drawer was always reserving room for this bar
	 * to show through. It needs its own background, or the list scrolls up
	 * behind the logo and reads as two menus on top of each other.
	 */
	.mc-nav[data-open="1"] .mc-nav__inner {
		position: relative;
		z-index: 61;
		background: #fff;
	}

	.mc-nav__list .mc-mega { padding: 0 0 10px; }
	.mc-mega__inner { display: block; padding: 0; }
	.mc-mega__cards,
	.mc-mega__links--3 { grid-template-columns: minmax( 0, 1fr ); }

	/* Counties and cities stay two-up. Fifteen counties in one column is a long
	   scroll for no reason; the names are short enough to pair. */
	.mc-mega__links--2 { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); }

	.mc-nav__list .mc-mega a { padding: 11px 12px; font-size: 15.5px; }
	.mc-mega__eyebrow { margin-top: 10px; }

	/*
	 * The three side cards lose their decoration but NOT their links.
	 *
	 * Hiding the cards outright was the first attempt and it quietly broke the
	 * drawer: the trigger is a <button>, so "Explore residential", "Get a
	 * quote" and "Every city we serve" were the only routes to those pages
	 * from a phone, and all three lived inside a card. What is dropped here is
	 * the image, the heading and the blurb, which are a screen and a half of
	 * furniture above a list someone is trying to reach.
	 */
	.mc-mega__feature,
	.mc-mega__promo,
	.mc-mega__coverage {
		display: flex;
		background: none;
		padding: 0;
		margin-top: 4px;
	}

	.mc-mega__media,
	.mc-mega__feature-title,
	.mc-mega__feature-text,
	.mc-mega__promo-title,
	.mc-mega__promo-text,
	.mc-mega__coverage-title,
	.mc-mega__coverage-text { display: none; }

	.mc-nav__list .mc-mega .mc-mega__promo-btn,
	.mc-nav__list .mc-mega .mc-mega__coverage-btn { margin: 4px 0; }

	.mc-nav__list .mc-mega .mc-mega__card {
		flex-direction: row;
		align-items: center;
		gap: 11px;
		padding: 8px 10px;
		border: 0;
		border-radius: 8px;
	}

	.mc-nav__list .mc-mega .mc-mega__card:hover { transform: none; box-shadow: none; background: var( --mc-tint ); }
	.mc-mega__card-text { display: none; }
	.mc-mega__tile { width: 34px; height: 34px; border-radius: 9px; }
	.mc-mega__tile svg { width: 18px; height: 18px; }

	.mc-nav__list .mc-mega .mc-mega__more,
	.mc-nav__list .mc-mega .mc-mega__coverage .mc-mega__more { margin: 6px 0 0; padding: 11px 12px; }

	.mc-topbar__area { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.mc-mega,
	.mc-nav__scrim { animation: none !important; }
	.mc-nav__caret { transition: none; }
	.mc-nav__list .mc-mega .mc-mega__card:hover { transform: none; }
}

/* ==========================================================================
   ===== Footer =====
   ==========================================================================
   Five columns on desktop: brand, two derived service columns, Company, and
   Get in touch. The column count is fixed but the ROW count is not — every
   service column is filled from mc_service, so the tracks are minmax( 0, Nfr )
   for the same reason the mega panels are: a plain Nfr track refuses to shrink
   below its longest word, and one long service name would push the footer
   wider than the viewport.

   COLOUR. The footer is the one dark surface in the design system, so it
   carries its own three tokens rather than reusing the light-surface ones.
   Two are deliberate departures from the mockup:

     --mc-f-dim   The design used #7a99b8 for the copyright and legal rows.
                  That is 3.9:1 on the footer navy and fails AA for body text
                  at any size, so it is lightened to #a8c2da (6.3:1). Nothing
                  else about those rows changes.
     :focus-visible
                  .mc-loc :focus-visible paints a navy ring, which is all but
                  invisible against a navy background. Overridden to white
                  here; without it the footer is keyboard-navigable in theory
                  and untrackable in practice.

   The old .mc-footer-nav / .mc-footer-nav__list / .mc-legal-nav__list block
   further up this file is superseded by everything below. It is left in place
   rather than deleted so a cached or partially updated template that still
   emits those class names degrades to a readable tinted band instead of
   unstyled links.
   ========================================================================== */

.mc-footer {
	--mc-f-bg: #123a63;
	--mc-f-text: #c3d9ee;
	--mc-f-dim: #a8c2da;
	--mc-f-line: rgba( 255, 255, 255, .10 );
	--mc-f-tile: rgba( 255, 255, 255, .08 );

	background: var( --mc-f-bg );
	color: var( --mc-f-text );
	margin-top: 56px;
}

.mc-footer :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- Grid ---------- */

.mc-footer__grid {
	display: grid;
	grid-template-columns:
		minmax( 0, 1.6fr )
		minmax( 0, 1fr )
		minmax( 0, 1fr )
		minmax( 0, 1fr )
		minmax( 0, 1.2fr );
	gap: 30px;
	align-items: start;
	padding-top: 56px;
	padding-bottom: 30px;
}

/* ---------- Brand column ---------- */

.mc-footer__mark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }

.mc-footer__logo {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	flex: none;
	padding: 4px;
	border-radius: 12px;
	background: #fff;
}

.mc-footer__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* The mark stands in for a logo nobody has uploaded, and matches the header's.
   Brand-coloured, drawn in CSS, never an <img> pointed at a missing file. */
.mc-footer__logo--mark { background: var( --mc-grad ); color: #fff; padding: 0; }
.mc-footer__logo--mark svg { width: 24px; height: 24px; }

.mc-footer__wordmark {
	font-family: var( --mc-font-h );
	font-weight: 800;
	font-size: 18px;
	color: #fff;
	letter-spacing: -.02em;
}

/* Doubled selector again: .mc-loc p carries a 1.1em bottom margin and outranks
   a single class, so every paragraph in this footer would sit on a stray gap.
   The three rules below repeat the pattern. */
.mc-footer .mc-footer__blurb { font-size: 14px; line-height: 1.6; margin: 14px 0 0; max-width: 34ch; }

/* ---------- Social row ---------- */

.mc-footer__social { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; }

/* 44px, not the design's 38px. These are the only icon-only targets in the
   footer and 38 is under the minimum touch target on every guideline that has
   one; the tile reads identically at either size. */
/* Scoped as .mc-footer .mc-footer__social-link rather than on the one class,
   because .mc-loc a already sets navy and outranks a single class selector.
   Unscoped, the icons paint navy-on-navy and the row disappears. Several rules
   below carry the same doubled selector for the same reason. */
.mc-footer .mc-footer__social-link {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var( --mc-f-tile );
	color: var( --mc-tint );
	transition: background-color .2s, color .2s;
}

/* Ink on coral, not white. Same rule as the buttons: white on coral is 2.55:1
   and no size rescues it. */
.mc-footer .mc-footer__social-link:hover,
.mc-footer .mc-footer__social-link:focus-visible { background: var( --mc-coral ); color: var( --mc-ink ); }

/* ---------- Link columns ---------- */

.mc-fcol { min-width: 0; }

.mc-footer .mc-fcol__title {
	font-family: var( --mc-font-h );
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: #fff;
	margin: 0 0 14px;
}

.mc-footer .mc-fcol__title a { color: #fff; text-decoration: none; transition: color .2s; }
.mc-footer .mc-fcol__title a:hover { color: var( --mc-coral ); }

.mc-fcol__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 14px;
}

.mc-footer .mc-fcol__list a { color: var( --mc-f-text ); text-decoration: none; transition: color .2s; }
.mc-footer .mc-fcol__list a:hover { color: #fff; }

/* ---------- Get in touch ---------- */

.mc-footer__contact-list { gap: 10px; }

.mc-footer .mc-footer__phone {
	font-family: var( --mc-font-h );
	font-weight: 700;
	font-size: 17px;
	color: #fff;
}

.mc-footer .mc-footer__phone:hover { color: var( --mc-coral ); }

.mc-footer__cta {
	margin-top: 16px;
	width: 100%;
	justify-content: center;
	min-height: 48px;
	padding: 13px 20px;
	font-size: 14.5px;
}

/* .mc-btn--primary sets ink on coral and .mc-loc a outranks it, so the button
   inherits navy: 3.5:1 on the coral fill, which fails AA. Restating it at a
   selector that wins is the smallest fix that does not touch the shared
   button rules. */
/* .mc-btn--primary sets white on --mc-coral-btn and .mc-loc a outranks it, so
   the button inherits navy: 2.5:1 on the darker coral fill, which fails AA.
   Restating it at a selector that wins is the smallest fix that does not touch
   the shared button rules. */
.mc-footer .mc-footer__cta,
.mc-footer .mc-footer__cta:hover { color: #fff; }

/* ---------- Service-area disclosure ---------- */

.mc-footer .mc-footer__disclosure {
	max-width: 88ch;
	margin: 0;
	padding-bottom: 26px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var( --mc-f-dim );
}

/* ---------- Bottom bar ---------- */

.mc-footer__bottom { border-top: 1px solid var( --mc-f-line ); }

.mc-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	padding-top: 18px;
	padding-bottom: 10px;
}

.mc-footer .mc-footer__copy { margin: 0; font-size: 12.5px; line-height: 1.5; color: var( --mc-f-dim ); }

.mc-footer__legal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }

.mc-footer .mc-footer__legal-list a {
	font-size: 12.5px;
	color: var( --mc-f-dim );
	text-decoration: none;
	transition: color .2s;
}

.mc-footer .mc-footer__legal-list a:hover { color: #fff; }

.mc-footer .mc-footer__credit {
	margin: 0;
	padding-bottom: 22px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --mc-f-dim );
	text-align: center;
}

.mc-footer .mc-footer__credit-link { color: var( --mc-f-text ); font-weight: 600; text-decoration: none; transition: color .2s; }
.mc-footer .mc-footer__credit-link:hover { color: #fff; }

/* ---------- Responsive ----------
   Two columns first with the brand spanning both, because the blurb and the
   social row need the width and the four remaining columns pair off evenly.
   One column below that: five stacked lists is a long scroll, and it is still
   shorter than five columns squeezed to one word each. */

@media ( max-width: 1080px ) {
	.mc-footer__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 28px; }
	.mc-footer__brand { grid-column: 1 / -1; }
	.mc-footer .mc-footer__blurb { max-width: 62ch; }
}

@media ( max-width: 560px ) {
	.mc-footer__grid { grid-template-columns: minmax( 0, 1fr ); padding-top: 40px; }
	.mc-footer__bottom-inner { justify-content: flex-start; }
	.mc-footer__cta { margin-top: 14px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.mc-footer .mc-footer__social-link,
	.mc-footer .mc-fcol__title a,
	.mc-footer .mc-fcol__list a,
	.mc-footer .mc-footer__legal-list a,
	.mc-footer .mc-footer__credit-link { transition: none; }

	/* .mc-btn:hover lifts the button 2px. The footer CTA is full width, so the
	   movement is more noticeable here than anywhere else on the site. */
	.mc-footer__cta:hover { transform: none; }
}

/* ==========================================================================
   ===== Owner greeting band =====
   ==========================================================================
   parts/owner-band.php, rendered on About and on Home. Two sections, one
   stylesheet block, because the whole point of extracting the part was that
   the owner's greeting looks the same wherever it appears.

   The portrait is object-fit:contain, not cover. Every photograph in the
   Maria folder is a cut-out on a transparent background, and cover on a
   4:3 frame crops a standing figure at the shins.
   ========================================================================== */

.mc-owner__split { align-items: center; }

/* Two classes, to beat the .mc-split grid it is modifying. With no photograph
   the band is one column of text rather than a column of text beside an empty
   half of the page. */
.mc-owner .mc-owner__split--solo { grid-template-columns: minmax( 0, 1fr ); }

.mc-owner__body,
.mc-owner__media { min-width: 0; }

/* Doubled selector: a bare blockquote carries the browser's own 1em 40px
   margin, and .mc-loc p outranks a single class on the signature below. */
.mc-owner .mc-owner__quote {
	margin: 24px 0 0;
	padding: 4px 0 4px 22px;
	border-inline-start: 3px solid var( --mc-coral );
	font-size: 19px;
	line-height: 1.7;
	color: var( --mc-sec );
	text-wrap: pretty;
}

.mc-owner .mc-owner__sign {
	margin: 20px 0 0;
	font-family: var( --mc-font-h );
	font-size: 17px;
	color: var( --mc-navy );
}

/* --mc-muted, not --mc-muted-2. The lighter grey is 4.6:1 on the tint, which
   clears AA by a rounding error rather than by design. */
.mc-owner__role {
	display: block;
	font-family: var( --mc-font-b );
	font-weight: 400;
	font-size: 15px;
	color: var( --mc-muted );
}

.mc-owner__portrait { margin: 0; display: grid; place-items: center; }

/* The owner photograph is a cut-out with a transparent background, so a radius
   on it is normally invisible. The token is here anyway: when the client has
   uploaded a rectangular photograph rather than a cut-out, Image shape > Square
   squares it with everything else instead of leaving one image out of the
   setting. The fallback is 0 because that is what the cut-out already renders. */
.mc-owner__portrait img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --mc-img-radius, 0 );
	max-height: 520px;
	object-fit: contain;
	filter: drop-shadow( 0 18px 34px rgba( 23, 74, 126, .22 ) );
}

@media ( max-width: 820px ) {
	.mc-owner__portrait img { max-height: 380px; }
}

/* ==========================================================================
   ===== Hero floating badges =====
   ==========================================================================
   The two cards the design floats over the hero photograph.

   TOKENS CARRY FALLBACKS HERE AND NOWHERE ELSE IN THIS FILE. The palette is
   declared on .mc-loc, and parts/hero.php renders ABOVE <main class="mc-loc">
   rather than inside it, so var( --mc-navy ) resolves to nothing in this one
   section and the cards would paint as unstyled boxes. The literals are the
   same values .mc-loc declares; if those ever change, change these with them.

   CONTRAST. The coral card carries ink text, not the design's white: white on
   coral is 2.55:1 and no font size rescues it. Ink on coral is 5.2:1.
   ========================================================================== */

.mc-hero__media { position: relative; }

.mc-hero__badges {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mc-hero__badge {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: 16px;
	padding: 12px 16px;
	font-family: var( --mc-font-h, 'Sora', 'Poppins', 'Segoe UI', system-ui, sans-serif );
	animation: mc-hero-float 7s ease-in-out infinite;
}

/* Placed by variant rather than by :first-child / :last-child, because either
   card can be absent: the coverage count needs county records and the offer
   needs the reply-time setting. With child selectors a single surviving card
   would match both rules at once. */
.mc-hero__badge--fact {
	top: 24px;
	inset-inline-start: -16px;
	background: #fff;
	color: var( --mc-navy, #174A7E );
	box-shadow: 0 14px 30px rgba( 23, 74, 126, .18 );
}

.mc-hero__badge--offer {
	inset-inline-end: -16px;
	bottom: 26px;
	background: var( --mc-coral, #FF7A66 );
	color: var( --mc-ink, #253746 );
	box-shadow: 0 14px 30px rgba( 255, 122, 102, .4 );
	animation-duration: 8s;
}

.mc-hero__badge-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 10px;
	background: var( --mc-tint, #EAF6FF );
	color: var( --mc-sky, #2B8FE5 );
}

.mc-hero__badge-body { display: block; }
.mc-hero__badge-lead { display: block; font-size: 18px; font-weight: 800; line-height: 1.2; }
.mc-hero__badge-text { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.mc-hero__badge--fact .mc-hero__badge-text { font-size: 14px; font-weight: 700; }

@keyframes mc-hero-float {
	0%, 100% { transform: translateY( 0 ); }
	50% { transform: translateY( -10px ); }
}

/* Below the stacking breakpoint the cards come out of the overlay entirely.
   A card hung 16px outside its container is a horizontal scrollbar on a phone,
   and the same two facts read perfectly well as a row under the photograph. */
@media ( max-width: 820px ) {
	/* The hero image is now wrapped, so the order:-1 further up this file that
	   used to lift it above the copy lands on a div that is no longer a grid
	   child. Restated on the wrapper. */
	.mc-hero__media { order: -1; }

	.mc-hero__badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		margin-top: 16px;
	}

	.mc-hero__badge { position: static; animation: none; }
}

/* The global reduced-motion rule at the top of this file is scoped to
   .mc-loc *, and the hero renders outside it. Restated for the same reason
   the tokens are. */
@media ( prefers-reduced-motion: reduce ) {
	.mc-hero__badge { animation: none; }
}

/* ==========================================================================
   ===== Mega menu: promo figure and the About dropdown =====
   ==========================================================================
   Two additions to the navigation block above, kept here rather than edited
   into it so the mega-menu section stays the record of how the panels were
   built. Both out-rank what they modify, which in this file is never
   automatic: .mc-loc a is 0,1,1 and .mc-nav__list > li is 0,1,1, so a single
   class loses to either.
   ========================================================================== */

/* ---------- Specialty promo cut-out ---------- */

/* The card had no positioning of its own, so the figure needs a containing
   block and something to be clipped by. overflow:hidden is what makes the
   figure bleed off the corner instead of out of the panel. */
.mc-mega__promo { position: relative; overflow: hidden; }

.mc-mega__promo-figure {
	position: absolute;
	inset-inline-end: -24px;
	bottom: -10px;
	width: 150px;
	line-height: 0;
	opacity: .9;
	pointer-events: none;
}

.mc-mega__promo-figure img { display: block; width: 100%; height: auto; }

/* Positioned so they paint above the figure — an absolutely positioned
   element with an auto z-index sits over in-flow content that is not itself
   positioned, which without this puts the illustration over the words. The
   measure keeps the blurb clear of it rather than relying on the stack. */
.mc-mega__promo-title,
.mc-mega__promo-text { position: relative; }
.mc-mega__promo-text { max-width: 24ch; }
.mc-nav__list .mc-mega .mc-mega__promo-btn { position: relative; }

/* ---------- About dropdown ---------- */

/* The three sections the panel links into. The navigation bar is sticky, so
   without this the browser scrolls the heading to y=0 and parks it underneath
   the bar: the link works and looks like it did nothing. */
#mc-values,
#mc-owner,
#mc-team { scroll-margin-top: 96px; }

@media ( min-width: 980px ) {
	/*
	 * Must come after, and match, `.mc-nav__list > .mc-nav__item > a` above:
	 * both are 0,3,1, so source order is what decides this. That rule leaves
	 * the anchor display:block and the caret would drop onto its own line.
	 */
	.mc-nav__list > .mc-nav__item--sub > a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}

	/* The same rotation the mega triggers use, so the two kinds of panel
	   behave identically to a reader even though only one of them has any
	   JavaScript behind it. */
	.mc-nav__list > .mc-nav__item--sub:hover > a .mc-nav__caret,
	.mc-nav__list > .mc-nav__item--sub:focus-within > a .mc-nav__caret {
		transform: rotate( -135deg ) translate( -2px, -2px );
	}
}

@media ( max-width: 979px ) {
	/* In the drawer the sub-menu is always open, so a caret pointing at it is
	   a control that does nothing. The promo card is stripped down here too,
	   and the figure goes with the rest of its decoration. */
	.mc-nav__item--sub .mc-nav__caret,
	.mc-mega__promo-figure { display: none; }
}

/* ==========================================================================
   ===== Header: its own shell, and labels that do not wrap =====
   ==========================================================================
   MEASURED, not guessed. At a 1920px viewport the bar was .mc-nav__inner
   capped at the 1440px content shell, holding brand 287px + list 751px +
   actions 314px plus two 20px gaps = 1392px of content in 1392px of room.
   The list only fitted because all four mega labels — "Residential
   Cleaning", "Commercial Cleaning", "Specialty Cleaning", "Service Areas" —
   were wrapping onto two lines, which is why those four buttons measured
   62px tall against 46px for every single-line link beside them. Unwrapped
   the same eight labels need 897px, so the bar needs 1538px of content.

   Two changes, in this order:

     1. The BAR gets a wider shell than the page. Sections stay at 1440px:
        this is the one strip that has to hold eight destinations, a phone
        number and a button on one line, and pinning it to the text measure
        was never a design decision, only an inherited one. 1760px gives
        1712px of content at 1920 against the 1538px needed.

     2. Below that the label sizes and gaps scale down with the viewport
        rather than the labels wrapping. white-space:nowrap makes the
        wrapping impossible; clamp() is what stops nowrap turning into
        overflow.

   THE 1280px THRESHOLD IS MEASURED TOO, not chosen for looking round. With
   the sizes below, eight labels on one line stop fitting between 1260px and
   1240px, where the bar starts overflowing by a few pixels. 1280 is the
   nearest common viewport above that with room to spare. Under it a compact
   set takes over and the labels are free to wrap again, which is what keeps
   the bar inside the viewport at 980px — nothing would fit eight labels on
   one line down there, and a bar that overflows is worse than one that is
   two lines tall.

   The 980px floor also used to overflow by 38px, before any of this, and
   nobody had measured it: below about 1010px the old bar was already wider
   than its own viewport.

   The desktop phone pill is dropped below 1480px. It is the one duplicated
   control in the bar — the same number is a coral link in the top bar
   directly above it, on every page — so its 159px is the cheapest space in
   the header. Nothing becomes unreachable.
   ========================================================================== */

@media ( min-width: 980px ) {
	/*
	 * 0,2,0. It has to beat `.mc-wrap` (0,1,0), and it deliberately does NOT
	 * touch position or z-index: `.mc-nav__inner { position: relative; z-index: 2 }`
	 * further up is the fix that keeps the bar above the scrim at z-index 1, and
	 * re-declaring either here would be an easy way to bring the strobing back.
	 */
	.mc-nav .mc-nav__inner {
		max-width: var( --mc-nav-shell, 1760px );
		gap: clamp( 10px, 1.1vw, 20px );
	}

	/* The panel content is centred on the same shell as the bar, or the links
	   inside a full-width panel no longer line up with the trigger above them. */
	.mc-nav .mc-mega__inner { max-width: var( --mc-nav-shell, 1760px ); }

	.mc-nav .mc-nav__brand { min-width: 0; }
	.mc-nav .mc-nav__wordmark { font-size: clamp( 16px, 1.1vw, 19px ); }
}

@media ( min-width: 1280px ) {
	/*
	 * 0,3,1 and 0,3,0, matching `.mc-nav__list > .mc-nav__item > a` above
	 * exactly. Same specificity, so source order decides, and this block is
	 * last in the file on purpose.
	 */
	.mc-nav__list > .mc-nav__item > a,
	.mc-nav__list > .mc-nav__item > .mc-nav__trigger {
		white-space: nowrap;
		padding: 10px clamp( 6px, 0.62vw, 12px );
		font-size: clamp( 15px, 1.05vw, 16px );
	}
}

/* The narrow desktop band. Measured: with these values the bar fits inside
   980px with nothing to spare, and without the shorter call to action it
   does not. The labels may take two lines down here and that is the correct
   trade — they are still one bar, still all visible, and nothing overflows. */
@media ( min-width: 980px ) and ( max-width: 1279px ) {
	.mc-nav__list > .mc-nav__item > a,
	.mc-nav__list > .mc-nav__item > .mc-nav__trigger { padding: 10px 4px; font-size: 13px; }

	/*
	 * 13px, and NOT the 15px the scale document asks for. Measured on the live
	 * site: at exactly 980px the bar already overflows its shell by 60px with
	 * the approved 13px, so the document's 15-16px is not available in this
	 * band without redesigning the bar. 15px is applied at ( min-width: 1280px )
	 * where it was measured to fit with no overflow at all.
	 */

	/* 0,2,0, to beat `.mc-nav__cta` and `.mc-btn` at 0,1,0. */
	.mc-nav .mc-nav__cta { padding: 12px 16px; font-size: 15px; }
}


/* The 980–1023 band. Re-measured 2026-08-23 in exactly-sized iframes with the
   brand logo forced to decode: the comment above is now out of date. The bar
   did NOT fit at 980 — the shell's min-content was 1003px against 980px
   available, so it overflowed by 23px at 980 and 3px at 1000. 1024 and above
   were clean, so nothing there is touched.

   Only the brand lockup is reduced, and only in this band. 0,2,0 to beat the
   `.mc-nav .mc-nav__wordmark` clamp in the ( min-width: 980px ) block above at
   the same specificity — this block is later in source order, which is what
   decides it. After: min-content 890.8px at 980, 89px to spare. */
@media ( min-width: 980px ) and ( max-width: 1023px ) {
	.mc-nav .mc-nav__wordmark { font-size: 13px; }
}
@media ( min-width: 980px ) and ( max-width: 1479px ) {
	.mc-nav__actions .mc-nav__phone { display: none; }
}

/* ==========================================================================
   ===== Mega panels: balanced columns for any number of services =====
   ==========================================================================
   The catalogue is 22 services — residential 5, commercial 10, specialty 4 —
   and the grids were tuned when every hub had four children. Five links in a
   three-column grid left a hole in the bottom right; ten cards in a
   four-column grid left two cards alone on a row half the width of the panel.

   The link lists move from grid to CSS multi-column. That is the only
   mechanism that BALANCES: the browser distributes the items so the columns
   end level whatever the count, where a grid fills each row left to right and
   strands the remainder. It also flows down each column before moving right,
   which is the reading order an alphabetical county list wants anyway.

   The card grid cannot use multi-column — the cards are boxes on a row, not a
   list — so its column count is computed in PHP from the child count and
   arrives as .mc-mega__cards--cN. See mc_nav_cols() in parts/site-nav.php for
   the rule. The plain .mc-mega__cards fallback is kept so a panel rendered
   without a modifier still lays out.
   ========================================================================== */

.mc-mega__links--2,
.mc-mega__links--3 {
	display: block;
	column-gap: 24px;
}

.mc-mega__links--2 { column-count: 2; }
.mc-mega__links--3 { column-count: 3; }

/* A multi-column container has no row-gap, and the 2px the grid used to give
   is what keeps two 44px rows from touching. break-inside stops a link being
   split across a column boundary, which on a two-line label looks like two
   broken links rather than one. */
.mc-mega__links--2 > .mc-mega__link,
.mc-mega__links--3 > .mc-mega__link { break-inside: avoid; margin-bottom: 2px; }
.mc-mega__links--icon > .mc-mega__link { margin-bottom: 6px; }

/*
 * The residential panel, re-proportioned for five links instead of twelve.
 *
 * Two problems came out of the catalogue change and both are about the ratio between the
 * two halves. The link column was 3fr of a 1760px panel, so a 150px service name and its
 * arrow sat 200px apart with nothing between them; and five links occupy two rows against
 * a featured card nearly 500px tall, which left a hole the height of the panel under the
 * last link. Capping the link block at the design's own column measure fixes the first,
 * a shorter featured image and a centred link block fix the second.
 */
.mc-mega__links--3 { max-width: 960px; }
.mc-mega__feature .mc-mega__media { aspect-ratio: 16/10; }

/*
 * Residential holds five links against a card nearly 500px tall, and the first attempt at
 * that ratio produced two separate holes.
 *
 * `align-items: center` was centring the short link block inside a row sized by the tall
 * card, which pushed the eyebrow ~110px DOWN from the top of the panel. An empty band
 * above the first link reads as a rendering fault, not as breathing room. `start` puts the
 * eyebrow where the padding says it should be and moves the slack below the links, where
 * it is just space.
 *
 * The second hole was horizontal: the link column was 3fr of a 1760px panel while the
 * links themselves were capped at 960px, so ~350px of nothing sat between the last link
 * and the card. Capping the whole grid instead and letting it centre keeps the two halves
 * next to each other at any panel width.
 *
 * Two columns rather than three, scoped to this panel only: three tracks for five items
 * gives a 3+2 split with a stranded orphan. The areas panel still wants three and is
 * untouched.
 */
.mc-mega__inner--feature {
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 330px );
	align-items: start;
	max-width: 1240px;
}

.mc-mega__inner--feature .mc-mega__links--3 { column-count: 2; max-width: none; }

/*
 * Doubled to out-rank the header-widening rule further down this file, which re-declares
 * .mc-mega__inner at the 1760px bar width. Both are single-class (0,1,0) and that one wins
 * on source order, so the single-class version of this rule was silently discarded and the
 * feature panel kept stretching its five links across the full bar, leaving each label
 * about 500px from its own arrow.
 *
 * This is the fourth cascade collision in this file. The pattern is always the same: a
 * later single-class rule quietly beating an earlier one. If you add a rule here and it
 * appears to do nothing, check what else declares the same property before assuming the
 * value is wrong.
 */
.mc-mega .mc-mega__inner--feature { max-width: 1240px; }

/* c1 and c2 exist for the degenerate cases — a hub with one or two children — where
   leaving the four-track base in place would render a single card a quarter of the
   panel wide beside three empty columns. */
.mc-mega__cards--c1 { grid-template-columns: minmax( 0, 1fr ); }
.mc-mega__cards--c2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
.mc-mega__cards--c3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
.mc-mega__cards--c4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
.mc-mega__cards--c5 { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
.mc-mega__cards--c6 { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }

@media ( max-width: 979px ) {
	/*
	 * Restated rather than inherited. The drawer rules that flatten these to
	 * one column live earlier in the file and are the same specificity, so
	 * this block — which is last — would otherwise put six-across cards
	 * inside a phone drawer.
	 */
	.mc-mega__links--3 { column-count: 1; }
	.mc-mega__links--2 { column-count: 2; }

	.mc-mega__cards--c2,
	.mc-mega__cards--c3,
	.mc-mega__cards--c4,
	.mc-mega__cards--c5,
	.mc-mega__cards--c6 { grid-template-columns: minmax( 0, 1fr ); }
}

/* ==========================================================================
   ===== Mega panel: the featured card swaps on hover =====
   ==========================================================================
   The approved header hangs it.onHover on every link in the residential
   panel and repaints the featured card from the hovered service. The first
   pass skipped it because the media library was empty and every swap target
   rendered the identical fallback tile. It is populated now.

   The only thing needed here is the transition and an honest empty state:
   the swap itself is six lines in mc-nav.js, and with JavaScript blocked the
   card simply stays on the first child, exactly as it does today.
   ========================================================================== */

.mc-mega__media img { transition: opacity .22s ease; }
.mc-mega__media[data-mc-swapping] img { opacity: .35; }

@media ( prefers-reduced-motion: reduce ) {
	.mc-mega__media img { transition: none; }
	.mc-mega__media[data-mc-swapping] img { opacity: 1; }
}

/* ==========================================================================
   ===== Home hero: organic frame, brand wash, decorative halos =====
   ==========================================================================
   MaterHome.dc.html does not put the crew photograph in a rectangle. The
   frame is an organic blob at 4/4.4 — taller than it is wide — sitting on a
   tinted band with two soft radial halos behind it, and the photograph
   carries a brand wash so the white and coral badge cards read as floating
   above it rather than pasted onto it.

   CONTRAST. Neither badge sits on the photograph: the white card carries
   navy text on white (10.4:1) and the coral card carries ink on coral
   (5.2:1), both opaque, both unchanged by the wash underneath them. The wash
   itself only ever darkens the photograph, so nothing that was legible over
   it becomes less so.
   ========================================================================== */

.mc-hero--home { position: relative; overflow: hidden; background: var( --mc-tint ); }

/* Decorative only, and hidden from the accessibility tree by being generated
   content with no text. The animation is the design's `floaty`, reused. */
.mc-hero--home::before,
.mc-hero--home::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.mc-hero--home::before {
	top: -120px;
	inset-inline-start: -100px;
	width: 420px;
	height: 420px;
	background: radial-gradient( circle, rgba( 43, 143, 229, .18 ), transparent 70% );
}

.mc-hero--home::after {
	inset-inline-end: -80px;
	bottom: -140px;
	width: 360px;
	height: 360px;
	background: radial-gradient( circle, rgba( 255, 122, 102, .16 ), transparent 70% );
	animation: mc-hero-float 10s ease-in-out infinite;
}

/* Above the halos. .mc-wrap is not positioned, so without this the two
   circles paint over the H1. */
.mc-hero--home > .mc-wrap { position: relative; z-index: 1; }

/* Two classes, to beat the `.mc-hero__img` base and its 4/3.4. */
.mc-hero--home .mc-hero__img {
	aspect-ratio: 4/4.4;
	border-radius: var( --mc-img-radius, 50% 50% 46% 46% / 58% 58% 42% 42% );
	box-shadow: 0 30px 60px rgba( 23, 74, 126, .24 );
}

/* The overlay the design specifies over the photograph. Pointer events off so
   it never intercepts a click, and aria-hidden by construction. */
.mc-hero--home .mc-hero__img::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient( 155deg, rgba( 43, 143, 229, .20 ) 0%, rgba( 43, 143, 229, 0 ) 42% ),
		linear-gradient( 0deg, rgba( 23, 74, 126, .34 ) 0%, rgba( 23, 74, 126, 0 ) 46% );
}

@media ( prefers-reduced-motion: reduce ) {
	.mc-hero--home::after { animation: none; }
}

/* =====================================================================
   BEFORE AND AFTER
   MaterGallery.dc.html, plus the home page's single-pair band.

   THE REVEAL IS ONE CUSTOM PROPERTY, --mc-ba-pos, DECLARED HERE AT 50%.
   mc-ba.js writes a new value to it as the range moves and does nothing
   else. Everything below reads it, so with the script blocked or still
   loading the pair renders as a labelled 50/50 split rather than as an
   empty box — which matters more on this section than anywhere else on
   the site, because the two photographs ARE the content.

   Every class here is new. Nothing in this block re-declares a property
   on an existing selector, which is the collision that has produced four
   separate defects further up this file.
   ===================================================================== */

.mc-ba { margin: 0; }

.mc-ba__frame {
	--mc-ba-pos: 50%;

	position: relative;
	border-radius: var( --mc-img-radius, 22px );
	overflow: hidden;
	box-shadow: 0 18px 40px rgba( 23, 74, 126, .16 );
	aspect-ratio: 16 / 11;
	background: var( --mc-tint );

	/* A drag gesture that selects the caption text underneath instead of moving
	   the handle is the single most common way this control feels broken. */
	user-select: none;
	-webkit-user-select: none;
}

.mc-ba__layer { position: absolute; inset: 0; }

/* The before frame is the one that gets clipped, so the after frame is what a
   wider reveal uncovers. Reversing them would mean dragging right made the
   room dirtier, which is the wrong way round for a page selling the result. */
.mc-ba__layer--before { clip-path: inset( 0 calc( 100% - var( --mc-ba-pos ) ) 0 0 ); }

.mc-ba__layer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mc-ba__tag {
	position: absolute;
	top: 12px;
	font-family: var( --mc-font-h );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	padding: 5px 11px;
	border-radius: 999px;
}

.mc-ba__tag--before { left: 12px; background: rgba( 23, 74, 126, .85 ); }
.mc-ba__tag--after { right: 12px; background: var( --mc-coral ); }

.mc-ba__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var( --mc-ba-pos );
	width: 3px;
	background: #fff;
	transform: translateX( -1.5px );
	pointer-events: none;
	z-index: 2;
}

.mc-ba__handle {
	position: absolute;
	top: 50%;
	left: var( --mc-ba-pos );
	transform: translate( -50%, -50% );
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	color: var( --mc-sky );
	box-shadow: 0 6px 16px rgba( 23, 74, 126, .3 );
	display: grid;
	place-items: center;
	pointer-events: none;
	z-index: 2;
}

/*
 * The control: a real range input, stretched over the frame and made invisible.
 *
 * Invisible rather than removed, so pointer drag, touch drag, click-to-jump,
 * arrow keys, Home and End are all the browser's own implementation. A div with
 * pointermove listeners would have had to reinvent every one of them, and would
 * have reinvented the keyboard half badly or not at all.
 */
.mc-ba__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	opacity: 0;
	cursor: ew-resize;
	z-index: 3;
	-webkit-appearance: none;
	appearance: none;
}

.mc-ba__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 44px;
	height: 44px;
}

.mc-ba__range::-moz-range-thumb {
	width: 44px;
	height: 44px;
	border: 0;
}

/*
 * The focus ring goes on the FRAME, because the input carrying the focus is
 * transparent and its own outline would be painted at opacity 0. Without this
 * the slider is fully keyboard operable and completely invisible while you are
 * using it, which is worse than not being operable at all.
 */
.mc-ba__frame:focus-within {
	outline: 3px solid var( --mc-navy );
	outline-offset: 3px;
}

.mc-ba__caption { margin-top: 14px; }

.mc-ba__title {
	font-family: var( --mc-font-h );
	font-size: 18px;
	font-weight: 700;
	color: var( --mc-navy );
	margin: 0;
}

/* ---- Layout: the gallery grid, the home band, the results grid ---- */

.mc-ba-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 26px;
}

.mc-ba-intro { margin-bottom: 26px; }

/* One pair on the home page, held to a readable width rather than stretched
   across a 1440px shell, where a 16:11 frame becomes nearly a metre tall. */
.mc-ba-solo { max-width: 760px; margin: 0 auto; }

.mc-ba-more { margin-top: 22px; text-align: center; }

.mc-shot-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 16px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.mc-shot {
	border-radius: var( --mc-img-radius, 18px );
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: 0 10px 26px rgba( 23, 74, 126, .1 );
}

.mc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media ( max-width: 900px ) {
	.mc-ba-grid { grid-template-columns: minmax( 0, 1fr ); }
	.mc-shot-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 560px ) {
	.mc-shot-grid { grid-template-columns: minmax( 0, 1fr ); }
}

/* ==========================================================================
   ===== Header: the real logo, and the box it is allowed to occupy =====
   ==========================================================================
   The brand mark and the brand logo want opposite boxes, which is why
   parts/site-nav.php prints a modifier rather than reusing one class for
   both. The CSS mark is a 44px SQUARE tile: it is drawn here, so it can be
   whatever shape the rule says. The logo is a real asset, 2000 x 1414, and
   the shape is the designer's, not this file's.

   So the logo is constrained on ONE axis. Height comes from the bar and
   width follows the aspect ratio: at 64px tall a 1.41:1 lock-up is about
   90px wide, which is the width the approved header gives the brand block.
   Constraining width instead — or reusing the 44px square — would either
   letterbox the asset inside a box it does not fit or, with width:100% and
   no cap, hand a 2000px image the whole bar.

   CASCADE. `.mc-nav__logo` and `.mc-nav__logo img` are 0,1,0 and 0,1,1 in
   the BRAND block far above. Both rules below are one class heavier and
   later in the file, so they win on specificity alone and do not depend on
   source order to do it. Neither touches `.mc-nav__logo--mark`, so an unset
   setting still renders exactly the tile it renders today.
   ========================================================================== */

.mc-nav__brand .mc-nav__logo--img {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	max-height: 64px;
}

/* max-width is a backstop, not the design. It only ever engages for an asset
   far wider than it is tall, where 64px of height would otherwise buy several
   hundred pixels of bar and push the eight nav labels into wrapping — the one
   failure this header was measured to avoid. */
.mc-nav__brand .mc-nav__logo--img img {
	display: block;
	width: auto;
	height: auto;
	max-height: 64px;
	max-width: 200px;
	object-fit: contain;
}

@media ( max-width: 979px ) {
	/* The drawer bar is shorter and the brand is already capped at 60% of it. */
	.mc-nav__brand .mc-nav__logo--img,
	.mc-nav__brand .mc-nav__logo--img img { max-height: 44px; }
}

/* ==========================================================================
   ===== Residential panel: three column groups, as the design has it =====
   ==========================================================================
   MaterHeader.dc.html lays this panel out as resGroups — three titled blocks
   beside the featured card — and the build had degraded to a single run of
   links reflowed by CSS multi-column. The two are not the same thing: a
   multi-column run balances by height, so which link sits at the top of
   which column depends on how long the labels happen to be, and a group is a
   block whose contents stay together. Groups are what the design drew and
   what reads down a column instead of across a wall.

   The heading slot is in the markup and prints only when the data carries a
   label. See $mc_nav_groups in parts/site-nav.php for why no names are
   invented here.

   CASCADE, and this file has bitten five times. `.mc-mega .mc-mega__inner--feature`
   already exists at 1240px further up, itself doubled to beat the 1760px bar
   rule; the widening below is the same 0,2,0 and later, so it wins. It sits
   inside min-width:980px so the drawer, which flattens .mc-mega__inner to
   display:block, is untouched. Everything else in this block is a new class
   that nothing else in the file declares.
   ========================================================================== */

.mc-mega__col { min-width: 0; }

.mc-mega__groups { display: grid; gap: 18px 26px; }
.mc-mega__groups--3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }

/* A group is a column: one link per row, no reflow. */
.mc-mega__links--stack { grid-template-columns: minmax( 0, 1fr ); }

.mc-mega__eyebrow--group { margin-bottom: 8px; }

@media ( min-width: 980px ) {
	/*
	 * 1440px, up from the 1240px that was measured for a two-column reflow of
	 * five links. Three groups plus the 330px featured card need the extra
	 * 200px or the group columns fall under 300px and the longer service names
	 * — "Move-In and Move-Out Cleaning" — start wrapping to three lines.
	 */
	.mc-mega .mc-mega__inner--feature { max-width: 1440px; }
}

@media ( max-width: 979px ) {
	/* Restated, not inherited: the drawer rules that flatten the panels live
	   far above this block and would otherwise be overridden by it. */
	.mc-mega__groups--3 { grid-template-columns: minmax( 0, 1fr ); gap: 0; }
}

/* ==========================================================================
   ===== Specialty panel: a bigger figure, and links on a human measure =====
   ==========================================================================
   MEASURED at a 1920px viewport before this block existed. The panel filled
   the 1760px bar, so its link half was 1014px wide holding four items in two
   columns: each icon link measured 495px, with a 34px tile at one end, a
   two-word label beside it and roughly 300px of nothing after it. The promo
   card was 652 x 253 and the cut-out figure inside it was 149 x 99 — a fifth
   of the width of the card it is supposed to anchor. The proportions were
   set when this hub had a single child and were never revisited when it grew
   to four.

   Two corrections, both about measure rather than about the mechanism:

     1. The panel is capped at 1240px, like the residential one, and the link
        block is held to a column measure a service name actually fills.
     2. The figure roughly doubles and is anchored into the bottom-right
        corner of the card, bleeding off it, which is the design's treatment.
        The card takes a minimum height so there is a corner to anchor to.

   CASCADE. `.mc-mega__inner--promo` is 0,1,0 and `.mc-nav .mc-mega__inner`
   at the 1760px bar width is 0,2,0; the cap below is 0,2,0 and later, so it
   beats both. The figure rules are 0,2,0 against the 0,1,0 originals in the
   promo block above. Nothing here declares `display`, so the max-width:979px
   rule that hides the figure in the drawer still applies untouched.
   ========================================================================== */

/*
 * The icon rows close up. `.mc-mega__link` sets justify-content:space-between,
 * which is right for the arrow variant — label at one end, arrow at the other —
 * and wrong for this one, where the tile IS the leading element and belongs
 * against its own label. With the old 495px rows it pushed the two 300px apart;
 * even at 335px it left a gap wide enough to read as two separate controls.
 * 0,2,0 against the 0,1,0 base, and later in the file.
 */
.mc-mega__links--icon .mc-mega__link { justify-content: flex-start; }

@media ( min-width: 980px ) {
	.mc-mega .mc-mega__inner--promo {
		max-width: 1240px;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 380px );
		align-items: start;
	}

	/* Two columns of roughly 280px. Wide enough for the longest label,
	   "Airbnb and Short-Let Turnover", on one line beside its tile; narrow
	   enough that the arrow-free row does not read as a broken cell. */
	.mc-mega__links--spec { max-width: 700px; }

	.mc-mega .mc-mega__promo { min-height: 300px; }

	.mc-mega .mc-mega__promo-figure {
		width: min( 300px, 62% );
		inset-inline-end: -28px;
		bottom: -18px;
		opacity: .95;
	}
}

/* ==========================================================================
   ===== Service Areas panel: the featured city column =====
   ==========================================================================
   No new layout. The column is the same two-up list of plain links it always
   was; what changed is which cities are in it and in what order, and that is
   decided in parts/site-nav.php, not here. This banner exists so the next
   person looking for a stylesheet reason the list stopped being alphabetical
   finds the answer instead of a silence.

   The one thing worth saying in CSS: nine featured cities in two columns is
   five rows and four, so the column heights differ by one row. That is the
   list being honest about its length, not a bug to be padded out.
   ========================================================================== */

/* ==========================================================================
   ===== City hero: the library photograph =====
   ==========================================================================
   The frame, the 4/3.4 ratio and the cover crop are all inherited from
   `.mc-hero__img` in the hero block far above; a city page with a real
   featured image and a city page falling back to the brand library must sit
   in exactly the same frame, or the two kinds of page would not match.

   The modifier carries no geometry for that reason. It exists so the
   photograph can be identified as a library shot rather than as this city's
   own — from the DOM, from a screenshot review, and by anything that later
   needs to treat the two differently. The alt text is written in the
   template and describes the WORK, never the place: there is no per-city
   photography and the page must not imply there is.
   ========================================================================== */

.mc-hero__img--library { position: relative; }

/* ==========================================================================
   ===== Home: the four steps, rebuilt to MaterHome.dc.html =====
   ==========================================================================
   THE NUMBER TILE WAS LOSING A SPECIFICITY FIGHT TO ITS OWN SIBLING RULE.

   `.mc-steps span` is 0,1,1 and `.mc-steps__n` is 0,1,0, and the numeral IS a
   span, so the description rule was overriding the tile on display, font-size
   and colour: measured with getComputedStyle on the live page, the numerals
   were rendering at 14px in the muted body colour, laid out as a block rather
   than as a centred grid, inside a 56px blue square. Inferred from reading the
   file it looks fine, which is why it survived this long.

   Every rule below that touches the tile is written at 0,2,1 and sits after the
   original, so it wins on specificity and does not depend on source order to do
   it. Anything added later at 0,1,x will still lose to `.mc-steps span`.

   The geometry is the design's: 64 x 64, radius 20, Sora 800 at 24px, white on
   both the blue and the coral fills. The original coral rule painted the
   numeral in --mc-ink, 4.2:1 on #FF7A66; white is the design's own choice and
   is what the blue tiles were already meant to use.
   ========================================================================== */

.mc-steps-head { max-width: 600px; margin: 0 auto 8px; text-align: center; }

.mc-steps li { text-align: center; padding: 0 8px; }

.mc-steps li .mc-steps__n {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 20px;
	background: var( --mc-sky );
	color: #fff;
	font-family: var( --mc-font-h );
	font-weight: 800;
	font-size: 24px;
	line-height: 1;
}

.mc-steps li:nth-child( even ) .mc-steps__n { background: var( --mc-coral ); color: #fff; }

.mc-steps h3 {
	font-family: var( --mc-font-h );
	font-size: 18px;
	font-weight: 700;
	color: var( --mc-navy );
	margin: 0;
}

.mc-steps h3 + span { color: var( --mc-muted-2 ); margin-top: 6px; line-height: 1.5; }

/* ==========================================================================
   ===== Home: the trust split =====
   ==========================================================================
   MaterHome.dc.html's trust-split, on the tint, immediately after the steps:
   a cut-out crew photograph sitting on a radial halo beside the copy and the
   only in-body route from Home to /about/.

   The halo is a radial gradient rather than a disc on purpose. The photograph
   has a transparent background, and a hard-edged circle behind it would put a
   visible rim exactly where the figure's feet cross it. Same treatment the step
   illustrations used, and the same reason.

   CASCADE. `.mc-loc a` is 0,1,1 and beats any single-class button rule, which
   is how the footer CTA ended up navy-on-coral once already. The button rule
   below is 0,2,0 so it cannot lose that fight.
   ========================================================================== */

.mc-trust-split { display: grid; grid-template-columns: minmax( 0, .9fr ) minmax( 0, 1.1fr ); gap: 44px; align-items: center; }

.mc-trust-split__figure { position: relative; text-align: center; }

.mc-trust-split__halo {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX( -50% );
	width: 82%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient( circle at 50% 60%, #fff 0%, #cfe6fb 55%, rgba( 207, 230, 251, 0 ) 74% );
}

.mc-trust-split__figure img {
	position: relative;
	display: block;
	width: 100%;
	max-width: 600px;
	height: auto;
	margin: 0 auto;
	filter: drop-shadow( 0 26px 40px rgba( 23, 74, 126, .24 ) );
}

.mc-trust-split__body .mc-lead { max-width: 52ch; }

.mc-trust-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.mc-trust-points li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 15.5px;
	font-weight: 600;
	color: #33475a;
}

.mc-trust-points .mc-tick {
	display: grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: #fff;
	color: var( --mc-sky );
}

.mc-trust-split .mc-btn--navy { background: var( --mc-navy ); border-color: var( --mc-navy ); color: #fff; }
.mc-trust-split .mc-btn--navy:hover { background: #0f335a; border-color: #0f335a; color: #fff; }

/* The band that follows this one on Home is the owner greeting, which is also
   tinted. Two 72px paddings back to back read as one very tall empty band with
   a heading floating in the middle of it, which is the complaint recorded at the
   top of page-home.php about stacked tints. Collapsing the second one keeps two
   blocks reading as two blocks inside one tinted region. */
.mc-trust-band + .mc-owner { padding-top: 0; }

@media ( max-width: 1000px ) {
	.mc-trust-split { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   ===== Areas hub: the spacing that used to be an inline style =====
   ==========================================================================
   page-areas.php carried three style="margin-top:..." attributes against the
   plugin's own no-inline-styles rule. Only one of them needed a class: the
   county chip run reuses `.mc-chips--spaced`, the closing button already had
   `.mc-back`, and this is the county group wrapper.
   ========================================================================== */

.mc-area-group { margin-top: 28px; }



/* ==========================================================================
   ===== Buttons: winning the fight with `.mc-loc a` =====
   ==========================================================================
   `.mc-loc a` is 0,1,1. Every button modifier is 0,1,0. So on any page inside
   `.mc-loc` the modifiers lost their colour declaration and every button
   anchor came out navy, whatever it asked for. Measured on the live closing
   CTA before this block existed: `.mc-btn--primary` computed to
   rgb(23,74,126) instead of the ink it declares, and `.mc-btn--ghost-d`, which
   asks for white, computed to the same navy on a translucent white pill over
   a navy gradient.

   The primary case is the one that matters: navy #174A7E on coral #FF7A66 is
   about 3.0:1, below AA for the 16px semi-bold label. Ink #253746 on the same
   coral is about 4.5:1, which is what the declaration at `.mc-btn--primary`
   always intended and what the comment beside it already says.

   Each selector below is `.mc-loc a.mc-btn--x`, 0,2,1, so it out-ranks
   `.mc-loc a` on specificity rather than on source order, and the hover pairs
   are 0,3,1 against `.mc-loc a:hover` at 0,2,1. Colour only: nothing here
   touches background, border or geometry, so no button changes shape.
   ========================================================================== */

.mc-loc a.mc-btn--primary,
.mc-loc a.mc-btn--primary:hover { color: #fff; }

.mc-loc a.mc-btn--ghost-d,
.mc-loc a.mc-btn--ghost-d:hover { color: #fff; }

.mc-loc a.mc-btn--light,
.mc-loc a.mc-btn--light:hover { color: var( --mc-navy ); }

/* Coral on navy is 3.6:1, which is under AA for a 12.5px bold eyebrow. The
   lighter coral is already the palette's answer on this background — it is
   what `.mc-section--navy .mc-itile--coral` uses — and lands at 5.3:1. */
.mc-section--navy .mc-eyebrow { color: #FFB3A5; }

/* ==========================================================================
   ===== Home: centred section heads =====
   ==========================================================================
   MaterHome.dc.html centres the heading block of the service picker, the
   why-cards, the crew grid and the step grid over a 600-640px column, and
   left-aligns only the split sections where the heading sits beside a
   picture. `.mc-steps-head` was the one-off version of this for the steps;
   this is the same treatment as a reusable class.

   `.mc-lead` carries max-width:68ch, which is wider than this column, so the
   auto margins are what actually centre it inside the head.
   ========================================================================== */

.mc-home-head { max-width: 640px; margin: 0 auto; text-align: center; }
.mc-home-head .mc-lead { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   ===== Home: the before/after split =====
   ==========================================================================
   The design's ba-grid: the slider in the wider left column, the eyebrow,
   heading, paragraph and gallery button beside it. It had been built as a
   centred stack, which put the button a full screen below the photograph it
   refers to.

   `.mc-ba-solo` keeps its 760px ceiling. Inside a column that is a no-op at
   most widths and a sensible cap on very wide screens, where a 16:11 frame
   across half of a 1440px shell is still nearly 500px tall.
   ========================================================================== */

.mc-ba-split {
	display: grid;
	grid-template-columns: minmax( 0, 1.1fr ) minmax( 0, .9fr );
	gap: 48px;
	align-items: center;
}

.mc-ba-split__body .mc-lead { max-width: 46ch; }

/* `.mc-ba-solo` carries `margin: 0 auto`, which is a centring shorthand in
   normal flow and something else entirely on a grid item: auto inline margins
   make the item shrink to fit-content and centre THAT. Its content is a frame
   whose layers are all absolutely positioned, so fit-content resolved to 97px
   — the intrinsic width of the range input inside it — and the slider rendered
   as a 97x67 thumbnail beside a full-size heading. Two classes to out-rank the
   0,1,0 rule that sets the margin; the 760px ceiling still applies. */
.mc-ba-split .mc-ba-solo { width: 100%; margin: 0; }

/* ==========================================================================
   ===== Home: the why-cards =====
   ==========================================================================
   Four white cards on the tint, centred, each with a 56px icon tile. The tile
   rule is two classes so it beats the 48px `.mc-itile` default on specificity
   rather than on source order.
   ========================================================================== */

.mc-why-grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 20px;
	margin-top: 38px;
}

.mc-why-card {
	background: #fff;
	border-radius: var( --mc-img-radius, 22px );
	padding: 28px 24px;
	text-align: center;
	box-shadow: 0 8px 24px rgba( 23, 74, 126, .06 );
}

.mc-why-card .mc-itile { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto; }
.mc-why-card h3 { font-size: 18px; margin: 16px 0 0; }
.mc-why-card p { font-size: 14.5px; color: var( --mc-muted-2 ); line-height: 1.6; margin: 8px 0 0; }

/* ==========================================================================
   ===== Home: the crew grid =====
   ==========================================================================
   Four role cards, and the illustrations are meant to be BIG: they are the
   only drawn figures on the page at any size and the client asked for them
   large. At the 1440px shell each column is about 333px and the art fills it
   to a 300px cap.

   The label sits ABOVE the illustration, not over it. The art has a
   transparent background and a caption laid across it either disappears into
   the figure or needs a scrim, and a scrim over four different illustrations
   never lands in the same place twice.

   Zero bottom padding is deliberate: the figures are drawn standing on their
   own baseline, so the card is cut flush at their feet. `overflow:hidden`
   keeps the rounded corner over the art.

   TWO COLUMNS ON A PHONE, not one, which is what the design specifies at its
   600px breakpoint too. Four of these stacked one-up is a screen and a half
   of scrolling past pictures of the same four people.
   ========================================================================== */

.mc-crew-grid {
	list-style: none;
	margin: 38px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 20px;
	align-items: end;
}

.mc-crew-card {
	border-radius: var( --mc-img-radius, 24px );
	padding: 22px 20px 0;
	text-align: center;
	overflow: hidden;
}

.mc-crew-card--blue { background: var( --mc-tint ); }
.mc-crew-card--coral { background: var( --mc-coral-tint ); }

.mc-crew-card__role {
	font-family: var( --mc-font-h );
	font-weight: 700;
	font-size: 17px;
	color: var( --mc-navy );
	margin: 0;
}

.mc-crew-card__tag { font-size: 13.5px; color: var( --mc-muted ); margin: 5px 0 0; }

.mc-crew-card__figure { display: block; max-width: 300px; margin: 12px auto 0; }

.mc-crew-card__figure img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow( 0 18px 26px rgba( 23, 74, 126, .18 ) );
}

/* ==========================================================================
   ===== Home: the service-areas band =====
   ==========================================================================
   The design's navy area-grid: copy and the ZIP checker on the left, a cloud
   of town chips on the right. The county run underneath the towns is not in
   the design and is kept anyway — fifteen county pages linked from the home
   page is internal linking this cluster needs.

   TWO THINGS IN HERE ARE CASCADE REPAIRS, not decoration.

   `.mc-section--navy h3` is 0,1,1 and paints every h3 in the band white. The
   ZIP checker's heading sits inside a #EAF6FF box, so white-on-tint made it
   invisible. `.mc-areas .mc-zipbox h3` is 0,2,1 and puts it back to navy, and
   the 0,2,0 rule above it resets the inherited body colour for the same
   reason.

   The chips are anchors, so every colour rule on them is written with two
   classes to clear `.mc-loc a` at 0,1,1. Their hover is coral with INK
   text, not the design's near-white: #EAF6FF on #FF7A66 is 2.3:1, while ink
   on coral is about 4.5:1, the same pairing `.mc-btn--primary` uses.
   ========================================================================== */

.mc-areas__split {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 48px;
	align-items: start;
}

.mc-areas__body .mc-lead { max-width: 48ch; }
.mc-areas .mc-zipbox { margin-top: 26px; color: var( --mc-ink ); }
.mc-areas .mc-zipbox h3 { color: var( --mc-navy ); }

.mc-areas__lists { display: flex; flex-direction: column; gap: 28px; }
.mc-areas__group .mc-eyebrow { margin-bottom: 14px; }
.mc-areas__chips { display: flex; flex-wrap: wrap; gap: 10px; }

.mc-areas .mc-areas__chip {
	display: inline-block;
	background: rgba( 255, 255, 255, .10 );
	border: 1px solid rgba( 255, 255, 255, .22 );
	border-radius: 999px;
	padding: 10px 17px;
	font-family: var( --mc-font-h );
	font-weight: 600;
	font-size: 14.5px;
	color: #EAF6FF;
	text-decoration: none;
	transition: background .2s, border-color .2s, color .2s;
}

.mc-areas .mc-areas__chip:hover {
	background: var( --mc-coral );
	border-color: var( --mc-coral );
	color: var( --mc-ink );
}

/* ==========================================================================
   ===== Home: the closing CTA with a figure =====
   ==========================================================================
   MaterHome.dc.html stands a cut-out pair of cleaners on the right-hand edge
   of the gradient card, clipped flush by the card's own rounded corner. The
   negative bottom margin equals the card's bottom padding, so the figure
   finishes exactly on the card edge rather than floating above it;
   `.mc-cta-card` already carries overflow:hidden, which does the clipping.

   Only `.mc-cta-card--figure` picks any of this up, and only the home page
   asks for it. Every other page's closing card stays the centred block it is.

   The figure is dropped below 900px rather than stacked. Reflowed under the
   buttons it is a 320px illustration between the last call to action and the
   footer, on the viewport where that gap costs the most.
   ========================================================================== */

.mc-cta-card--figure {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	text-align: start;
}

.mc-cta-card--figure .mc-cta-card__body { flex: 1 1 420px; min-width: 0; }
.mc-cta-card--figure p { margin-left: 0; margin-right: 0; }
.mc-cta-card--figure .mc-cta-row--center { justify-content: flex-start; }

.mc-cta-card__figure {
	flex: 0 0 auto;
	align-self: flex-end;
	max-width: 320px;
	margin-bottom: -56px;
}

.mc-cta-card__figure img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow( 0 22px 34px rgba( 0, 0, 0, .28 ) );
}

/* ==========================================================================
   ===== Home: the responsive steps for everything above =====
   ==========================================================================
   1120px, not the design's own 1000px, and the difference is measurable. At
   1024 the design's breakpoint has not fired yet, so the four crew cards were
   still four across and the illustrations rendered 185px wide — smaller than
   they are on a phone, on the one section that exists to show them big. 1120px
   is also where `.mc-service-grid` and `.mc-standards` already step down, so
   the whole page now changes shape once rather than twice.

   600px is where the four-up card rows finish dropping to one, except the crew
   grid, which the design keeps at two. Below 480px even two columns leaves the
   art under 140px, so the last step takes it to one and the illustrations end
   up around 300px on a phone.
   ========================================================================== */

@media ( max-width: 1120px ) {
	.mc-ba-split,
	.mc-areas__split { grid-template-columns: minmax( 0, 1fr ); gap: 32px; }

	.mc-why-grid,
	.mc-crew-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 900px ) {
	.mc-cta-card__figure { display: none; }
	.mc-cta-card--figure { text-align: center; }
	.mc-cta-card--figure p { margin-left: auto; margin-right: auto; }
	.mc-cta-card--figure .mc-cta-row--center { justify-content: center; }
}

@media ( max-width: 600px ) {
	.mc-why-grid { grid-template-columns: minmax( 0, 1fr ); }
	.mc-crew-grid { gap: 14px; }
	.mc-crew-card { padding: 18px 12px 0; }
	.mc-crew-card__role { font-size: 15.5px; }
	.mc-crew-card__tag { font-size: 12.5px; }
}

@media ( max-width: 479px ) {
	.mc-crew-grid { grid-template-columns: minmax( 0, 1fr ); }
	.mc-crew-card { padding: 20px 18px 0; }
	.mc-crew-card__role { font-size: 17px; }
	.mc-crew-card__tag { font-size: 13.5px; }
}

/* ==========================================================================
   ===== The coral accent word in a heading =====
   ==========================================================================
   MaterHome.dc.html sets one word of the hero H1 in brand coral: "A cleaner
   space, a happier you", with happier coloured. The design does it with an
   inline style on a bare span, which is a one-off nobody can reuse; the
   mechanism here is mc_accent_heading() in mater-templates.php, which turns
   [accent]…[/accent] in any heading string into this span so an editor can
   mark a word without writing HTML.

   ONE FAMILY, ONE WEIGHT, ONE SIZE. Only the colour changes. The span carries
   no font declaration at all, so it inherits Sora and the heading's own size
   and weight from `.mc-loc h1, .mc-hero h1` above.

   CASCADE. `.mc-loc h1` is 0,1,1 and sets navy on the H1 ELEMENT, not on its
   children, so a bare `.mc-accent` at 0,1,0 would in fact win on the span —
   inheritance always loses to a direct declaration. The doubled selectors are
   belt and braces against a future rule written as `.mc-loc h1 span`, which
   would be 0,1,2 and would beat a lone class.

   CONTRAST, RECORDED HONESTLY. --mc-coral on the hero's #EAF6FF band is
   2.32:1 and on white 2.55:1. That is under AA even at the large-text
   threshold of 3:1. It is used anyway because the brand coral for accents is
   a locked decision and it is the same value `.mc-eyebrow` has always used on
   the same backgrounds; the accent is decorative emphasis on a word that is
   also readable in navy, not information carried by colour alone. Swapping
   `var( --mc-coral )` for `var( --mc-coral-btn )` below is the one-line change
   that takes it to 4.26:1 on the tint if that decision is ever revisited.
   ========================================================================== */

.mc-accent,
.mc-loc h1 .mc-accent,
.mc-loc h2 .mc-accent,
.mc-loc h3 .mc-accent,
.mc-hero h1 .mc-accent,
.mc-section--navy h2 .mc-accent { color: var( --mc-coral ); }

/* On navy the brand coral is 3.55:1, the same failure the eyebrow rule above
   already answers, so the accent takes the same lighter coral there: 5.28:1.

   THE SELECTOR LIST IS DOUBLED HERE BECAUSE A SINGLE ONE LOST. This rule was
   written as a lone `.mc-section--navy .mc-accent`, which is 0,2,0, while the
   coral rule above carries `.mc-section--navy h2 .mc-accent` at 0,2,1. Specificity
   is settled before source order, so on the element this rule exists to fix - an
   accent inside an H2 on a navy band - the coral won and the override never
   applied. MEASURED: getComputedStyle on an .mc-accent inside a navy H2 returned
   rgb(255, 122, 102), not #FFB3A5, while the same span outside a heading returned
   #FFB3A5 correctly. Matching the heading selectors ties the specificity, and this
   rule is later in the file, so it wins.

   Nothing on the site renders an accent on navy today, so this changes no pixel
   now; it stops the contrast fix failing silently the first time one does. */
.mc-section--navy .mc-accent,
.mc-section--navy h1 .mc-accent,
.mc-section--navy h2 .mc-accent,
.mc-section--navy h3 .mc-accent { color: #FFB3A5; }

/* The accent's SECOND FAMILY, and why the default declares nothing.

   Business Info > Appearance > Place-name font is the font-pairing switch: the
   coral place name in a heading can be set in a family other than the heading's
   own. Same mechanism as --mc-btn-radius and --mc-img-radius, for the same
   reason - one value on :root moves every instance, and MC_Templates::enqueue()
   picks a literal from a match so nothing an editor types reaches the CSS.

   THE DEFAULT EMITS NOTHING, exactly like img_radius: rounded. With the property
   undefined the fallback `inherit` applies, which is what a bare span already did,
   so 'Same as the heading' is byte-for-byte the design as approved rather than a
   re-declaration of Sora that would quietly outrank a future heading rule.

   CASCADE. `.mc-loc h1` sets font-family on the H1 ELEMENT and the span only
   inherits it, and a direct declaration always beats inheritance, so a lone
   `.mc-accent` at 0,1,0 does win here. The list is doubled anyway, matching the
   colour rule above, so that a future `.mc-loc h1 span` at 0,1,2 cannot silently
   take the family back while leaving the colour alone.

   ONLY THE FAMILY MOVES. Size, weight and line-height stay the heading's, because
   a place name that is also a different size stops reading as one sentence. Sora
   is self-hosted at 600/700/800 and Source Sans 3 at 400/600/700, so whichever
   family is chosen has a real file at the weight the heading is already using. */
.mc-accent,
.mc-loc h1 .mc-accent,
.mc-loc h2 .mc-accent,
.mc-loc h3 .mc-accent,
.mc-hero h1 .mc-accent,
.mc-section--navy h2 .mc-accent { font-family: var( --mc-accent-font, inherit ); }

/* ==========================================================================
   ===== Home: the "For my home / For my business" service picker =====
   ==========================================================================
   The design puts a two-track pill switcher above the service cards: a tinted
   track holding two buttons, the active one white with navy text. Both card
   panels are rendered by the server, and the switcher only hides one of them.

   NO-JS IS THE DEFAULT STATE, NOT A FALLBACK. Nothing below hides anything
   until `data-mc-tracks-ready` is on the container, and only the script sets
   that. With JavaScript off both panels render in full, each under its own
   heading, and the page is a longer list rather than a broken control.

   NO LAYOUT SHIFT. Both tracks are three-across grids, six cards and five, so
   both are two rows and the section is the same height either way. The
   switcher sits above the grid, so nothing under it can move it. The panels
   are display:none rather than visibility:hidden because a hidden panel that
   still occupies space would double the section's height.
   ========================================================================== */

/* A flex column rather than text-align:center on the wrapper. Centring with text
   alignment would inherit into the cards and centre every card's title, body and
   "Learn more" with it; a flex item centres itself and leaves its contents alone.
   The panels are told to fill the line because a flex item shrink-wraps by
   default, which would narrow the whole grid to its widest card. */
.mc-tracks {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mc-tracks .mc-track-panel { width: 100%; }

.mc-track-switch {
	display: inline-flex;
	gap: 4px;
	background: var( --mc-tint );
	border-radius: var( --mc-btn-radius, 999px );
	padding: 6px;
	margin-top: 24px;
}

/* A real <button>, so it inherits the browser's button reset rather than the
   anchor rules. Colour is stated explicitly because `.mc-loc a` does not reach
   it but the theme's own button styles might. */
.mc-track-switch__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	cursor: pointer;
	font-family: var( --mc-font-h );
	font-weight: 700;
	font-size: 15px;
	padding: 12px 26px;
	min-height: 46px;
	border-radius: var( --mc-btn-radius, 999px );
	background: transparent;
	color: var( --mc-sec );
	transition: background .2s, color .2s;
}

.mc-track-switch__btn:hover { color: var( --mc-navy ); }

/* aria-pressed IS the state. Styling from the attribute rather than from a
   class means the two can never disagree: a keyboard user who toggles the
   control gets the same paint as the pointer user, and a panel cannot be shown
   while its button still reads "not pressed" to a screen reader. */
.mc-track-switch__btn[aria-pressed="true"] {
	background: #fff;
	color: var( --mc-navy );
	box-shadow: 0 4px 12px rgba( 23, 74, 126, .12 );
}

.mc-track-switch__icon { flex: none; color: var( --mc-sky ); }
.mc-track-switch__btn[aria-pressed="true"] .mc-track-switch__icon { color: var( --mc-coral ); }

/* The panel heading is for the no-JS reading order. Once the switcher is live
   the button carries the same words, so the duplicate is removed from view but
   left in the accessibility tree by the panel's own aria-label. */
.mc-track-panel__head { margin-top: 30px; }
.mc-track-panel__head .mc-h3 { color: var( --mc-navy ); }

[data-mc-tracks-ready] .mc-track-panel__head { display: none; }
[data-mc-tracks-ready] .mc-track-panel[hidden] { display: none; }

/* [hidden] is honoured by the UA stylesheet at 0,0,1, and `.mc-service-grid`
   sets display:grid at 0,1,0, which beats it. Without this the "hidden" panel
   renders as a second grid under the first. Bitten by exactly this before with
   the mega panels. */
.mc-track-panel[hidden] { display: none; }

/* ==========================================================================
   ===== Home: the service-areas band, measured spacing =====
   ==========================================================================
   TWO COLLISIONS, BOTH MEASURED ON THE LIVE PAGE BEFORE THIS BLOCK EXISTED.

   1. "See that area" and "Get my free quote" in the ZIP result were siblings
      with no container: the link's right edge was at x=382 and the button's
      left edge was at x=382. Zero pixels between two interactive targets, and
      they overlapped vertically as well. They are now a flex row with a 16px
      gap, which is the smallest value that clears the 12px floor with the
      button's own 2px transparent border accounted for.

   2. "Every area we serve" sat flush on the ZIP box: box bottom 5279, button
      top 5279. `.mc-back` declares margin-top:28px at 0,1,0 and `.mc-loc p`
      declares `margin: 0 0 1.1em` at 0,1,1, so the shorthand won and zeroed
      the top margin on every `.mc-back` on every page in this file. THIS IS
      THE SAME 0,1,1 TRAP THE HEADER WARNS ABOUT. Restated at 0,2,0 below.
   ========================================================================== */

.mc-loc .mc-back,
.mc-hero .mc-back { margin-top: 28px; }

/* A little more room in the navy band specifically, because the thing above it
   is a filled #EAF6FF box rather than a paragraph, and a button flush under a
   panel edge reads as part of the panel. */
.mc-areas .mc-back { margin-top: 32px; }

.mc-zipresult__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 14px;
}

/* The two rules these replace put their own margins on, which is what made the
   row impossible to space from one place. Reset both; the flex gap owns it. */
.mc-zipresult__actions .mc-zipresult__link { margin-top: 0; }
.mc-zipresult__actions .mc-zipresult__cta { margin-top: 0; }

/* ==========================================================================
   ===== Specialty panel: aligning the two halves =====
   ==========================================================================
   MEASURED at 1920px before this block. The panel's inner grid was capped at
   1240px with a 380px promo column, so the link column was 774px wide — but
   `.mc-mega__links--spec` capped the links themselves at 700px, leaving 81px
   of dead space between the last link and the edge of the column it sits in,
   and therefore 111px between the links and the promo card rather than the
   30px grid gap everything else in the panel is spaced by. Vertically the link
   column was 154px tall beside a 297px promo card, both top-aligned, so the
   whole left half floated in the top third of the panel.

   Three corrections, all about alignment:

     1. The links fill their column, so their right edge IS the column edge and
        the gap to the promo card is the panel's own 30px.
     2. The two halves are the same height. The column is a flex column and
        `.mc-mega__more` already carries margin-top:auto, so "View all
        Specialty services" sits on the panel's bottom line rather than
        halfway up it.
     3. The panel narrows to 1120px with a 360px promo, which puts each link
        column at roughly 329px — wide enough for "Airbnb and Short-Let
        Turnover" on one line beside its tile, narrow enough not to read as a
        broken cell.

   THE ICONS WERE NEVER THE PROBLEM. All four children carry their own mc_icon
   in the database and parts/site-nav.php renders it; the shared sparkle is a
   fallback that none of them reaches. Verified by comparing the four rendered
   path sets, which are four distinct drawings.

   CASCADE. `.mc-mega .mc-mega__inner--promo` at 0,2,0 in the SPECIALTY block
   above sets the 1240px cap, and `.mc-nav .mc-mega__inner` at the 1760px bar
   width is also 0,2,0. Everything below is 0,2,0 or better AND later in the
   file, so it wins on source order against the first and on both counts
   against nothing else. Nothing here declares `display`, so the max-width:979px
   drawer rules still apply untouched.
   ========================================================================== */

@media ( min-width: 980px ) {
	.mc-mega .mc-mega__inner--promo {
		max-width: 1120px;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 360px );
		align-items: stretch;
	}

	.mc-mega .mc-mega__inner--promo .mc-mega__col {
		display: flex;
		flex-direction: column;
	}

	/* 0,3,0, to clear the 700px cap set at 0,1,0 in the SPECIALTY block. */
	.mc-mega .mc-mega__inner--promo .mc-mega__links--spec { max-width: none; }

	.mc-nav__list .mc-mega .mc-mega__inner--promo .mc-mega__more { margin-top: auto; }

	/* 0,3,0 against the 0,2,0 min-height:300px above. 240 is the height the
	   link column takes at this measure, so the two halves finish level. */
	.mc-mega .mc-mega__inner--promo .mc-mega__promo { min-height: 240px; }
}

/* ==========================================================================
   ===== The closing CTA: three buttons, all of them white-on-something =====
   ==========================================================================
   The band gained a WhatsApp button beside Call and Get a free quote. It is a
   ghost-dark pill like Call rather than WhatsApp green, because three fills in
   three different colours on one gradient card is a traffic light, and because
   the green would have to be darkened past recognition to carry white text.

   Every text colour in this section is white. The fill under it was darkened
   for exactly that reason: see the note on `.mc-cta-card` above.
   ========================================================================== */

.mc-cta-card .mc-btn--wa svg { flex: none; }

/* ---------------------------------------------------------------------------
   THE GHOST PILLS' OWN FILL IS PART OF THE BACKGROUND THEIR LABEL SITS ON, and
   leaving that out is how this band passed a contrast check and still failed.

   MEASURED ON THE LIVE PAGE, compositing each button's translucent fill over
   the gradient colour at that button's own position: at 1440 the Call pill
   came out 4.59:1 and WhatsApp 4.86:1, but at 1024 the row rewraps, the
   WhatsApp pill lands higher on the lighter end of the gradient, and it
   measured 4.48:1. Under AA, by two hundredths, at exactly one viewport width
   — which is the kind of failure a spot check never finds.

   .mc-btn--ghost-d asks for rgba(255,255,255,.14). Over the gradient's lightest
   point that composites to #3E83BF, where white is 4.04:1. At .06 the worst
   point on the card is #2C78B9 and white is 4.67:1, so every position on every
   width clears AA with room rather than by luck.

   THE HOVER CANNOT SIMPLY BRIGHTEN. The shared rule goes to .24, which is worse
   than the state it replaces; even .12 only reaches 4.20:1. So the hover keeps
   the fill and takes the border to solid white instead, which is a larger
   visible change than the fill was and costs nothing in contrast.

   SCOPED TO .mc-cta-card ON PURPOSE. The same button on the navy areas band
   sits on #174A7E, composites to #38638F and measures 6.26:1, so it is correct
   as it stands and is left alone.
   --------------------------------------------------------------------------- */
.mc-cta-card .mc-btn--ghost-d { background: rgba( 255, 255, 255, .06 ); }
.mc-cta-card .mc-btn--ghost-d:hover { background: rgba( 255, 255, 255, .06 ); border-color: #fff; }

/* The row can now hold three buttons, so it wraps rather than overflowing on
   the narrow desktop band and on tablets. */
.mc-cta-card .mc-cta-row { flex-wrap: wrap; }

@media ( max-width: 600px ) {
	/* Full-width stacked targets below 600, where three pills side by side
	   leave each one under the 44px comfortable tap width. */
	.mc-cta-card .mc-cta-row { flex-direction: column; align-items: stretch; }
	.mc-cta-card .mc-cta-row .mc-btn { justify-content: center; }
	.mc-track-switch { width: 100%; }
	.mc-track-switch__btn { flex: 1 1 0; justify-content: center; padding: 12px 12px; }
}

/* Replaces a style="margin-top:28px" on the second pill heading of the
   service-in-city template. This file is the only place presentation lives. */
.mc-h3--spaced { margin-top: 28px; }

/* Same 28px lead, for the section headings that carry `.mc-h2`. The
   service-in-city template's second pill heading is a top-level section and
   is now marked up as one, so it needs the spacing modifier at its own level
   rather than borrowing the h3 one. */
.mc-h2--spaced { margin-top: 28px; }

/* ==========================================================================
   ===== PLACE PILLS: EVEN ROWS AND COLUMNS =====
   ==========================================================================
   THE COMPLAINT. Town and county names render as pills in six places - the
   Areas hub's county run and its per-county town runs, the county hub's
   adjacent-county run, the nearby-city run at the foot of every city page,
   the related runs on the service-in-city pages, and the home page's navy
   "We are in your neighborhood" band. Every one of them was a wrapping flex
   row, and the client's words were "everything is uneven, scattered all over".

   WHY A FLEX ROW CANNOT BE FIXED IN PLACE. `flex-wrap: wrap` sizes each pill
   to its own label, so "Berkeley Lake" and "Carl" are different widths, no two
   rows break at the same point, and nothing lines up vertically anywhere. It
   is not a spacing bug that a different gap would settle; the layout has no
   columns to align to. A grid does, so this replaces the flex row with a grid
   whose column width is a minimum rather than a content measure. Every pill in
   a run is then the same width, every row is the same height, and the last row
   is short rather than ragged - which reads as a table that ran out of entries
   instead of as a spill.

   WHY A MODIFIER AND NOT `.mc-chips` ITSELF. `.mc-chips` also carries the
   trust chips on About, which are whole sentences of very different lengths,
   and the 404 page's route list. Forcing those into equal columns would waste
   most of the row on the short ones. Only the place runs get `--places`.

   CONSISTENT HEIGHT REGARDLESS OF LABEL LENGTH. `.mc-chip` is inline-block, so
   a pill whose label wraps to two lines was taller than its neighbours. The
   pill becomes a centred flex box with a fixed min-height here, so a two-line
   label centres inside the same box rather than growing it. Variance within a
   row is therefore 0px by construction, not by luck with the label lengths.

   CASCADE, CHECKED BOTH WAYS. `.mc-chips--places .mc-chip` is 0,2,0 against
   the base `.mc-chip` at 0,1,0, and this block is last in the file, so it wins
   on specificity AND on source order. The home band's pills are anchors and
   `.mc-loc a` is 0,1,1, which is why the existing rules there are written
   `.mc-areas .mc-areas__chip`; the rules below match that at 0,2,0 and are
   later, so they win without needing a third class. Nothing here sets a
   colour, so every contrast decision recorded above survives untouched.
   ========================================================================== */

.mc-chips--places {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap: 10px;
	align-items: stretch;
}

.mc-chips--places .mc-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 8px 14px;
	text-align: center;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* The pill is a <span> wrapping the anchor, so the tap target is the anchor
   and it has to fill the pill rather than sit as a word inside it. */
.mc-chips--places .mc-chip a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* The home page's navy band. Narrower minimum because the band gives the run
   half the shell rather than all of it, and at 180px the column count dropped
   to two on a 1440px screen. */
.mc-areas .mc-areas__chips {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 148px, 1fr ) );
	gap: 10px;
	align-items: stretch;
}

.mc-areas .mc-areas__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 8px 14px;
	text-align: center;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* The A to Z index. Already a four-column grid, but its rows were uneven:
   a city with a county sub-line is two lines tall and one without is one, so
   every row took the height of its tallest cell and the cards beneath a short
   row floated. grid-auto-rows:1fr makes every row in the group the same
   height, which is what `.mc-city-grid` above already does for the same
   reason. */
.mc-alpha-list { grid-auto-rows: 1fr; align-items: stretch; }
.mc-alpha-list li { display: flex; flex-direction: column; justify-content: center; }

@media ( max-width: 820px ) {
	.mc-chips--places { grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) ); }
	.mc-areas .mc-areas__chips { grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) ); }
}

/* Below 430px a 150px minimum leaves two columns with a 3px gutter on the
   narrowest phones in the test set. Two explicit columns is steadier than an
   auto-fill that can flip to one. */
@media ( max-width: 430px ) {
	.mc-chips--places,
	.mc-areas .mc-areas__chips { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

/* ==========================================================================
   ===== SPECIALTY PANEL: SEVEN LINKS, TWO ROWS, ALIGNED =====
   ==========================================================================
   The panel was a two-column list built when the hub had four children. It
   now carries seven curated links, which in two columns is a four-deep and a
   three-deep column with a hole at the bottom of the second, and the promo
   card beside it is nowhere near that tall.

   Four columns by two rows is what the client asked for and what the measure
   supports: at the 1120px panel cap the link column is roughly 720px, so each
   cell is about 173px, which holds a 34px coral tile plus a two-word label.
   The seventh cell leaves one empty slot on the second row rather than a
   ragged edge, because every cell is the same width.

   EQUAL CELL HEIGHT is the other half. `.mc-nav__list .mc-mega a` is a flex
   row with its own padding, and a label that wraps to two lines was taller
   than its neighbours, which pushed the whole second row down by a few pixels
   under one cell only. align-items:stretch on the grid plus a min-height on
   the link makes every cell in the run identical.

   CASCADE. `.mc-mega__links--2` at 0,1,0 sets the two-column template and
   `.mc-mega .mc-mega__inner--promo .mc-mega__links--spec` at 0,3,0 sets the
   width. The template rule below is 0,3,0 AND later in the file, so it beats
   the first on both counts and does not disturb the second. It is inside
   min-width:980px so the max-width:979px drawer rules, which flatten the panel
   to a single accordion column, are untouched.
   ========================================================================== */

@media ( min-width: 980px ) {
	.mc-mega .mc-mega__inner--promo .mc-mega__links--spec {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
		align-items: stretch;
		gap: 8px;
	}

	.mc-nav__list .mc-mega .mc-mega__links--spec .mc-mega__link {
		min-height: 58px;
		align-items: center;
		justify-content: flex-start;
		line-height: 1.25;
	}
}

@media ( min-width: 980px ) and ( max-width: 1280px ) {
	/* Three across rather than four: below this the fourth cell is narrower
	   than "Post-Construction" and the label breaks mid-word. */
	.mc-mega .mc-mega__inner--promo .mc-mega__links--spec {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* ==========================================================================
   ===== NO ORPHANED PILL ON THE LAST ROW =====
   ==========================================================================
   MEASURED after the grid above went in, at 1920px on the Areas hub: height
   variance within every row was 0px and every column lined up, which was the
   complaint. What auto-fill still produced was a last row holding ONE pill.
   Fifteen counties across seven columns is 7 + 7 + 1, and eight nearby cities
   is 7 + 1. A single item alone under a full row reads as something that fell
   off, which is the same "scattered" impression in a smaller form.

   auto-fill cannot avoid it, because it fits as many columns as the width
   allows and knows nothing about how many items there are. The fix is to pick
   the column count from the COUNT, using the rule parts/site-nav.php already
   applies to the commercial card grid: prefer a count that divides the total
   exactly, and failing that the one leaving the fullest last row. Fifteen
   becomes 5 + 5 + 5, eight becomes 4 + 4, thirteen becomes 7 + 6.

   :has() ON THE CONTAINER, not a class from PHP, and that is a deliberate
   trade. The alternative was a modifier class emitted by five templates plus a
   shared helper, and the count is already in the DOM - :nth-child(n):last-child
   is true only when the list has exactly n children. One block here replaces a
   helper and five template edits, and a browser without :has() support simply
   falls through to the auto-fill above, which is the layout as it was a moment
   ago rather than a broken one.

   Seven is the ceiling because an eighth pill on a 1392px measure is narrower
   than "Peachtree Corners", and three the floor because two columns of place
   names is a list rather than a grid. Runs longer than 24 keep auto-fill: past
   that the last row is a small fraction of the block and the arithmetic stops
   being worth the bytes.

   Inside min-width:821px so the two narrow-screen blocks above, which set 150px
   and two fixed columns, are untouched. Those are later in source than the base
   rule but EARLIER than this one, so the media query is what keeps them: at
   820px and below these rules do not apply at all.
   ========================================================================== */

@media ( min-width: 821px ) {
	.mc-chips--places:has( > :nth-child(1):last-child ) { grid-template-columns: repeat( 1, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(2):last-child ) { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(3):last-child ) { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(4):last-child ) { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(5):last-child ) { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(6):last-child ) { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(7):last-child ) { grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(8):last-child ) { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(9):last-child ) { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(10):last-child ) { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(11):last-child ) { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(12):last-child ) { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(13):last-child ) { grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(14):last-child ) { grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(15):last-child ) { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(16):last-child ) { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(17):last-child ) { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(18):last-child ) { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(19):last-child ) { grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(20):last-child ) { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(21):last-child ) { grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(22):last-child ) { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(23):last-child ) { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
	.mc-chips--places:has( > :nth-child(24):last-child ) { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
}

/* ==========================================================================
   ===== SPECIALTY PROMO: A WIDER CARD AND A MUCH LARGER FIGURE =====
   ==========================================================================
   THE COMPLAINT, AND THE MEASUREMENT BEHIND IT. At 1920px the panel's inner
   grid was capped at 1120px and split 1fr / 360px, so the gradient promo card
   rendered 360.0 x 287.8 with the two-girl cut-out inside it at 223.2 x 148.8.
   The figure is min( 300px, 62% ) and 62% of 360 is 223, so the card's own
   narrowness was what was shrinking the artwork: the 300px branch has never
   once been the one that applied. A 360px card holding a heading, a blurb and
   a button leaves the illustration about a fifth of the panel, which is what
   reads as centred and shrunken.

   Both halves move together, and the LINK COLUMN IS DELIBERATELY UNCHANGED:

     panel inner   1120px -> 1320px
     promo track    360px ->  480px   (+33%)
     figure         223px ->  365px   (+64%)
     link column    682px ->  762px   at 1440 and above

   1320 minus 480 minus the 78px of panel padding and grid gap leaves 762px for
   the links, against 682px before, so the four-across run gets WIDER cells
   rather than narrower ones and nothing in the aligned two-row arrangement
   above has to be retuned. Both halves still finish level, because
   align-items:stretch on the grid gives the two children the row height and
   .mc-mega__more still carries margin-top:auto.

   WHY min-width: 1281px AND NOT 980px. Below 1281 the links drop to three
   across and the panel can no longer reach its cap, so the extra 120px would
   come straight out of the link column: measured at a 1237px inner it would
   put each of three cells at 208px today and 173px with the wider card, and
   the labels start breaking mid-word. The narrow desktop band keeps the 1120 /
   360 arrangement, which is correct at that measure and is left alone.

   THE BLURB IS HELD BACK TO 20ch, from 24ch. The figure is anchored into the
   bottom-right corner and bleeds off it, so a larger figure reaches further
   left; the text is position:relative and therefore paints ABOVE it, and words
   over an illustration are unreadable however pretty the stack is. At 20ch the
   overlap is 46px, against 49px at the sizes shipping today, so the wider card
   is no tighter than the narrow one was.

   CASCADE, CHECKED BOTH WAYS AND CONFIRMED LIVE WITH getComputedStyle.
   .mc-mega .mc-mega__inner--promo is 0,2,0 and so is the 1120px cap in the
   alignment block above; this block is LATER, so source order decides it.
   .mc-mega .mc-mega__inner--promo .mc-mega__promo is 0,3,0, which beats the
   0,3,0 min-height:240 above on source order, the 0,2,0 min-height:300 in the
   SPECIALTY block on both counts, and the 0,1,0 padding on .mc-mega__promo
   at the top of the file on both. The figure and text rules are 0,3,0 against
   0,2,0 and 0,1,0 originals respectively.

   NOTHING HERE DECLARES display, so the max-width:979px rule that hides the
   figure in the mobile drawer still applies untouched.
   ========================================================================== */

@media ( min-width: 1281px ) {
	.mc-mega .mc-mega__inner--promo {
		max-width: 1320px;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 480px );
	}

	/* 0,3,0. The card is taller as well as wider, or a 365px figure at the
	   artwork's 3:2 ratio is 243px tall inside a 240px box and the whole
	   illustration ends up below the fold of its own card. */
	.mc-mega .mc-mega__inner--promo .mc-mega__promo {
		min-height: 300px;
		padding: 26px 28px;
	}

	.mc-mega .mc-mega__inner--promo .mc-mega__promo-figure {
		width: min( 380px, 76% );
		inset-inline-end: -30px;
		bottom: -22px;
	}

	.mc-mega .mc-mega__inner--promo .mc-mega__promo-text { max-width: 20ch; }
}

/* ==========================================================================
   ===== RESOURCES: THE SECOND SHORT DROPDOWN =====
   ==========================================================================
   The bar carries two .sub-menu dropdowns now rather than one. Resources uses
   the same pattern About does and needs two things About did not:

     1. ITS ROWS MUST NOT WRAP. "Residential Cleaning Checklist" is the longest
        label anywhere in this navigation. .mc-nav__list .sub-menu sets a
        250px MINIMUM and lets the box size to its content, so without nowrap
        the longest row breaks onto two lines and every row in the list gains
        the taller row's padding. nowrap lets the box grow instead, which is
        what a min-width was for.

     2. IT OPENS TO THE LEFT. Resources is the seventh of eight items and its
        panel is the widest in the bar, so anchored at left:0 it hangs past the
        Contact link beside it and, at the 1280px end of the desktop band,
        past the viewport edge - a dropdown with rows you cannot read is worse
        than no dropdown. right:0 anchors it to its own item's right edge, so
        it opens back across the bar it belongs to.

   CASCADE. .mc-nav__list > .mc-nav__item--sub-end > .sub-menu is 0,3,0
   against the left: 0 on .mc-nav__list .sub-menu at 0,2,0, so it wins on
   specificity as well as source order. The nowrap rule matches the existing
   .mc-nav__list .sub-menu a at 0,2,1 exactly and is later in the file, which
   is what decides it; it also clears .mc-loc a at 0,1,1, the rule that has
   quietly beaten single-class declarations elsewhere in this stylesheet.

   BOTH ARE INSIDE min-width:980px. Below that the drawer prints every
   sub-menu expanded and indented under its parent, where an absolutely
   positioned box and a nowrap label would both be wrong.
   ========================================================================== */

@media ( min-width: 980px ) {
	.mc-nav__list .sub-menu a { white-space: nowrap; }

	.mc-nav__list > .mc-nav__item--sub-end > .sub-menu {
		inset-inline-start: auto;
		inset-inline-end: 0;
	}
}


/* ===== Place pills: equal rows on location pages ===== mc-chips--places-even-rows
 *
 * The Areas hub was fixed by giving its runs an explicit column count, but the same pill
 * lists on county, city and service pages were left as a plain wrapping grid. A two-line
 * label such as "Peachtree Corners" then grows only its OWN row, so a run of ten measured
 * 48px to 56px - the 8px raggedness the client reported as pills "scattered all over".
 *
 * grid-auto-rows:1fr is the same fix .mc-alpha-list already carries: every implicit row
 * takes the height of the tallest cell, so a wrapped label lifts the whole row rather than
 * one pill. align-items:stretch makes the pill fill that row instead of sitting short in it.
 *
 * Doubled selector because .mc-loc a is 0,1,1 and these pills are anchors. */
.mc-loc .mc-chips--places { grid-auto-rows: 1fr; align-items: stretch; }
.mc-loc .mc-chips--places > .mc-chip,
.mc-loc .mc-chips--places > a { display: flex; align-items: center; justify-content: center; height: 100%; }


/* ==========================================================================
   QA FIX PACK - 11 August 2026
   Appended at the end of the file on purpose. Each rule here has to win on
   SOURCE ORDER as well as on specificity, and the notes record which earlier
   rule it is beating so the next person does not undo it by moving it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. CONSENT ROWS - the box beside its wording, not above it.

   MEASURED BEFORE, on /contact/: checkbox top 1577, wording top 1633. A 56px
   drop, on every consent row on every form on the site.

   THREE EARLIER RULES COMBINED TO CAUSE IT:
     .mc-form label        { display: block }      (0,1,1) beat
     .mc-consent           { display: flex }       (0,1,0), so the flex
       container never existed at all and the gap and align-items already
       declared on .mc-consent were inert rather than wrong.
     .mc-form label > span { display: block }      (0,2,1) beat
     .mc-consent span                              (0,2,0), which put the
       wording on its own line underneath.
     .mc-form input        { min-height: 48px }    stretched the 17px box to
       48px tall, and that is where most of the 56px came from.

   Every selector below is at least 0,2,1 and sits after all three, so it wins
   on both axes rather than relying on order alone.
   -------------------------------------------------------------------------- */

.mc-form label.mc-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	cursor: pointer;
}

.mc-form label.mc-consent > input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	min-height: 0;
	min-width: 0;
	padding: 0;
	margin: 3px 0 0;
	border-radius: 4px;
	accent-color: var( --mc-sky );
}

.mc-form label.mc-consent > span {
	flex: 1 1 auto;
	margin: 0;
	font-family: var( --mc-font-b );
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --mc-sec );
}

/* One focus ring for every control on the page forms, replacing the mix of
   browser defaults that the fields fell back to. */
.mc-form input:focus-visible,
.mc-form select:focus-visible,
.mc-form textarea:focus-visible {
	outline: 2px solid var( --mc-sky );
	outline-offset: 2px;
	border-color: var( --mc-sky );
}

/* --------------------------------------------------------------------------
   D. CITY AND COUNTY LISTS - one spacing scale everywhere.

   MEASURED BEFORE: a county heading and its first city pill were 0px apart on
   /service-areas/, while consecutive groups were 28px apart. The pills read as
   belonging to nothing, which is the "cluttered" the client reported.

   The templates do not agree on markup, which is why this had been patched per
   template before:
     areas hub        .mc-area-group  > h3.mc-h3 + .mc-chips--places
     county / city /
     service-in-city  .mc-wrap        > h2.mc-h3 + .mc-chips--places
     A-to-Z index     .mc-alpha-group > h2.mc-h2 + ul.mc-alpha-list

   Spacing is therefore hung off the heading-to-list ADJACENCY, which all three
   shapes share, rather than off any one wrapper. That is what makes the gaps
   equal sitewide instead of ad hoc per template.
   -------------------------------------------------------------------------- */

.mc-h3 + .mc-chips--places,
.mc-h2 + .mc-chips--places,
.mc-h3 + .mc-alpha-list,
.mc-h2 + .mc-alpha-list {
	margin-top: 14px;
}

/* Doubled class deliberately. .mc-chips--places carries its own margin earlier
   in this file, and a single class ties on specificity rather than winning. */
.mc-chips.mc-chips--places.mc-chips--places {
	margin-bottom: 32px;
}

.mc-area-group + .mc-area-group,
.mc-alpha-group + .mc-alpha-group {
	margin-top: 32px;
}


/* ===== REQUIRED SERVICE CONSENT: the error state ===== mc-consent-required
 *
 * The service-consent tick is the one box on the page form that can stop a submission, so
 * it needs a state a sighted visitor can SEE as well as a message a screen reader can
 * hear. mc-attribution.js puts .is-error on the LABEL and aria-invalid on the input when
 * the server rejects the post, writes the reason into the form's live region, and moves
 * focus to the box.
 *
 * SPECIFICITY, deliberately. .mc-form label is 0,1,1 and has already beaten .mc-consent
 * (0,1,0) once in this file, which is what made the flex container inert. Every rule here
 * is .mc-form label.mc-consent... at 0,3,1 or tighter AND is the last block in the file,
 * so neither weight nor source order can be lost by someone moving a rule above it.
 *
 * The error uses a BOX-SHADOW ring rather than an outline on purpose: the focus-visible
 * rule further up owns the outline property on these controls, and a red outline here
 * would have quietly removed the focus indicator on the one control most likely to be
 * reached by keyboard after an error. The two rings coexist. */
.mc-form label.mc-consent.is-error > input[type="checkbox"] {
	box-shadow: 0 0 0 3px rgba( 179, 38, 30, .32 );
}

.mc-form label.mc-consent.is-error > span {
	color: #b3261e;
}

.mc-form input.is-error,
.mc-form select.is-error,
.mc-form textarea.is-error {
	border-color: #b3261e;
}


/* ===== MEET THE TEAM: one card per role ===== mc-crew-grid--roles
 *
 * /meet-the-team/ used to print every role name twice: once as the card heading over the
 * illustration and again as the heading of a second band that described what the role
 * does. Four roles, eight headings, the same four strings. The description now lives in
 * the card, so each role is named exactly once on the page.
 *
 * Two columns rather than four, because the card carries a paragraph now and a long run
 * of prose in a 230px column is a column of two-word lines. The illustration is pushed to
 * the bottom of the card so cards of unequal text length still finish on a straight line,
 * which is what align-items:end was doing before the text arrived.
 *
 * EVERY SELECTOR HERE IS DOUBLED (.mc-crew-grid.mc-crew-grid--roles, 0,2,0) or descends
 * from the modifier, so it outranks the 0,1,0 .mc-crew-grid and .mc-crew-card rules AND
 * the ones inside the 1120px, 600px and 479px media queries above. A single-class
 * override written here would have won on source order at desktop and then lost to
 * nothing at all on a phone, because a media query does not change specificity. */
.mc-crew-grid.mc-crew-grid--roles {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	align-items: stretch;
	gap: 24px;
}

.mc-crew-grid--roles .mc-crew-card {
	display: flex;
	flex-direction: column;
	padding: 26px 26px 0;
	text-align: start;
}

.mc-crew-grid--roles .mc-crew-card__role {
	font-size: 18px;
}

.mc-crew-grid--roles .mc-crew-card__tag {
	margin: 6px 0 0;
	font-size: 13.5px;
}

.mc-crew-grid--roles .mc-crew-card__does {
	margin: 14px 0 0;
	font-family: var( --mc-font-b );
	font-size: 15.5px;
	line-height: 1.65;
	color: var( --mc-sec );
}

.mc-crew-grid--roles .mc-crew-card__figure {
	margin: 18px auto 0;
	max-width: 250px;
}

@media ( max-width: 760px ) {
	.mc-crew-grid.mc-crew-grid--roles {
		grid-template-columns: minmax( 0, 1fr );
		gap: 18px;
	}

	.mc-crew-grid--roles .mc-crew-card {
		padding: 22px 20px 0;
	}

	.mc-crew-grid--roles .mc-crew-card__role {
		font-size: 17px;
	}
}


/* ===== CTA BAND FIGURE: bigger, because it is the only one left ===== mc-cta-card__figure
 *
 * parts/nap.php no longer renders, so the crew avatar it carried moved into the closing
 * CTA card, which is where the approved home design already stood one. It was rendering
 * 250x167 in the NAP band; in the card at the old 320px cap it would have been 320x213,
 * which is bigger but not by enough to read as a deliberate change.
 *
 * Doubled selector (0,2,0) so it beats the 0,1,0 base rule regardless of where either
 * ends up. The 900px rule that hides the figure altogether sets the display property, not
 * max-width, so the two do not compete. */
.mc-cta-card--figure .mc-cta-card__figure {
	max-width: 420px;
}

@media ( max-width: 1120px ) {
	.mc-cta-card--figure .mc-cta-card__figure {
		max-width: 340px;
	}
}


/* ==========================================================================
   ===== Coral hover =====
   ==========================================================================
   The client's brand rule: anything clickable sitting on a white or
   near-white background with blue text turns coral with white text on hover.
   Cards, buttons, chips and city pills only. Breadcrumbs, footer links and
   in-body text links keep the sky-blue text hover they already have, because
   the instruction was cards, buttons, chips and city pills, not everything.

   THREE CASCADE FACTS GOVERN EVERY SELECTOR BELOW.

   1. .mc-loc a:hover { color: var( --mc-sky ) } is 0,2,1 and is the de-facto
      global link hover on every template page. A component hover written as
      .mc-thing:hover { color: #fff } is 0,1,0 and silently loses to it. That
      is the trap this file has been patched around three times already - see
      the .mc-loc a.mc-btn--light and .mc-loc a.mc-btn--ghost-d pairs above.
      Every colour declaration below is written at 0,3,1 or higher.

   2. The mega-menu card hover, .mc-nav__list .mc-mega .mc-mega__card:hover,
      is 0,4,0 and is the highest hover specificity in the file. There is a
      second 0,4,0 copy inside the 900px block that repaints it with the tint.
      .mc-mega__card is doubled below to reach 0,5,0 and beat both.

   3. Where a component hover already sets a colour at equal specificity these
      rules win on order alone. They are at the end of the file deliberately.
      Do not move this block above the components it overrides.

   NOTHING HERE SETS transform. Every existing lift hover, and every
   @media ( prefers-reduced-motion: reduce ) rule that suppresses one, is left
   exactly as it was, so reduced motion keeps working without this block
   having to restate a single suppression.

   #FF7A66 on #FFFFFF is 2.55:1, below the AA 4.5:1 threshold for normal text.
   It is the client's brand pairing, chosen for the primary button first and
   extended to hovers here at their instruction.
   ========================================================================== */

/* Every selector is keyed on a, button or :has( a ), never on appearance.
   .mc-pill-list li is drawn exactly like a city chip but is cursor:auto with
   no link inside, and nothing below can match a bare li, so it keeps its
   resting style. That is intentional, not an omission. */

/* ---- Transitions ---- */

/* Existing entries are restated verbatim and colour is added, so nothing that
   already animated stops animating. */
.mc-service-card { transition: transform .25s, border-color .25s, box-shadow .25s, background-color .25s, color .25s; }
.mc-city-card { transition: transform .2s, border-color .2s, box-shadow .2s, background-color .25s, color .25s; }
.mc-chip { transition: border-color .2s, transform .2s, background-color .25s, color .25s; }
.mc-contact-line { transition: border-color .2s, box-shadow .2s, background-color .25s, color .25s; }
.mc-alpha a { transition: background-color .25s, color .25s; }
.mc-standard { transition: background .25s, border-color .25s, color .25s; }
.mc-faq summary { transition: color .25s; }
.mc-btn--light,
.mc-btn--ghost { transition: background .25s, transform .25s, box-shadow .25s, border-color .25s, color .25s; }
.mc-nav__list .mc-mega .mc-mega__card { transition: transform .25s, border-color .25s, box-shadow .25s, background-color .25s, color .25s; }

/* ---- Service cards ---- */

a.mc-service-card:hover,
.mc-loc a.mc-service-card:hover {
	background: var( --mc-coral );
	border-color: var( --mc-coral );
	color: #fff;
}

.mc-loc a.mc-service-card:hover * { color: #fff; }

/* ---- City cards ---- */

a.mc-city-card:hover,
.mc-loc a.mc-city-card:hover {
	background: var( --mc-coral );
	border-color: var( --mc-coral );
	color: #fff;
}

.mc-loc a.mc-city-card:hover * { color: #fff; }

/* The type badge carries its own tint fill, which would otherwise sit as a
   pale blue lozenge on the coral. 0,4,1 so it beats the * rule above. */
.mc-loc a.mc-city-card:hover .mc-city-card__type {
	background: rgba( 255, 255, 255, .22 );
	color: #fff;
}

/* ---- Chips and city pills ---- */

/* :has( a ) is the whole point here. The pill is a span and the anchor inside
   it measures 240x30 in a 270x48 box, so hovering the pill's own padding
   never hovers the anchor. Keying the pill on contains-a-link hovers the
   whole pill, and leaves a decorative .mc-chip with no anchor alone. */
a.mc-chip:hover,
.mc-chip:has( a ):hover,
.mc-loc a.mc-chip:hover,
.mc-loc .mc-chip:has( a ):hover {
	background: var( --mc-coral );
	border-color: var( --mc-coral );
	color: #fff;
}

.mc-loc a.mc-chip:hover *,
.mc-loc .mc-chip:has( a ):hover a,
.mc-loc .mc-chip:has( a ):hover * { color: #fff; }

/* ---- Light and ghost buttons ---- */

/* Both compute to a white fill with navy text. --primary is already coral and
   is deliberately not listed. --ghost-d is the dark-background variant and
   stays exactly as it is: it never sits on white. */
.mc-btn--light:hover,
.mc-btn--ghost:hover,
a.mc-btn--light:hover,
a.mc-btn--ghost:hover,
button.mc-btn--light:hover,
button.mc-btn--ghost:hover,
.mc-loc a.mc-btn--light:hover,
.mc-loc a.mc-btn--ghost:hover {
	background: var( --mc-coral );
	border-color: var( --mc-coral );
	color: #fff;
}

.mc-loc a.mc-btn--light:hover *,
.mc-loc a.mc-btn--ghost:hover * { color: #fff; }

/* ---- Track switch ---- */

/* The existing hover was navy on navy, a no-op. The pressed state is 0,2,0,
   so the hover has to reach 0,3,0 to repaint the selected tab as well. */
button.mc-track-switch__btn:hover,
.mc-track-switch__btn:hover,
.mc-track-switch__btn[aria-pressed="true"]:hover {
	background: var( --mc-coral );
	color: #fff;
}

.mc-track-switch__btn:hover .mc-track-switch__icon,
.mc-track-switch__btn[aria-pressed="true"]:hover .mc-track-switch__icon { color: #fff; }

/* ---- Contact lines ---- */

/* A div, not an anchor. The tel: and mailto: rows carry a link and the
   address row does not, so :has( a ) hovers the ones that are actually
   clickable and leaves the address alone. */
.mc-contact-line:has( a ):hover,
a.mc-contact-line:hover,
.mc-loc .mc-contact-line:has( a ):hover {
	background: var( --mc-coral );
	border-color: var( --mc-coral );
	color: #fff;
}

.mc-loc .mc-contact-line:has( a ):hover a,
.mc-loc .mc-contact-line:has( a ):hover * { color: #fff; }

.mc-loc .mc-contact-line:has( a ):hover .mc-itile {
	background: rgba( 255, 255, 255, .22 );
	color: #fff;
}

/* ---- A to Z index ---- */

/* Was a sky fill with white text. Same shape, coral fill. */
.mc-alpha a:hover,
.mc-loc .mc-alpha a:hover {
	background: var( --mc-coral );
	color: #fff;
}

/* ---- Mega menu cards ---- */

/* Doubled .mc-mega__card for 0,5,0. See fact 2 in the header above. */
.mc-nav__list .mc-mega .mc-mega__card.mc-mega__card:hover {
	background: var( --mc-coral );
	border-color: var( --mc-coral );
	color: #fff;
}

.mc-nav__list .mc-mega .mc-mega__card.mc-mega__card:hover * { color: #fff; }

/* ---- Standards cards ---- */

/* NO HOVER. MEASURED: a .mc-standard holds 0 links and computes cursor: auto -
   it is a captioned statement, not a control. A hover state on it promises a
   click that does not exist, which is the same reason .mc-pill-list li was left
   out of the hover pass. The resting light-background treatment further down
   this file is deliberately untouched; only the hover is gone. */

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

/* Deliberately NOT a coral block. Six of these stack down a page and a
   full-width coral bar across an accordion header reads as an alert rather
   than a hover. Coral text only, which is the one exception to the fill
   treatment above. */
.mc-faq summary:hover,
.mc-faq details:hover > summary { color: var( --mc-coral ); }

.mc-faq summary:hover .mc-caret,
.mc-faq details:hover > summary .mc-caret { color: var( --mc-coral ); }


/* ==========================================================================
   ===== Heading to content spacing =====
   ==========================================================================
   .mc-h2, .mc-h3 and .mc-lead all declare no margin, and the only adjacency
   rule in the file covered .mc-chips--places and .mc-alpha-list. Everything
   it did not name - .mc-lead, a plain paragraph, a .mc-pill-list - measured
   0.00px hard against its heading: four of eight sections on the county
   template and nine of thirteen on the city template.

   Same adjacency pattern as the 14px rule above, extended to the elements it
   missed, so the two read as one system. 18px after an h3, 20px after an h2:
   enough to read as deliberate without reflowing the page.

   .mc-h2 + p is 0,1,1, the same as .mc-loc p, and wins on order. This block
   has to stay below it.
   ========================================================================== */

.mc-h2 + .mc-lead,
.mc-h2 + p,
.mc-h2 + .mc-pill-list { margin-top: 20px; }

.mc-h3 + .mc-lead,
.mc-h3 + p,
.mc-h3 + .mc-pill-list { margin-top: 18px; }

/* The pill groups on a city page measured 0px above and 18.69px below - the
   1.1em the list carries by default - which read as tight and lopsided. With
   18px above from the rule directly overhead, 32px below gives the group the
   same separation the places chips already use, so the stack reads heading,
   18, pills, 32, next heading. Doubled class to match the
   .mc-chips.mc-chips--places.mc-chips--places margin above. */
.mc-pill-list.mc-pill-list { margin-bottom: 32px; }


/* ==========================================================================
   ===== Standards cards on a light section =====
   ==========================================================================
   #mc-values on About is rendered without the mc-section--navy class its
   counterpart on Home carries, so the card was painting #fff headings on a
   white page at 1.00:1 and rgb( 195, 217, 238 ) body copy at 1.45:1. Three
   paragraphs of brand copy on a top-nav page were invisible.

   Fixed here rather than by adding a class to the template, because the
   template is owned by another change in flight.

   .mc-standard is now correct on a light background BY DEFAULT and the
   white-on-navy treatment is re-scoped under .mc-section--navy. The navy
   rules are 0,2,0 and 0,2,1 and beat the light defaults at 0,1,0 and 0,1,1,
   so Home is unchanged.

   The .mc-section--navy .mc-standard h3 rule is not optional. Without it the
   light default at 0,1,1 would outrank .mc-section--navy h3 at 0,1,1 on
   order and repaint Home's headings navy on navy.
   ========================================================================== */

.mc-standard {
	background: var( --mc-tint );
	border-color: var( --mc-line );
}

.mc-standard h3 { color: var( --mc-navy ); }
.mc-standard p { color: var( --mc-sec ); }

.mc-section--navy .mc-standard {
	background: rgba( 255, 255, 255, .07 );
	border-color: rgba( 255, 255, 255, .14 );
}

.mc-section--navy .mc-standard h3 { color: #fff; }
.mc-section--navy .mc-standard p { color: #c3d9ee; }


/* ==========================================================================
   ===== Places chips: one column width for every group =====
   ==========================================================================
   Measured on /service-areas/ at a 1392px group width, the
   :has( > :nth-child(N):last-child ) chain gave every county its own column
   count, so a pill was 1392px wide in Rockdale (1 city), 691px in Forsyth
   (2), 341px in Cobb (8), 270px in Barrow (5) and 190px in Gwinnett (13).
   Nothing lined up down the page and the one-city and two-city groups read
   as broken rather than short.

   The chain is NOT deleted - anything else that leans on it still resolves.
   It is out-ranked: 4 classes is 0,4,0 and the chain is 0,3,0, because
   :has() contributes the specificity of its most specific argument and
   :nth-child(N):last-child is 0,2,0.

   auto-fill, not auto-fit: auto-fit collapses the empty tracks and stretches
   a lone pill back across the full row, which is the bug being fixed.

   The 270px ceiling is measured, not guessed. auto-fill counts repetitions
   against the MAX track size when that size is definite, so the ceiling sets
   the column count: 300px gave 4 columns and left 162px of dead space at the
   end of every row, 270px gives 5 columns across the 1392px group with 2px
   left over. 270px is also the width the five-city counties already used, so
   the page keeps the density it was designed at and only the outliers move.
   ========================================================================== */

.mc-chips.mc-chips--places.mc-chips--places.mc-chips--places {
	grid-template-columns: repeat( auto-fill, minmax( 220px, 270px ) );
	justify-content: start;
}

/* Below the shell, a 300px ceiling would leave a lone pill floating in a
   half-empty row, so the pills go back to filling the width. */
@media ( max-width: 640px ) {
	.mc-chips.mc-chips--places.mc-chips--places.mc-chips--places {
		grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
	}
}


/* ==========================================================================
   ===== Owner portrait =====
   ==========================================================================
   The media slot was 674x520 and the portrait painted at 416x520 inside it,
   because a 0.80 aspect cut-out in a 1.296 aspect box with object-fit:contain
   letterboxes: 129px of empty tint down each side, and the client asked for
   the photograph to be large.

   Sizing is width-driven with height:auto, so the box IS the portrait at
   whatever aspect ratio the chosen image happens to have and there is no
   padding to letterbox. 520px wide against the 0.80 cut-out is 650px tall,
   which clears the 620px minimum; a taller crop simply gets narrower rather
   than growing a margin.

   .mc-owner__split, .mc-owner__media and .mc-owner__portrait keep their
   names. Which image is chosen is set in the template, not here.
   ========================================================================== */

.mc-owner__media {
	width: 100%;
	max-width: 520px;
	margin-inline: auto;
}

/* 0,2,1, to beat the 0,1,1 base rule and the 0,1,1 copy inside the 820px
   block that caps the portrait at 380px. */
.mc-owner .mc-owner__portrait img {
	width: 100%;
	height: auto;
	max-height: none;
}

@media ( max-width: 820px ) {
	.mc-owner__media { max-width: 360px; }
}


/* ==========================================================================
   ===== Steps as cards =====
   ==========================================================================
   Written ahead of the markup. These rules are what turn the bare centred
   column of ol.mc-steps > li into a card.

   RADIUS: --mc-btn-radius is 999px, which on a 300x260 card draws a stadium,
   not a rounded corner. Every other card in this file uses
   var( --mc-img-radius, N ), and the steps card uses it too so the corners
   match the service, city and example cards beside it. Flagging the
   substitution rather than making it silently.

   .mc-steps__n and its nth-child( even ) coral alternation are untouched and
   keep working inside the card. The .mc-steps__figure + .mc-steps__n lift is
   also untouched.
   ========================================================================== */

ol.mc-steps > li,
.mc-steps > li {
	background: #fff;
	border: 1px solid var( --mc-line );
	border-radius: var( --mc-img-radius, 18px );
	padding: 22px;
}


/* ══════════════════════════════════════════════════════════════════════════
   ═════ NO BLANK HALVES - the media pass ═════
   ══════════════════════════════════════════════════════════════════════════
   The client's standing rule, in their words: "any blank spaces either left or
   right, we need to either have an image or an avatar on there", and "same
   thing goes for any of the sections - if you have a left side with the
   content, the right side we need to have an image, or vice versa".

   Everything below is either a band that rendered one column of copy against
   an empty half, or a wall of pills that needed breaking up. The alternation
   is the point: a picture on the right of every band in turn is what makes a
   page read as a template.

   SPECIFICITY IS THE RECURRING FAILURE IN THIS FILE, so every rule that has to
   beat an existing one says which one and by what weight, and every one was
   read back out of getComputedStyle rather than assumed.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- A. Location heroes: one frame, the same one, on every page -------- */

/* MEASURED BEFORE: /service-areas/cobb-county/smyrna/ hero row was 1253px tall
   with .mc-hero__img at 643x547 - 706px of empty column under the photograph.
   /service-areas/cobb-county/ emitted no second child at all.

   Two base rules have to lose here. `.mc-hero__grid` (0,1,0) sets
   align-items: center, and `.mc-hero__img` (0,1,0) pins aspect-ratio: 4/3.4;
   there is also `.mc-hero--home .mc-hero__img` at 0,2,0. The selectors below
   are 0,2,0 and 0,3,0, so they win on weight and not on source order - and the
   home page keeps its organic frame because .mc-loc is not on it.

   Scoped to >=821px: .mc-hero__grid collapses to a single column at 820px,
   where there is no second column to fill and a stretched frame would only
   fight the natural height of the image. */
@media ( min-width: 821px ) {
	.mc-loc .mc-hero__grid { align-items: center; }

	.mc-loc .mc-hero__grid > .mc-hero__img {
		aspect-ratio: 4/3.4;
		align-self: center;
		min-height: 0;
	}

	/* Weighted above centre, so a standing figure keeps its head in frame when
	   the column is far taller than the source photograph. */
	.mc-loc .mc-hero__grid > .mc-hero__img img { object-position: 50% 32%; }
}

/* ---- B. Copy beside a figure ------------------------------------------ */

/* Always used together with .mc-split, which already supplies the 1fr 1fr grid
   and already collapses to one column at 820px. This adds only the vertical
   centring and the figure treatment, so there is one breakpoint to maintain
   rather than two. */
.mc-figure-split { align-items: center; }
.mc-figure-split .mc-figure-split__body > :first-child { margin-top: 0; }
.mc-figure-split .mc-figure-split__media { display: grid; place-items: center; }

/* One column when the attachment is missing, so a deleted upload gives one
   column of copy rather than a column of copy beside a gap. Same reasoning as
   .mc-owner__split--solo above. */
.mc-figure-split.mc-figure-split--solo { grid-template-columns: minmax( 0, 1fr ); }

/* LARGE, which is the whole of the client's note: "the avatar needs to be a
   large avatar, not a small one". The avatar-1..4 cut-outs are 1024x1536, so
   360px of width renders about 540px tall - a figure, not a thumbnail. No
   border-radius: these are transparent PNGs with no rectangle to round. */
.mc-figure-split .mc-figure-split__media img {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
	filter: drop-shadow( 0 22px 34px rgba( 8, 32, 58, .38 ) );
}

/* Photographs are rectangles, so they take the shared media radius and the
   shared shadow, and they use the full half rather than 360px. Written twice
   so it also applies when the holder is used on its own - the county
   homes/commercial grid drops one in without a .mc-figure-split parent. */
.mc-figure-split__media--photo img,
.mc-figure-split .mc-figure-split__media--photo img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var( --mc-img-radius, 28px );
	box-shadow: 0 20px 40px rgba( 23, 74, 126, .16 );
	filter: none;
}

/* The alternation. Only the media moves; the body keeps order 0 and lands
   after it. Above 820px only - stacked, the picture belongs under the copy. */
@media ( min-width: 821px ) {
	.mc-figure-split--flip .mc-figure-split__media { order: -1; }
}

/* ---- C. Service areas: the cities and towns wall ---------------------- */

/* MEASURED BEFORE: 1905x2661, fifteen county headings, roughly a hundred pills
   and img 0 in the entire section. A picture beside each group turns one wall
   into fifteen rows.

   nth-of-type, not nth-child: the wrap also holds an h2 and a p, and only the
   groups are divs, so type counting is the one that lines up with what a
   reader sees.

   230px AND 24px ARE MEASURED, NOT PICKED. .mc-chips--places is
   repeat( auto-fill, minmax( 220px, 270px ) ) with a 10px gap, so four pill
   columns need 4*270 + 3*10 = 1110px. A 1392px group minus 230 minus 24
   leaves 1138px and keeps four; the 260px + 32px this started at left 1085px
   and dropped the run to three columns, which added a row to every county and
   1600px to the section. Change either number and re-measure the column
   count, because it is the pills that pay for it. */
@media ( min-width: 821px ) {
	.mc-area-group--media {
		display: grid;
		grid-template-columns: 230px minmax( 0, 1fr );
		gap: 24px;
		align-items: center;
	}

	.mc-area-group--media:nth-of-type( even ) {
		grid-template-columns: minmax( 0, 1fr ) 230px;
	}

	.mc-area-group--media:nth-of-type( even ) .mc-area-group__media { order: 2; }
}

.mc-area-group--media .mc-area-group__body > :first-child { margin-top: 0; }

.mc-area-group__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --mc-img-radius, 20px );
	box-shadow: 0 14px 28px rgba( 23, 74, 126, .14 );
}

/* Stacked, a 768px-wide illustration above five pills is out of proportion, so
   the picture is held to a readable band. */
@media ( max-width: 820px ) {
	.mc-area-group__media img { max-width: 420px; margin: 0 auto 6px; }
}


/* ==========================================================================
   ==== An h2 flush against the block that follows it ====

   MEASURED: 0.00px between the h2 border-box bottom and the next element's
   border-box top, and 0.00px of visual gap as well, in two places:

     /resources/       `.mc-h2` "Guides and checklists"  ->  `.mc-svc-grid`
     /404-test-xyz/    `.mc-h2` "Or start from one of..." ->  `.mc-chips`

   Every other h2 on the site clears its next element by 20px, and every h3 by
   14-18px. These two blocks simply had no margin rule of their own, so the
   heading sat on top of the cards. /service-areas/ measures a 0px box gap too,
   but `.mc-zipbox` carries 24px of padding-top, so it reads correctly and is
   deliberately left alone.

   CASCADE, CHECKED BOTH WAYS. This is 0,2,0 (0,4,0 with the guards) against
   `.mc-chips--spaced` and `.mc-chips--trust` at 0,1,0, so it would out-rank
   them on specificity even though theme/style.css loads after this file. The
   :not() guards keep those two modifiers on their own 26px and 22px rather
   than quietly pulling them to 20px.
   ========================================================================== */
.mc-h2 + .mc-svc-grid,
.mc-h2 + .mc-chips:not( .mc-chips--spaced ):not( .mc-chips--trust ) {
	margin-top: 20px;
}

/* ============================================================================
   CONTACT PAGE: THE FORM COLUMN.

   MEASURED BEFORE, at 1440. page-contact.php renders parts/quote-form.php
   inside one cell of a .mc-split. That part is a self-contained FULL-WIDTH
   band: it opens its own .mc-section--tint, its own .mc-wrap, and its own
   .mc-quote two-column grid. Nested inside a 666.5px column, all three fought
   the column and the form lost every time:

     .mc-split cell           666.5px
     .mc-quote  .9fr / 1.1fr  258.5px of copy  +  316.0px of form
     .mc-form   less 32px pad 250.0px of content
     .mc-form__row 1fr 1fr    119.0px per control

   119px is narrower than the values people type into it. With a real name, a
   real phone number and a real email address in the fields, scrollWidth beat
   clientWidth on all three -- 229/117, 127/117 and 266/248 -- so the text was
   literally cut off inside the box. The SAME form on /quote/, which renders the
   band at full width, measured 327.6px per control and clipped nothing.

   THE FIX IS TO STOP THE NESTED BAND BEHAVING LIKE A BAND. Its section padding,
   its wrap max-width and its inner two-column grid are neutralised inside
   .mc-loc--contact, so the form gets the whole column and the part's own copy
   stacks above it instead of taking 258px beside it. quote-form.php itself is
   NOT touched, so /quote/ and the pop-up, which share the markup, cannot move.

   CASCADE, CHECKED BOTH WAYS. `.mc-loc--contact .mc-split` is 0,2,0 against the
   0,1,0 of `.mc-split`, so it wins at the top level. It would ALSO have won
   inside @media ( max-width: 820px ), where `.mc-hero__grid, .mc-split,
   .mc-quote` collapses to one column at 0,1,0 -- which would have held two
   columns on a phone. The column rule is therefore fenced inside
   @media ( min-width: 821px ), the exact complement of that block, and the
   mobile collapse is left to win untouched.
   ============================================================================ */
.mc-loc--contact #quote.mc-section {
	padding: 0;
	background: none;
}

.mc-loc--contact #quote > .mc-wrap.mc-quote {
	max-width: none;
	padding: 0;
	grid-template-columns: minmax( 0, 1fr );
	gap: 18px;
}

@media ( min-width: 821px ) {
	.mc-loc--contact .mc-split {
		grid-template-columns: minmax( 0, .88fr ) minmax( 0, 1.12fr );
		align-items: start;
	}
}

/* =========================================================================
 * CHECKLIST PAGES: TWO-COLUMN ITEM RUNS, AND "READ NEXT" ON A NAVY BAND
 *
 * WHY. /residential-cleaning-checklist/ and /commercial-cleaning-checklist/
 * print one list per child service. Every item is a short phrase, so a single
 * column filled 30-52% of a 1392px .mc-wrap and left the rest of the line
 * empty. Two columns halve the run and put the text back near the middle.
 *
 * WHY columns AND NOT A GRID. The item count per service is 6 to 9 and is set
 * by the editor, not by this file. columns: 2 balances whatever it is handed;
 * a two-cell grid would need the count known here. break-inside: avoid on the
 * item stops one splitting its checkmark from its text across the gutter.
 *
 * WHY THE min-width FENCE. The single-column collapse for this page group
 * lives at @media ( max-width: 820px ). A bare .mc-check-list--split rule is
 * 0,1,0, which ties that block and then wins on source order, holding two
 * columns on a phone. Declaring the columns only from 821px up means the rule
 * does not exist below the breakpoint, so there is nothing to out-specify.
 * ========================================================================= */

@media ( min-width: 821px ) {
	.mc-check-list--split {
		columns: 2;
		column-gap: 56px;
	}

	.mc-check-list--split li {
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}
}

/*
 * READ NEXT ON NAVY.
 *
 * The related run sat on white carrying white .mc-chip pills, so the band had
 * no edge and read as more empty page. It now takes .mc-section--navy on the
 * two checklist pages, the same #174A7E band the home page and the city pages
 * already use, so the pills need ink that survives the change.
 *
 * SCOPED TO .mc-chips--places, which is the related-links run and nothing else.
 * The navy band on a city page carries no chips today, but scoping this way
 * means it would not inherit a pill treatment if one were ever added there.
 *
 * HOVER FOLLOWS THE SITE STANDARD: coral #FF7A66 with white text, the same
 * pair .mc-btn--primary already ships. No transform is added, so the
 * prefers-reduced-motion block above has nothing further to switch off.
 */

.mc-section--navy .mc-chips--places .mc-chip {
	background: #fff;
	border-color: #fff;
}

.mc-section--navy .mc-chips--places .mc-chip a {
	color: var( --mc-navy );
}

.mc-section--navy .mc-chips--places .mc-chip:hover {
	background: var( --mc-coral-btn );
	border-color: var( --mc-coral-btn );
}

.mc-section--navy .mc-chips--places .mc-chip:hover a {
	color: #fff;
}


/* ---------------------------------------------------------------------------
   Coral hover on a ghost-dark button.

   .mc-btn--ghost-d hovers to a lighter translucent white, which is what the
   areas band it was written for wants. The /about/ process band wants the
   sitewide coral affordance instead, so it opts in with this modifier rather
   than the base class being changed under the bands that already use it.

   Written as a.mc-btn--coral-h (0-2-1) so it outweighs .mc-btn--ghost-d:hover
   (0-2-0) on the same element regardless of source order.
   --------------------------------------------------------------------------- */
a.mc-btn--coral-h:hover,
a.mc-btn--coral-h:focus-visible {
	background: var( --mc-coral );
	border-color: var( --mc-coral );
	color: #fff;
}


/* ══════════════════════════════════════════════════════════════════════════
   P2 PACK - 12 August 2026
   Appended, like the pack above it, so every rule here wins on SOURCE ORDER
   as well as on weight. Each block names the earlier rule it has to beat.
   ══════════════════════════════════════════════════════════════════════════ */

/* --------------------------------------------------------------------------
   1. THE QUOTE FORM'S PROGRESS RAIL.

   It is not a wizard and it does not gate anything - see the note in
   parts/quote-form.php. Three groups, all on screen, all submittable in any
   order; this says how far through the visitor is.

   SCOPED TO .mc-loc, which is the class on <main> on every template that
   renders the form. That makes each selector 0,2,0 rather than 0,1,0, so it
   clears .mc-form label (0,1,1) - the rule that has already caught two
   components in this file by turning their children into blocks.

   The done state is NOT colour alone. The script writes a visually hidden
   "completed" into each row, so the rail reads as a list of finished and
   outstanding sections rather than as three numbers that look identical to a
   screen reader whatever they are doing.
   -------------------------------------------------------------------------- */

.mc-loc .mc-formsteps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0; }
.mc-loc .mc-formsteps__item { display: flex; align-items: center; gap: 9px; flex: 1 1 148px; min-width: 0; padding: 9px 13px; border: 1.5px solid var( --mc-line ); border-radius: 999px; background: #fff; }
.mc-loc .mc-formsteps__n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var( --mc-tint ); color: var( --mc-navy ); font-family: var( --mc-font-b ); font-weight: 700; font-size: 12.5px; }
.mc-loc .mc-formsteps__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var( --mc-font-b ); font-weight: 600; font-size: 13px; color: var( --mc-sec ); }
.mc-loc .mc-formsteps__item[aria-current="step"] { border-color: var( --mc-sky ); }
.mc-loc .mc-formsteps__item[aria-current="step"] .mc-formsteps__label { color: var( --mc-navy ); }
.mc-loc .mc-formsteps__item.is-done { border-color: var( --mc-sky ); background: var( --mc-tint ); }
.mc-loc .mc-formsteps__item.is-done .mc-formsteps__n { background: var( --mc-sky ); color: #fff; }
.mc-loc .mc-formsteps__item.is-done .mc-formsteps__label { color: var( --mc-navy ); }

/* --------------------------------------------------------------------------
   2. THE THREE GROUPS THE RAIL POINTS AT.

   <fieldset> so the grouping is real rather than visual, and every browser
   default on it is cleared: the border, the inline margins nobody expects,
   and min-width auto, which stops a fieldset shrinking below its widest child
   and is the classic way a fieldset breaks a narrow column.

   .mc-form is a plain block, not a grid, so a block-level child between it and
   the labels changes no layout. Checked before this shipped.
   -------------------------------------------------------------------------- */

.mc-loc .mc-form .mc-form__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.mc-loc .mc-form .mc-form__step-legend { display: block; float: none; width: 100%; padding: 0; margin: 0 0 12px; font-family: var( --mc-font-b ); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var( --mc-muted-2 ); }

/* --------------------------------------------------------------------------
   3. "YOUR REQUEST", the recap.

   Rendered from the values the SERVER stored, never from a fixed template, so
   a value that did not reach the lead cannot appear in it.

   ONE COLUMN BY DEFAULT AND TWO ONLY WHEN THERE IS ROOM. The term/definition
   pair is the obvious two-column grid and it is exactly the shape that traps
   this codebase: a 0,2,0 desktop rule would beat the 0,1,0 collapse inside
   @media ( max-width: 820px ) and hold two columns on a phone. So the narrow
   case is the DEFAULT here and the second column is fenced above 520px, which
   needs no rule to win anything.
   -------------------------------------------------------------------------- */

.mc-loc .mc-recap { margin-top: 16px; padding: 20px 22px; border: 1px solid var( --mc-line ); border-left: 4px solid var( --mc-sky ); border-radius: 16px; background: #fff; }
.mc-loc .mc-recap[hidden] { display: none; }
.mc-loc .mc-recap__h { margin: 0 0 10px; font-family: var( --mc-font-b ); font-weight: 700; font-size: 16px; color: var( --mc-navy ); }
.mc-loc .mc-recap__list { margin: 0; }
.mc-loc .mc-recap__row { display: grid; grid-template-columns: minmax( 0, 1fr ); gap: 2px 14px; padding: 8px 0; border-top: 1px solid var( --mc-line ); }
.mc-loc .mc-recap__row:first-child { border-top: 0; padding-top: 0; }
.mc-loc .mc-recap__row dt { margin: 0; min-width: 0; font-family: var( --mc-font-b ); font-weight: 600; font-size: 13px; color: var( --mc-sec ); }
.mc-loc .mc-recap__row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 14.5px; color: var( --mc-ink ); }

@media ( min-width: 521px ) {
	.mc-loc .mc-recap__row { grid-template-columns: minmax( 0, 150px ) minmax( 0, 1fr ); }
}

/* --------------------------------------------------------------------------
   4. THE SUCCESS STATE.

   Two ways in and one appearance. PHP renders .mc-sent after the redirect a
   no-JavaScript submission comes back on; the script leaves the form in place
   and hides its own contents through [data-mc-sent], because the live region
   holding the confirmation is a child of that form and hiding the form would
   hide the sentence with it.

   The fields go, the message stays. A form still sitting under "Thank you" is
   an invitation to send the same lead twice.
   -------------------------------------------------------------------------- */

.mc-loc .mc-sent { border-color: var( --mc-sky ); }
.mc-loc .mc-sent__note { margin: 0; font-family: var( --mc-font-b ); font-weight: 600; font-size: 17px; line-height: 1.55; color: var( --mc-navy ); }
.mc-loc .mc-sent .mc-recap { margin-top: 18px; }
.mc-loc .mc-sent .mc-fine { margin: 16px 0 0; }
.mc-loc .mc-form[data-mc-sent="1"] .mc-formsteps,
.mc-loc .mc-form[data-mc-sent="1"] .mc-form__step { display: none; }

/* --------------------------------------------------------------------------
   5. THE CONTACT PAGE'S SHORT MESSAGE FORM.

   It sits in the left column under the contact methods, so the two columns of
   that band carry comparable weight instead of a tall form beside a short
   list. It reuses .mc-form wholesale, including the consent-row repairs in the
   pack above, so it cannot drift from the form beside it.
   -------------------------------------------------------------------------- */

.mc-loc .mc-shortform { margin-top: 34px; }
.mc-loc .mc-shortform .mc-h3 { margin: 0 0 8px; }
.mc-loc .mc-shortform .mc-lead { margin: 0 0 16px; }
.mc-loc .mc-form--short { padding: 24px; }

/* --------------------------------------------------------------------------
   6. THE SERVICE AREAS COVERAGE PANEL.

   NOT A MAP, and that is the decision rather than the compromise. A drawn
   outline of fifteen Georgia counties that is wrong in its shapes or its
   adjacencies is a worse thing to publish than no map at all: it is a factual
   claim about where the business goes, made in a form nobody proofreads. Every
   number in this panel is counted from the published records at render time,
   so it cannot drift from the county and city pages underneath it.

   It lives in the hero, which is OUTSIDE <main> and therefore outside the
   .mc-loc reduced-motion block further up this file. Nothing here animates or
   transitions, so there is nothing for that block to have to reach.
   -------------------------------------------------------------------------- */

.mc-hero .mc-coverage { background: #fff; border: 1px solid var( --mc-tint ); border-radius: 26px; padding: 22px; box-shadow: 0 16px 38px rgba( 23, 74, 126, .1 ); }
.mc-hero .mc-coverage__figure { margin: 0 0 18px; border-radius: var( --mc-img-radius, 18px ); overflow: hidden; }
.mc-hero .mc-coverage__figure img { display: block; width: 100%; height: auto; border-radius: inherit; }
.mc-hero .mc-coverage__stats { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 10px; list-style: none; margin: 0; padding: 0; }
.mc-hero .mc-coverage__stats li { min-width: 0; padding: 14px 10px; border-radius: 16px; background: var( --mc-tint ); text-align: center; }
.mc-hero .mc-coverage__n { display: block; font-family: var( --mc-font-h ); font-weight: 800; font-size: 26px; line-height: 1.1; color: var( --mc-navy ); }
.mc-hero .mc-coverage__t { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.35; color: var( --mc-sec ); }
.mc-hero .mc-coverage__note { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: var( --mc-sec ); }

@media ( max-width: 520px ) {
	.mc-hero .mc-coverage__stats { grid-template-columns: minmax( 0, 1fr ); }
	.mc-hero .mc-coverage { padding: 18px; }
}

/*
 * ---------------------------------------------------------------------------
 * TYPE SCALE BANDS.
 *
 * .mc-h1, .mc-h2 and .mc-h3 above carry one fluid value each, which is the
 * approved design. Measured against the scale document, some of the bands
 * those single values produce fall outside the stated ranges: the H1 is 41px
 * at 900px where the document asks for 42-52px and 45px at 980px where it
 * asks for 52-64px, and the H2 and the H3 sit below their desktop floors.
 * Every value that already complied is untouched, so this block only raises
 * floors and never lowers a ceiling.
 *
 * Last in the file on purpose. .mc-h1 here is 0,1,0, exactly the same as
 * .mc-h1 above, so source order is what makes the override land - the same
 * mechanism the navigation already uses at ( min-width: 1280px ).
 *
 * The bands are the ones this file already uses: ( max-width: 820px ) is
 * mobile, ( min-width: 980px ) is desktop, and the strip between them is the
 * tablet band. Nothing here invents a breakpoint the stylesheet does not
 * already know about.
 * ---------------------------------------------------------------------------
 */
@media ( min-width: 821px ) and ( max-width: 979px ) {
	.mc-h1 { font-size: clamp( 42px, 5.3vw, 52px ); }
}

@media ( min-width: 980px ) {
	.mc-h1 { font-size: clamp( 52px, 4.6vw, 56px ); }
	.mc-h2 { font-size: clamp( 38px, 3.2vw, 42px ); }
	.mc-h3 { font-size: 26px; }
}


/* ==================================================================== */
/* Right to left, for Arabic and Urdu                                    */
/* ==================================================================== */

/*
 * ALMOST NOTHING IS IN HERE, AND THAT IS THE POINT.
 *
 * The twenty-six declarations that genuinely had a side to them were converted
 * to logical properties in place - margin-inline-start, padding-inline-start,
 * border-inline-start, inset-inline-start, inset-inline-end, text-align: start -
 * so ONE rule serves both directions and there is no second copy of the layout
 * to drift out of step with the first. That is the whole reason this block is
 * short: what is left below is only what a logical property genuinely cannot
 * say, plus the handful of things that must NOT mirror.
 *
 * Everything here is scoped to [dir="rtl"], which is set on the html element by
 * MC_Fonts::language_direction() for Arabic and Urdu and by nothing else, so an
 * English page never matches a single selector in this block.
 */

/*
 * The brand gradients, which have an angle and therefore a direction.
 *
 * 120deg runs from lower-left to upper-right. Mirrored about the vertical axis
 * that is 240deg, and 155deg becomes 205deg. A gradient is the one thing on this
 * page that carries the reading direction without carrying any text, so leaving
 * it alone would put the light end of every navy band on the wrong side of a
 * mirrored layout.
 */
[dir="rtl"] .mc-loc,
[dir="rtl"] .mc-hero {
	--mc-grad: linear-gradient( 240deg, #2B8FE5, #174A7E );
}

[dir="rtl"] .mc-cta-card {
	background: linear-gradient( 240deg, #1E6FB4, #174A7E );
}

[dir="rtl"] .mc-hero--home .mc-hero__img::after {
	background:
		linear-gradient( 205deg, rgba( 43, 143, 229, .20 ) 0%, rgba( 43, 143, 229, 0 ) 55% ),
		linear-gradient( 0deg, rgba( 23, 74, 126, .34 ) 0%, rgba( 23, 74, 126, 0 ) 45% );
}

/*
 * DELIBERATELY NOT MIRRORED, ALL THREE OF THESE.
 *
 * The logo lockup. The brand mark sits before the wordmark because that is the
 * logo, not because English reads that way, and a mirrored lockup is a different
 * logo. Pinned ltr so the two pieces keep their order inside an otherwise
 * mirrored bar.
 */
[dir="rtl"] .mc-nav__brand,
[dir="rtl"] .mc-footer__mark {
	direction: ltr;
}

/*
 * Phone numbers. (770) 555-0134 is a run of Latin digits and punctuation, and
 * the bidi algorithm will happily move a leading bracket to the far end of it
 * inside an Arabic paragraph. isolate rather than embed, so the number is a
 * single neutral unit to the text around it rather than a hole in it.
 */
[dir="rtl"] .mc-nap__phone,
[dir="rtl"] .mc-nav__phone,
[dir="rtl"] .mc-footer__phone,
[dir="rtl"] .mc-contact-line__value,
[dir="rtl"] a[href^="tel:"] {
	direction: ltr;
	unicode-bidi: isolate;
}

/*
 * The before-and-after slider, pinned ltr in full.
 *
 * --mc-ba-pos is written by mc-ba.js from a pointer clientX with no notion of
 * direction, and .mc-ba__line and .mc-ba__handle read it as a physical left. Had
 * the CSS been mirrored and the JS not, the handle would travel one way while the
 * reveal travelled the other - a slider that fights the pointer. The images are
 * a before on one side and an after on the other, which is a fact about the
 * photographs rather than about the reading direction, so the honest fix is to
 * leave the whole component alone rather than to half-mirror it.
 */
[dir="rtl"] .mc-ba__frame {
	direction: ltr;
}

/*
 * The skip link, which is hidden off-screen to the LEFT.
 *
 * MEASURED: scrollWidth 11420 against a clientWidth of 1421 on the Arabic page,
 * and 9984 of that 9999 is this one element. The theme hides .mater-skip with the
 * old position:absolute;left:-9999px trick, and left is the direction an RTL
 * document scrolls in - so what is harmlessly out of view in English becomes ten
 * thousand pixels of horizontal scrollbar in Arabic, on every page.
 *
 * Fixed by taking the off-screen positioning away rather than by mirroring it:
 * a 1px clipped box has no side to be on and cannot overflow in either
 * direction. :focus is untouched, so the link still appears for a keyboard user
 * exactly as it did - this hides it more safely, it does not hide it harder.
 */
[dir="rtl"] .mater-skip:not(:focus) {
	position: absolute;
	inset-inline-start: auto;
	inset-inline-end: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/*
 * The honeypot, hidden off-screen to the left by an INLINE style.
 *
 * Every Mater form carries <input name="mc_hp"> as a spam trap, positioned at
 * left:-9999px in a style attribute. Same failure as the skip link and a bigger
 * one, because it is on the quote form, the contact form and the pop-up, so it
 * is on nearly every page: eleven thousand pixels of horizontal scroll on an
 * Arabic page, measured.
 *
 * !important IS THE CORRECT TOOL HERE AND ONLY HERE. The offending declaration
 * is in a style attribute, which outranks every selector in this file no matter
 * how it is written, so there is no specificity answer - the choice is an
 * important declaration or editing markup that belongs to the form layer. The
 * trap is unaffected: it keeps its 1px box, its zero opacity, its tabindex of -1
 * and its aria-hidden, so it is exactly as invisible to a person and exactly as
 * visible to a bot as it was. Only the ten thousand pixels go away.
 */
[dir="rtl"] input[name="mc_hp"] {
	left: auto !important;
	inset-inline-start: auto !important;
	inset-inline-end: auto !important;
}

/*
 * The tick in a check list stays a tick.
 *
 * .mc-check-list li::before is two borders sheared to -45deg. Its POSITION is
 * logical now, so it sits at the start of the line in both directions, but the
 * mark itself is not mirrored: a reversed checkmark reads as a mistake in every
 * locale, and RTL typography keeps it as drawn. Nothing to declare here - this
 * note exists so the next reader knows it was a decision.
 */

/* ==========================================================================
   STICKY HEADER, ANCHOR OFFSETS AND BACK TO TOP
   ==========================================================================
   THE STICKY RULE WAS ALREADY HERE AND HAD NEVER ONCE WORKED.

   .mc-nav has carried position:sticky, top:0 and z-index:50 since the bar was
   built. Measured on the live home page before this change: at scrollY 600 the
   bar's own getBoundingClientRect().top was -524. It scrolled away like any
   static element.

   The reason is the containing block. A sticky element can only travel inside
   its PARENT's box, and the parent is the header wrapper, which holds the
   topbar and the bar and nothing else - 133px tall. The bar had 44px of room
   to move and then ran out of parent, so it left the viewport with everything
   else. Nothing was wrong with the rule; it was scoped to a box the height of
   itself.

   display:contents removes that box from the layout WITHOUT removing the
   element, so the bar becomes a child of the body flow and sticks against the
   page. Inherited values and custom properties still cascade through a
   display:contents element, and this wrapper was measured to carry no
   background, padding, margin, position or overflow of its own, so there is
   nothing to lose. The modifier class is set in parts/site-nav.php; the two
   other .mc-loc wrappers on a page are content, not the header, and are
   untouched.

   WHY THE TOPBAR IS NOT STUCK WITH IT. The topbar is 44px at 1440 and 64px at
   390. Sticking the pair would put 123px of permanent furniture on a desktop
   viewport and 147px on a phone - 17% of a 390x844 screen, before the fixed
   action bar at the other end takes 56px more. The bar carries the brand, the
   whole menu, the phone number and the quote button; the topbar carries a
   service-area line, a second copy of the phone number, opening hours and the
   language switcher, none of which a reader needs pinned. So the topbar
   scrolls away and the bar alone stays.

   THERE IS NO LAYOUT SHIFT TO COMPENSATE FOR, and that is the whole argument
   for sticky over a fixed bar plus a padding-top on the body. A sticky element
   keeps its space in the flow, so nothing below it moves when it lifts. A
   fixed one leaves a hole exactly its own height, which is why every fixed
   header needs a spacer that then has to be kept in step with the header's
   real height at every breakpoint. Measured on this page: 0px.
   ========================================================================== */

.mc-loc--header { display: contents; }

/* The admin bar is fixed over the top of the viewport for a logged-in editor,
   and it is 32px tall from 783px up. Below that WordPress un-fixes it, so
   there is nothing to clear. Nobody logged out ever sees this rule. */
@media screen and ( min-width: 783px ) {
	body.admin-bar .mc-nav { top: 32px; }
}

/* ---------- Anchor targets ----------

   Every in-page anchor on the site now lands under a bar that is 79px tall at
   1440 and 83px at 390. scroll-margin-top is what stops the browser parking
   the heading exactly where the bar is, and it is set on the TARGETS rather
   than done with a scroll-padding on the scroller, because the mobile drawer
   is its own scroll container and would otherwise inherit an offset it has no
   use for. */

#mc-values,
#mc-owner,
#mc-process,
#mc-team,
#cities,
#quote,
#areas {
	scroll-margin-top: 96px;
}

@media ( max-width: 979px ) {
	#mc-values,
	#mc-owner,
	#mc-process,
	#mc-team,
	#cities,
	#quote,
	#areas {
		scroll-margin-top: 100px;
	}
}

/* Smooth for the back-to-top link AND for every in-page anchor, which is the
   same behaviour a reader gets from the one they get from the other. Turned
   off wholesale under reduced motion at the foot of this block. */
html { scroll-behavior: smooth; }

/* ==========================================================================
   BACK TO TOP
   ==========================================================================
   WHERE IT SITS, AND WHY THOSE NUMBERS.

   The Maria chat launcher is already fixed in the same corner. Measured on the
   live site rather than assumed: 64px square, 20px from the bottom and 20px
   from the inline end at 1440; 56px square and 84px from the bottom at 390,
   where it is itself lifted clear of the 56px fixed action bar. So the launcher
   occupies the first 84px of that corner on a desktop and the first 140px on a
   phone, and this link is placed directly above it: 98px and 152px, leaving a
   measured 14px and 12px of clear space. They cannot collide at any width
   because they share an inline edge and are separated on the block axis.

   LOGICAL PROPERTIES, NOT right/bottom. Arabic and Urdu are configured, and
   under dir=rtl inset-inline-end flips this link to the other corner by
   itself. It has room there whichever way the launcher resolves.

   IT IS AN ANCHOR, NOT A BUTTON, and parts/site-nav.php records why: a button
   is dead with JavaScript off and href="#top" is not. The visible label is
   what gives it an accessible name, so there is no icon-only control to
   explain to a screen reader.

   z-index 45 puts it under the bar at 50, which matters in one place: the mega
   panel's scrim is fixed at z-index 1 inside the bar's stacking context, so an
   open panel correctly covers this link instead of leaving it clickable
   through the overlay.
   ========================================================================== */

.mc-totop {
	position: fixed;
	inset-block-end: var( --mc-totop-b, 100px );
	inset-inline-end: var( --mc-totop-e, 20px );
	z-index: 45;
	/*
	 * THE ANCHOR IS THE TOUCH TARGET AND IS ENTIRELY INVISIBLE.
	 * 44x44 of hit area with no background, no border and no shadow. What the
	 * visitor sees is .mc-totop__arrow inside it, which is 38px on desktop and
	 * 30px on mobile. That is how the control reads as a small arrow while still
	 * meeting the 44px target, rather than being a 126x44 navy pill.
	 */
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	gap: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	color: var( --mc-navy );
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: opacity .18s ease, visibility .18s ease;
}

/* .mc-loc a is navy, and this link is inside the header wrapper, so the colour
   needs the extra class to win rather than relying on source order. */
.mc-loc a.mc-totop { color: var( --mc-navy ); }

/* The hover lives on the arrow. The anchor must stay invisible at every state. */
.mc-totop:hover .mc-totop__arrow,
.mc-loc a.mc-totop:hover .mc-totop__arrow,
.mc-totop:focus-visible .mc-totop__arrow {
	background: var( --mc-coral );
	border-color: transparent;
	color: #fff;
}

.mc-totop:hover,
.mc-loc a.mc-totop:hover { background: none; }

.mc-totop:focus-visible { outline: 3px solid var( --mc-navy ); outline-offset: 3px; }

.mc-totop__arrow {
	display: grid;
	place-items: center;
	flex: none;
	/* Size comes from Settings > Back to top button. The literal is the fallback. */
	width: var( --mc-totop-arrow, 38px );
	height: var( --mc-totop-arrow, 38px );
	border-radius: 50%;
	background: rgba( 255, 255, 255, .94 );
	border: 1px solid rgba( 23, 74, 126, .2 );
	/* A hairline, not the old 0 10px 26px drop shadow. */
	box-shadow: 0 1px 3px rgba( 23, 74, 126, .14 );
	color: inherit;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.mc-totop__arrow svg { display: block; width: 17px; height: 17px; }

/*
 * THE LABEL LEAVES THE PAGE, NOT THE ACCESSIBILITY TREE.
 *
 * The client asked for no visible "Back to Top" text. The <span> stays in the
 * markup and stays translated, clipped to a single pixel, so the anchor keeps
 * its accessible name from its own content and needs no aria-label. Nothing in
 * parts/site-nav.php had to change for this, which also means the href="#top"
 * no-JavaScript fallback is untouched.
 */
.mc-totop__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* NO SCRIPT, NO HIDING. The attribute is set by the inline script in
   parts/site-nav.php the moment it runs, so a reader with JavaScript blocked
   never matches these two rules and simply gets a link that is always there
   and always works. With the script running it appears past 600px of scroll,
   which is far enough down that a short page never shows it. */
html[data-mc-totop="js"] .mc-totop {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

html[data-mc-totop="js"] .mc-totop.is-on {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* At and below 979 the sticky action bar and the chat launcher are both on
 * screen. 156px clears the launcher by a measured 16px. */
@media ( max-width: 979px ) {
	.mc-totop {
		--mc-totop-b: 156px;
		--mc-totop-e: 16px;
	}
}

/* Mobile proper: a bare arrow, no circle and no background at all. */
@media ( max-width: 820px ) {
	.mc-totop {
		--mc-totop-e: 14px;
		width: 40px;
		height: 40px;
	}

	.mc-totop__arrow {
		width: var( --mc-totop-arrow-m, 30px );
		height: var( --mc-totop-arrow-m, 30px );
		background: none;
		border: 0;
		box-shadow: none;
	}

	.mc-totop__arrow svg { width: 20px; height: 20px; }
}

@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
	.mc-totop { transition: none; }
}

/* ============================================================
   SHORT CITY GRIDS: A ROW, NOT A BROKEN GRID
   ============================================================
   `.mc-city-grid` is a hard repeat( 4, 1fr ). Rockdale County has one
   city and Forsyth has two, so those two pages rendered a card or two
   followed by empty columns. Measured at 1440 on 2026-08-12: Rockdale
   left 1027.75 x 97 of dead grid beside its single card, Forsyth left
   698.5 x 125 beside its two. Same defect class as the hero blank
   columns fixed earlier.

   THE REMEDY IS THE ONE ALREADY USED FOR `.mc-chips--places` below: a
   `:has( > :nth-child(N):last-child )` chain that can only match when
   the WHOLE group is N items. A ragged last row sitting under a full
   first row is therefore untouched - Barrow, Cherokee, Fayette, Hall
   (5), Clayton (7), Gwinnett (13) and Fulton (15) keep the ragged row
   the design asks for. Only N = 1..3 can exist without a full row.

   THE COLUMN IS PINNED, NOT STRETCHED. repeat( N, 1fr ) would have
   made Rockdale one 1377px slab, which trades dead space for an absurd
   card. calc( ( 100% - 60px ) / 4 ) is arithmetically the 4-column
   track - 60px is the three 20px gaps - so a one-city county renders a
   card measuring exactly what a card measures on every other county
   page, left-aligned, reading as a deliberate short row.

   SPECIFICITY. `.mc-city-grid:has( > :nth-child(N):last-child )` is
   0,3,0 against 0,1,0 for the base rule and for the width overrides at
   1120px and 820px, so these win wherever they are placed in the file.
   Verified with getComputedStyle, not assumed.

   Below 821px the grid is two columns and a lone card filling the row
   is ordinary phone layout, so the chain stops there - the same
   min-width: 821px floor the chips chain uses. */

@media ( min-width: 1121px ) {
	.mc-city-grid:has( > :nth-child(1):last-child ) { grid-template-columns: repeat( 1, minmax( 0, calc( ( 100% - 60px ) / 4 ) ) ); }
	.mc-city-grid:has( > :nth-child(2):last-child ) { grid-template-columns: repeat( 2, minmax( 0, calc( ( 100% - 60px ) / 4 ) ) ); }
	.mc-city-grid:has( > :nth-child(3):last-child ) { grid-template-columns: repeat( 3, minmax( 0, calc( ( 100% - 60px ) / 4 ) ) ); }
}

@media ( min-width: 821px ) and ( max-width: 1120px ) {
	.mc-city-grid:has( > :nth-child(1):last-child ) { grid-template-columns: repeat( 1, minmax( 0, calc( ( 100% - 40px ) / 3 ) ) ); }
	.mc-city-grid:has( > :nth-child(2):last-child ) { grid-template-columns: repeat( 2, minmax( 0, calc( ( 100% - 40px ) / 3 ) ) ); }
}

/* ============================================================
   COMMUNITY BADGE: A BADGE, NOT A RUN-ON
   ============================================================
   Five of the 98 city cards carry `.mc-city-card__type` reading
   "Community" - Ellenwood, Vinings, Lithia Springs, Winston and Coal
   Mountain. Those five are unincorporated communities rather than
   incorporated cities, so the badge is correct and deliberate, and the
   grid comment above already accounts for "badge or no badge".

   WHAT WAS ACTUALLY WRONG. The badge is pinned to the card bottom with
   margin-top:auto. In a row where the content already fills the track
   there is no slack for auto to absorb, so it resolved to 0 and the
   badge sat flush on the description - measured on Cobb at 1440, the
   description ended at y=76 and the badge began at y=76. Read aloud
   that is "Mostly condominiums Community", which is what got it
   reported as a stray label.

   A floor under the description, scoped with :has() to the five cards
   that actually have a badge, so the other 93 keep their exact rhythm.
   margin-top:auto still absorbs the slack when a row has some, so the
   bottom pinning survives. */

.mc-city-grid .mc-city-card:has( > .mc-city-card__type ) > span:not( .mc-city-card__type ) {
	margin-bottom: 10px;
}

/* ==========================================================================
   ===== The intro band, and a ceiling on picture height on a phone =====
   ==========================================================================
   WHY THE HEROES WERE THE HEIGHT THEY WERE. The location templates carried
   the whole stored intro inside the hero copy column, and that column set
   the row height, so the picture beside it grew to match. MEASURED BEFORE
   at 1440: .mc-hero__img was 636x1106 on /service-areas/cobb-county/ and
   636x1253 on smyrna, against 636x700 on the home page. At 390 the hero
   SECTION measured 2226px on Cobb and 2258px on Gwinnett - two and a half
   screens of hero before the page begins.

   The templates now keep the answer paragraph in the hero and print the
   rest of the stored intro in .mc-intro-band immediately below it. NOT ONE
   WORD IS DROPPED OR REWRITTEN: the same meta field goes through the same
   wpautop() and wp_kses_post(), into a different box. The 165 location
   records were written one at a time to clear a uniqueness gate and they
   still carry every character of that text.
   ========================================================================== */

.mc-intro-band { padding: 30px 0 6px; }
.mc-intro-band .mc-lead { max-width: 74ch; margin: 0; }
.mc-intro-band .mc-lead > p:last-child { margin-bottom: 0; }

/* No tint. The band is a continuation of the hero, and the section that
   follows it on both the city and the county template is .mc-section--tint;
   two tinted bands in a row would read as one and lose the join. */
@media ( max-width: 820px ) {
	.mc-intro-band { padding: 22px 0 2px; }
}

/* ---- A ceiling on how tall one picture may be on a phone --------------- */

/* MEASURED AT 390px BEFORE: each of the four crew cards on the home page
   rendered 450px tall, the owner portrait 443px, and the navy figure band
   on a city page 531px. A photograph taller than about a third of an 844px
   viewport is what turns a page into a scroll, which is the complaint.

   object-fit: cover crops rather than squashes, so nothing is distorted by
   a cap, and every rule below names the rule it has to beat. All three are
   ties on specificity settled by source order, which is safe here because
   this is the last block in the file. */
@media ( max-width: 820px ) {
	/* Ties `.mc-crew-card__figure img` (0,1,1) and wins on order. */
	.mc-crew-card__figure img { max-height: 260px; object-fit: cover; object-position: 50% 22%; }

	/* Ties `.mc-owner .mc-owner__portrait img` (0,2,1) and wins on order. */
	.mc-owner .mc-owner__portrait img { max-height: 320px; object-fit: cover; object-position: 50% 18%; }

	/* Ties `.mc-figure-split .mc-figure-split__media img` and the `--photo`
	   pair, all 0,2,1, and wins on order. */
	.mc-figure-split .mc-figure-split__media img,
	.mc-figure-split .mc-figure-split__media--photo img { max-height: 300px; object-fit: cover; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * REVIEWS.
 *
 * Appended, so source order puts these last and nothing above has to be touched.
 * Every selector is scoped under .mc-reviews or .mc-review; there is no bare ul,
 * li, blockquote, details or summary rule in this file for these to collide with,
 * which was checked before writing rather than assumed.
 *
 * THE CARD IS .mc-city-card's SHAPE ON PURPOSE. White on the band, one tint hair
 * line, --mc-img-radius. A review card that invented its own radius would be the
 * one rounded corner on the site that does not match.
 *
 * NO HOVER ON THE CARD. A card is not a link and must not behave like one - the
 * only two things in this band that respond to a pointer are the source button
 * and the disclosure, and both are .mc-btn.
 * ═══════════════════════════════════════════════════════════════════════════ */

.mc-reviews__note {
	max-width: 74ch;
	margin: 0 0 14px;
	color: var( --mc-sec );
}

.mc-reviews__source {
	margin: 22px 0 30px;
}

.mc-reviews__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mc-review {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var( --mc-tint );
	border-radius: var( --mc-img-radius, 18px );
	padding: 20px 22px;
}

/*
 * The quotation. overflow-wrap because these are transcribed sentences and not
 * copy written to fit - one unbroken run of characters in somebody's review must
 * not be the thing that puts a horizontal scrollbar on a 390px page.
 */
.mc-review__quote {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	overflow-wrap: anywhere;
}

.mc-review__quote p {
	margin: 0;
	color: var( --mc-ink );
}

/* margin-top: auto keeps the by-line on the floor of every card in a row. */
.mc-review__by {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var( --mc-line );
	margin-top: auto;
}

.mc-review__name {
	display: block;
	font-family: var( --mc-font-h );
	font-weight: 700;
	color: var( --mc-navy );
}

.mc-review__meta {
	display: block;
	font-size: 14px;
	color: var( --mc-muted );
}

.mc-reviews__more {
	margin-top: 24px;
}

/*
 * list-style AND the WebKit pseudo-element. Removing one and not the other leaves
 * a triangle sitting inside a pill on whichever engine you did not test.
 */
.mc-reviews__more > summary {
	list-style: none;
	cursor: pointer;
}

.mc-reviews__more > summary::-webkit-details-marker {
	display: none;
}

/*
 * The site's rule for anything clickable is coral with white text, and .mc-btn--light
 * hovers to tint on navy instead. (0,2,1) here beats .mc-btn--light:hover at (0,2,0),
 * which is why this is a descendant selector and not a second class on the summary.
 */
.mc-reviews__more > summary:hover,
.mc-reviews__more > summary:focus-visible {
	background: var( --mc-coral-btn );
	border-color: var( --mc-coral-btn );
	color: #fff;
}

.mc-reviews__more[open] > summary {
	margin-bottom: 20px;
}

.mc-reviews__grid--more {
	margin-top: 0;
}

@media ( max-width: 979px ) {

	.mc-reviews__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 820px ) {

	.mc-reviews__grid {
		grid-template-columns: 1fr;
	}

	.mc-review {
		padding: 18px 18px;
	}

	/*
	 * Both pills go full width and centre below 820. At 390 the wrap leaves about
	 * 342px of room and "Read all 19 reviews on Thumbtack" at 16px/700 with 28px of
	 * padding on each side does not fit on one line - left to itself the pill is the
	 * thing that overflows the page.
	 */
	.mc-reviews__source .mc-btn,
	.mc-reviews__more > summary {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

/*
 * .mc-btn already carries a transition and a hover lift. The suppression is
 * restated for the summary because the summary is not an <a> or a <button> and a
 * future narrowing of the existing rule to those elements would silently drop it.
 */
@media ( prefers-reduced-motion: reduce ) {

	.mc-reviews__more > summary {
		transition: none;
	}

	.mc-reviews__more > summary:hover,
	.mc-reviews__more > summary:focus-visible {
		transform: none;
	}
}


/* ==========================================================================
   ===== MOBILE TAP TARGETS AND MOBILE BODY COPY  ( <= 820px ) =====
   ==========================================================================
   Everything below sits inside @media ( max-width: 820px ), so nothing here
   can reach the 821-979 tablet band or the >= 980 desktop band. The audited
   desktop type scale is untouched by construction rather than by care.

   EVERY NUMBER BELOW WAS MEASURED at a real 390px layout viewport, using an
   exactly-sized same-origin iframe so the media queries actually applied,
   and every rule was then read back through getComputedStyle rather than
   assumed to have won its cascade.

   HIT AREA BEFORE VISUAL SIZE. Where a target could grow without moving a
   pixel on screen, it does: the phone and email values pad and then cancel
   the pad with an equal negative margin, so the box grows and the layout
   does not. The place pills cost nothing at all - the pill was already 48px
   and only the anchor inside it was small. Only the footer link columns
   genuinely had to take space, and they pay for most of it out of their own
   gap.
   ========================================================================== */

@media ( max-width: 820px ) {

/* ---- Footer link columns -------------------------------------------------
   BEFORE: the anchor is display:inline and 20.0px tall, on a 32.8px row pitch
   ( 23.8px line box + 9px flex gap ). 27 per page - the largest group of
   undersized targets on the site after the pills.

   Vertical padding on the inline box would have reported 44px to a rect check
   without moving the line box, and would have been a lie: padding on an inline
   box overflows the line, so consecutive links would have overlapped by ~20px
   and the top of each link would have activated the one above it. The anchor
   becomes a 44px flex block instead.

   The list surrenders its 9px gap to pay for 9 of the 20.2px that costs, so the
   pitch goes 32.8 -> 44.0 and a 10-item column grows 319 -> 440px. A third
   taller, not the doubling that padding-plus-gap would have produced. Rows now
   touch at exactly 0px and never overlap - checked pairwise against every
   interactive element on all eight audited pages.

   The contact column keeps its 10px gap. Two of its five items are plain address
   lines rather than links and never gain a 44px box, so closing that gap would
   jam plain text together to pay for a target that is not there. */
.mc-footer .mc-fcol__list { gap: 0; }
.mc-footer .mc-fcol__list.mc-footer__contact-list { gap: 10px; }

.mc-footer .mc-fcol__list li a {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* ---- Footer column titles ------------------------------------------------
   19.0px. Unlike the h3 links inside page copy these are not headings that
   happen to contain a link - they are the top row of a navigation column and
   carry the same href as the list beneath them. Treated as navigation, not
   prose.

   :has( > a ) so the columns whose title is plain text keep their 14px margin.
   Where the title IS a link the margin is surrendered to the new box, so the
   header costs 44px rather than 19.5 + 14, and the gap under the title text
   reads at 12.25px against 14px before. */
.mc-footer .mc-fcol__title:has( > a ) { margin-bottom: 0; }

.mc-footer .mc-fcol__title a {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* ---- Footer legal row ----------------------------------------------------
   18.0px. This row is a horizontal flex with an 18px column gap, so height is
   the only failing axis and growing it cannot collide with a neighbour - the
   three links sit side by side, not stacked. The bottom bar grows 28.9 -> 44px,
   once, at the foot of the page. */
.mc-footer .mc-footer__legal-list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---- Breadcrumb ----------------------------------------------------------
   The height was already right - .mc-crumb a carries 11px vertical padding for
   exactly this reason and measures 44.9px. Only the first crumb failed, and only
   on width: "Home" is 38.0px including its 2px side padding.

   min-width rather than more horizontal padding, so the text does not move. The
   box grows 6px to the right of the word and the "/" separator moves with it.
   Every other crumb is already wider than 44px and is untouched. */
.mc-crumb a { min-width: 44px; }

/* ---- Place pills ---------------------------------------------------------
   No visual change at all, because the pill was never the problem.
   .mc-chips--places .mc-chip is already a 48px min-height flex box, and the rule
   above already says the anchor "has to fill the pill" and sets width:100% and
   height:100%.

   The width worked. The height never did: a percentage height resolves against
   the parent height, the parent height is auto ( it is min-height that holds the
   48px ), so height:100% computed to auto and the anchor stayed at its line box -
   30px on one line, 38px on two.

   Stretching alone still would not reach 44px, because the pill's own 8px/14px
   padding is inside the box being stretched into: 48 - 3px border - 16px padding
   leaves 29px. So the padding moves from the pill to the anchor. The pill keeps
   its border, fill, radius and 48px min-height, the anchor keeps its centring,
   and the rendered pill is identical - including the two-line case, which lands
   on the same 56.5px as before.

   :has( a ) so a decorative pill with no link keeps its own padding. The file
   already relies on :has( a ) for the pill hover state, for the same reason.

   Specificity 0,2,2 against the 0,2,1 it overrides, and later in the file.
   Confirmed by reading height back, not by counting. */
.mc-chips--places .mc-chip:has( a ) { padding: 0; }

.mc-chips--places .mc-chip:has( a ) > a {
	box-sizing: border-box;
	align-self: stretch;
	height: auto;
	min-height: 44px;
	padding: 8px 14px;
}

/* ---- Contact rows --------------------------------------------------------
   124.5x28.9 - width was never the problem. The padding is cancelled by an equal
   negative margin, so the anchor box grows to 44.1px and nothing moves:
   .mc-contact-line__body stays 51.8px and the card stays 85.8px. The extra 7.6px
   above the number reaches up into the "Call us" label, which is not itself a
   target, so nothing collides.

   display stays block. Making it a flex box would have dropped the
   overflow-wrap:anywhere that stops contact@matercleaningservices.com pushing
   the card past its column. */
.mc-contact-line__body .mc-contact-line__value {
	padding-top: 7.6px;
	padding-bottom: 7.6px;
	margin-top: -7.6px;
	margin-bottom: -7.6px;
}

/* ---- Consent -------------------------------------------------------------
   13.5px, and the most important number in this pass: it is the sentence the
   visitor is agreeing to when they hand over a phone number. It is not fine
   print and is not treated as fine print - it goes to a full 16px.

   The winning declaration was .mc-form label.mc-consent > span at 0,2,2, which
   is why the override is written to that shape rather than the .mc-consent span
   the file also carries at 0,1,1.

   min-height states the activation area explicitly. The checkbox is a child of
   the label, so the label region is what a finger actually has to hit. The
   input keeps its own native 18x18 box on purpose - see the handover note. */
.mc-form label.mc-consent {
	font-size: 16px;
	min-height: 44px;
}

.mc-form label.mc-consent > span { font-size: 16px; }

/* ---- Body copy to 16px ---------------------------------------------------
   Prose only. Chips, eyebrows, form-step labels, review meta and footer
   navigation are UI labels rather than body copy and keep their sizes, and the
   two genuine fine-print cases, .mc-fine and .mc-crumb, keep theirs. These six
   are paragraphs and list copy a visitor reads as text, where 15 to 14.5px is
   simply small on a phone.

   Written with the doubled-class idiom the file already uses at
   .mc-pill-list.mc-pill-list, rather than an ancestor, so each rule outranks the
   declaration it replaces without depending on any wrapper being present. The
   crew tag is tripled because .mc-crew-grid--roles .mc-crew-card__tag holds it
   at 0,2,0. */
.mc-service-card.mc-service-card p { font-size: 16px; }
.mc-standard.mc-standard p { font-size: 16px; }
.mc-pill-list.mc-pill-list li { font-size: 16px; }
.mc-guarantee.mc-guarantee { font-size: 16px; }
.mc-note.mc-note { font-size: 16px; }
.mc-crew-card__tag.mc-crew-card__tag.mc-crew-card__tag { font-size: 16px; }
}


/* =========================================================================
 * CLIENT PASS 2026-08-13. Five corrections, every number below measured on
 * the live site rather than assumed. Appended last, so each rule ties its
 * target on specificity and wins on source order; where a tie was not
 * enough the class is doubled, the idiom already used at the foot of this
 * file.
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * 1. WHITE TYPE ON EVERY CORAL SURFACE.
 *
 * Found by walking the CSSOM and the rendered DOM, not by grepping for a
 * colour name: 32 rules across the site paint a coral ground, and these were
 * the ones still setting ink #253746 on top of it.
 *
 * .mc-areas__chip:hover measured 4.80:1 with ink and measures 2.55:1 with
 * white. White is the settled brand decision, recorded here so the next
 * reader does not quietly put the ink back.
 * ------------------------------------------------------------------------- */
.mc-hero__badge--offer.mc-hero__badge--offer { color: #fff; }
.mc-areas .mc-areas__chip:hover { color: #fff; }
.mc-footer .mc-footer__social-link:hover,
.mc-footer .mc-footer__social-link:focus-visible { color: #fff; }

/* mater-popup paints .mc-popup__submit as ink on coral. popup.css is enqueued
   before this file, so an equal-specificity rule here settles it without
   editing a plugin this pass does not own. Root fix belongs in popup.css. */
.mc-popup__submit { color: #fff; }

/* ---------------------------------------------------------------------------
 * 2. CREW AVATAR HEADS ARE NOT CROPPED ON MOBILE.
 *
 * The four crew photographs are transparent cut-outs. Measured at 390: the
 * figure box is 300x260, the served variant 390x584, object-fit: cover scales
 * it to 300x449, and object-position: 50% 22% therefore hid the top 54 source
 * pixels. The top of the head sits at source y 20 to 26 on the four files, so
 * 28 to 34 pixels of skull were being cut on every card.
 *
 * Aligning to the top removes the crop outright and keeps the 260px cap an
 * earlier pass added to stop these cards turning the page into a scroll, so
 * page height does not regress. Each cut-out carries clear space above the
 * head, so nothing sits flush against the frame.
 *
 * The owner portrait was measured in the same sweep and is already safe: it
 * hides 21 source pixels against a head starting at 50.
 * ------------------------------------------------------------------------- */
@media ( max-width: 820px ) {
	.mc-crew-card__figure img { object-position: 50% 0%; }
}

/* ---------------------------------------------------------------------------
 * 3. BACK TO TOP CLEAR OF THE CHAT LAUNCHER.
 *
 * Measured before this change: at 390 the launcher occupies 84 to 140 from
 * the bottom and back-to-top sat at 152, a 12px gap that read as one control;
 * at 1440 the launcher occupies 20 to 84 and back-to-top sat at 98, 14px.
 *
 * 200 and 144 give a 60px gap at both widths and leave headroom for the label
 * mater-chat is adding above its bubble. The sticky action bar still owns
 * 0 to 56 at 390, so the three controls read as three.
 * ------------------------------------------------------------------------- */
@media ( max-width: 979px ) {
	.mc-totop { --mc-totop-b: 200px; }
}

/*
 * THE LAUNCHER MOVES AT 1200, NOT AT 980, and one value for everything above
 * 980 is why this needed a second look. Measured: below 1200 the bubble is
 * 56x56 sitting 84 from the bottom, so its top edge is at 140; at and above
 * 1200 it is 64x64 sitting 20 from the bottom, top edge at 84. A single
 * --mc-totop-b of 144 therefore left a measured FOUR pixels between the two
 * controls from 980 to 1199, and 60px from 1200 up.
 */
@media ( min-width: 980px ) and ( max-width: 1199px ) {
	.mc-totop { --mc-totop-b: 156px; --mc-totop-e: 16px; }
}

@media ( min-width: 1200px ) {
	.mc-totop { --mc-totop-b: 144px; }
}

/* ---------------------------------------------------------------------------
 * 4. THE MOBILE ACTION BAR: NAVY GROUND, CORAL TYPE.
 *
 * .mc-actionbar is a direct child of body and sits outside .mc-loc, which is
 * the only place this file declares its tokens. Every var() in the original
 * rules therefore resolved to nothing and was dropped: the bar rendered white
 * with the theme inherited #1B2A3A, the is-primary coral tile never painted
 * at all, and both the top border and the a + a dividers were invalid. The
 * fallbacks below are what make this component paint.
 *
 * Coral on this navy measures 3.55:1. The lighter #FFB3A5 this file already
 * uses for accent type on navy bands measures 5.28:1 if that is ever wanted.
 *
 * There are no icons in this bar: it is three text links. The is-primary tile
 * is left level with the other two because a coral ground behind coral type
 * would be no tile at all.
 * ------------------------------------------------------------------------- */
@media ( max-width: 979px ) {
	.mc-actionbar.mc-actionbar {
		background: var( --mc-navy, #174A7E );
		border-top: 1px solid rgba( 255, 255, 255, .14 );
		box-shadow: 0 -4px 18px rgba( 23, 74, 126, .28 );
	}
	.mc-actionbar.mc-actionbar a { color: var( --mc-coral, #FF7A66 ); }
	.mc-actionbar.mc-actionbar a + a { border-inline-start: 1px solid rgba( 255, 255, 255, .14 ); }
	.mc-actionbar.mc-actionbar a svg { fill: none; stroke: currentColor; }
	.mc-actionbar.mc-actionbar a.is-primary { background: transparent; color: var( --mc-coral, #FF7A66 ); }
}

/* ---------------------------------------------------------------------------
 * 5. FOOTER COLUMN HEADINGS IN CORAL.
 *
 * Coral on the footer ground #123A63 measures 4.54:1. Two of the four
 * headings are links whose hover already went coral; with coral now the
 * resting colour the hover moves to white, which is the idiom
 * .mc-fcol__list a:hover already uses two rules above.
 * ------------------------------------------------------------------------- */
.mc-footer .mc-fcol__title { color: var( --mc-coral, #FF7A66 ); }
.mc-footer .mc-fcol__title a { color: var( --mc-coral, #FF7A66 ); }
.mc-footer .mc-fcol__title a:hover,
.mc-footer .mc-fcol__title a:focus-visible { color: #fff; }

/* ============================================================================
   THE HOME HERO SLIDESHOW, AND ITS VIDEO ALTERNATIVE

   Home page only. parts/hero.php adds .mc-hero__img--stack when a template
   hands it more than one slide, and only page-home.php does, so nothing here
   can reach the 4/3.4 hero on the other 219 pages: every selector below is
   gated on a class that does not exist on them.

   IT IS A CSS CROSSFADE, NOT A SCRIPT. There is no timer, no rAF loop and no
   JS on this page for the hero at all. The compositor owns opacity and
   transform, so the rotation costs nothing on the main thread and cannot
   stutter behind a busy script the way a setInterval slideshow does.

   ONLY opacity AND transform ARE ANIMATED. Both are compositor properties.
   Nothing here animates a layout or a paint property, which is what keeps the
   Ken Burns drift from costing a repaint every frame.

   THE SCRIM IS ALREADY THERE AND IS ABOVE ALL FOUR. .mc-hero--home
   .mc-hero__img::after is a pseudo-element of the frame, so it paints after
   every slide inside it and darkens all four identically. That is the reason
   the two floating cards read the same over picture one and picture three:
   they sit on a wash that does not know which picture is underneath it.
   ============================================================================ */

/*
 * All four in one box. The frame already has its own height from the
 * aspect-ratio above, so absolute positioning here cannot collapse it, and
 * four stacked images cannot make the hero four times taller before the CSS
 * arrives - the frame clips them either way.
 */
.mc-hero__img--stack > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation-name: mc-hero-fade-4, mc-hero-drift-4;
	animation-duration: 32s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

/* Two and three pictures get their own cycle length rather than a dead beat. */
.mc-hero__img--stack[data-mc-hero-slides="2"] > img {
	animation-name: mc-hero-fade-2, mc-hero-drift-2;
	animation-duration: 16s;
}

.mc-hero__img--stack[data-mc-hero-slides="3"] > img {
	animation-name: mc-hero-fade-3, mc-hero-drift-3;
	animation-duration: 24s;
}

/*
 * NEGATIVE DELAYS, so every slide is already at the right point of the cycle
 * on the first frame instead of waiting its turn. Slide one starts opaque -
 * which is what makes it, and not a blank box, the LCP element - and the
 * others start inside their hidden stretch, so nothing pops in.
 */
.mc-hero__img--stack > img:nth-child(1) { animation-delay: 0s, 0s; }

.mc-hero__img--stack[data-mc-hero-slides="4"] > img:nth-child(2) { animation-delay: -24s, -24s; }
.mc-hero__img--stack[data-mc-hero-slides="4"] > img:nth-child(3) { animation-delay: -16s, -16s; }
.mc-hero__img--stack[data-mc-hero-slides="4"] > img:nth-child(4) { animation-delay: -8s, -8s; }
.mc-hero__img--stack[data-mc-hero-slides="3"] > img:nth-child(2) { animation-delay: -16s, -16s; }
.mc-hero__img--stack[data-mc-hero-slides="3"] > img:nth-child(3) { animation-delay: -8s, -8s; }
.mc-hero__img--stack[data-mc-hero-slides="2"] > img:nth-child(2) { animation-delay: -8s, -8s; }

/* Seven seconds held, one second of crossfade, then out of the way. */
@keyframes mc-hero-fade-4 {
	0%, 21.875% { opacity: 1; }
	25%, 96.875% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes mc-hero-fade-3 {
	0%, 29.1667% { opacity: 1; }
	33.3333%, 95.8333% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes mc-hero-fade-2 {
	0%, 43.75% { opacity: 1; }
	50%, 93.75% { opacity: 0; }
	100% { opacity: 1; }
}

/*
 * The Ken Burns drift. SIX PER CENT OVER SEVEN SECONDS is about a tenth of a
 * pixel a frame at this size - enough that the frame is not dead, far too slow
 * to pull the eye off the heading beside it. It returns to 1 while the slide is
 * hidden, so the reset is never seen.
 *
 * THE SCALE IS EXACTLY 1 ACROSS THE FADE-IN, AND THAT IS LOAD-BEARING FOR LCP.
 * Do not move the 96.875% stop or drop it: a slide fades in between 96.875%
 * and 100%, so every slide FIRST PAINTS at scale 1, the same box the first
 * slide first painted at. Chrome only records a new largest-contentful-paint
 * when a candidate is strictly larger than the one it holds, so an identical
 * box cannot displace it and the LCP of this page stays the first slide, at
 * the time the first slide arrived. Start a slide mid-drift instead - at 1.06,
 * say - and the second picture becomes a larger candidate seven seconds in,
 * which moves the page LCP from about one second to about eight.
 */
@keyframes mc-hero-drift-4 {
	0% { transform: scale( 1 ); }
	25% { transform: scale( 1.06 ); }
	96.875%, 100% { transform: scale( 1 ); }
}

@keyframes mc-hero-drift-3 {
	0% { transform: scale( 1 ); }
	33.3333% { transform: scale( 1.06 ); }
	95.8333%, 100% { transform: scale( 1 ); }
}

@keyframes mc-hero-drift-2 {
	0% { transform: scale( 1 ); }
	50% { transform: scale( 1.06 ); }
	93.75%, 100% { transform: scale( 1 ); }
}

/*
 * REDUCED MOTION STOPS IT DEAD. Not slower, not a shorter fade: no animation
 * at all and one still photograph, which is the only honest reading of the
 * request. The two selectors carry the [data-mc-hero-slides] attribute on
 * purpose - without it they would be less specific than the two- and
 * three-slide rules above and would lose to them on animation-name, leaving
 * the rotation running for exactly the people who asked for it to stop.
 */
@media ( prefers-reduced-motion: reduce ) {
	.mc-hero__img--stack[data-mc-hero-slides] > img {
		animation: none;
		opacity: 0;
		transform: none;
	}

	.mc-hero__img--stack[data-mc-hero-slides] > img:first-child { opacity: 1; }
}

/*
 * The video alternative. One rule, because the embed can arrive as an iframe
 * from wp_oembed_get() or as a <video> this site serves itself, and the frame
 * has to hold both to the same shape.
 */
.mc-hero__img--video > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.mc-hero__img--video video { object-fit: cover; background: #000; }

/* ============================================================================
   THE ACT-NOW BAND

   The home page only, one screen under the hero. Its job is not a button -
   the page already has six of those - it is the two or three facts that
   answer 'what does it cost me to ask', put next to the button so the two are
   read together.

   White on purpose. .mc-hero--home is tinted and the service picker below is
   white, so a tinted band here would run the two together into one field of
   colour and lose the edge that makes this read as its own offer.

   Every class below is new. Nothing here redeclares a property on an existing
   selector, which is the collision that has produced most of the defects in
   this file.
   ============================================================================ */

.mc-actnow__inner { display: grid; grid-template-columns: 1.28fr .72fr; gap: 44px; align-items: center; }

.mc-actnow__lead { margin-top: 12px; max-width: 58ch; }

.mc-actnow__reasons { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 13px; }

/*
 * 16px, not the 15px this file uses for secondary lines elsewhere. These are
 * the sentences the whole band exists to be read, and 16px is the floor the
 * mobile pass set for body text across the site.
 */
.mc-actnow__reason {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-family: var( --mc-font-h );
	font-weight: 600;
	font-size: 16px;
	line-height: 1.45;
}

.mc-actnow__tick {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var( --mc-tint );
	color: var( --mc-navy );
}

.mc-actnow__act { display: flex; flex-direction: column; gap: 12px; }

.mc-actnow__act .mc-btn { text-align: center; justify-content: center; }

/*
 * A 44px target and 16px text, because this is the lowest-friction action on
 * the page and the one most likely to be tapped on a phone.
 */
.mc-actnow__zip {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-family: var( --mc-font-h );
	font-weight: 600;
	font-size: 16px;
	text-align: center;
}

@media ( max-width: 979px ) {
	.mc-actnow__inner { grid-template-columns: 1fr; gap: 26px; }
	.mc-actnow__lead { max-width: none; }
}


/* ==========================================================================
   ===== Hover legibility: the icons on coral, and the white buttons =====
   ==========================================================================
   Two client reports, one cause, one answer.

   1. ICONS DISAPPEARED ON A CORAL HOVER. The white-on-coral ruling was applied
      through descendant rules - '.mc-loc a.mc-service-card:hover *' and the
      mega-card equivalent - which repaint an icon white WITHOUT repainting the
      tile it sits in. MEASURED ON THE LIVE PAGE, not guessed: the blue service
      tile stayed #EAF6FF under a white glyph at 1.10:1 and the coral tile
      stayed #FFEDE9 at 1.13:1. The contact-line tile was patched once with a
      22% white wash and measures 2.09:1, which is no better. The footer social
      link was written as ink on coral at 4.80:1 and the coral sweep at the end
      of this file repainted it white at 2.55:1 - the same mistake again, on an
      icon that carries no text at all.

      ONE SYSTEM, NOT FOUR PATCHES. On a coral hover an icon tile inverts to
      the brand navy and its glyph goes white: #174A7E on #FF7A66 is 3.11:1 for
      the tile against the card, which clears the 3:1 floor a graphical object
      needs, and #FFFFFF on #174A7E is 9.06:1 for the glyph inside it. Where
      the link IS the tile and its own ground turns coral - the footer social
      row - there is nothing to invert, so the glyph goes back to ink at
      4.80:1, which is what that rule asked for before the sweep overwrote it.

      THE WHITE-TEXT RULING IS UNTOUCHED. Nothing below changes the colour of a
      single word of text on a coral ground.

   2. WHITE BUTTONS LOST THEIR LABEL ON HOVER. Measured: .mc-btn--light and
      .mc-btn--ghost do move their ground - they are not white on white - but
      they land on white type over coral at 2.55:1, and coral cannot be
      rescued by any type colour: white is 2.55:1 and navy 3.55:1, both under
      AA. The client asked for a hover where the text AND the button change and
      stay readable, so these invert instead - a white pill with navy type
      becomes a navy pill with white type, 9.06:1 in both directions.

   ORDER, NOT !important. This block is the last in the file and every selector
   is written at or above the specificity of the rule it answers, so it wins on
   order exactly as the coral-hover block above does. Do not move it up.
   ========================================================================== */

/* ---- Icon tiles inside a card that turns coral ---- */

/* 0,4,1, against '.mc-loc a.mc-service-card:hover *' at 0,3,1. The glyph is
   left to that rule: it is already #fff, and #fff on navy is 9.06:1. */
a.mc-service-card:hover .mc-itile,
.mc-loc a.mc-service-card:hover .mc-itile,
a.mc-city-card:hover .mc-itile,
.mc-loc a.mc-city-card:hover .mc-itile,
a.mc-contact-line:hover .mc-itile,
.mc-contact-line:has( a ):hover .mc-itile,
.mc-loc .mc-contact-line:has( a ):hover .mc-itile {
	background: var( --mc-navy );
	color: #fff;
}

/* The mega-card hover is 0,5,0, the highest in the file, so the tile rule has
   to match it. Same doubled class as the rule it answers. */
.mc-nav__list .mc-mega .mc-mega__card.mc-mega__card:hover .mc-mega__tile,
.mc-nav__list .mc-mega .mc-mega__card.mc-mega__card:hover .mc-mega__tile--coral {
	background: var( --mc-navy );
	color: #fff;
}

/* The city-card type badge is the same defect in a different shape: a pale
   lozenge washed to 22% white, measured at 2.09:1. Same navy chip. */
a.mc-city-card:hover .mc-city-card__type,
.mc-loc a.mc-city-card:hover .mc-city-card__type {
	background: var( --mc-navy );
	color: #fff;
}

/* The footer social row. 4.80:1, and it is what the rule above asked for
   before the coral sweep took it. */
.mc-footer .mc-footer__social-link:hover,
.mc-footer .mc-footer__social-link:focus-visible { color: var( --mc-ink ); }

/* ---- Light and ghost buttons ---- */

.mc-btn--light:hover,
.mc-btn--ghost:hover,
a.mc-btn--light:hover,
a.mc-btn--ghost:hover,
button.mc-btn--light:hover,
button.mc-btn--ghost:hover,
summary.mc-btn--light:hover,
summary.mc-btn--ghost:hover,
.mc-loc a.mc-btn--light:hover,
.mc-loc a.mc-btn--ghost:hover,
.mc-loc summary.mc-btn--light:hover,
.mc-loc summary.mc-btn--ghost:hover {
	background: var( --mc-navy );
	border-color: var( --mc-navy );
	color: #fff;
}

.mc-btn--light:hover *,
.mc-btn--ghost:hover *,
.mc-loc a.mc-btn--light:hover *,
.mc-loc a.mc-btn--ghost:hover * { color: #fff; }

/* On a navy band a navy pill needs an edge or it stops being a button. The
   fill drops to the darker navy and a white ring carries the shape: #FFFFFF
   type on #0F335A is 12.79:1, and the ring is 9.5:1 against the #123A63
   ground the act-now band now uses. */
.mc-section--navy .mc-btn--light:hover,
.mc-section--navy .mc-btn--ghost:hover,
.mc-section--navy summary.mc-btn--light:hover,
.mc-loc .mc-section--navy a.mc-btn--light:hover,
.mc-loc .mc-section--navy a.mc-btn--ghost:hover {
	background: #0F335A;
	border-color: #fff;
	color: #fff;
}

/* ---- The track switch ---- */

/* It reads as a white button - the pressed tab is a white pill on a tinted
   track - so it inverts with the rest. Doubled to 0,3,0 and 0,4,0 to clear
   the pressed state's own hover above. */
button.mc-track-switch__btn.mc-track-switch__btn:hover,
.mc-track-switch__btn.mc-track-switch__btn:hover,
.mc-track-switch__btn.mc-track-switch__btn[aria-pressed="true"]:hover {
	background: var( --mc-navy );
	color: #fff;
}

.mc-track-switch__btn.mc-track-switch__btn:hover .mc-track-switch__icon,
.mc-track-switch__btn.mc-track-switch__btn[aria-pressed="true"]:hover .mc-track-switch__icon { color: #fff; }

/* ---- The mega-menu triggers ---- */

/* Measured #2B8FE5 on #EAF6FF: 3.10:1 under 15px bold type. The ground
   already moves to the tint, so only the type is corrected - navy at
   8.25:1. The open-panel state above is a separate selector and keeps its
   sky, so an open trigger still reads as open. */
.mc-nav__list > .mc-nav__item > .mc-nav__trigger.mc-nav__trigger:hover { color: var( --mc-navy ); }

/* ---- The pop-up close button ---- */

/* A white tile with a navy glyph that hovered to white on coral at 2.55:1.
   Same inversion. popup.css is enqueued before this file and is not owned by
   this pass; the root fix belongs there, and .mc-popup__submit above is the
   precedent for settling it here. */
.mc-popup__close:hover,
.mc-popup__close:focus-visible {
	background: var( --mc-navy );
	color: #fff;
}


/* ==========================================================================
   ===== The act-now band on navy =====
   ==========================================================================
   The client asked for the whole "Know the price before you commit" band to
   sit on the footer's dark blue, so the top of the home page is not an
   unbroken white screen. The band takes the site's existing navy-section
   convention in the template - one class, mc-section--navy - and only the
   ground colour is stated here, because the footer is #123A63 while
   .mc-section--navy paints --mc-navy.

   The note further up this file that says this band is white ON PURPOSE is
   now historical. It was written when the hero above was tinted and the
   picker below was white; a dark band between the two separates them at least
   as well, and it is what was asked for.

   Everything inside is re-stated against the new ground rather than left to
   inherit, because two of the four would not have inherited: '.mc-loc a' is
   0,1,1 and would have painted the ZIP link navy on navy, and the reason
   lines are an li. MEASURED against #123A63: heading #FFFFFF 11.60:1, lead
   and reasons #C3D9EE 8.00:1, tick #8FC9F5 on its own 12% white tile 4.58:1,
   ZIP link #C3D9EE 8.00:1 resting and #FFFFFF 11.60:1 on hover.
   ========================================================================== */

.mc-actnow.mc-section--navy { background: #123A63; }

.mc-section--navy .mc-actnow__reason { color: #C3D9EE; }

/* The same translucent tile .mc-itile--blue takes on a navy band, so the two
   read as one system rather than as a pale chip pasted onto a dark band. */
.mc-section--navy .mc-actnow__tick {
	background: rgba( 255, 255, 255, .12 );
	color: #8FC9F5;
}

.mc-section--navy .mc-actnow__zip,
.mc-loc .mc-section--navy a.mc-actnow__zip {
	color: #C3D9EE;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mc-section--navy .mc-actnow__zip:hover,
.mc-loc .mc-section--navy a.mc-actnow__zip:hover,
.mc-loc .mc-section--navy a.mc-actnow__zip:focus-visible { color: #fff; }


/* ==========================================================================
   ===== The first-visit offer line =====
   ==========================================================================
   NOTHING HERE STATES AN OFFER. The two strings are settings - Business Info >
   "First-visit offer" - both default to empty, and templates/page-home.php
   prints no markup at all when the first is blank, so a site that has not set
   an offer renders exactly the band it rendered before this block existed.

   It sits inside the reasons column rather than above the band as a ribbon,
   because it is the last and strongest reason to ask, not an announcement.

   The ground is the same rgba( 255, 122, 102, .18 ) coral wash that
   .mc-itile--coral already uses on a navy band. Measured over #123A63:
   #FFFFFF headline 9.30:1, #C3D9EE qualifier 6.41:1.
   ========================================================================== */

.mc-actnow__offer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin: 22px 0 0;
	padding: 13px 16px;
	border-radius: 14px;
	border-left: 4px solid var( --mc-coral );
	background: rgba( 255, 122, 102, .18 );
}

/*
 * min-width and overflow-wrap are the guard rails, and they were earned.
 *
 * A flex item's min-width is auto, which means it refuses to shrink below its own
 * longest unbreakable run of characters. MEASURED with a deliberately hostile 160-
 * character offer holding no spaces: the home page went from scrollWidth 375 to
 * scrollWidth 1478 at a 390px viewport, and the band pushed the whole document
 * sideways at 900 and 1440 as well. The setting is free text typed by a person, so
 * a pasted URL or a run of hyphens is not a hypothetical.
 *
 * min-width: 0 lets the item shrink and overflow-wrap: anywhere lets the run break.
 * Neither changes anything about an offer written in words, which is every offer
 * anybody will actually type.
 */
.mc-actnow__offer-text {
	min-width: 0;
	overflow-wrap: anywhere;
	font-family: var( --mc-font-h );
	font-weight: 700;
	font-size: 17px;
	line-height: 1.35;
	color: #fff;
}

.mc-actnow__offer-terms {
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: 14px;
	line-height: 1.45;
	color: #C3D9EE;
}


/* ==========================================================================
   ===== The accent size control =====
   ==========================================================================
   Business Info > Typography > "Accent size". A PERCENTAGE OF THE HEADING and
   never a pixel value: the span sits inside the h1 or h2, so a percentage
   resolves against whatever that heading computes to at the breakpoint being
   rendered, and one number therefore scales correctly across H1, H2 and all
   three bands without a single media query.

   THE DEFAULT EMITS NOTHING. --mc-accent-size is written on :root only when
   the setting is filled in; with it unset this declaration computes to
   font-size: inherit, which is what a span with no font-size does anyway.

   overflow-wrap is the guard rail. A place name is one long word, and
   Lawrenceville at 150% of a mobile H1 is wider than a 390px viewport, so an
   unbreakable word is the one way this control could push a page sideways. It
   changes nothing at the default size, because nothing overflows there.
   ========================================================================== */

.mc-accent {
	font-size: var( --mc-accent-size, inherit );
	overflow-wrap: break-word;
}

/* ===========================================================================
 * THE REAL STAFF PHOTOGRAPHS.
 *
 * Four things live here, all of them additive: a hero media modifier for the
 * three genuinely transparent cut-outs, a full-width photograph band that
 * reveals on scroll, a three-up portrait strip, and the bio cards on
 * /meet-the-team/.
 *
 * SPECIFICITY, BECAUSE IT IS THIS FILE'S OLDEST FAILURE MODE. The cut-out rules
 * have to outrank `.mc-loc .mc-hero__grid > .mc-hero__img` (0,3,0) and
 * `.mc-loc .mc-hero__grid > .mc-hero__img img` (0,3,1) far above, so the class is
 * added to a selector that already carries both, giving 0,4,0 and 0,4,1. Source
 * order alone would not have done it and was not relied on.
 *
 * NO BACKGROUND BEHIND A CUT-OUT. Only Arantxa-Half-Transparent,
 * Arantxa-Transparent-Full and VIctoria-Transparent-Full have a real alpha
 * channel. A cut-out inside the hero card would be a person pasted onto a white
 * rounded rectangle with a navy drop shadow, which is the look this rule exists to
 * remove: the frame keeps its box and loses its fill, its border, its radius and
 * its shadow, so the figure composites straight onto whatever the section already
 * is. Every other photograph on this site is opaque RGB and keeps the card.
 * =========================================================================== */

.mc-loc .mc-hero__grid > .mc-hero__img.mc-hero__img--cutout,
.mc-hero__grid > .mc-hero__img.mc-hero__img--cutout {
	background: none;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.mc-loc .mc-hero__grid > .mc-hero__img.mc-hero__img--cutout img,
.mc-hero__grid > .mc-hero__img.mc-hero__img--cutout img {
	object-fit: contain;
	object-position: 50% 100%;
	background: none;
	background-color: transparent;
}

/* ---------------------------------------------------------------------------
 * THE FULL-WIDTH PHOTOGRAPH BAND.
 *
 * The five Mater-Team-Hero landscapes are 1672x941. In the 636px hero column they
 * would be cropped to a third of their width; across the full page at a fixed
 * height they are the only place on this site where a photograph of the whole team
 * is allowed to be as wide as it was shot.
 *
 * width: 100%, NOT 100vw. A vw unit includes the scrollbar and puts the page one
 * scrollbar-width past the viewport, which is the horizontal-overflow defect this
 * codebase checks for at 390, 900 and 1440.
 *
 * NO background-attachment: fixed. It janks badly on mobile Safari and there is no
 * parallax here to justify it: the band scrolls with the page and only its opacity
 * and offset are animated.
 *
 * THE HIDDEN STATE IS OPT-IN. `opacity: 0` is attached to [data-mc-reveal], an
 * attribute mc-nav.js adds only when the visitor has NOT asked for reduced motion.
 * With reduced motion, or with JavaScript off, or if the observer never runs, the
 * attribute is absent and the photograph is simply visible. A reveal effect must
 * never be the reason a photograph cannot be seen. The media query below repeats
 * the same guarantee in CSS in case the attribute is ever added by something else.
 * --------------------------------------------------------------------------- */

.mc-band {
	margin: 0;
	padding: 0;
}

.mc-band__media {
	display: block;
	width: 100%;
	/* Mobile: sized so the 16:9 band keeps every head. See the banner above. */
	height: clamp( 230px, 62vw, 330px );
	overflow: hidden;
}

@media ( min-width: 821px ) {
	.mc-band__media { height: clamp( 380px, 48vw, 470px ); }
}

@media ( min-width: 980px ) {
	.mc-band__media { height: clamp( 600px, 68vh, 750px ); }
}

.mc-band__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * 9%, CORRECTED FROM 14% AFTER RE-MEASURING. The band photographs are 1024x576
	 * (1.778). The topmost face in Hero-1 was re-measured off the pixels at y 8.4%,
	 * not the 9% recorded here before, and 14% put the crop window at y[8.57-47.3%]
	 * on a 3440x750 band - 0.17 of a point ABOVE that face. The head was being
	 * clipped on an ultra-wide display, by a margin small enough that the arithmetic
	 * had been rounded in the wrong direction rather than measured.
	 *
	 * At 9% the window starts at 5.51% on 3440x750, 6.21% on 3440x600, 3.96% on
	 * 1905x600 and 2.33% on 1440x600. Every one of those clears 8.4% by at least
	 * 2.2 points of image height, so no face is cropped at any width this band can
	 * take. At and below 1024 there is no vertical crop at all.
	 *
	 * Business Info > Back to top button > "Photograph band focal point" overrides
	 * this. The literal here is the fallback for a site running the templates
	 * plugin without mater-core.
	 */
	object-position: var( --mc-band-focus, 50% 9% );
}

.mc-band[data-mc-reveal] .mc-band__media {
	opacity: 0;
	transform: translateY( 22px );
	transition: opacity .6s ease, transform .6s ease;
}

.mc-band[data-mc-reveal="in"] .mc-band__media {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------------------
 * THE THREE-UP PORTRAIT STRIP, for the 941x1672 uploads.
 *
 * A 0.563 portrait in the 1.176 hero box loses half its height to the crop, so the
 * three tall photographs get a 3/4 cell of their own instead. That is a 25 per cent
 * vertical crop rather than a 52 per cent one, and it is the shape they were shot
 * for.
 * --------------------------------------------------------------------------- */

.mc-strip__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mc-strip__cell {
	margin: 0;
}

.mc-strip__cell img {
	display: block;
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
	object-position: 50% 24%;
	border-radius: var( --mc-img-radius, 20px );
}

/* ---------------------------------------------------------------------------
 * THE BIO CARDS.
 *
 * Two columns above 980px, one below it, and the photograph drops above the copy
 * below 560px. The figure column is a fixed 172px rather than a fraction so the six
 * portraits line up with each other whatever the length of the paragraph beside
 * them.
 * --------------------------------------------------------------------------- */

.mc-team-list {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: clamp( 48px, 6vw, 96px );
	list-style: none;
	margin: 0;
	padding: 0;
}

.mc-team-card {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 18px;
	align-items: center;
	margin: 0;
}

.mc-team-card__figure {
	margin: 0;
}

@media ( max-width: 820px ) {
	/* Stacked, the figure would otherwise run the whole measure: 717x896 at 768. */
	.mc-team-card__figure { max-width: 460px; }
}

.mc-team-card__figure img {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * 4/5 is measured against the six uploads, not picked for looks. Their source
	 * ratios are 0.75, 0.8, 0.8, 0.8, 0.816 and 1.0, so a 0.8 box crops FOUR of the
	 * six by nothing at all. Victoria (0.75) is the only one with any vertical
	 * overflow - 6.25% of image height - and at 15% that trims 0.94% off the top,
	 * against a face that starts at 13%. Maria (1.0) is cropped horizontally only,
	 * 10% a side, against a face measured at x[43-64%].
	 */
	aspect-ratio: 4/5;
	object-fit: cover;
	object-position: 50% 15%;
	border-radius: var( --mc-img-radius, 20px );
}

/* ---------------------------------------------------------------------------
 * THE ZIG-ZAG, AND WHY IT IS nth-child AND NOT A FIELD ON THE RECORD.
 *
 * The client asked not to see "a tight grid of small cards". One person per row,
 * photograph and biography side by side, and the side swaps on every second
 * person. The swap is positional, so adding, deleting or reordering a mc_team
 * record in the admin re-alternates the page on its own and there is no per-record
 * setting anybody has to remember to set.
 *
 * 42.5% photograph, 4.5% gutter, 53% biography. Inside the brief's 40-45 and
 * 50-55 bands with room either side for the rounding.
 *
 * The alternation is declared ONLY above 820px. Below it the card is one column
 * and the natural document order - figure, then name, role and biography - is
 * what stacks, so no rule has to be undone.
 * --------------------------------------------------------------------------- */

@media ( min-width: 821px ) {
	.mc-team-card {
		grid-template-columns: 42.5% minmax( 0, 1fr );
		column-gap: 4.5%;
		row-gap: 0;
		align-items: center;
	}

	.mc-team-card .mc-team-card__figure { grid-column: 1; grid-row: 1; }
	.mc-team-card .mc-team-card__body { grid-column: 2; grid-row: 1; }

	/*
	 * The tracks mirror too. Swapping only grid-column would hand the photograph
	 * the 53% track and the biography the 42.5% one on every second person, which
	 * measured 53%/42.5% on rows 2, 4 and 6 the first time this shipped.
	 */
	/*
	 * THE FLIP IS A CLASS, NOT :nth-child( even ), AND THAT CHANGE IS LOAD-BEARING.
	 * The photographs between the profiles are list items too, so nth-child counts
	 * them and every card after the first interstitial would have flipped to the
	 * wrong side. page-about.php counts PEOPLE and stamps mc-team-card--flip on
	 * every second one, so the alternation survives anything placed between them.
	 * It is still positional and still comes from the template: no mc_team record
	 * carries a side, and reordering them in the admin re-alternates the page.
	 */
	.mc-team-card.mc-team-card--flip { grid-template-columns: minmax( 0, 1fr ) 42.5%; }

	.mc-team-card.mc-team-card--flip .mc-team-card__figure { grid-column: 2; }
	.mc-team-card.mc-team-card--flip .mc-team-card__body { grid-column: 1; }
}

/* Section rhythm. .mc-section.mc-team-bios is 0,2,0 so it outranks .mc-section. */
.mc-section.mc-team-bios {
	padding-top: clamp( 48px, 7vw, 72px );
	padding-bottom: clamp( 48px, 7vw, 72px );
}

.mc-team-bios .mc-eyebrow { display: block; margin: 0 0 12px; }
.mc-team-bios .mc-h2 { margin: 0 0 16px; }
.mc-team-bios .mc-lead { margin: 0 0 clamp( 40px, 5vw, 72px ); max-width: 62ch; }

@media ( min-width: 980px ) {
	.mc-section.mc-team-bios {
		padding-top: clamp( 80px, 7vw, 120px );
		padding-bottom: clamp( 80px, 7vw, 120px );
	}
}

.mc-team-card__name {
	margin: 0 0 2px;
}

.mc-team-card__role {
	margin: 0 0 10px;
	font-weight: 600;
	color: #2B8FE5;
}

.mc-team-card__bio p {
	margin: 0 0 10px;
}

.mc-team-card__bio p:last-child {
	margin-bottom: 0;
}

@media ( max-width: 980px ) {
	.mc-team-list { grid-template-columns: minmax( 0, 1fr ); }
}

@media ( max-width: 700px ) {
	.mc-strip__grid { grid-template-columns: minmax( 0, 1fr ); }
	.mc-strip__cell img { aspect-ratio: 4/3; }
}

/* The old max-width:560px block capped the mobile portrait at 210px. The stacked
 * profile wants the full measure, and the one-column card is now the base rule. */

@media ( prefers-reduced-motion: reduce ) {
	.mc-band[data-mc-reveal] .mc-band__media,
	.mc-band[data-mc-reveal="in"] .mc-band__media {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* ---------------------------------------------------------------------------
 * THE HEADER ROW BETWEEN 980 AND 1099.
 *
 * Measured at 1024: brand 278 + list 546 + actions 145 + three 11px gaps is
 * 1003px against a 961px content box, so the CTA finished 6px past the viewport
 * and every page carried a horizontal scrollbar at that width. The list cannot
 * shrink - its items are nowrap - so the room comes off the brand, the gaps and
 * the button, and only in the band where it is actually short.
 * --------------------------------------------------------------------------- */

@media ( min-width: 980px ) and ( max-width: 1099px ) {
	.mc-nav__inner { gap: 8px; }
	.mc-nav__brand { font-size: 15px; gap: 8px; }
	.mc-nav__brand img { width: 56px; height: auto; }
	.mc-nav__actions .mc-btn { padding-left: 12px; padding-right: 12px; }
}

/* ===========================================================================
   TRANSPARENT IMAGES DO NOT SIT IN BOXES. DECIDED BY ALPHA, APPLIED EVERYWHERE.

   The client has asked for this twice: no card, no box, no iframe-looking border
   and no artificial background around a cut-out - the person should look like they
   are standing in the section, not pasted onto a tile inside it.

   WHY THIS IS KEYED TO AN ATTRIBUTE AND NOT A HAND-ADDED CLASS. The previous pass
   solved this with .mc-hero__img--cutout, set in single-location-city.php and
   single-location-county.php from a list of three slugs. It works on those two
   templates and nowhere else, and it missed /about/, whose hero was measured
   carrying Cleaning-Crew-CGB-1 - 71.5% transparent - inside a 28px-radius frame
   with a 0 24px 50px navy drop shadow. mc_mark_cutouts() in mater-templates.php now
   marks every transparent attachment on the way out of wp_get_attachment_image(),
   measured from the alpha channel, so these rules find a cut-out wherever it lands
   instead of wherever somebody remembered to type a class name.

   SPECIFICITY, BECAUSE IT IS THIS FILE'S OLDEST FAILURE MODE. The frame rules to
   beat are .mc-loc .mc-hero__grid > .mc-hero__img at 0,3,0 and .mc-hero__img at
   0,1,0 carrying the shadow. :has() takes the specificity of its argument, so
   .mc-hero__img:has( > img[data-mc-alpha] ) is only 0,2,1 and would lose. The class
   is therefore doubled - .mc-hero__img.mc-hero__img - giving 0,3,1, and the .mc-loc
   forms give 0,4,1. Every declaration below was verified with getComputedStyle
   rather than assumed to have landed.

   WHAT IS DELIBERATELY LEFT ALONE, AND WHY:

   - .mc-footer__logo keeps its white plate. The footer is rgb(18,58,99) and the
     logo artwork averages rgb(118,171,194) with 43.3% of its opaque pixels below
     110 luminance. Composited straight onto the navy, that 43% of the mark
     disappears. That is a logo legibility question, not the client's cut-out
     complaint, and the brief lists the footer logo as a thing not to regress.

   - .mc-crew-card keeps its blue and coral tint. It is a content card carrying a
     heading, a tag and a paragraph that happens to also contain an avatar; the tint
     is the component, not a box drawn around a person. Its inner __figure is
     stripped below, which is the part that actually wraps the image.

   - .mc-cta-card--figure keeps its background. It overflows by design and its
     background is the band artwork the cut-out is composited onto, which is the
     integration the client asked for rather than a frame around it.
   =========================================================================== */

.mc-hero__img.mc-hero__img:has( > img[data-mc-alpha] ),
.mc-loc .mc-hero__grid > .mc-hero__img:has( > img[data-mc-alpha] ),
.mc-loc .mc-hero__media > .mc-hero__img:has( > img[data-mc-alpha] ),
.mc-owner__portrait.mc-owner__portrait:has( > img[data-mc-alpha] ),
.mc-crew-card__figure.mc-crew-card__figure:has( > img[data-mc-alpha] ),
.mc-cta-card__figure.mc-cta-card__figure:has( > img[data-mc-alpha] ),
.mc-mega__promo-figure.mc-mega__promo-figure:has( > img[data-mc-alpha] ) {
	background: none;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

/*
 * contain, not cover. A cut-out cropped to fill a 4/3.4 frame is a person with the
 * top of their head or their feet cut off, and there is no photographic background
 * to lose, so there is nothing to gain by cropping. Bottom-anchored so the figure
 * stands on the base of the box the way the existing city-page rule does, rather
 * than floating in the middle of it.
 */
.mc-hero__img.mc-hero__img > img[data-mc-alpha],
.mc-loc .mc-hero__grid > .mc-hero__img > img[data-mc-alpha],
.mc-loc .mc-hero__media > .mc-hero__img > img[data-mc-alpha],
.mc-owner__portrait.mc-owner__portrait > img[data-mc-alpha],
.mc-crew-card__figure.mc-crew-card__figure > img[data-mc-alpha],
.mc-cta-card__figure.mc-cta-card__figure > img[data-mc-alpha],
.mc-mega__promo-figure.mc-mega__promo-figure > img[data-mc-alpha] {
	/*
	 * display: block IS LOAD-BEARING, and it was missing on the first pass.
	 *
	 * The rule above switches the container to overflow: visible. An inline image
	 * then sits on a text baseline, and the ~10px of descender space below it
	 * counts towards the container's content height. .mc-hero__img declares
	 * aspect-ratio: 4/3.4, but aspect-ratio yields to content that does not fit,
	 * so /about/ measured 636x550 against the 636x540.6 the ratio asks for - the
	 * protected 4/3.4 hero box, 9.9px out, purely from a baseline gap.
	 *
	 * Taking the image out of the line box removes the descender and the container
	 * returns to exactly its declared ratio. Verified at 636x540.6.
	 */
	display: block;
	object-fit: contain;
	object-position: 50% 100%;
	background: none;
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * PHOTOGRAPHS BETWEEN THE PROFILES.
 *
 * The client asked for photography between the profiles so the page reads as a
 * company page rather than a staff directory, and asked in the same breath that it
 * not appear between every profile, which would be as monotonous as the grid it
 * replaced. Six people, two photographs, placed after the second and the fourth.
 *
 * A list item, not a section, so it sits in the same grid as the profiles and
 * inherits the 96px rhythm between them instead of inventing a second spacing
 * system. It is the reason the flip above had to stop being :nth-child( even ).
 *
 * 21/9 keeps these 1672x941 and 1448x1086 landscapes wide and shallow so they read
 * as a band between two people rather than as a third profile.
 *
 * FOCUS IS 20%, MEASURED. At 21/9 a 1.778 source loses 23.8% of its height, so the
 * crop window is y[4.76-80.97%]. Hero-3's topmost face measures y 17.3%, which
 * clears that by 12.5 points. 38% was the first value here and put the window at
 * y[9.04-85.25%]; that still cleared Hero-3, but Hero-1 in the photograph band was
 * separately measured with a face as high as y 8.4%, and a value that depends on
 * which group shot an editor happens to choose is not a measured value. 20% clears
 * 8.4% by 3.6 points, so any of the team landscapes can be swapped in safely.
 *
 * On mobile the cell is 16/9, which is the source ratio exactly - no crop at all.
 * --------------------------------------------------------------------------- */

.mc-team-interstitial {
	margin: 0;
	list-style: none;
}

.mc-team-interstitial img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21/9;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: var( --mc-img-radius, 20px );
}

@media ( max-width: 820px ) {
	/* Shallower still on a phone, where a 21/9 band across 358px is a letterbox. */
	.mc-team-interstitial img { aspect-ratio: 16/9; }
}

/* A cut-out never gets the frame, here as everywhere else. */
.mc-team-interstitial.mc-team-interstitial img[data-mc-alpha] {
	border-radius: 0;
	object-fit: contain;
}

/* ===========================================================================
   SHARING

   One control, one menu, and no third-party stylesheet behind either. Everything
   here is drawn from the tokens already declared at the top of this file, so the
   Share button changes colour when the brand does and inherits the button radius
   set in Business Info > Appearance like every other button on the site.

   WHY SO MANY SELECTORS ARE WRITTEN .mc-share.mc-share.

   The bottom control renders inside <main class="mc-loc">, and the rules in this
   file that style lists and links inside that main are written as descendant
   selectors two and three classes deep. A single .mc-share__row is one class and
   loses to .mc-loc .mc-section li on list-style alone, which is how a share menu
   ends up with bullet points and 40px of indent. Repeating the wrapper class
   raises the reset rules to three classes, which is enough to win without using
   !important and without touching a single existing rule. The properties treated
   this way are exactly the resets - list, spacing, colour, background, border.
   The rest is left at one class on purpose, so it stays easy to override later.

   THE FLOATING BUTTON IS ON THE LEFT AND THAT IS NOT A STYLE CHOICE. Measured at
   390: the action bar owns the full width at bottom 0 and is 57 tall, the chat
   launcher is 56x56 at right 16 / bottom 84, and back to top is 40x40 at right 14
   / bottom 200. The right-hand column is full. The left edge is empty at every
   width, so that is where this goes.
   =========================================================================== */

.mc-share { --mc-share-w: 264px; }

.mc-share--top { margin: 22px 0 0; }

.mc-share--bottom {
	display: flex;
	justify-content: center;
	margin: 0 0 clamp( 30px, 5vw, 56px );
}

.mc-share__box { position: relative; display: inline-block; }

/* The button. A summary, so it opens with no script at all. */
.mc-share.mc-share .mc-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	margin: 0;
	padding: 10px 20px;
	border: 2px solid var( --mc-line );
	border-radius: var( --mc-btn-radius, 999px );
	background: #fff;
	color: var( --mc-navy );
	font-family: var( --mc-font-b );
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.15;
	list-style: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

/* Both spellings of the disclosure triangle, or Safari keeps drawing one. */
.mc-share .mc-share__btn::-webkit-details-marker { display: none; }
.mc-share .mc-share__btn::marker { content: ''; }

.mc-share.mc-share .mc-share__btn:hover {
	border-color: var( --mc-sky );
	background: var( --mc-tint );
}

.mc-share.mc-share .mc-share__box[open] > .mc-share__btn {
	border-color: var( --mc-navy );
	background: var( --mc-tint );
}

/*
 * A visible focus ring on both controls, at 3px and offset, because these sit on
 * white and a 1px ring on white is not a focus indicator anybody can see.
 */
.mc-share .mc-share__btn:focus-visible,
.mc-share .mc-share__item:focus-visible {
	outline: 3px solid var( --mc-sky );
	outline-offset: 2px;
}

.mc-share__icon { flex: none; color: var( --mc-navy ); }

/* The menu. */
.mc-share.mc-share .mc-share__menu {
	position: absolute;
	z-index: 40;
	inset-inline-start: 0;
	top: calc( 100% + 10px );
	width: var( --mc-share-w );
	max-width: calc( 100vw - 32px );
	margin: 0;
	padding: 8px;
	border: 1px solid var( --mc-line );
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 40px rgba( 23, 74, 126, .18 );
	text-align: start;
}

/* Centred under a centred button. */
.mc-share--bottom.mc-share--bottom .mc-share__menu {
	inset-inline-start: 50%;
	transform: translateX( -50% );
}

.mc-share.mc-share .mc-share__list {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-share.mc-share .mc-share__row {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-share .mc-share__row::before,
.mc-share .mc-share__row::marker { content: none; }

/*
 * The rows. 44px minimum, which is the tap target the brief asks for and also the
 * height at which a menu of eleven things stops being a game of accuracy.
 */
.mc-share.mc-share .mc-share__item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 9px 12px;
	border: 0;
	border-radius: 11px;
	background: none;
	color: var( --mc-ink );
	font-family: var( --mc-font-b );
	font-size: .97rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.mc-share.mc-share .mc-share__item:hover {
	background: var( --mc-tint );
	color: var( --mc-navy );
	text-decoration: none;
}

.mc-share .mc-share__item:hover .mc-share__icon { color: var( --mc-sky ); }

.mc-share__name { flex: 1 1 auto; }

/*
 * The confirmation line. It is a live region, so it is in the DOM from the start
 * and empty; :empty hides it so an empty box does not sit under the list.
 */
.mc-share.mc-share .mc-share__note {
	margin: 6px 4px 2px;
	padding: 0;
	color: var( --mc-navy );
	font-family: var( --mc-font-b );
	font-size: .86rem;
	font-weight: 600;
	line-height: 1.35;
}

.mc-share .mc-share__note:empty { display: none; }

/*
 * Copy link, Instagram and More cannot work without the script, so they are not
 * offered until the script has proved it is running. The order of these three
 * rules is load-bearing: they are all two classes, so source order decides.
 */
/*
 * MEASURED, NOT ASSUMED. The first version of these four wrote one .mc-share and
 * lost to the .mc-share.mc-share .mc-share__row reset three lines above, so Copy
 * link, Instagram and More were visible before the script had run - three controls
 * that would have done nothing if it never did. getComputedStyle said display:block
 * with is-js removed, which is how it was caught. Every one of them is now written
 * at least as heavily as the rule it has to beat.
 */
.mc-share.mc-share .mc-share__row--js { display: none; }
.mc-share.mc-share.is-js .mc-share__row--js { display: block; }
.mc-share.mc-share.is-js .mc-share__row--native { display: none; }
.mc-share.mc-share.has-native .mc-share__row--native { display: block; }

/*
 * The floating button. z-index 44 sits UNDER back to top at 45, the action bar at
 * 55 and the chat launcher at 60, so if a future width ever brings them together
 * this is the one that goes behind rather than the one that covers a phone number.
 */
.mc-share--float.mc-share--float {
	position: fixed;
	z-index: 44;
	inset-inline-start: 14px;
	top: 50%;
	transform: translateY( -50% );
}

.mc-share--float.mc-share--float .mc-share__btn { padding: 10px 16px; box-shadow: 0 8px 22px rgba( 23, 74, 126, .18 ); }

.mc-share--float.mc-share--float .mc-share__menu {
	inset-inline-start: calc( 100% + 10px );
	top: 50%;
	bottom: auto;
	transform: translateY( -50% );
}

/*
 * Phones and tablets, which is exactly the range where .mc-actionbar is fixed to
 * the bottom edge.
 *
 * 160px, and the number was arrived at by measuring rather than by taste. At 390
 * the bottom-left of this site is a queue, not a corner: the action bar owns 0 to
 * 57, and .mc-chat__nudge - the chat prompt - is 242px wide and reaches from 77 to
 * 132, which puts it directly over the left edge. The first version of this rule
 * used 74px and the pair test reported a 55x41 overlap with that prompt, which is a
 * Share button sitting on top of an invitation to chat. 160 clears the prompt by 28
 * measured pixels and still leaves room for it to grow to three lines.
 *
 * Nothing else is at that height on the left: back to top is at bottom 156 but at
 * the RIGHT edge, 14px in, and the two never share an x range.
 *
 * The menu opens upward so it never reaches back down into any of them.
 */
@media ( max-width: 979px ) {
	.mc-share--float.mc-share--float {
		top: auto;
		bottom: 160px;
		transform: none;
	}

	.mc-share--float.mc-share--float .mc-share__menu {
		inset-inline-start: 0;
		top: auto;
		bottom: calc( 100% + 10px );
		transform: none;
	}

	.mc-share--float:not( .mc-share--float-m ) { display: none; }
}

@media ( min-width: 980px ) {
	.mc-share--float:not( .mc-share--float-d ) { display: none; }
}

/* Movement only where movement is welcome. */
@media ( prefers-reduced-motion: no-preference ) {
	.mc-share .mc-share__btn,
	.mc-share .mc-share__item,
	.mc-share .mc-share__icon {
		transition: background-color .18s ease, border-color .18s ease, color .18s ease;
	}
}

/* ---------------------------------------------------------------------------
 * EDITOR-WRITTEN TEXT CANNOT PUSH THE PAGE SIDEWAYS.
 *
 * MEASURED, in exactly-sized iframes: a 190-character unbroken string typed
 * into the hero intro of /contact/ took the document to 1482px inside a 390px
 * viewport, and dragged the H1 and the share control out with it. The same page
 * with its shipped wording measures 375px at 390 and does not overflow, so this
 * is a hazard the new fields introduce rather than one they revealed.
 *
 * overflow-wrap:anywhere rather than break-word. break-word only breaks a word
 * after the browser has first tried to give it a line of its own, which is
 * exactly the case that overflows here; anywhere lets it break while the line is
 * being measured.
 *
 * min-width:0 is the other half of the same bug. A grid or flex child defaults
 * to min-width:auto and refuses to shrink below its longest word no matter how
 * the text is allowed to wrap, so the wrapping rule alone would not have been
 * enough for the hero column.
 * --------------------------------------------------------------------------- */
.mc-h1,
.mc-h2,
.mc-h3,
.mc-h4,
.mc-h5,
.mc-answer,
.mc-lead,
.mc-pill,
.mc-eyebrow,
.mc-btn {
	overflow-wrap: anywhere;
}

.mc-hero__grid > * {
	min-width: 0;
}

/* ==========================================================================
   ===== SHARE ON THE BREADCRUMB ROW =====
   ==========================================================================
   One Share control, top of the page, hard right, on the breadcrumb's own line,
   and coral. Rendered by templates/parts/breadcrumb.php.

   WHY THIS IS SCOPED TO .mc-crumb AND NOT TO A NEW VARIANT. MC_Share::render()
   validates its variant against a closed list of top/bottom/float, so a fourth
   name would have to be threaded through render(), slot() and the settings field
   that writes share_position. The control is a direct child of the crumb row and
   nothing else on the site is, so the row itself is the selector.

   CASCADE. The base button and menu are .mc-share.mc-share .mc-share__* at 0,3,0.
   Every rule below leads with .mc-crumb, which makes it 0,4,0, so these win on
   weight rather than on source order and cannot be undone by a later single-class
   rule - the failure mode this file documents five times over.

   COLOUR. --mc-coral-btn is #FF7A66 and --mc-coral-btn-hi is #F2634D, both already
   declared at the top of this file, so the button follows the brand if it moves.
   White on #FF7A66 measures 2.55:1. That is the client's settled decision, ruled
   three times, and is implemented as asked rather than darkened to reach 4.5:1.

   THE MENU OPENS LEFTWARDS. The base rule pins inset-inline-start:0, which on a
   hard-right button pushes a 264px panel past the right edge of the viewport.
   ========================================================================== */
.mc-crumb__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: nowrap;
}

/*
 * The trail keeps the slack and the button is held to its content. .mc-crumb ol
 * already scrolls on overflow-x, and min-width:0 is what lets it actually shrink
 * inside a flex row instead of forcing the button off the edge at 390.
 */
/*
 * MEASURED at 390 with flex-wrap:wrap and flex-basis auto: the trail claimed its
 * full content width, the button wrapped to a second line and the row grew from 45
 * to 99px tall, so "on the same line as the breadcrumbs" held at 900 and 1440 and
 * failed on a phone. flex-basis 0 makes the trail take the space that is LEFT after
 * the button rather than the space its content wants, and .mc-crumb ol already
 * carries overflow-x:auto with a hidden scrollbar for exactly this. At 390 that
 * leaves the trail 216px and keeps the button on the line.
 */
.mc-crumb__row > ol {
	flex: 1 1 0;
	min-width: 0;
}

.mc-crumb .mc-share {
	flex: 0 0 auto;
}

/* .mc-share--top carries margin-top:22px for its old place under a hero. */
.mc-crumb .mc-share.mc-share--top {
	margin: 0;
}

.mc-crumb .mc-share.mc-share .mc-share__btn {
	border-color: var( --mc-coral-btn );
	background: var( --mc-coral-btn );
	color: #fff;
}

/* The glyph is var(--mc-navy) by default, which all but disappears on coral. */
.mc-crumb .mc-share.mc-share .mc-share__btn .mc-share__icon {
	color: #fff;
}

.mc-crumb .mc-share.mc-share .mc-share__btn:hover,
.mc-crumb .mc-share.mc-share .mc-share__box[open] > .mc-share__btn {
	border-color: var( --mc-coral-btn-hi );
	background: var( --mc-coral-btn-hi );
	color: #fff;
}

/*
 * The focus ring. The base rule paints var(--mc-sky), which does not resolve on
 * the crumb row and leaves the outline at currentColor - white on coral, so no
 * visible ring at all. Navy reads against both the coral button and the white row.
 */
.mc-crumb .mc-share .mc-share__btn:focus-visible,
.mc-crumb .mc-share .mc-share__item:focus-visible {
	outline: 3px solid #174A7E;
	outline-offset: 2px;
}

/* Right-anchored, so a 264px menu cannot leave the viewport. */
.mc-crumb .mc-share.mc-share .mc-share__menu {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/* ===========================================================================
   BOOKING, REVIEWS AND THE LANGUAGE PICKER.

   Everything below belongs to four things added after the design was signed
   off: the language picker in the footer, the Calendly page at /book/, the
   Google tile in the social row, and the QR code on /leave-a-review/.

   THE GOOGLE TRANSLATE WIDGET IS GONE, AND SO IS EVERYTHING IT NEEDED. It was
   #google_translate_element plus translate.google.com/translate_a/element.js,
   and it was broken: dressing the .goog-te-gadget-simple anchor to fill a
   280px box moved Google's own click target, so activating the control jumped
   the page to the top and opened nothing. Removed rather than repaired, on the
   owner's decision. Removed with it: body { top: 0 !important },
   .goog-te-banner-frame, iframe.skiptranslate and #google_translate_element
   :empty, all four of which existed only to cancel or cover for element.js.

   WHAT REPLACED IT is a self-hosted translator - a select in this footer, a
   nonced, rate-limited and capped endpoint in mater-core, Google Cloud
   Translation behind that, and the text nodes replaced in place on the same
   URL. THE BROWSER MAKES NO REQUEST TO ANY GOOGLE HOST. The only thing that
   talks to Google is the server, and only once a key has been saved.

   ONE THIRD-PARTY SCRIPT REMAINS AND IT CAN STILL FAIL: assets.calendly.com
   on /book/. .mc-booking__widget:empty is the rule that decides what a
   visitor sees when it does.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   THE LANGUAGE PICKER.

   AN ORDINARY <select>, WHICH IS THE WHOLE POINT. The widget this replaced
   could not be styled without breaking it, because the thing being styled was
   Google's anchor and Google's click handler was bound to it. Nothing here
   belongs to anyone else, so a 280px box, a 44px minimum height and the site's
   own radius token cost nothing and break nothing.

   THERE IS NO :empty FAIL-SAFE BELOW BECAUSE THERE IS NOTHING TO FAIL SAFE.
   With the integration off, or with no API key saved, site-footer-nav.php
   prints no markup at all - no label, no box, no note, no dead control. See
   MC_Translate::enabled().

   THE SELECT IS EXCLUDED FROM TRANSLATION and has to be. Every language is
   named in its own language on purpose, so that a Spanish reader looking for
   Portuguese finds Portugues; running a translation pass over the control
   would undo exactly that.
   --------------------------------------------------------------------------- */

.mc-footer__lang { margin-top: 26px; }

.mc-footer .mc-footer__lang-label {
  font-family: var( --mc-font-h );
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var( --mc-coral, #FF7A66 );
  margin: 0 0 10px;
}

.mc-footer__lang-widget { max-width: 280px; }

.mc-footer__lang-widget .mc-lang-select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 280px;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 10px 12px;
  font-family: var( --mc-font-b );
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var( --mc-navy, #174A7E );
  background: #fff;
  border: 1px solid rgba( 255, 255, 255, .28 );
  border-radius: var( --mc-btn-radius, 10px );
  cursor: pointer;
}

/* The ring is coral on navy for the same reason every other focus ring in this
   footer is: navy on navy is not a ring. :focus is carried alongside
   :focus-visible because this control is reached by pointer and by keyboard
   alike and the older rule is the one that never misses. */
.mc-footer__lang-widget .mc-lang-select:focus,
.mc-footer__lang-widget .mc-lang-select:focus-visible {
  outline: 3px solid var( --mc-coral, #FF7A66 );
  outline-offset: 2px;
}

/* The polite status line, and it reserves its own height.

   It is aria-live, so it says Translating and then goes quiet again. If it
   collapsed when empty, the footer would move under the visitor's cursor twice
   per language change, so the row keeps its height whether or not it currently
   has anything to say. */
.mc-footer .mc-footer__lang-status {
  font-size: 12px;
  line-height: 1.5;
  min-height: 18px;
  color: var( --mc-f-dim, #A8C3DF );
  margin: 0 0 6px;
}

/* Google requires attribution wherever its translation is displayed, so this
   line is not optional and is not hidden. It is dimmed footer text rather than
   a banner, which is the form the owner asked for. */
.mc-footer .mc-footer__lang-note {
  font-size: 12px;
  line-height: 1.5;
  color: var( --mc-f-dim, #A8C3DF );
  margin: 0;
  max-width: 34ch;
}

/* ---------------------------------------------------------------------------
   THE BOOKING LINK UNDER THE FOOTER'S QUOTE BUTTON.
   --------------------------------------------------------------------------- */

.mc-footer .mc-footer__book { margin: 10px 0 0; font-size: 13.5px; }
.mc-footer .mc-footer__book a { color: var( --mc-tint ); text-decoration: underline; }
.mc-footer .mc-footer__book a:hover,
.mc-footer .mc-footer__book a:focus-visible { color: var( --mc-coral, #FF7A66 ); }

/* ---------------------------------------------------------------------------
   THE CALENDLY INLINE WIDGET ON /book/.

   THE HEIGHT IS NOT SET HERE ANY MORE. page-about.php declares min-width:380px
   and height:900px INLINE on the element, which is the snippet the owner
   supplied and the shape Calendly's own documentation uses. An inline height
   beats every rule in this file, so a height here could only be dead weight or
   a second opinion nobody can see. It is removed rather than left to lose a
   cascade fight quietly.

   WHAT IS LEFT IS THE GEOMETRY THE INLINE STYLE DOES NOT COVER: the corner
   radius, the clip, and the max-width cap that stops min-width:380px pushing
   the document wider than its column on a small phone.

   MEASURED: the container is 354px wide at 390, 732 at 768, 852 at 900 and 892
   at 1440, and 892 is the whole of the rest -- .mc-wrap--narrow caps there and
   the widget never gets wider however wide the screen is. scrollWidth equals
   clientWidth at all four.

   THE :empty RULE IS THE FAIL-SAFE AND IT IS KEPT. :empty matches only an
   element with no children at all, and widget.js appends an iframe as its
   first act, so the rule stops applying the instant the script works. Its
   !important is what lets it beat the inline height in the one state that
   matters -- a script that never arrived -- so a dead script collapses the
   container to nothing instead of holding a 900px blank gap open in the middle
   of the page. The link below it is plain markup that needs no script at all.
   ---------------------------------------------------------------------------- */

.mc-booking { margin-top: 22px; }

.mc-booking__widget {
  max-width: 100%;
  overflow: hidden;
  border-radius: var( --mc-img-radius, 14px );
}

/* ---------------------------------------------------------------------------
   THE ONE PLACE THE OWNER'S SNIPPET CANNOT BE HONOURED VERBATIM.

   MEASURED: min-width:380px is wider than the column at a 390px viewport --
   .mc-wrap--narrow gives the widget 354px there -- so the inline 380 pushed
   the document to scrollWidth 398 against clientWidth 375 and /book/ gained a
   sideways scrollbar on a phone. min-width beats max-width in CSS, so the
   max-width:100% above cannot rescue it.

   Releasing the floor below 480px is the smallest change that keeps the
   snippet exactly as supplied everywhere it fits. At 481px and above nothing
   here applies and the inline 380 stands untouched.

   VERIFIED: without !important this loses to the inline min-width and the
   overflow stays -- an inline style beats a stylesheet rule, and only
   !important beats an inline style. This is the one declaration in this file
   that is allowed to do that, and it does it to min-width only, never height.
   --------------------------------------------------------------------------- */


@media ( max-width: 480px ) {

  .mc-booking__widget { min-width: 0 !important; }
}

.mc-booking__widget:empty {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
}

.mc-booking__fallback {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var( --mc-muted, #55708C );
}

/* ---------------------------------------------------------------------------
   THE QR CODE ON /leave-a-review/.

   200px of drawn SVG on a white plaque with 18px of quiet zone around it. The
   white is not decoration: a QR reader needs light modules and a clear margin,
   and the navy modules would sit on the page tint without it. crispEdges is on
   the SVG itself, so the 33 modules stay square at any size a printer picks.
   --------------------------------------------------------------------------- */

.mc-review-actions { margin: 22px 0 0; }

.mc-qr {
  margin: 26px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.mc-qr__code {
  background: #fff;
  padding: 18px;
  border: 1px solid var( --mc-line );
  border-radius: var( --mc-img-radius, 14px );
  line-height: 0;
}

.mc-qr__code svg {
  display: block;
  width: 200px;
  height: 200px;
}

.mc-qr__caption {
  font-size: 14px;
  line-height: 1.6;
  color: var( --mc-muted, #55708C );
  max-width: 42ch;
}

.mc-review-see { margin: 24px 0 0; font-size: 15px; }