/* ==========================================================================
   Meredith's Golden Moments — component styles.
   Ported 1:1 from the approved v3 prototype.

   Responsive conversion note: the prototype simulated breakpoints with
   body[data-view="desktop"] / body[data-view="mobile"]. Those are converted
   here to real, mobile-first media queries. The pinned mobile and desktop
   type scales are preserved exactly at their respective breakpoints.
   ========================================================================== */

/* ---------------------------------------------------------------
   1. Base
   --------------------------------------------------------------- */
body {
	background: var(--ivory);
	color: var(--text-body);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 500;
	color: var(--text-headline);
	margin: 0;
	text-wrap: balance;
}

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: var(--link-color);
	text-decoration: none;
}

a:hover {
	color: var(--link-hover);
}

/* Mobile-pinned type scale (prototype: body[data-view="mobile"]) */
:root {
	--text-display-xl: 500 33px/1.12 var(--font-serif);
	--text-display-l:  400 29px/1.2  var(--font-serif);
	--text-display-m:  500 25px/1.28 var(--font-serif);
	--text-heading:    500 20px/1.32 var(--font-serif);
	--text-quote:      400 22px/1.42 var(--font-serif);
	--text-lead:       400 16px/1.6  var(--font-sans);
	--text-body-l:     400 16px/1.7  var(--font-sans);
	--wrap-pad: 22px;
}

/* Desktop-pinned type scale (prototype: body[data-view="desktop"]) */
@media (min-width: 900px) {
	:root {
		--text-display-xl: 500 66px/1.1  var(--font-serif);
		--text-display-l:  400 48px/1.18 var(--font-serif);
		--text-display-m:  500 36px/1.25 var(--font-serif);
		--text-heading:    500 27px/1.3  var(--font-serif);
		--text-quote:      400 33px/1.4  var(--font-serif);
		--text-lead:       400 21px/1.6  var(--font-sans);
		--text-body-l:     400 18px/1.7  var(--font-sans);
		--wrap-pad: 64px;
	}
}

/* Tablet interpolation between the two pinned scales */
@media (min-width: 600px) and (max-width: 899px) {
	:root {
		--text-display-xl: 500 clamp(33px, 6.4vw, 56px)/1.1  var(--font-serif);
		--text-display-l:  400 clamp(29px, 4.8vw, 42px)/1.18 var(--font-serif);
		--text-display-m:  500 clamp(25px, 3.6vw, 32px)/1.25 var(--font-serif);
		--text-heading:    500 clamp(20px, 2.8vw, 24px)/1.3  var(--font-serif);
		--text-quote:      400 clamp(22px, 3.4vw, 29px)/1.4  var(--font-serif);
		--text-lead:       400 clamp(16px, 2.2vw, 19px)/1.6  var(--font-sans);
		--wrap-pad: 40px;
	}
}

/* ---------------------------------------------------------------
   1b. Neutralise the flow-layout gap inside our own layouts

   Core emits `:root :where(.is-layout-flow) > * { margin-block-start: 1.25rem }`
   for every non-first child of a Group. Where this theme turns a Group into a
   grid or flex row, that margin is wrong: in a stretch grid it makes the 2nd
   and 3rd cards shorter than the first and pushes them down by the gap, so a
   row of cards no longer lines up. Spacing in these containers comes from
   `gap` instead.

   `:root` is included only to out-specify core's own rule.
   --------------------------------------------------------------- */
:root .mgm-strip > *,
:root .mgm-hero-grid > *,
:root .mgm-introblk > *,
:root .mgm-celcats > *,
:root .mgm-celcat > *,
:root .mgm-catrow > *,
:root .mgm-cards > *,
:root .mgm-journey > *,
:root .mgm-tiers > *,
:root .mgm-details > *,
:root .mgm-typegrid > *,
:root .mgm-sigrow > *,
:root .mgm-about-grid > *,
:root .mgm-storyblock.with-photo > *,
:root .mgm-gallery > *,
:root .mgm-ctiles > *,
:root .mgm-ctile > *,
:root .mgm-htrack > *,
:root .mgm-gtchips > *,
:root .mgm-kwlist > *,
:root .mgm-expect > *,
:root .mgm-slides > *,
:root .mgm-foot-grid > *,
:root .mgm-frow > *,
:root .mgm-who > *,
:root .mgm-cinfo > *,
:root .mgm-faqlist > *,
:root .mgm-header > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---------------------------------------------------------------
   2. Layout primitives
   --------------------------------------------------------------- */
.mgm-wrap,
.wp-block-group.mgm-wrap {
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: var(--wrap-pad);
	box-sizing: border-box;
}

.mgm-sec { padding-block: 46px; }
.mgm-sec-tight { padding-block: 36px; }

@media (min-width: 900px) {
	.mgm-sec { padding-block: clamp(52px, 8vw, 104px); }
	.mgm-sec-tight { padding-block: clamp(40px, 6vw, 72px); }
}

.mgm-band-linen { background: var(--linen); }
.mgm-band-green { background: var(--green); }
.mgm-center { text-align: center; }
.mgm-maxp { max-width: 60ch; }

/* ---------------------------------------------------------------
   3. Typographic accents
   --------------------------------------------------------------- */
.mgm-eyebrow {
	font: 700 11px/1.4 var(--font-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-gold);
	margin: 0;
}

.mgm-lede {
	font-family: var(--font-sans);
	line-height: 1.7;
}

.mgm-script {
	font-family: var(--font-script);
	color: var(--text-gold);
}

.mgm-starrule {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mgm-starrule .ln {
	height: 1px;
	flex: 1;
	background: var(--gold-400);
	opacity: .7;
}

.mgm-starrule .st {
	color: var(--gold-400);
	font-size: 13px;
	line-height: 1;
}

/* Text link with animated arrow */
.mgm-txtlink,
.mgm-txtlink a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 700 14px/1 var(--font-sans);
	letter-spacing: .05em;
	color: var(--text-olive);
	cursor: pointer;
}

.mgm-txtlink a:hover { color: var(--soft-black); }
.mgm-txtlink .ar { transition: transform .24s var(--ease-gentle); }
.mgm-txtlink a:hover .ar { transform: translateX(4px); }

/* Placeholder / pending flag — visible so open items are obvious in admin */
.mgm-placeholder-tag {
	display: inline-block;
	font: 700 9px/1 var(--font-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-placeholder);
	border: 1px solid var(--warm-taupe);
	border-radius: 3px;
	padding: 5px 8px;
	margin-bottom: 16px;
}

/* ---------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------- */
.wp-block-button__link,
.mgm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 700 14px/1 var(--font-sans);
	letter-spacing: .06em;
	padding: 16px 32px;
	border-radius: var(--radius-button);
	border: 1px solid transparent;
	cursor: pointer;
	text-align: center;
	min-height: 44px;
	box-sizing: border-box;
	transition:
		background var(--duration-fast) var(--ease-gentle),
		border-color var(--duration-fast) var(--ease-gentle),
		color var(--duration-fast) var(--ease-gentle);
}

/* Gold (primary) */
.mgm-btn-gold .wp-block-button__link,
.wp-block-button.mgm-btn-gold > .wp-block-button__link,
a.mgm-btn-gold {
	background: var(--gold-100);
	color: var(--text-on-gold);
	border-color: var(--gold-100);
}

.mgm-btn-gold .wp-block-button__link:hover,
.wp-block-button.mgm-btn-gold > .wp-block-button__link:hover,
a.mgm-btn-gold:hover {
	background: var(--gold-200);
	color: #4a3d22;
}

/* Ghost (secondary) */
.mgm-btn-ghost .wp-block-button__link,
.wp-block-button.mgm-btn-ghost > .wp-block-button__link,
a.mgm-btn-ghost {
	background: transparent;
	color: var(--soft-black);
	border-color: var(--soft-black);
}

.mgm-btn-ghost .wp-block-button__link:hover,
.wp-block-button.mgm-btn-ghost > .wp-block-button__link:hover,
a.mgm-btn-ghost:hover {
	background: var(--soft-black);
	color: var(--ivory);
}

/* ---------------------------------------------------------------
   5. Header / navigation
   --------------------------------------------------------------- */
/* The bar spans the viewport so its hairline runs edge to edge, while its
   contents line up with the 1080px content grid used by every section. */
.mgm-header {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-block: 16px;
	padding-inline: max(
		var(--wrap-pad),
		calc((100% - 1080px) / 2 + var(--wrap-pad))
	);
	border-bottom: 1px solid var(--border-hairline);
	position: relative;
	background: var(--ivory);
	z-index: 40;
	box-sizing: border-box;
}

