/**
 * Editorial layer.
 *
 * Layers a more modern, less "boxed-in" treatment on top of the theme's
 * baseline design, WITHOUT leaving the brand spec: navy #1F3A5F, gold #C9A227,
 * white, light grey, charcoal are all unchanged. What changes is structure —
 * full-bleed imagery, a real type scale, and asymmetry — which is what makes
 * the original read as static.
 *
 * Kept in the plugin rather than the theme so the whole direction can be
 * reverted by removing this one file and its enqueue.
 */

/* ---------------------------------------------------------------------------
 * Type scale
 *
 * The baseline uses near-uniform heading sizes, which flattens hierarchy.
 * These are fluid so there are no breakpoint jumps.
 * ------------------------------------------------------------------------- */
.mmew-section {
	--mmw-step-0: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
	--mmw-step-3: clamp(1.6rem, 1.25rem + 1.5vw, 2.5rem);
	--mmw-step-4: clamp(2rem, 1.1rem + 2.4vw, 3.1rem);
	--mmw-step-5: clamp(2.4rem, 1.2rem + 3.6vw, 4.6rem);
	--mmw-measure: 62ch;
}

/* ---------------------------------------------------------------------------
 * Pre-existing horizontal-overflow fix
 *
 * Not a sizing bug, as it first appears. The theme auto-assigns AOS
 * `fade-left` / `fade-right` to `.about-photo`, `.page-photo`, `.content-block`
 * and others. Before those animate in, AOS holds them at
 * translate3d(100px,0,0) — which widens the document and produces a horizontal
 * scrollbar on load, until the user scrolls far enough to trigger the reveal.
 * The same bug is in the original static site.
 *
 * `clip` rather than `hidden`: hidden would make each section a scroll
 * container, which breaks `position: sticky` for anything inside it later.
 * ------------------------------------------------------------------------- */
.mmew-section {
	overflow-x: clip;
}

/* ---------------------------------------------------------------------------
 * Editorial hero
 * ------------------------------------------------------------------------- */

.hero.is-editorial {
	min-height: min(88vh, 720px);
	position: relative;
	overflow: hidden;
}

.hero.is-editorial .container {
	min-height: min(88vh, 720px);
	/* Portrait column gets the larger share; copy no longer sits dead-centre. */
	grid-template-columns: 1.15fr 0.85fr;
	align-items: stretch;
	gap: 0;
}

.hero.is-editorial .hero-copy {
	padding: clamp(56px, 7vw, 104px) 0;
	align-self: center;
	position: relative;
	z-index: 3;
}

/* Headline carries the page. Tight leading + negative tracking is what
   separates a display setting from a scaled-up paragraph.
   Capped lower than a short display line would allow: the client's approved
   headline is a full 98-character sentence, and at true display size it ran to
   six lines and forced the hero over 1000px tall. */
.hero.is-editorial .mm-hero-title {
	font-size: var(--mmw-step-4);
	line-height: 1.06;
	letter-spacing: -0.025em;
	margin: 20px 0 18px;
	max-width: none;
	text-wrap: balance;
}

.hero.is-editorial .hero-copy p {
	font-size: var(--mmw-step-0);
	max-width: 46ch;
	color: #dce6f4;
}

.hero.is-editorial .hero-kicker {
	font-size: 0.72rem;
	letter-spacing: 0.28em;
}

/* Portrait runs to the right edge of the viewport.
   100vw can exceed the content box by the scrollbar width; the section's
   overflow:hidden clips that overshoot rather than causing a page scrollbar. */
.hero.is-editorial .hero-visual {
	height: auto;
	align-self: stretch;
	margin-right: calc((min(1180px, 100vw - 48px) - 100vw) / 2);
	position: relative;
	z-index: 2;
}

/* The baseline design crops the portrait into an arch inside a fixed 470x500
   box (border-radius 52% 52% 12% 12%, bottom-right anchored). Editorial wants a
   full-bleed rectangle, so every one of those fixed values has to be undone —
   width/height especially, or the absolute inset is over-constrained and the
   box stays 470x500. */
.hero.is-editorial .portrait-wrap {
	position: absolute;
	inset: 0;
	right: 0;
	bottom: 0;
	left: 0;
	top: 0;
	width: auto;
	height: auto;
	max-width: none;
	transform: none;
	overflow: hidden;
}