.mgm-brand {
	display: flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
}

.mgm-brand .mgm-mark {
	width: 76px;
	height: 76px;
	flex: 0 0 76px;
	border-radius: 8px;
	background: #1a1714 center / 78% no-repeat;
	background-image: var(--mgm-mark-image);
}

.mgm-brand .mgm-mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 8px;
	display: block;
}

.mgm-brand .mgm-wordmark {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 27px;
	line-height: 1.05;
	color: var(--soft-black);
	margin: 0;
}

.mgm-brand .mgm-wordmark small,
.mgm-brand .mgm-wordmark-script {
	display: block;
	font-family: var(--font-script);
	font-size: 24px;
	font-weight: 400;
	color: var(--gold-500);
	letter-spacing: 0;
	margin-top: 2px;
}

/* The header wordmark is wrapped in a home link, so the global link colour
   (deep olive) was landing on "Meredith's" and painting it green. The colour
   above sits on the paragraph and never reached the anchor. The script line
   keeps its own gold. */
.mgm-brand .mgm-wordmark a,
.mgm-brand .mgm-wordmark a:hover,
.mgm-brand .mgm-wordmark a:focus-visible { color: var(--soft-black); }

.mgm-brand:hover .mgm-wordmark { color: var(--soft-black); }

/* Core navigation block, styled to the prototype */
.mgm-header .wp-block-navigation {
	margin-left: auto;
	gap: 20px;
}

.mgm-header .wp-block-navigation .wp-block-navigation-item__content {
	font: 400 15px/1 var(--font-sans);
	letter-spacing: .05em;
	color: var(--soft-black);
	white-space: nowrap;
	padding: 6px 0;
	position: relative;
	text-decoration: none;
}

.mgm-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--deep-olive);
}

.mgm-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: var(--deep-olive);
}

.mgm-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1.5px;
	background: var(--gold-400);
}

/* Hamburger — core hides this above 600px; only style it, never force display */
.mgm-header .wp-block-navigation__responsive-container-open,
.mgm-header .wp-block-navigation__responsive-container-close {
	color: var(--soft-black);
	padding: 10px;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

@media (min-width: 900px) {
	/* The prototype shows the full nav from the desktop breakpoint up. */
	.mgm-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

/* Core switches the Navigation block to an overlay at 600px; this design
   needs it up to the 900px desktop breakpoint, otherwise seven items and the
   brand lockup do not fit on a tablet. */
@media (max-width: 899px) {
	.mgm-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.mgm-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Mobile overlay menu — full-width stacked list, matching the prototype */
.mgm-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--ivory);
	padding: clamp(24px, 8vw, 48px) var(--wrap-pad);
}

.mgm-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	font: 400 17px/1 var(--font-serif);
	color: var(--soft-black);
	padding: 15px 0;
	width: 100%;
	border-top: 1px solid var(--border-hairline);
}

.mgm-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > li:first-child .wp-block-navigation-item__content {
	border-top: 0;
}

.mgm-header .mgm-inquire {
	margin-left: 4px;
	flex: 0 0 auto;
}

.mgm-header .mgm-inquire .wp-block-button__link {
	white-space: nowrap;
	padding: 14px 26px;
}

/* Keep the brand from being squeezed by a long menu */
.mgm-header .mgm-brand { flex: 0 0 auto; }
.mgm-header .wp-block-navigation { flex: 1 1 auto; justify-content: flex-end; }

@media (max-width: 899px) {
	.mgm-header { padding: 20px var(--wrap-pad) 16px; }
	.mgm-header .mgm-brand .mgm-mark { width: 64px; height: 64px; flex-basis: 64px; }
	.mgm-header .mgm-brand .mgm-wordmark { font-size: 23px; }
	.mgm-header .mgm-brand .mgm-wordmark small,
	.mgm-header .mgm-brand .mgm-wordmark-script { font-size: 20px; }
	.mgm-header .mgm-inquire { display: none; }
	.mgm-header .wp-block-navigation { margin-left: auto; }
}

/* Skip link */
.mgm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--ivory);
	color: var(--soft-black);
	font: 700 14px/1 var(--font-sans);
	padding: 14px 20px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--gold-400);
}

.mgm-skip-link:focus {
	left: 12px;
	top: 12px;
}

/* ---------------------------------------------------------------
   6. Photo frames
   --------------------------------------------------------------- */
.mgm-photo,
.mgm-photo.wp-block-image {
	position: relative;
	overflow: hidden;
	background-color: #ede7d9;
	background-image: repeating-linear-gradient(135deg, rgba(120,95,50,.06) 0 2px, transparent 2px 12px);
	display: block;
	width: 100%;
	border: 1px solid var(--warm-taupe);
	border-radius: var(--radius-image);
	margin: 0;
	line-height: 0;
	box-sizing: border-box;
}

/* Photography is cropped to the shape the layout calls for, never letterboxed.
   Aspect ratio drives the height so there is no layout shift while loading. */
.mgm-photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.mgm-photo.mgm-round,
.mgm-photo.mgm-round img { border-radius: 50%; }

.mgm-photo.is-dark {
	background-color: #221e19;
	background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 12px);
}

/* Aspect helpers, matching the prototype's proportions per slot */
.mgm-photo-tall img { aspect-ratio: 3 / 4; }
.mgm-photo-wide img { aspect-ratio: 16 / 10; }
.mgm-photo-square img { aspect-ratio: 1 / 1; }

/* Photo caption strips */
.mgm-strip {
	display: grid;
	gap: clamp(14px, 2vw, 20px);
}

.mgm-strip figure { margin: 0; }

.mgm-strip figcaption,
.mgm-strip .wp-element-caption,
.mgm-strip .mgm-strip-caption {
	margin-top: 10px;
	font: var(--text-caption);
	color: var(--text-muted);
	text-align: left;
}

/* Every column of a strip is the same width; images fill their column */
.mgm-strip > * { min-width: 0; }
.mgm-strip .wp-block-image { width: 100%; }

@media (min-width: 900px) {
	.mgm-strip-2 { grid-template-columns: repeat(2, 1fr); }
	.mgm-strip-3 { grid-template-columns: repeat(3, 1fr); }
	.mgm-strip-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------
   7. Heroes
   --------------------------------------------------------------- */

/* 7a. Two-column hero (Home) */
.mgm-hero { padding: 26px 0 34px; }

@media (min-width: 900px) {
	.mgm-hero { padding: clamp(40px, 6vw, 84px) 0 clamp(44px, 6vw, 80px); }
}

.mgm-hero .mgm-hero-grid {
	display: grid;
	gap: clamp(28px, 4vw, 52px);
	align-items: stretch;
}

@media (min-width: 900px) {
	.mgm-hero .mgm-hero-grid { grid-template-columns: 1fr 1.02fr; }
}

.mgm-hero h1 {
	font: var(--text-display-xl);
	color: var(--soft-black);
}

.mgm-hero .mgm-lede {
	font: var(--text-lead);
	color: var(--text-body);
	margin-top: 22px;
	max-width: 44ch;
}

.mgm-hero .mgm-cta,
.mgm-cta-row {
	display: flex;
	gap: 14px;
	margin-top: 34px;
	flex-wrap: wrap;
}

.mgm-hero .mgm-photo img { aspect-ratio: 4 / 3; }

@media (min-width: 900px) {
	/* The photo column stretches to match the height of the headline column,
	   so the photograph fills it rather than leaving the frame showing. */
	.mgm-hero .mgm-photo { align-self: stretch; }

	.mgm-hero .mgm-photo img {
		height: 100%;
		min-height: 420px;
		aspect-ratio: auto;
		object-fit: cover;
	}
}

/* Editorial on desktop, centered on mobile */
@media (max-width: 899px) {
	.mgm-hero .mgm-hero-text { text-align: center; }
	.mgm-hero .mgm-lede { margin-inline: auto; }
	.mgm-hero .mgm-cta { justify-content: center; margin-top: 26px; }
}

/* 7b. Full-width banner hero */
.mgm-bhero {
	position: relative;
	overflow: hidden;
	background: var(--charcoal);
}

.mgm-bhero > figure,
.mgm-bhero .mgm-bhero-img {
	margin: 0;
}

.mgm-bhero img {
	display: block;
	width: 100%;
	height: 290px;
	object-fit: cover;
}

@media (min-width: 900px) {
	.mgm-bhero img { height: clamp(300px, 34vw, 440px); }
}

.mgm-bhero .mgm-bhero-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(26px, 4vw, 54px) 0 clamp(24px, 3.4vw, 44px);
	background: linear-gradient(to top, rgba(14,12,10,.82), rgba(14,12,10,.5) 48%, rgba(14,12,10,0));
}

.mgm-bhero .mgm-eyebrow { color: var(--gold-200); }

.mgm-bhero h1 {
	font: var(--text-display-l);
	color: var(--text-on-dark);
	margin-top: 12px;
	max-width: 22ch;
}

/* Left-scrim variant (Services) — keeps the right of the photo bright.

   The caption box spans the full width so the .mgm-wrap inside it centres on
   the same 1080px grid as the header and the rest of the page. Constraining
   the box itself (as the prototype's fixed-width stage could afford to do)
   pins the heading to the viewport edge instead, which on a wide screen puts
   it hundreds of pixels left of every other page's hero. The scrim is the
   gradient, not the box. */
@media (min-width: 900px) {
	.mgm-bhero.is-left .mgm-bhero-cap {
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-block: clamp(24px, 4vw, 48px);
		background: linear-gradient(
			to right,
			rgba(14,12,10,.84) 0%,
			rgba(14,12,10,.62) 30%,
			rgba(14,12,10,.30) 50%,
			rgba(14,12,10,0) 68%
		);
	}

	/* The caption box is a column flex container, and `margin-inline: auto`
	   on a flex item cancels the default stretch — the wrapper would shrink
	   to fit its text and centre that instead of centring the 1080px grid.
	   An explicit width restores the intended behaviour. */
	.mgm-bhero.is-left .mgm-bhero-cap > .mgm-wrap {
		width: 100%;
	}
}

/* 7c. Circle-portrait hero (About) */
.mgm-chero {
	text-align: center;
	padding: clamp(34px, 5vw, 64px) 0 clamp(20px, 3vw, 32px);
}

.mgm-chero .mgm-photo {
	width: clamp(190px, 22vw, 270px);
	height: clamp(190px, 22vw, 270px);
	margin: 0 auto clamp(18px, 2.4vw, 26px);
}

.mgm-chero h1 {
	font: var(--text-display-l);
	color: var(--soft-black);
}

/* 7d. Inner page header */
.mgm-phead {
	padding: 32px 0 20px;
	text-align: center;
}

@media (min-width: 900px) {
	.mgm-phead { padding: clamp(46px, 6vw, 88px) 0 clamp(28px, 4vw, 44px); }
}

.mgm-phead h1 {
	font: var(--text-display-l);
	color: var(--soft-black);
}

.mgm-phead .mgm-lede {
	margin: 20px auto 0;
	max-width: 56ch;
	font: var(--text-lead);
	color: var(--text-body);
}

.mgm-phead .mgm-starrule {
	max-width: 220px;
	margin: 24px auto 0;
}

/* ---------------------------------------------------------------
   8. Philosophy / constellation band
   --------------------------------------------------------------- */
.mgm-philosophy {
	position: relative;
	overflow: hidden;
	background: var(--charcoal);
	/* The scrim carries the poem's contrast, not the photograph. Deepened from
	   .38/.46 so the italic serif holds up against the lit table settings. */
	background-image:
		linear-gradient(rgba(18,15,12,.62), rgba(18,15,12,.70)),
		var(--mgm-constellation);
	background-size: cover;
	background-position: center;
}

.mgm-philosophy .mgm-inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 2;
}

.mgm-poem {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(20px, 2.4vw, 27px);
	line-height: 1.7;
	color: var(--text-on-dark);
}

.mgm-poem .lead { font-weight: 600; font-style: normal; }
.mgm-poem .soft { opacity: .82; }

.mgm-poem .gold-moments {
	font-family: var(--font-script);
	font-style: normal;
	font-size: 1.35em;
	color: var(--gold-200);
	display: inline-block;
	margin-top: 6px;
}

.mgm-philosophy .mgm-constline {
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid var(--border-gold);
	font: var(--text-quote);
	font-style: italic;
	line-height: 1.45;
	color: var(--text-on-dark);
}

.mgm-philosophy .mgm-strip figcaption,
.mgm-philosophy .mgm-strip .wp-element-caption { color: #B5AC9C; }

/* ---------------------------------------------------------------
   9. Home: intro block
   --------------------------------------------------------------- */
.mgm-introblk {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

@media (min-width: 900px) {
	.mgm-introblk { grid-template-columns: .8fr 1.2fr; }
}

.mgm-introblk .mgm-photo { max-width: 340px; }

.mgm-introblk .mgm-lede {
	font: var(--text-lead);
	color: var(--text-body);
}

.mgm-introblk .mgm-hi {
	font-family: var(--font-script);
	font-size: 38px;
	color: var(--text-gold);
	margin-bottom: 18px;
	line-height: 1.2;
}

@media (max-width: 899px) {
	.mgm-introblk { text-align: center; }
	.mgm-introblk .mgm-lede { margin-inline: auto; }
	.mgm-introblk .mgm-txtlink { justify-content: center; }
}

/* ---------------------------------------------------------------
   10. Celebration categories (Home)
   --------------------------------------------------------------- */
.mgm-celcats {
	display: grid;
	gap: clamp(48px, 7vw, 96px);
}

.mgm-celcat {
	display: grid;
	gap: clamp(20px, 2.6vw, 34px);
}

.mgm-celcat .mgm-cathero {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-image);
	border: 1px solid var(--warm-taupe);
	margin: 0;
}

.mgm-celcat .mgm-cathero img {
	display: block;
	width: 100%;
	height: clamp(240px, 32vw, 420px);
	object-fit: cover;
}

.mgm-celcat .mgm-catlabel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: clamp(24px, 4vw, 44px);
	background: linear-gradient(to top, rgba(14,12,10,.78), rgba(14,12,10,0));
	text-align: center;
}

.mgm-celcat .mgm-catlabel h3,
.mgm-celcat .mgm-catlabel h2 {
	font: var(--text-display-m);
	color: var(--text-on-dark);
	margin: 0;
}

.mgm-celcat .mgm-catrow {
	display: grid;
	gap: clamp(20px, 3vw, 44px);
	align-items: center;
}

@media (min-width: 900px) {
	.mgm-celcat .mgm-catrow { grid-template-columns: 1fr 1fr; }
	.mgm-celcat .mgm-catrow.is-reversed > :first-child { order: 2; }
}

.mgm-celcat .mgm-catphoto img { aspect-ratio: 4 / 3; }

.mgm-celcat .mgm-cattext p {
	font: var(--text-body-l);
	color: var(--text-body);
	margin: 0;
}

.mgm-perfect { margin-top: clamp(18px, 2vw, 26px); }
.mgm-perfect .mgm-eyebrow { margin: 0; }

.mgm-perfect ul {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.mgm-perfect li {
	position: relative;
	padding-left: 22px;
	font: var(--text-body);
	color: var(--soft-black);
}

.mgm-perfect li::before {
	content: "✦";
	position: absolute;
	left: 0;
	top: 1px;
	font-size: 10px;
	color: var(--gold-400);
}

/* ---------------------------------------------------------------
   11. Cards, journeys, tiers, details
   --------------------------------------------------------------- */
.mgm-cards { display: grid; gap: clamp(20px, 3vw, 34px); }

@media (min-width: 900px) {
	.mgm-cards.c2 { grid-template-columns: repeat(2, 1fr); }
	.mgm-cards.c3 { grid-template-columns: repeat(3, 1fr); }
	.mgm-cards.c4 { grid-template-columns: repeat(4, 1fr); }
}

/* Journey steps */
.mgm-journey { display: grid; gap: clamp(24px, 3vw, 36px); }

@media (min-width: 900px) {
	.mgm-journey.j3 { grid-template-columns: repeat(3, 1fr); }
	/* Grid already supports a 4th step — see CHANGES.md */
	.mgm-journey.j4 { grid-template-columns: repeat(4, 1fr); }
}

.mgm-step { text-align: center; }
.mgm-step .mgm-ico { margin: 0 auto 16px; }

.mgm-step .n {
	font: 700 10px/1 var(--font-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-gold);
}

.mgm-step h3 { font: var(--text-heading); margin-top: 8px; }
.mgm-step p { margin-top: 9px; font: var(--text-body); color: var(--text-body); }
.mgm-step .mgm-photo { margin-bottom: 20px; }
.mgm-step .mgm-photo img { aspect-ratio: 4 / 3; }

/* Thin-line icon wrapper. Icon set is swappable — replace the inline SVG. */
.mgm-ico {
	display: inline-block;
	width: 44px;
	height: 44px;
	color: var(--deep-olive);
}

.mgm-ico svg { width: 100%; height: 100%; display: block; }

/* Promises list */
.mgm-promises {
	display: grid;
	gap: 14px;
	max-width: 720px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.mgm-promises { grid-template-columns: 1fr 1fr; }
}

.mgm-promises li {
	list-style: none;
	display: flex;
	gap: 13px;
	align-items: flex-start;
	font: var(--text-body-l);
	color: var(--soft-black);
}

.mgm-promises .mgm-ico { flex: 0 0 auto; margin-top: 2px; width: 26px; height: 26px; }

/* Service tier cards */
.mgm-tiers {
	display: grid;
	gap: clamp(22px, 3vw, 30px);
	align-items: stretch;
}

@media (min-width: 900px) {
	.mgm-tiers { grid-template-columns: repeat(3, 1fr); }
}

.mgm-tier {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	padding: var(--card-padding);
}

.mgm-tier.is-featured { border-color: var(--gold-400); }

.mgm-tier .mgm-tphoto {
	min-height: 270px;
	margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) 20px;
	border-radius: var(--radius-card) var(--radius-card) 0 0;
	border: 0;
	overflow: hidden;
}