/* Drop the arch's radial glow — it was shaped for the dome crop. */
.hero.is-editorial .portrait-wrap::before {
	content: none;
}

.hero.is-editorial .portrait-wrap img {
	position: absolute;
	inset: 0;
	right: auto;
	bottom: auto;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: 0;
	box-shadow: none;
	display: block;
	/* The portrait is shown as shot. An earlier grayscale/contrast grade was
	   removed: it desaturated the skin and, combined with the wash below,
	   made the face read as two different tones. */
	filter: none;
}

/* Navy wash on the inner edge blends the photo into the band instead of
   ending on a hard rectangle.

   This has to die out before the face begins. The wash used to hold 0.72
   opacity out to 22% and not clear until 58%, which dropped a navy veil over
   the left half of the face while the right half stayed at full brightness —
   the "two different shades across the face" the client reported. Keeping the
   fade inside the first ~20% blends the hard edge and leaves the face alone. */
.hero.is-editorial .hero-visual::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(90deg, #1F3A5F 0%, rgba(31, 58, 95, 0.5) 7%, rgba(31, 58, 95, 0.16) 14%, rgba(31, 58, 95, 0) 21%),
		linear-gradient(180deg, rgba(21, 42, 71, 0.16) 0%, rgba(21, 42, 71, 0) 16%);
}

/* Gold hairline where the portrait meets the copy. */
.hero.is-editorial .hero-visual::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	z-index: 3;
	background: linear-gradient(180deg, rgba(201, 162, 39, 0) 0%, rgba(201, 162, 39, 0.55) 45%, rgba(201, 162, 39, 0) 100%);
}

/* The MM monogram, very faint and very large. Uses the client's own mark
   rather than inventing decoration. */
.hero-watermark {
	position: absolute;
	top: 50%;
	left: clamp(-80px, -4vw, 0px);
	transform: translateY(-50%);
	width: min(560px, 46%);
	height: auto;
	opacity: 0.06;
	z-index: 1;
	pointer-events: none;
	user-select: none;
}

/* Vertical credential label down the far edge. */
.hero-edge-label {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	text-transform: uppercase;
	letter-spacing: 0.34em;
	font-size: 0.62rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.42);
	z-index: 4;
	pointer-events: none;
	white-space: nowrap;
}

/* Signature block sits over the portrait, bottom-left, like a photo credit.
   The baseline anchors it bottom-RIGHT and centres it, so both are reset. */
.hero.is-editorial .signature {
	position: absolute;
	left: clamp(16px, 3vw, 40px);
	right: auto;
	bottom: clamp(20px, 4vw, 44px);
	z-index: 4;
	text-align: left;
}

.hero.is-editorial .signature .name {
	font-family: var(--script, 'Great Vibes', cursive);
	font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.9rem);
	line-height: 1;
	color: #fff;
	text-shadow: 0 2px 14px rgba(10, 24, 44, 0.55);
}