.mgm-tier .mgm-tphoto img {
	width: 100%;
	height: 270px;
	object-fit: cover;
	display: block;
}

.mgm-tier .lvl {
	font: 700 10px/1 var(--font-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-gold);
}

.mgm-tier h3 { font: var(--text-heading); margin-top: 12px; }

.mgm-tier .sub {
	margin-top: 6px;
	font: 700 12px/1.4 var(--font-sans);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.mgm-tier .tagq {
	margin-top: 14px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 19px;
	color: var(--text-olive);
	line-height: 1.4;
}

.mgm-tier .desc { margin-top: 14px; font: var(--text-body); color: var(--text-body); }

.mgm-tier .inclhead {
	margin-top: 20px;
	font: 700 11px/1 var(--font-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--soft-black);
}

.mgm-tier ul { margin: 12px 0 0; padding: 0; list-style: none; }

.mgm-tier li {
	list-style: none;
	padding-left: 20px;
	position: relative;
	font: var(--text-body);
	color: var(--text-body);
	margin-top: 9px;
}

.mgm-tier li::before {
	content: "✦";
	position: absolute;
	left: 0;
	top: 3px;
	color: var(--gold-400);
	font-size: 11px;
}

.mgm-tier .note {
	margin-top: 16px;
	font: var(--text-caption);
	color: var(--text-muted);
	font-style: italic;
}

.mgm-tier .mgm-tier-cta { margin-top: auto; padding-top: 22px; }

/* Creative-detail cards */
.mgm-details { display: grid; gap: clamp(20px, 2.6vw, 30px); }

@media (min-width: 900px) {
	.mgm-details { grid-template-columns: repeat(3, 1fr); }
}

.mgm-detail {
	background: var(--white);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	padding: var(--card-padding);
}

.mgm-detail .mgm-ico { width: 36px; height: 36px; margin-bottom: 14px; }
.mgm-detail h3 { font: var(--text-heading); font-size: 21px; }
.mgm-detail p { margin-top: 9px; font: var(--text-body); color: var(--text-body); }

/* Celebration-type grid */
.mgm-typegrid { display: grid; gap: clamp(16px, 2.4vw, 28px); }

@media (min-width: 900px) {
	.mgm-typegrid { grid-template-columns: repeat(3, 1fr); }
}

.mgm-typecard { text-align: left; }
.mgm-typecard .mgm-photo { margin-bottom: 13px; }
.mgm-typecard .mgm-photo img { aspect-ratio: 4 / 3; }
.mgm-typecard h3 { font: var(--text-heading); font-size: 20px; }
.mgm-typecard p { margin-top: 6px; font: var(--text-caption); color: var(--text-muted); }

/* Signature service rows */
.mgm-sigblock { margin-top: clamp(34px, 4.5vw, 58px); }
.mgm-sigblock h3 { font: var(--text-heading); font-size: 23px; }

.mgm-sigblock .cap {
	margin-top: 7px;
	font: var(--text-body);
	color: var(--text-body);
	max-width: 64ch;
}

.mgm-sigrow { display: grid; gap: 12px; margin-top: 18px; }

@media (min-width: 900px) {
	.mgm-sigrow { grid-template-columns: repeat(4, 1fr); }
	.mgm-sigrow.s3 { grid-template-columns: repeat(3, 1fr); }
}

.mgm-sigrow .mgm-photo img { aspect-ratio: 1 / 1; }

/* ---------------------------------------------------------------
   12. Feature / prose / story blocks
   --------------------------------------------------------------- */
/* "The Experience" feature block.

   Three things were wrong here and they compounded:

   1. `.wp-block-group.mgm-wrap` (0,2,0) out-specified `.mgm-feature` (0,1,0),
      so the block was 1080px wide instead of the intended 820px.
   2. The prose column had `max-width: 66ch` but no auto margin, so it sat
      170px left of the centred heading above it.
   3. `text-align: center` on the wrapper was inherited by four paragraphs of
      body copy, giving ragged edges on both sides — and it meant the editor's
      own alignment buttons appeared to do nothing.

   Centring is now applied to the framing (eyebrow, heading) rather than
   blanket-inherited, so the alignment control in the editor behaves normally
   on any paragraph. Body copy follows the brief's rule: editorial alignment
   on desktop, centred on mobile. */
.wp-block-group.mgm-feature,
.mgm-feature {
	max-width: 820px;
	margin-inline: auto;
}

.mgm-feature > .mgm-eyebrow,
.mgm-feature > h2,
.mgm-feature > .mgm-display-l {
	text-align: center;
}

.mgm-feature .mgm-prose {
	margin-inline: auto;
	text-align: center;
}

@media (min-width: 900px) {
	.mgm-feature .mgm-prose { text-align: left; }
}

.mgm-feature .mgm-prose p {
	font: var(--text-body-l);
	color: var(--text-body);
	margin-top: var(--gap-para);
}

/* Photography never sits flush against the copy above it (brief §5:
   "text ↔ photography gap: at least 32–48px"). */
.mgm-feature .mgm-photo,
.mgm-prose + .mgm-photo,
.mgm-prose + .wp-block-image {
	margin-top: var(--gap-text-photo);
}

/* Whatever the editor's alignment control sets always wins. */
.mgm-feature .has-text-align-left { text-align: left; }
.mgm-feature .has-text-align-center { text-align: center; }
.mgm-feature .has-text-align-right { text-align: right; }

.mgm-feature .mgm-prose p:first-child { margin-top: 26px; }

.mgm-prose { max-width: var(--prose-max); }
.mgm-prose.is-wide { max-width: 760px; }

.mgm-prose h2 {
	font: var(--text-display-m);
	color: var(--soft-black);
	margin-top: 8px;
}

.mgm-prose p {
	font: var(--text-body-l);
	color: var(--text-body);
	margin-top: var(--gap-para, 20px);
}

.mgm-prose p:first-child { margin-top: 22px; }

.mgm-about-grid {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

@media (min-width: 900px) {
	.mgm-about-grid { grid-template-columns: .85fr 1.15fr; }
}

.mgm-about-grid .mgm-photo img { aspect-ratio: 3 / 4; }

@media (min-width: 900px) {
	
}

.mgm-storyblock {
	padding: clamp(30px, 5vw, 64px) 0;
	border-top: 1px solid var(--border-hairline);
}

.mgm-storyblock .mgm-inner { max-width: 760px; margin: 0 auto; }

.mgm-storyblock.with-photo {
	display: grid;
	gap: clamp(28px, 4vw, 52px);
	align-items: center;
	max-width: 1080px;
}

@media (min-width: 900px) {
	.mgm-storyblock.with-photo { grid-template-columns: 1.15fr .85fr; }
	.mgm-storyblock.with-photo.is-flipped > :first-child { order: 2; }
}

.mgm-storyblock .mgm-photo img { aspect-ratio: 3 / 4; }

@media (min-width: 900px) {
	
}

.mgm-promise {
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
}

.mgm-promise h2 {
	font: var(--text-quote);
	font-style: italic;
	color: var(--soft-black);
	line-height: 1.42;
}

/* About page: the deliberately airiest page */
.mgm-page-about .mgm-sec,
.mgm-page-about .mgm-storyblock {
	padding-block: clamp(58px, 9vw, 124px);
}

.mgm-page-about .mgm-prose p {
	margin-top: 32px;
	line-height: 1.92;
}

.mgm-page-about .mgm-prose p:first-child { margin-top: 26px; }

/* "Moments I'll never grow tired of watching" — italic ✦ bullets */
.mgm-loves {
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 20px;
}

.mgm-loves li {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 20px;
	line-height: 1.68;
	color: var(--soft-black);
	padding-left: 28px;
	position: relative;
}

.mgm-loves li::before {
	content: "✦";
	position: absolute;
	left: 0;
	top: 6px;
	color: var(--gold-400);
	font-size: 12px;
}

/* Gold-ruled closing block */
.mgm-closingline {
	margin-top: 38px;
	padding-top: 28px;
	border-top: 1px solid var(--border-gold);
}

.mgm-closingline p {
	font-family: var(--font-serif);
	font-size: 22px;
	line-height: 1.6;
	color: var(--soft-black);
	margin-top: 14px;
}

.mgm-closingline p:first-child { margin-top: 0; }

/* ---------------------------------------------------------------
   13. Gallery — editorial mixed grid
   Equal row heights so a wide tile never leaves an empty framed box
   beside it; photography fills every cell.
   --------------------------------------------------------------- */
.mgm-gallery.wp-block-gallery,
.mgm-gallery {
	display: grid;
	gap: clamp(12px, 2vw, 18px);
	grid-auto-rows: 210px;
}

@media (min-width: 640px) {
	.mgm-gallery.wp-block-gallery,
	.mgm-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.mgm-gallery.wp-block-gallery,
	.mgm-gallery {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 260px;
	}
}

.mgm-gallery .wp-block-image,
.mgm-gallery figure {
	margin: 0;
	border: 1px solid var(--warm-taupe);
	border-radius: var(--radius-image);
	overflow: hidden;
	width: auto !important;
	height: 100%;
	line-height: 0;
}

.mgm-gallery img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	display: block;
}

@media (min-width: 640px) {
	.mgm-gallery .is-wide,
	.mgm-gallery .mgm-tile-wide { grid-column: span 2; grid-row: span 2; }
	.mgm-gallery .is-tall,
	.mgm-gallery .mgm-tile-tall { grid-row: span 2; }
}

.mgm-galsec { margin-top: clamp(40px, 5vw, 72px); }
.mgm-galhead { margin-bottom: 20px; }
.mgm-galhead h2 { font: var(--text-display-m); color: var(--soft-black); }
.mgm-galhead p { margin-top: 8px; font: var(--text-lead); color: var(--text-body); }

.mgm-pullq {
	text-align: center;
	font: var(--text-quote);
	font-style: italic;
	color: var(--soft-black);
	max-width: 680px;
	margin: clamp(40px, 6vw, 80px) auto;
	line-height: 1.45;
	border: 0;
	padding: 0;
}

.mgm-pullq::before { content: "\201C"; color: var(--gold-400); }
.mgm-pullq::after  { content: "\201D"; color: var(--gold-400); }

/* ---------------------------------------------------------------
   13b. Gallery — celebration circles + pinned reel
   --------------------------------------------------------------- */

/* --- Browse by celebration ------------------------------------ */
.mgm-cintro {
	text-align: center;
	max-width: 58ch;
	margin: 0 auto;
}

.mgm-cintro h2 { font: var(--text-display-m); color: var(--soft-black); }
.mgm-cintro p  { margin-top: 12px; font: var(--text-lead); color: var(--text-body); }

/* Capped so four tiles fit the first row and the remaining three centre
   underneath: 4 × 132px + 3 × 34px = 630px. */
.mgm-ctiles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px 34px;
	max-width: 634px;
	margin: clamp(30px, 4vw, 46px) auto 0;
}

.mgm-ctile {
	position: relative;
	width: 132px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
	text-align: center;
}

/* No `position` here on purpose — the stretched link below resolves against
   .mgm-ctile, so the circular clip must not sit between the two. */
:root .mgm-ctile .mgm-ctile-ph {
	overflow: hidden;
	box-sizing: border-box;
	width: 132px;
	height: 132px;
	margin: 0;
	border-radius: 50%;
	border: var(--photo-frame);
	background-color: var(--linen);
	line-height: 0;
	transition: box-shadow var(--duration-fast) var(--ease-gentle);
}

.mgm-ctile-ph a { display: block; width: 100%; height: 100%; }

.mgm-ctile-ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s var(--ease-gentle);
}

/* One link per tile. The anchor's hit area is stretched over the label rather
   than giving each tile a second, redundant link to the same page. */
.mgm-ctile-ph a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-sm);
}

.mgm-ctile-label {
	font: 700 11.5px/1.3 var(--font-sans);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--soft-black);
	transition: color var(--duration-fast) var(--ease-gentle);
}

.mgm-ctile:hover .mgm-ctile-ph img,
.mgm-ctile:focus-within .mgm-ctile-ph img { transform: scale(1.07); }

.mgm-ctile:hover .mgm-ctile-label,
.mgm-ctile:focus-within .mgm-ctile-label { color: var(--deep-olive); }

/* The ring belongs on the circle, not on the stretched rectangle. */
.mgm-ctile-ph a:focus-visible { box-shadow: none; }
.mgm-ctile:focus-within .mgm-ctile-ph { box-shadow: var(--shadow-focus); }

@media (max-width: 639px) {
	.mgm-ctiles { gap: 18px 20px; max-width: 336px; }
	.mgm-ctile  { width: 74px; gap: 8px; }

	:root .mgm-ctile .mgm-ctile-ph { width: 74px; height: 74px; }

	.mgm-ctile-label { font-size: 9px; letter-spacing: .08em; }
}

/* --- The pinned reel ------------------------------------------ */

/* Default state is the no-JS one: a plain horizontal scroller. JS adds
   `is-pinned` only where sticky pinning is supported and wanted, so a failed
   script leaves a gallery that still reads and still scrolls. */
.mgm-hscroll {
	/* Vertical scroll distance per pixel of horizontal travel. 1 is a literal
	   1:1 map; lower feels faster. Read by assets/js/gallery-hscroll.js. */
	--mgm-hscroll-pace: .75;
	/* Held down while the photography is only ~624px on the long edge — raise
	   it once Meredith's full-resolution originals are in the library. */
	--mgm-reel-max-h: 560px;
	/* One length drives the whole strip: slide widths are multiples of the
	   slide height. Sizing them with height:100% + aspect-ratio instead makes
	   the width of a max-content track depend on the track's own width, and
	   every slide resolves to the same wrong number. */
	--mgm-reel-h: min(56vh, 420px);

	position: relative;
	background: var(--ivory);
	margin-top: clamp(40px, 5vw, 72px);
}