.hero.is-editorial .signature .role {
	margin-top: 6px;
	text-transform: uppercase;
	letter-spacing: 0.26em;
	font-size: 0.58rem;
	font-weight: 600;
	color: var(--gold2, #C9A227);
}

/* ===========================================================================
 * SECTION RHYTHM
 *
 * The baseline paints almost every band #fff, so the page reads as one
 * undifferentiated column — the main reason it feels static. These re-cast a
 * few bands in navy so the page alternates light / dark instead. All within
 * the approved palette; no new colours introduced.
 * ======================================================================== */

/* Trust strip continues the hero's dark mass rather than cutting it off with
   a white strip immediately below the fold. */
.trust-strip.mmew-section {
	background: var(--navy2, #152a47);
	border-bottom: 0;
	padding: 30px 0;
	color: #fff;
}

.trust-strip.mmew-section .trust-item {
	border-right-color: rgba(255, 255, 255, 0.14);
	color: #eaf0f8;
}

.trust-strip.mmew-section .trust-item:last-of-type {
	border-right-color: transparent;
}

.trust-strip.mmew-section .badge img {
	/* Badges are dark-on-white artwork; lift them onto the navy. */
	background: #fff;
	padding: 6px;
	border-radius: 3px;
}

/* "Why choose" becomes a full navy band instead of a bordered white box. */
.why.mmew-section {
	background: var(--navy, #1F3A5F);
	padding: clamp(52px, 6vw, 86px) 0;
	color: #fff;
}

.why.mmew-section .why-title {
	color: var(--gold2, #C9A227);
	font-size: 0.74rem;
	letter-spacing: 0.3em;
	margin-bottom: 34px;
}

.why.mmew-section .why-grid {
	border: 0;
	gap: 0;
}

.why.mmew-section .why-card {
	border-right: 1px solid rgba(255, 255, 255, 0.14);
	padding: 8px 22px;
	text-align: left;
}

.why.mmew-section .why-card:last-child {
	border-right: 0;
}

.why.mmew-section .why-card h4 {
	color: #fff;
	margin: 12px 0 8px;
}

.why.mmew-section .why-card p {
	color: rgba(255, 255, 255, 0.72);
}

/* Alternating tint so no two adjacent bands share a background. Target order
   on the home page:
   hero(navy) trust(navy) about(white) services(soft) fees(white)
   why(navy) specialized(soft) areas(white) reviews(soft) faq(white) cta(navy)
   `.fees` ships soft from the theme and has to be forced back to white, or it
   doubles up with `.services` directly above it. */
.services.mmew-section,
.reviews.mmew-section,
.specialized.mmew-section {
	background: var(--soft, #F5F7FA);
}

.fees.mmew-section {
	background: #fff;
}

/* ===========================================================================
 * SECTION HEADINGS
 *
 * Uniform centred headings at near-body size flatten the hierarchy. Scale them
 * up and mark them with a short gold rule instead of relying on centring alone.
 * ======================================================================== */
.mmew-section .section-heading .title,
.mmew-section .areas-title h3,
.mmew-section .fees-copy h3 {
	font-size: var(--mmw-step-3);
	line-height: 1.14;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.mmew-section .section-heading {
	margin-bottom: clamp(30px, 4vw, 52px);
}

.mmew-section .section-heading .eyebrow {
	font-size: 0.7rem;
	letter-spacing: 0.3em;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.mmew-section .section-heading .eyebrow::before,
.mmew-section .section-heading .eyebrow::after {
	content: "";
	width: 30px;
	height: 1px;
	background: var(--gold2, #C9A227);
	opacity: 0.7;
}

.mmew-section .section-heading .subtitle {
	max-width: 60ch;
	margin-inline: auto;
}

/* ===========================================================================
 * CARDS
 *
 * "Rounded rectangle + 1px border + box-shadow" repeated for every card type
 * is the single most template-looking thing on the page. Replace the box with
 * a gold top hairline that draws on hover — the card is defined by its edge and
 * its spacing, not by a floating panel.
 * ======================================================================== */
.mmew-section .service-card,
.mmew-section .review-card,
.mmew-section .credential-card,
.mmew-section .special-card {
	border: 0;
	border-top: 1px solid var(--line, #e5e8ec);
	box-shadow: none;
	border-radius: 0;
	background: transparent;
	position: relative;
	transition: transform 0.3s ease;
}

/* Gold rule that grows across the top edge on hover. */
.mmew-section .service-card::before,
.mmew-section .review-card::before,
.mmew-section .credential-card::before,
.mmew-section .special-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--gold2, #C9A227);
	transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mmew-section .service-card:hover::before,
.mmew-section .review-card:hover::before,
.mmew-section .credential-card:hover::before,
.mmew-section .special-card:hover::before {
	width: 100%;
}

.mmew-section .service-card {
	padding: 32px 26px 34px;
	min-height: 0;
}

/* Card headings left-aligned: centred headings over left-aligned lists is what
   makes the grid read as filler. */
.mmew-section .service-card h3 {
	text-align: left;
	font-size: 1.32rem;
	margin-bottom: 18px;
}

.mmew-section .service-card ul {
	margin-inline: 0;
	max-width: none;
}

/* ---------------------------------------------------------------------------
 * Service cards
 *
 * The baseline renders each as: navy filled circle, centred, over a centred
 * title, over a list of 15 identical gold check-circles. Three of those
 * columns side by side is the most template-looking block on the page.
 *
 * Changes: the circle becomes a diamond echoing the MM logo mark, the icon
 * left-aligns with the title (the baseline centred the icon but left-aligned
 * the heading, which read as a mistake), and the repeated check-circles become
 * a hairline spec list with a single gold rule as the marker.
 * ------------------------------------------------------------------------- */

/* Rotated square, not a circle — the brand mark is a diamond. The 45deg
   rotation grows the bounding box, hence the roomy top margin. */
.mmew-section .service-card .service-icon {
	width: 52px;
	height: 52px;
	border-radius: 5px;
	transform: rotate(45deg);
	margin: 14px 0 34px 12px;
	position: relative;
	overflow: visible;
}

.mmew-section .service-card .service-icon .icon-img {
	/* Counter-rotate so the glyph stays upright inside the diamond. */
	transform: rotate(-45deg);
	width: 27px;
	height: 27px;
}

/* Offset gold outline — the one repeated "signature" detail in the section. */
.mmew-section .service-card .service-icon::after {
	content: "";
	position: absolute;
	inset: -8px;
	border: 1px solid var(--gold2, #C9A227);
	border-radius: 7px;
	opacity: 0.4;
	transition: inset 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
	pointer-events: none;
}

.mmew-section .service-card:hover .service-icon::after {
	inset: -13px;
	opacity: 0.85;
}

/* Spec list: hairline rows with a short gold rule, instead of 15 filled
   check-circles stacked down the column. */
.mmew-section .service-card li {
	gap: 0;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid rgba(31, 58, 95, 0.09);
	align-items: baseline;
}

.mmew-section .service-card li:last-child {
	border-bottom: 0;
}

.mmew-section .service-card li::before {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 1px;
	min-height: 1px;
	margin-right: 14px;
	border-radius: 0;
	background: var(--gold2, #C9A227);
	color: transparent;
	font-size: 0;
	transform: translateY(-4px);
	transition: width 0.3s ease, flex-basis 0.3s ease;
}

.mmew-section .service-card li:hover::before {
	flex-basis: 22px;
	width: 22px;
}

/* Close the dead band the equal-height grid left above the footer link. */
.mmew-section .service-grid {
	align-items: start;
}

.mmew-section .services-more {
	margin-top: clamp(24px, 3vw, 40px);
}

.mmew-section .review-card {
	padding: 30px 26px 28px;
	min-height: 0;
	background: #fff;
}

.mmew-section .credential-card {
	background: #fff;
	padding: 30px 26px;
}

/* Chips: flatten the shadowed pill into a crisp outline. */
.mmew-section .chip {
	box-shadow: none;
	border-color: #d3dae3;
	background: transparent;
	transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.mmew-section .chip:hover {
	border-color: var(--gold2, #C9A227);
	background: #fff;
}

.mmew-section .chip.more {
	background: var(--navy, #1F3A5F);
}

/* ===========================================================================
 * SERVICE DETAIL CARDS  (services page)
 *
 * The heavier sibling of .service-card, and it was missed by the card rules
 * above — it kept the white panel, 1px border and drop shadow.
 *
 * The bigger problem is proportion: the three cards carry 16, 11 and 7 list
 * items but the grid forced all three to the tallest one's height, leaving two
 * of them half empty. Equal-height columns only work when the content is
 * roughly equal; here it just reads as three under-filled boxes.
 * ======================================================================== */
.mmew-section .service-detail-grid {
	align-items: start;
}

.mmew-section .service-detail-card {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--line, #e5e8ec);
	box-shadow: none;
	border-radius: 0;
	padding: 30px 24px 34px 0;
	position: relative;
}

/* Same gold rule that draws on hover as the other card types. */
.mmew-section .service-detail-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--gold2, #C9A227);
	transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mmew-section .service-detail-card:hover::before {
	width: 100%;
}

/* Diamond icon, matching the home page treatment. */
.mmew-section .service-detail-card .service-icon {
	width: 50px;
	height: 50px;
	border-radius: 5px;
	transform: rotate(45deg);
	margin: 12px 0 30px 12px;
	position: relative;
	overflow: visible;
}

.mmew-section .service-detail-card .service-icon .icon-img {
	transform: rotate(-45deg);
	width: 26px;
	height: 26px;
}

.mmew-section .service-detail-card .service-icon::after {
	content: "";
	position: absolute;
	inset: -8px;
	border: 1px solid var(--gold2, #C9A227);
	border-radius: 7px;
	opacity: 0.4;
	transition: inset 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
	pointer-events: none;
}

.mmew-section .service-detail-card:hover .service-icon::after {
	inset: -13px;
	opacity: 0.85;
}

.mmew-section .service-detail-card h3 {
	font-size: 1.42rem;
	line-height: 1.16;
	margin-bottom: 12px;
}

.mmew-section .service-card-lead {
	max-width: 40ch;
	line-height: 1.6;
	margin-bottom: 26px;
}

/* Group headings were 11.7px uppercase — too small to act as a real level in
   the hierarchy. Give them a gold rule so they read as section markers. */
.mmew-section .service-list-group {
	margin-top: 26px;
}

.mmew-section .service-list-group h5 {
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--navy, #1F3A5F);
	margin: 0 0 6px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--gold2, #C9A227);
	display: block;
}

/* Same hairline spec list as the home page cards. */
.mmew-section .service-detail-card ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mmew-section .service-detail-card li {
	display: flex;
	align-items: baseline;
	gap: 0;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid rgba(31, 58, 95, 0.08);
}

.mmew-section .service-detail-card li:last-child {
	border-bottom: 0;
}

.mmew-section .service-detail-card li::before {
	content: "";
	flex: 0 0 12px;
	width: 12px;
	height: 1px;
	margin-right: 13px;
	background: var(--gold2, #C9A227);
	transform: translateY(-4px);
	transition: flex-basis 0.3s ease, width 0.3s ease;
}

.mmew-section .service-detail-card li:hover::before {
	flex-basis: 20px;
	width: 20px;
}

/* ===========================================================================
 * SPECIALIZED LINK CARDS  (services page)
 * ======================================================================== */
.mmew-section .specialized-link-card {
	border: 0;
	border-top: 1px solid var(--line, #e5e8ec);
	box-shadow: none;
	border-radius: 0;
	background: transparent;
	padding: 28px 0;
	position: relative;
	transition: padding-left 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mmew-section .specialized-link-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--gold2, #C9A227);
	transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mmew-section .specialized-link-card:hover::before {
	width: 100%;
}

.mmew-section .specialized-link-card:hover {
	padding-left: 12px;
}

.mmew-section .specialized-link-arrow {
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mmew-section .specialized-link-card:hover .specialized-link-arrow {
	transform: translateX(6px);
}

/* ===========================================================================
 * FAQ
 *
 * Baseline: each question is a bordered white box stacked on the next, so the
 * list reads as a column of panels. An FAQ is an index, not a set of cards —
 * hairline rows with the question set in the display face read as one.
 * ======================================================================== */
.mmew-section .faq-item {
	border: 0;
	border-bottom: 1px solid var(--line, #e5e8ec);
	background: transparent;
}

.mmew-section .faq-grid > .faq-item:first-child {
	border-top: 1px solid var(--line, #e5e8ec);
}

.mmew-section .faq-q {
	background: transparent;
	padding: 22px 0;
	font-family: var(--serif, Georgia, serif);
	font-size: 1.16rem;
	font-weight: 600;
	gap: 24px;
	transition: color 0.25s ease;
}

.mmew-section .faq-q:hover {
	color: var(--navy, #1F3A5F);
}

.mmew-section .faq-q .icon-img {
	flex: 0 0 auto;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mmew-section .faq-a {
	padding: 0 0 24px;
	max-width: 72ch;
	line-height: 1.7;
}

/* ===========================================================================
 * FEES
 *
 * Baseline: a white panel with a 1px border, a drop shadow AND a 4px gold left
 * rule — three devices doing one job. Keep the gold rule, drop the panel.
 * ======================================================================== */
.mmew-section .fees .container {
	align-items: start;
}

.mmew-section .fees-card {
	background: transparent;
	border: 0;
	border-left: 2px solid var(--gold2, #C9A227);
	box-shadow: none;
	padding: 6px 0 6px 30px;
}

.mmew-section .fees-card h4 {
	font-size: 1.24rem;
	margin-bottom: 12px;
}

/* Same treatment for the services-page variant. */
.mmew-section .fees-info-card {
	background: transparent;
	border: 0;
	border-left: 2px solid var(--gold2, #C9A227);
	box-shadow: none;
	padding: 6px 0 6px 30px;
}

/* ===========================================================================
 * REVIEWS
 *
 * The quote glyph is the only real ornament here; let it carry some weight
 * instead of sitting at icon size beside the stars.
 * ======================================================================== */
.mmew-section .review-card .quote-row {
	justify-content: space-between;
	margin-bottom: 4px;
}

.mmew-section .review-card .quote-row > .icon-img:first-child {
	width: 34px;
	height: 34px;
	opacity: 0.55;
}

.mmew-section .review-card p {
	font-family: var(--serif, Georgia, serif);
	font-size: 1.1rem;
	line-height: 1.6;
}

.mmew-section .reviewer {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.68rem;
}

/* ===========================================================================
 * INNER-PAGE HERO
 *
 * Brings the same type discipline as the home hero to About / Services / FAQ
 * so the inner pages don't drop back to the baseline scale.
 * ======================================================================== */
.page-hero.mmew-section .mm-page-hero-title {
	font-size: var(--mmw-step-4);
	line-height: 1.06;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.page-hero.mmew-section .breadcrumb {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.66rem;
	font-weight: 600;
}

.page-hero.mmew-section p {
	max-width: 58ch;
}

/* ===========================================================================
 * PANELS  (contact form, embedded map, service-area map card)
 *
 * The last three places still using the floating-panel treatment: white fill,
 * 1px border, 12px radius and a drop shadow. Everywhere else on the site a
 * block is now defined by a hairline edge, so these were the odd ones out.
 * Squared off, shadow removed, hairline kept.
 * ======================================================================== */
.mmew-section .form-section,
.mmew-section .map-wrap,
.mmew-section .areas-map-card {
	border: 1px solid var(--line, #e5e8ec);
	border-radius: 2px;
	box-shadow: none;
}

.mmew-section .form-section {
	padding: clamp(26px, 3vw, 38px);
}

.mmew-section .map-stage {
	border-radius: 0;
}

/* The coverage panel is the only live-updating text on the page — give it a
   gold rule so it reads as a readout rather than a caption. */
.mmew-section .map-info-panel {
	border-left: 2px solid var(--gold2, #C9A227);
	border-radius: 0;
	padding-left: 18px;
}

.mmew-section .map-info-label {
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.64rem;
	font-weight: 600;
}

.mmew-section .appointment-note {
	border-left: 2px solid var(--gold2, #C9A227);
	border-radius: 0;
	padding-left: 18px;
}

/* ===========================================================================
 * FORM CONTROLS
 *
 * Rounded, mid-grey bordered inputs are the default look every form ships
 * with. Squaring them and moving the emphasis to the focus state suits a
 * professional-services site better — and the focus ring was the weaker part
 * of the original, which matters more than the resting style.
 * ======================================================================== */
.mmew-section .form-group input,
.mmew-section .form-group select,
.mmew-section .form-group textarea {
	border-radius: 2px;
	border-color: #d5dce5;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mmew-section .form-group input:hover,
.mmew-section .form-group select:hover,
.mmew-section .form-group textarea:hover {
	border-color: #aab6c4;
}

/* Visible focus. Kept as a real outline so it survives forced-colors mode,
   drawn outside the field rather than inside it.
   Navy, not gold: gold #C9A227 on white is only 2.43:1, under the 3:1 WCAG 2.2
   requires for focus indicators (SC 1.4.11). Navy #1F3A5F is 11.6:1. The gold
   stays as a soft secondary ring, which carries no contrast burden. */
.mmew-section .form-group input:focus-visible,
.mmew-section .form-group select:focus-visible,
.mmew-section .form-group textarea:focus-visible {
	outline: 2px solid var(--navy, #1F3A5F);
	outline-offset: 2px;
	border-color: var(--navy, #1F3A5F);
	box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.22);
}

.mmew-section .form-group label {
	letter-spacing: 0.12em;
	font-size: 0.72rem;
	color: var(--navy, #1F3A5F);
}

/* ===========================================================================
 * MOTION
 *
 * The theme gives every element the same AOS fade-up, which reads as a single
 * mechanical wave. Stagger cards within a row so a grid resolves left-to-right
 * instead of all at once. Cheap, and it only touches transition-delay.
 * ======================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.mmew-section .service-grid > *:nth-child(2),
	.mmew-section .review-grid > *:nth-child(2),
	.mmew-section .credential-grid > *:nth-child(2) {
		transition-delay: 90ms;
	}

	.mmew-section .service-grid > *:nth-child(3),
	.mmew-section .review-grid > *:nth-child(3),
	.mmew-section .credential-grid > *:nth-child(3) {
		transition-delay: 180ms;
	}

	.mmew-section .credential-grid > *:nth-child(n + 4) {
		transition-delay: 240ms;
	}
}

/* ---------------------------------------------------------------------------
 * Responsive
 *
 * Below the two-column threshold the theme already collapses .hero .container
 * to a single column; the portrait must stop bleeding or it overhangs.
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.hero.is-editorial,
	.hero.is-editorial .container {
		min-height: 0;
	}

	.hero.is-editorial .container {
		grid-template-columns: 1fr;
	}

	.hero.is-editorial .hero-copy {
		padding: 56px 0 28px;
	}

	.hero.is-editorial .hero-visual {
		height: min(58vh, 460px);
		/* Full-bleed both sides once stacked. */
		margin-inline: calc((min(1180px, 100vw - 48px) - 100vw) / 2);
	}

	.hero.is-editorial .portrait-wrap img {
		object-position: 50% 18%;
	}

	/* Stacked layout: the wash runs top-down instead of left-to-right. Same
	   constraint as the desktop rule — it has to finish above the face. At 0.55
	   opacity over the top 42% it laid navy across her forehead and eyes, which
	   is the same "shaded on one side" problem in the other axis. */
	.hero.is-editorial .hero-visual::before {
		background: linear-gradient(180deg, rgba(31, 58, 95, 0.42) 0%, rgba(31, 58, 95, 0.1) 8%, rgba(31, 58, 95, 0) 15%);
	}

	.hero.is-editorial .hero-visual::after {
		display: none;
	}

	.hero-edge-label {
		display: none;
	}

	.hero-watermark {
		width: 68%;
		opacity: 0.05;
	}
}

@media (max-width: 600px) {
	.hero.is-editorial .mm-hero-title {
		max-width: none;
	}

	.hero.is-editorial .hero-copy p {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
 * Responsive — sections
 *
 * The vertical divider rules between trust items and "why" cards only read as
 * dividers in a row. Once the grids stack they become stray lines under each
 * item, so they flip to horizontal separators and drop on the last child.
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.trust-strip.mmew-section .trust-item {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		padding: 14px 0;
	}

	.trust-strip.mmew-section .trust-item:last-of-type {
		border-bottom: 0;
	}

	.why.mmew-section .why-card {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
		padding: 20px 0;
	}

	.why.mmew-section .why-card:last-child {
		border-bottom: 0;
	}

	/* Centred eyebrow rules crowd the text at narrow widths. */
	.mmew-section .section-heading .eyebrow::before,
	.mmew-section .section-heading .eyebrow::after {
		width: 18px;
	}

	.mmew-section .service-card,
	.mmew-section .review-card,
	.mmew-section .credential-card {
		padding-inline: 20px;
	}

	/* Staggered reveals feel sluggish when items are stacked one per row. */
	.mmew-section .service-grid > *,
	.mmew-section .review-grid > *,
	.mmew-section .credential-grid > * {
		transition-delay: 0ms !important;
	}
}

/* ---------------------------------------------------------------------------
 * Touch targets
 *
 * The brief asks for an ADA-conscious, mobile-optimised layout. On a phone the
 * chips (40px), inline text links (29px) and the hero call link (26px) all sat
 * under the 44px comfortable-tap threshold. Height is added via padding so the
 * visual weight of the type is unchanged.
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.mmew-section .chip {
		min-height: 44px;
		padding-block: 10px;
	}

	.mmew-section .text-link,
	.mmew-section .faq-more a,
	.mmew-section .services-more a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.hero .call-now,
	.mmew-section .cta-call {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ---------------------------------------------------------------------------
 * Professional profile card (mm-profile)
 *
 * Reproduces the credential block the client supplied: portrait, script
 * wordmark, commission line, certification line. The MM monogram from that
 * artwork is intentionally absent — the client asked for the profile without
 * it — so the gold rule carries the separation the monogram used to.
 * ------------------------------------------------------------------------- */
.mm-profile {
	background: #fff;
	padding: clamp(56px, 6vw, 88px) 0;
}

.mm-profile-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 26px;
}

/* Offset gold outline, the same "signature" detail the rest of the site uses
   for framed imagery. */
.mm-profile-frame {
	position: relative;
	display: inline-block;
	border-radius: 14px;
}

.mm-profile-frame::before {
	content: "";
	position: absolute;
	inset: 14px -14px -14px 14px;
	border: 1px solid rgba(201, 162, 39, 0.55);
	border-radius: 14px;
	z-index: 0;
	pointer-events: none;
}

.mm-profile-photo {
	position: relative;
	z-index: 1;
	width: clamp(190px, 24vw, 260px);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 18%;
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(31, 58, 95, 0.18);
	display: block;
}

.mm-profile-name {
	font-family: var(--script, 'Great Vibes', cursive);
	font-size: clamp(2.6rem, 1.6rem + 3vw, 4rem);
	line-height: 1.1;
	color: #C9A227;
	/* Great Vibes sits high in its em box; this re-centres it optically. */
	padding-bottom: 0.08em;
}

.mm-profile-rule {
	display: block;
	width: 132px;
	height: 1px;
	margin: 2px auto 6px;
	background: linear-gradient(90deg, rgba(201, 162, 39, 0) 0%, rgba(201, 162, 39, 0.9) 50%, rgba(201, 162, 39, 0) 100%);
}

.mm-profile-title {
	font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
	font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
	font-weight: 600;
	color: #1F3A5F;
	letter-spacing: 0.01em;
}

.mm-profile-commission {
	font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
	font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.22rem);
	color: #1F3A5F;
	margin-top: 10px;
}

.mm-profile-sep {
	color: #C9A227;
	padding: 0 6px;
}

.mm-profile-cert {
	font-family: var(--sans, 'Source Sans 3', system-ui, sans-serif);
	font-size: 0.92rem;
	letter-spacing: 0.06em;
	color: #5A6B80;
	margin-top: 6px;
}

.mm-profile-business {
	font-family: var(--sans, 'Source Sans 3', system-ui, sans-serif);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 700;
	color: #8A97A8;
	margin-top: 18px;
}

@media (max-width: 600px) {
	.mm-profile-frame::before {
		inset: 10px -10px -10px 10px;
	}
}

/* ---------------------------------------------------------------------------
 * Documents we notarize (mm-document-types)
 *
 * A plain checklist rather than an icon grid: the client's ten categories have
 * no natural icon vocabulary, and inventing one made the section read as
 * decorative instead of informative.
 * ------------------------------------------------------------------------- */
.mm-doctypes {
	background: #F5F7FA;
	padding: clamp(56px, 6vw, 84px) 0;
}

.mm-doctypes-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	gap: 14px 30px;
}

.mm-doctypes-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: #fff;
	border: 1px solid rgba(31, 58, 95, 0.08);
	border-left: 3px solid #C9A227;
	border-radius: 10px;
	padding: 16px 18px;
	box-shadow: 0 2px 10px rgba(31, 58, 95, 0.05);
}

/* Gold tick drawn in CSS so the section carries no extra image requests. */
.mm-doctypes-check {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	border-radius: 50%;
	background: rgba(201, 162, 39, 0.14);
	position: relative;
}

.mm-doctypes-check::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 4px;
	width: 5px;
	height: 9px;
	border: solid #C9A227;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.mm-doctypes-title {
	display: block;
	font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.16rem;
	font-weight: 600;
	color: #1F3A5F;
	line-height: 1.3;
}

.mm-doctypes-text {
	display: block;
	margin-top: 3px;
	font-size: 0.9rem;
	color: #5A6B80;
	line-height: 1.5;
}

/* The scope statement is a compliance line, so it is set apart from the list
   rather than tucked in as fine print. */
.mm-doctypes-note {
	margin: 30px auto 0;
	max-width: 760px;
	text-align: center;
	background: #fff;
	border: 1px solid rgba(201, 162, 39, 0.4);
	border-radius: 10px;
	padding: 16px 22px;
	font-size: 0.98rem;
	font-weight: 600;
	color: #1F3A5F;
}