.mgm-hsticky {
	position: relative;
	padding-block: clamp(28px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mgm-hscroll.is-pinned .mgm-hsticky {
	position: sticky;
	top: 0;
	height: var(--mgm-vh, 100vh);
	overflow: hidden;
	padding-block: 0;
}

/* Core's gallery is a wrapping flex grid with its own gap variable and
   flex-grow on every child. This is a single-line filmstrip instead, so those
   defaults are overridden explicitly rather than nudged.
   Unpinned, the track is itself the scroller — that keeps the hint below it
   out of the horizontal scroll. Pinned, it is a max-content block that JS
   translates, which also makes scrollWidth exact including both paddings. */
:root .mgm-htrack.wp-block-gallery,
:root .mgm-htrack.wp-block-gallery.has-nested-images {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	margin: 0;
	padding: 0 clamp(20px, 4vw, 56px);
	height: var(--mgm-reel-h);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.mgm-hscroll.is-pinned {
	--mgm-reel-h: min(calc(var(--mgm-vh, 100vh) * .66), var(--mgm-reel-max-h));
}

.mgm-hscroll.is-pinned .mgm-htrack.wp-block-gallery,
.mgm-hscroll.is-pinned .mgm-htrack.wp-block-gallery.has-nested-images {
	width: max-content;
	overflow: visible;
	scroll-snap-type: none;
	will-change: transform;
}

/* Slide widths come from the slide height, so the track measures correctly
   before any photograph has decoded. Mixed shapes keep the strip editorial:
   4:3 by default, every third square, every fifth portrait.

   The `:not(#individual-image)` suffix is core's own: block-library sizes
   gallery children with it purely to borrow an ID's specificity, and no number
   of classes beats an ID. Overriding those declarations means carrying the
   same suffix. */
:root .mgm-htrack.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image),
:root .mgm-htrack.wp-block-gallery figure:not(#individual-image) {
	flex: 0 0 auto;
	display: block;
	height: var(--mgm-reel-h);
	width: calc(var(--mgm-reel-h) * 4 / 3);
	max-width: none;
	margin: 0;
	overflow: hidden;
	border: var(--photo-frame);
	border-radius: var(--radius-image);
	background-color: var(--linen);
	line-height: 0;
	scroll-snap-align: center;
}

:root .mgm-htrack.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(3n+2) { width: var(--mgm-reel-h); }
:root .mgm-htrack.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(5n+3) { width: calc(var(--mgm-reel-h) * 3 / 4); }

:root .mgm-htrack.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img,
:root .mgm-htrack.wp-block-gallery img:not(#individual-image) {
	width: 100%;
	height: 100%;
	max-width: none;
	flex: none;
	object-fit: cover;
	display: block;
}

/* core/gallery renders a <figcaption> slot even when empty. */
:root .mgm-htrack.wp-block-gallery figcaption { display: none; }

/* Progress hairline — meaningless without the pinning, so it only appears
   with it. */
.mgm-hprog {
	display: none;
	position: absolute;
	left: clamp(20px, 4vw, 56px);
	right: clamp(20px, 4vw, 56px);
	bottom: clamp(26px, 4vw, 44px);
	height: 2px;
	background: var(--border-hairline);
}

.mgm-hscroll.is-pinned .mgm-hprog { display: block; }

.mgm-hprog i {
	display: block;
	height: 100%;
	background: var(--gold-400);
	transform: scaleX(0);
	transform-origin: left center;
}

.mgm-hhint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(44px, 5.4vw, 64px);
	text-align: center;
	font: 700 10px/1 var(--font-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Without pinning the hint sits under the strip in normal flow. */
.mgm-hscroll:not(.is-pinned) .mgm-hhint {
	position: static;
	margin-top: clamp(18px, 2.4vw, 26px);
}

@media (max-width: 639px) {

	:root .mgm-htrack.wp-block-gallery,
	:root .mgm-htrack.wp-block-gallery.has-nested-images { gap: 10px; }

	.mgm-hscroll.is-pinned {
		--mgm-reel-h: min(calc(var(--mgm-vh, 100vh) * .56), var(--mgm-reel-max-h));
	}
}

@media (prefers-reduced-motion: reduce) {
	.mgm-ctile-ph img { transition: none; }
}

/* --- Celebration pages ---------------------------------------- */
.mgm-gtsec { padding-bottom: clamp(40px, 6vw, 72px); }
.mgm-gtsec .mgm-eyebrow { text-align: center; margin-bottom: 18px; }

.mgm-gtchips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.mgm-gtchip { margin: 0; }

.mgm-gtchip a {
	display: inline-flex;
	align-items: center;
	font: 700 11px/1 var(--font-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--soft-black);
	border: 1px solid var(--warm-taupe);
	border-radius: 999px;
	padding: 11px 16px;
	background: var(--white);
	transition: border-color var(--duration-fast) var(--ease-gentle);
}

.mgm-gtchip a:hover { border-color: var(--soft-black); color: var(--soft-black); }

.mgm-backlink a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 700 12px/1 var(--font-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.mgm-backlink a:hover { color: var(--soft-black); }

/* ---------------------------------------------------------------
   14. Kind Words
   --------------------------------------------------------------- */
.mgm-kwlist { display: grid; gap: clamp(20px, 3vw, 32px); }

@media (min-width: 900px) {
	.mgm-kwlist { grid-template-columns: 1fr 1fr; }
}

.mgm-kwcard {
	background: var(--white);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	padding: var(--card-padding);
	text-align: left;
}

.mgm-kwcard .top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mgm-stars {
	color: var(--gold-400);
	letter-spacing: 4px;
	font-size: 15px;
}

.mgm-kwcard .gtag {
	font: 700 8px/1 var(--font-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
	border: 1px solid var(--border-hairline);
	border-radius: 3px;
	padding: 5px 7px;
	white-space: nowrap;
}

.mgm-kwcard blockquote,
.mgm-kwcard .mgm-quote {
	font: var(--text-heading);
	font-style: italic;
	color: var(--soft-black);
	margin: 16px 0 0;
	line-height: 1.44;
	border: 0;
	padding: 0;
}

.mgm-who {
	margin-top: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.mgm-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #e6ddca;
	border: 1px solid var(--warm-taupe);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 8px/1.1 var(--font-sans);
	letter-spacing: .05em;
	color: #655B4B;
	text-align: center;
	text-transform: uppercase;
	flex: 0 0 42px;
	overflow: hidden;
}

.mgm-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.mgm-wholabel {
	font: 700 12px/1.4 var(--font-sans);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.mgm-featured-story {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.mgm-featured-story blockquote,
.mgm-featured-story .mgm-quote {
	font: var(--text-quote);
	font-style: italic;
	color: var(--soft-black);
	line-height: 1.5;
	margin: 20px 0 0;
	border: 0;
	padding: 0;
}

/* ---------------------------------------------------------------
   14b. Kind Words — story layout

   This page is meant to read more quietly than the rest of the site: no
   cards, no borders around the quotes, no star ratings. Space does the work
   the chrome does elsewhere, so the measures here are narrower and the
   vertical rhythm is roughly half again as generous as a normal section.
   --------------------------------------------------------------- */

/* The featured quote near the top, the final quote, and the closing line.
   Three sizes of the same idea — centred, italic, nothing else nearby. */
.mgm-kwfeature,
.mgm-kwfinal,
.mgm-kwclosing {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
	border: 0;
	padding: 0;
}

.mgm-kwfeature p,
.mgm-kwfinal p,
.mgm-kwclosing p {
	font-style: italic;
	color: var(--soft-black);
	margin: 0;
}

.mgm-kwfeature cite,
.mgm-kwfinal cite,
.mgm-kwclosing cite {
	display: block;
	font: 700 12px/1.4 var(--font-sans);
	font-style: normal;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.mgm-kwfeature { margin-block: clamp(56px, 9vw, 132px); }
.mgm-kwfeature p { font: 400 clamp(30px, 4.6vw, 54px)/1.28 var(--font-serif); font-style: italic; }
.mgm-kwfeature cite { margin-top: clamp(22px, 2.6vw, 34px); }

.mgm-kwfinal { margin-block: clamp(56px, 8vw, 112px) 0; }
.mgm-kwfinal p { font: var(--text-quote); font-style: italic; }

/* The line the page closes on, after white space rather than a photograph. */
.mgm-kwclosing {
	max-width: 720px;
	margin-block: clamp(60px, 9vw, 128px) clamp(20px, 3vw, 40px);
}
.mgm-kwclosing p { font: var(--text-heading); font-style: italic; color: var(--text-body); }
.mgm-kwclosing cite { margin-top: 18px; }

/* --- One story section ---------------------------------------- */
.mgm-kwstory { padding-block: clamp(52px, 8vw, 104px); }

/* The rules Meredith drew between sections in her plan. */
.mgm-kwstory + .mgm-kwstory,
.mgm-kwstory + .mgm-kwfinal { border-top: 1px solid var(--border-hairline); }

.mgm-kwstory-head {
	font: var(--text-display-m);
	color: var(--soft-black);
	text-align: center;
	margin: 0 0 clamp(30px, 4vw, 52px);
}

.mgm-kwstory-photo { margin: 0 auto clamp(34px, 4.6vw, 60px); }

/* --- The excerpts --------------------------------------------- */
.mgm-kwexcerpts {
	display: grid;
	gap: clamp(30px, 4vw, 50px);
	max-width: 640px;
	margin-inline: auto;
}

.mgm-kwexcerpt {
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
}

.mgm-kwexcerpt p {
	font: var(--text-heading);
	font-style: italic;
	color: var(--soft-black);
	line-height: 1.5;
	margin: 0;
}

.mgm-kwexcerpt cite {
	display: block;
	margin-top: 14px;
	font: 700 11px/1.4 var(--font-sans);
	font-style: normal;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

/* The pull quote that closes a section sits closer to its excerpts than the
   page-level .mgm-pullq margins would put it. */
.mgm-kwstory-pullq { margin-block: clamp(38px, 5vw, 64px) 0; }

/* --- Photograph placement ------------------------------------- */
.mgm-kwstory.is-photo-medium .mgm-kwstory-photo { max-width: 620px; }
.mgm-kwstory.is-photo-wide .mgm-kwstory-photo { max-width: none; }

/* Section one: a small photograph beside the excerpts rather than above
   them. Below 900px it stacks like the others. */
@media (min-width: 900px) {
	.mgm-kwstory.is-photo-side .mgm-kwstory-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
		gap: clamp(36px, 5vw, 72px);
		align-items: start;
	}

	.mgm-kwstory.is-photo-side .mgm-kwstory-photo {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}

	.mgm-kwstory.is-photo-side .mgm-kwexcerpts {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
		max-width: none;
	}

	.mgm-kwstory.is-photo-side .mgm-kwexcerpt { text-align: left; }
}

@media (max-width: 899px) {
	.mgm-kwstory.is-photo-side .mgm-kwstory-photo { max-width: 420px; }
}

/* ---------------------------------------------------------------
   15. Testimonial carousel (progressive enhancement)
   Without JS this renders as a readable stacked list.
   --------------------------------------------------------------- */
.mgm-carousel {
	max-width: 720px;
	margin: 0 auto;
	position: relative;
}

.mgm-carousel .mgm-track { overflow: hidden; }

.mgm-carousel.is-enhanced .mgm-slides {
	display: flex;
	transition: transform .5s var(--ease-gentle);
}

.mgm-carousel.is-enhanced .mgm-slide {
	flex: 0 0 100%;
	padding: 0 8px;
	box-sizing: border-box;
}

.mgm-slide {
	text-align: center;
}

.mgm-slide + .mgm-slide { margin-top: 40px; }
.mgm-carousel.is-enhanced .mgm-slide + .mgm-slide { margin-top: 0; }

.mgm-slide blockquote,
.mgm-slide .mgm-quote {
	font: var(--text-quote);
	font-style: italic;
	color: var(--soft-black);
	margin: 16px 0 0;
	line-height: 1.44;
	border: 0;
	padding: 0;
}

.mgm-slide .mgm-who { justify-content: center; margin-top: 20px; }
.mgm-slide .mgm-avatar { width: 44px; height: 44px; flex-basis: 44px; }
.mgm-slide .mgm-wholabel { text-align: left; font-size: 13px; }

.mgm-dots {
	display: flex;
	gap: 9px;
	justify-content: center;
	margin-top: 26px;
}

.mgm-dots button {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 0;
	background: var(--warm-taupe);
	opacity: .5;
	cursor: pointer;
	padding: 0;
	transition: opacity .2s, background .2s;
	position: relative;
}

/* 44px touch target without changing the visual dot size */
.mgm-dots button::after {
	content: "";
	position: absolute;
	inset: -18px;
}

.mgm-dots button[aria-selected="true"] {
	background: var(--gold-400);
	opacity: 1;
}

.mgm-dots button:focus-visible { box-shadow: var(--shadow-focus); }

.mgm-gsource {
	margin-top: 24px;
	text-align: center;
	font: var(--text-caption);
	color: var(--text-muted);
}

/* ---------------------------------------------------------------
   16. FAQ (core details block)
   --------------------------------------------------------------- */
.mgm-faqlist { max-width: 760px; margin: 0 auto; }

.mgm-faq.wp-block-details,
.mgm-faq {
	border-top: 1px solid var(--border-hairline);
	padding: 22px 0;
	margin: 0;
}

.mgm-faqlist > .mgm-faq:last-child { border-bottom: 1px solid var(--border-hairline); }

.mgm-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font: var(--text-heading);
	font-size: 21px;
	color: var(--soft-black);
	padding: 4px 0;
}

.mgm-faq summary::-webkit-details-marker { display: none; }
.mgm-faq summary::marker { content: ""; }

.mgm-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--text-gold);
	font-size: 22px;
	line-height: 1;
	transition: transform .3s var(--ease-gentle);
}

.mgm-faq[open] summary::after { transform: rotate(45deg); }

.mgm-faq summary:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
	border-radius: var(--radius-sm);
}

.mgm-faq .mgm-answer,
.mgm-faq > *:not(summary) {
	margin-top: 14px;
	font: var(--text-body-l);
	color: var(--text-body);
}

.mgm-faq .is-pending {
	color: var(--text-muted);
	font-style: italic;
}

/* ---------------------------------------------------------------
   17. Contact form
   --------------------------------------------------------------- */
.mgm-formcard { max-width: 760px; margin: 0 auto; }

.mgm-formhead {
	text-align: center;
	margin-bottom: clamp(26px, 4vw, 40px);
}

.mgm-formhead h2 { font: var(--text-display-m); color: var(--soft-black); }

.mgm-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 18px;
}

.mgm-field label {
	font: 700 12px/1 var(--font-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.mgm-field .opt {
	color: var(--text-muted);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	font-size: 11px;
}

.mgm-field input,
.mgm-field select,
.mgm-field textarea {
	font: var(--text-body);
	color: var(--soft-black);
	background: var(--white);
	border: 1px solid var(--warm-taupe);
	border-radius: var(--radius-sm);
	padding: 13px 14px;
	width: 100%;
	font-family: var(--font-sans);
	box-sizing: border-box;
	min-height: 44px;
}

.mgm-field input:focus,
.mgm-field select:focus,
.mgm-field textarea:focus {
	outline: none;
	border-color: var(--deep-olive);
	box-shadow: var(--shadow-focus);
}

.mgm-field textarea { resize: vertical; min-height: 130px; }

.mgm-frow { display: grid; gap: 16px; }

@media (min-width: 900px) {
	.mgm-frow { grid-template-columns: 1fr 1fr; }
}

.mgm-req { color: #8A4A22; font-weight: 700; }

.mgm-help {
	font: var(--text-caption);
	color: var(--text-muted);
	margin-top: 7px;
}

/* v3: pink removed — sage field, black text, gold star */
.mgm-prenote {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	background: #EDF0E9;
	border: 1px solid var(--border-green);
	border-radius: var(--radius-sm);
	padding: 16px 18px;
	margin: 6px 0 22px;
	font: var(--text-body);
	color: #3A3D35;
}

.mgm-prenote .st {
	color: var(--text-gold);
	flex: 0 0 auto;
	font-size: 15px;
	line-height: 1.5;
}

/* Cognito Forms embed — styled around, never inside, the iframe */
.mgm-cognito-embed {
	margin-top: clamp(20px, 3vw, 32px);
}

.mgm-cognito-embed iframe { width: 100% !important; border: 0; }

/* "Here's what to expect" */
.mgm-expect { display: grid; gap: clamp(22px, 3vw, 34px); }

@media (min-width: 900px) {
	.mgm-expect { grid-template-columns: repeat(3, 1fr); }
}

.mgm-estep { text-align: center; }

.mgm-estep .n {
	/* decorative ring; the numeral is large enough for AA at 3:1 */
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--gold-400);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
	font-family: var(--font-serif);
	font-size: 19px;
	color: var(--text-gold);
}

.mgm-estep h3 { font: var(--text-heading); font-size: 21px; }
.mgm-estep p { margin-top: 9px; font: var(--text-body); color: var(--text-body); }

.mgm-estep .flag {
	display: block;
	margin-top: 6px;
	font: var(--text-caption);
	color: var(--text-muted);
	font-style: italic;
}

/* Flat-lay band */
.mgm-flatlay {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-image);
	border: 1px solid var(--warm-taupe);
	margin: 0;
}

.mgm-flatlay img {
	display: block;
	width: 100%;
	height: clamp(230px, 26vw, 340px);
	object-fit: cover;
}

.mgm-flatlay .msg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: clamp(22px, 3vw, 36px);
	background: linear-gradient(to top, rgba(14,12,10,.82), rgba(14,12,10,0));
	font: var(--text-quote);
	font-style: italic;
	color: var(--text-on-dark);
	text-align: center;
}

/* Contact details block */
.mgm-cinfo {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	margin-top: 22px;
	text-align: center;
}

.mgm-cinfo a { color: var(--text-olive); }
.mgm-cinfo a:hover { color: var(--soft-black); }
.mgm-cinfo .is-pending { color: var(--text-muted); font-style: italic; }

/* ---------------------------------------------------------------
   18. CTA bands
   --------------------------------------------------------------- */
.mgm-ctaband { text-align: center; }
.mgm-ctaband h2 { font: var(--text-display-m); }

.mgm-ctaband .mgm-lede {
	margin: 18px auto 0;
	max-width: 56ch;
	color: var(--text-body);
	font: var(--text-lead);
}

.mgm-ctaband .mgm-cta,
.mgm-ctaband .wp-block-buttons {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-top: 30px;
	flex-wrap: wrap;
}

/* Black closing bands (v3: bottom banners are black, never green) */
.mgm-band-black { background: var(--charcoal); }
.mgm-band-black h1,
.mgm-band-black h2,
.mgm-band-black h3 { color: var(--text-on-dark); }
.mgm-band-black p,
.mgm-band-black .mgm-lede,
.mgm-band-black li { color: #D6CFC0; }
.mgm-band-black .mgm-eyebrow { color: var(--gold-200); }
.mgm-band-black .mgm-txtlink,
.mgm-band-black .mgm-txtlink a { color: var(--gold-200); }
.mgm-band-black .mgm-txtlink a:hover { color: #fff; }
.mgm-band-black .mgm-btn-ghost .wp-block-button__link,
.mgm-band-black a.mgm-btn-ghost {
	color: var(--text-on-dark);
	border-color: var(--text-on-dark);
}
.mgm-band-black .mgm-btn-ghost .wp-block-button__link:hover,
.mgm-band-black a.mgm-btn-ghost:hover {
	background: var(--text-on-dark);
	color: var(--charcoal);
}
.mgm-band-black .mgm-gsource,
.mgm-band-black .mgm-cinfo .is-pending { color: #A69E90; }
.mgm-band-black .mgm-cinfo a { color: var(--gold-200); }
.mgm-band-black .mgm-cinfo a:hover { color: #fff; }
.mgm-band-black .mgm-starrule .ln { background: var(--gold-400); opacity: .5; }
.mgm-band-black .mgm-strip figcaption,
.mgm-band-black .mgm-strip .wp-element-caption { color: #B5AC9C; }

/* ---------------------------------------------------------------
   19. Footer
   --------------------------------------------------------------- */
.mgm-footer {
	background: var(--linen);
	border-top: 1px solid var(--border-hairline);
	padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 4vw, 40px);
}

.mgm-footer .mgm-foot-grid {
	display: grid;
	gap: 28px;
}

@media (min-width: 900px) {
	.mgm-footer .mgm-foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.mgm-footer .mgm-brand { margin-bottom: 14px; }

.mgm-footer p {
	font: var(--text-caption);
	color: var(--text-muted);
	max-width: 34ch;
}

.mgm-footer h2,
.mgm-footer h4 {
	font: 700 11px/1 var(--font-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 14px;
}

.mgm-footer .mgm-flinks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mgm-footer .mgm-flinks a {
	font: var(--text-body);
	color: var(--soft-black);
}

.mgm-footer .mgm-flinks a:hover { color: var(--deep-olive); }

.mgm-footer .mgm-flinks .is-pending {
	color: var(--text-muted);
	font-style: italic;
	cursor: default;
}

.mgm-footer .mgm-foot-base {
	margin-top: 34px;
	padding-top: 20px;
	border-top: 1px solid var(--border-hairline);
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font: var(--text-caption);
	color: var(--text-muted);
}

/* Privacy link and build credit. Quiet by default, so the base row stays a
   hairline of small print rather than two competing links.
   The 34ch measure above is for the brand blurb; on one line of small print it
   only orphans the last two words. */
.mgm-footer .mgm-foot-meta {
	max-width: none;
	text-align: right;
}

.mgm-footer .mgm-foot-meta a {
	color: var(--text-muted);
	text-decoration: underline;
	text-decoration-color: var(--border-taupe);
	text-underline-offset: 3px;
}

.mgm-footer .mgm-foot-meta a:hover,
.mgm-footer .mgm-foot-meta a:focus-visible {
	color: var(--soft-black);
	text-decoration-color: currentColor;
}

.mgm-footer .mgm-foot-sep {
	margin: 0 6px;
	color: var(--border-taupe);
}

/* Footer nav rendered by the core navigation block */
.mgm-footer .wp-block-navigation {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.mgm-footer .wp-block-navigation .wp-block-navigation-item__content {
	font: var(--text-body);
	color: var(--soft-black);
}

.mgm-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--deep-olive);
}

/* ---------------------------------------------------------------
   20. Motion — gentle discovered reveal
   --------------------------------------------------------------- */
.mgm-reveal-on .mgm-reveal {
	opacity: 0;
	transform: translateY(16px);
}

.mgm-reveal-on .mgm-reveal.is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--duration-reveal) var(--ease-gentle),
		transform var(--duration-reveal) var(--ease-gentle);
}

@media (prefers-reduced-motion: reduce) {
	.mgm-reveal { opacity: 1 !important; transform: none !important; }
	.mgm-carousel .mgm-slides { transition: none !important; }
	* { scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------
   21. 404 / search
   --------------------------------------------------------------- */
.mgm-utility {
	padding-block: clamp(60px, 10vw, 140px);
	text-align: center;
}

.mgm-utility h1 { font: var(--text-display-l); color: var(--soft-black); }

.mgm-utility p {
	margin: 20px auto 0;
	max-width: 52ch;
	font: var(--text-lead);
	color: var(--text-body);
}

.mgm-utility .wp-block-search__input {
	border: 1px solid var(--warm-taupe);
	border-radius: var(--radius-sm);
	padding: 13px 14px;
	font-family: var(--font-sans);
	min-height: 44px;
}

.mgm-utility .wp-block-search__button {
	background: var(--gold-100);
	color: var(--text-on-gold);
	border: 1px solid var(--gold-100);
	border-radius: var(--radius-button);
	font: 700 14px/1 var(--font-sans);
	letter-spacing: .06em;
	padding: 14px 24px;
	min-height: 44px;
}

/* ---------------------------------------------------------------
   22. Pattern support classes
   Small utilities the assembled pages rely on.
   --------------------------------------------------------------- */
.mgm-lede-sm {
	font: var(--text-body-l);
	color: var(--text-body);
	max-width: 64ch;
	margin: 22px auto 0;
}

.mgm-display-l { font: var(--text-display-l); color: var(--soft-black); margin-top: 16px; }

.mgm-note-italic {
	font: var(--text-caption);
	color: var(--text-muted);
	font-style: italic;
	margin-top: 26px;
}

.mgm-note-caption {
	font: var(--text-caption);
	color: var(--text-muted);
	margin-top: 18px;
}

.mgm-strip-caption {
	margin-top: 10px;
	font: var(--text-caption);
	color: var(--text-muted);
}

.mgm-closing-quote {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--mgm-quote-size, 26px);
	max-width: 36ch;
	margin: 0 auto;
	color: var(--text-on-dark);
	line-height: 1.4;
}

.mgm-closing-lede { max-width: 60ch; margin: 0 auto 26px; }

.mgm-who-centered { justify-content: center; margin-top: 22px; }
.mgm-who-centered .mgm-avatar { width: 48px; height: 48px; flex-basis: 48px; }

.mgm-constline.is-flush { border: 0; margin-top: 0; padding-top: 0; }

.mgm-starrule.is-centered { max-width: 170px; margin: 0 auto 30px; }

.mgm-intro-narrow { margin-bottom: 44px; }

/* Vertical rhythm between the sections a page is built from */
.mgm-kw-photo { margin: 0 auto clamp(26px, 3.4vw, 38px); }
.mgm-closing-photo { margin: 0 auto clamp(32px, 4vw, 52px); }
.mgm-pricing-note { margin-top: 26px; }
.mgm-contact-pair { margin: clamp(30px, 4vw, 44px) auto 0; max-width: 760px; text-align: left; }
.mgm-prenote-wrap { margin-bottom: 6px; }
.mgm-flatlay-wrap { margin: 0 auto; }
.mgm-expect-photo { margin: clamp(34px, 4.5vw, 54px) auto 0; }
.mgm-contact-support { margin: 0 auto clamp(36px, 5vw, 60px); }
.mgm-signature-photo { margin: clamp(30px, 4vw, 46px) auto 0; }
.mgm-faq-strip { margin: clamp(34px, 4.5vw, 56px) auto; max-width: 760px; }
.mgm-about-intro { padding-bottom: clamp(24px, 4vw, 48px); }
.mgm-gallery-page,
.mgm-kw-page,
.mgm-faq-page,
.mgm-contact-body { padding-bottom: clamp(30px, 5vw, 64px); }
.mgm-contact-body { padding-top: clamp(20px, 3vw, 32px); }

/* Sections that follow one another need breathing room, not a blockGap */
.mgm-sec + .mgm-sec,
.mgm-sec-tight + .mgm-sec-tight { margin-top: 0; }

/* Buttons inside a centred CTA row */
.mgm-cta-row { justify-content: center; margin-top: 34px; }

/* ---------------------------------------------------------------
   23. Print
   --------------------------------------------------------------- */
@media print {
	.mgm-header nav,
	.mgm-carousel .mgm-dots,
	.wp-block-navigation__responsive-container-open { display: none !important; }

	body { background: #fff; color: #000; }
	.mgm-band-black,
	.mgm-philosophy { background: #fff !important; }
	.mgm-band-black h1, .mgm-band-black h2, .mgm-band-black h3,
	.mgm-band-black p, .mgm-philosophy .mgm-poem,
	.mgm-philosophy .mgm-constline { color: #000 !important; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}