/* ==========================================================================
   Memory Portraits — main stylesheet
   Tokens: gold #F4B400 (hover #e0a500), ink #141414, dark #0c0c0c
   Fonts: Playfair Display (headings), Work Sans (body)
   ========================================================================== */

:root {
	--mp-gold: #FFE500;        /* bright yellow accent */
	--mp-gold-hover: #f2d000;  /* slightly deeper on hover */
	--mp-ink: #141414;
	--mp-muted: #4a4a4a;
	--mp-muted-2: #5a5a5a;
	--mp-muted-3: #6a6a6a;
	--mp-dark: #0c0c0c;
	--mp-soft: #faf9f5;
	--mp-hair: #ececec;
	--mp-hair-2: #e2e2e2;
	--mp-serif: 'Playfair Display', Georgia, serif;
	--mp-display: 'Cinzel', 'Playfair Display', Georgia, serif;
	--mp-sans: 'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--mp-maxw: none;                       /* fill the viewport on large screens */
	--mp-maxw-narrow: none;
	--mp-pad: clamp(20px, 4vw, 72px);      /* readable side padding that scales */
	--mp-section-y: clamp(38px, 5vw, 62px);/* the ONE inter-section gap. Single-owner rule: each section's TOP spacing (padding-top, or margin-top for the dark stats band) provides this gap; every section's padding-bottom is 0, so neighbours never sum two paddings into a double gap */
	--mp-gallery-gap: 20px;                /* carousel track gap; slide-width calc() uses this same value so the visible-card count is exact */
	--mp-carousel-edge: 30px;              /* horizontal breathing room inside the scroll viewport so the first/last card's glow + shadow fade softly instead of being clipped */
	--mp-header-h: 72px;                   /* approx sticky-header height for anchor offset */
	--mp-page-top: clamp(16px, 2.2vw, 30px);/* the ONE gap between the sticky header and the first heading of a page. Shared by the landing hero and the About/Prices text sections so all three pages start at the same height */

	/* Heading scale (client-controlled, see "Text & Headings" in wp-admin).
	   --mp-hN-set is what the setting writes: 1 = the theme's own sizes, so the
	   site looks unchanged until someone picks another preset. --mp-hN-scale is
	   what the rules below actually multiply by; on phones it is damped toward 1
	   so no preset can push a heading wide enough to break the layout. */
	--mp-h1-set: 1;
	--mp-h2-set: 1;
	--mp-h3-set: 1;
	--mp-h1-scale: var(--mp-h1-set);
	--mp-h2-scale: var(--mp-h2-set);
	--mp-h3-scale: var(--mp-h3-set);

	/* Ceramic oval framing — tunable so the client can retune the frame/glow.
	   The bezel is a tube profile read off the reference photo (Frame.png):
	   outer rim -> bright specular -> dark groove -> weak inner glint -> inner
	   rim. Every stop is its own variable so the whole thing can be recoloured
	   without touching the gradient. --mp-ceramic-band is the bezel thickness as
	   a percentage of the oval's radius, which is what makes it scale. */
	--mp-ceramic-frame: #b8862f;           /* base gold (mid tone) */
	--mp-ceramic-frame-rim: #9a6f22;       /* outermost edge */
	--mp-ceramic-frame-light: #e9b460;     /* lit gold */
	--mp-ceramic-frame-shine: #fadb96;     /* main specular highlight */
	--mp-ceramic-frame-glint: #f0c268;     /* weaker reflected highlight, inner side */
	--mp-ceramic-frame-deep: #6d4410;      /* dark gold either side of the groove */
	--mp-ceramic-frame-shadow: #3d2002;    /* deepest groove along the tube */
	--mp-ceramic-frame-edge: #4a2e0a;      /* inner rim, where metal meets photo */
	--mp-ceramic-frame-back: #3a2408;      /* what shows in the hairline behind the bezel */
	--mp-ceramic-band: 6.0%;               /* bezel thickness, % of the oval radius */
	--mp-ceramic-seat: 5.5%;               /* depth of the shadow seating the photo, same units */
	--mp-ceramic-glow: rgba(200, 162, 74, 0.40);
}

/* ----- Reset-ish ----- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* Anchor jumps land below the sticky header instead of under it (#8). */
:target,
[id] {
	scroll-margin-top: calc(var(--mp-header-h) + 12px);
}

/* Guard against any element forcing the page wider than the viewport.
   Use `clip` (not `hidden`): `overflow-x: hidden` turns the element into a
   scroll container, which breaks `position: sticky` on the header. `clip`
   prevents horizontal overflow without establishing a scroll container. */
html,
body {
	max-width: 100%;
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--mp-sans);
	color: var(--mp-ink);
	background: #ffffff;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
	font-family: var(--mp-display);
	/* A long word can never widen the page, whatever heading preset is picked. */
	overflow-wrap: break-word;
}

a {
	color: inherit;
	text-decoration: none;
}

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

/* ----- Shared bits ----- */
.mp-accent-bar {
	width: 78px;
	height: 3px;
	background: var(--mp-gold);
	margin: 20px auto 0;
}

/* Accent-colored TEXT on a light background: the bright yellow alone is
   illegible on white, so a thin black stroke keeps the letterforms readable. */
.mp-accent-text {
	color: var(--mp-gold);
	-webkit-text-stroke: 0.6px #000;
	text-stroke: 0.6px #000;
	paint-order: stroke fill;
}

.mp-section-title {
	font-weight: 700;
	font-size: calc(clamp(26px, 3.4vw, 40px) * var(--mp-h2-scale));
	margin: 0;
	text-align: center;
}

.mp-section-intro {
	max-width: 660px;
	margin: 18px auto 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--mp-muted);
	text-align: center;
}

/* ----- Buttons / links ----- */
.mp-btn {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	background: var(--mp-gold);
	color: var(--mp-ink);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	padding: 16px 30px;
	border-radius: 4px;
	border: 2px solid #000;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.mp-btn:hover,
.mp-btn:focus-visible {
	background: var(--mp-gold-hover);
}

.mp-btn--header {
	font-size: 13px;
	padding: 13px 22px;
	gap: 10px;
}

/* "Learn More" is a secondary CTA — outlined (black border) button to match
   the primary yellow buttons, per request. */
.mp-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--mp-ink);
	background: #fff;
	padding: 14px 26px;
	border: 2px solid #000;
	border-radius: 4px;
	transition: gap 0.15s ease, background 0.15s ease;
}

.mp-link-arrow:hover,
.mp-link-arrow:focus-visible {
	gap: 13px;
	background: var(--mp-soft);
}

/* ----- Image placeholder ----- */
.mp-placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #20242a, #2f343c 55%, #14171b);
	overflow: hidden;
}

.mp-placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 9px);
}

.mp-placeholder__label {
	position: relative;
	font-family: ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.55);
	border: 1px dashed rgba(255, 255, 255, 0.3);
	padding: 8px 16px;
	border-radius: 4px;
	text-align: center;
}

/* ==========================================================================
   Header
   ========================================================================== */
.mp-header {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--mp-hair);
}

.mp-header__inner {
	max-width: var(--mp-maxw);
	margin: 0 auto;
	padding: 14px var(--mp-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.mp-brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mp-brand__mark {
	flex: none;
}

/* Inner line of the mark — contrasts against the teardrop fill. Light by
   default (header, on light bg); the footer overrides it for the dark bg. */
.mp-brand__mark-line {
	stroke: #fff;
}

.mp-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.mp-brand__name {
	font-family: var(--mp-serif);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mp-brand__tagline {
	font-size: 9.5px;
	letter-spacing: 0.22em;
	color: #8a8a8a;
	font-weight: 600;
}

.mp-nav__list {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* Every header nav link gets the same type, colour and spacing regardless of
   whether it points at a page (Prices, About Us) or at an in-page anchor
   (Home, Services, Gallery, Process, Contact). The underline lives on a
   permanently reserved transparent border, so marking an item current never
   changes the row height.

   NOTE: the old rule keyed off WordPress' `.current-menu-item`, which core
   stamps on every custom link whose URL matches the request once the #fragment
   is stripped — i.e. on all five anchors at once on the landing page, and on
   neither page link. The current item is now decided in PHP/JS by one rule and
   published as `.mp-menu-link--current`; see mp_link_is_current(). */
.mp-nav__link {
	color: #444;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.mp-nav__link:hover,
.mp-nav__link:focus-visible {
	color: var(--mp-ink);
}

.mp-nav__link.mp-menu-link--current {
	color: var(--mp-ink);
	border-bottom-color: var(--mp-gold);
}

/* Hamburger toggle — hidden on desktop, revealed below 900px. */
.mp-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: -6px 0;
	border: 0;
	background: transparent;
	color: var(--mp-ink);
	cursor: pointer;
	border-radius: 6px;
}

.mp-nav-toggle:focus-visible {
	outline: 2px solid var(--mp-gold);
	outline-offset: 2px;
}

.mp-nav-toggle__close {
	display: none;
}

.mp-nav-toggle[aria-expanded="true"] .mp-nav-toggle__open {
	display: none;
}

.mp-nav-toggle[aria-expanded="true"] .mp-nav-toggle__close {
	display: block;
}

/* Mobile dropdown menu — base hidden; only shown in the <900px media query. */
.mp-mobile-menu {
	display: none;
	border-top: 1px solid var(--mp-hair);
	background: #fff;
	padding: 10px var(--mp-pad) 22px;
}

.mp-mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mp-mobile-menu__link {
	display: block;
	padding: 14px 2px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--mp-ink);
	border-bottom: 1px solid var(--mp-hair);
}

.mp-mobile-menu__link:hover,
.mp-mobile-menu__link:focus-visible {
	color: var(--mp-gold-hover);
}

/* Current item — same gold underline as the desktop nav, drawn with
   text-decoration so it sits above the row separator without shifting it. */
.mp-mobile-menu__link.mp-menu-link--current {
	color: var(--mp-ink);
	text-decoration: underline;
	text-decoration-color: var(--mp-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.mp-mobile-menu__cta {
	margin-top: 18px;
	width: 100%;
	justify-content: center;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.mp-hero {
	max-width: var(--mp-maxw-narrow);
	margin: 0 auto;
	/* Sit the H1 close under the sticky header — no full-screen centering, which
	   left a big empty gap above the title on wide monitors. Top padding is only a
	   small header offset; padding-bottom is 0 so the hero -> services gap is
	   owned solely by the services' padding-top (see the single-rhythm note on
	   --mp-section-y) and never doubles. */
	padding: var(--mp-page-top) var(--mp-pad) 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.mp-hero__title {
	margin: 0 auto;
	max-width: 1100px;
	font-weight: 800;
	font-size: calc(clamp(28px, 3.8vw, 50px) * var(--mp-h1-scale));
	line-height: 1.12;
	letter-spacing: 0.01em;
	white-space: normal;
}

/* New intro paragraph shown above the hero image. */
.mp-hero__body {
	max-width: 760px;
	margin: 16px auto 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--mp-muted);
}

.mp-hero__features {
	display: flex;
	flex-wrap: nowrap;            /* force a single row, no wrapping */
	justify-content: center;
	align-items: center;
	gap: 10px 22px;
	margin: 20px auto 0;
	max-width: 100%;
	padding: 0;
	list-style: none;
}

.mp-hero__feature {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.mp-hero__feature svg {
	flex: none;
}

/* Wider + shorter engraving block so the whole hero fits above the fold.
   max-height caps it so title + body + badges + image + buttons all fit in
   one screen (#4, #7); max-width keeps it sane on ultra-wide monitors. */
.mp-hero__media {
	width: 100%;
	max-width: 1300px;
	margin: 22px auto 0;
	border: 4px solid var(--mp-gold);
	border-radius: 10px;
	aspect-ratio: 1300 / 400;
	max-height: 44vh;
}

/* CMS-managed banner. Identical box to the placeholder above — same max-width,
   same 13:4 ratio, same gold frame — only the content differs. The modifier
   (not .mp-hero__media) carries the background so it cannot override the
   placeholder gradient, which is declared earlier in the file. */
.mp-hero__media--image {
	overflow: hidden;
	background: var(--mp-soft);
}

.mp-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	/* The recommended 2600 x 800 master is exactly 13:4, so on desktop `cover`
	   fills the box edge to edge with no crop and no distortion; it also absorbs
	   the slight squeeze when the max-height cap wins over the aspect ratio. */
	object-fit: cover;
	object-position: center;
}

.mp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 30px;
	margin: 26px 0 0;
}

/* ==========================================================================
   Services
   ========================================================================== */
.mp-services {
	max-width: var(--mp-maxw);
	margin: 0 auto;
	padding: var(--mp-section-y) var(--mp-pad) 0;
}

.mp-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 22px;
	margin: 0;
}

.mp-service-card {
	border: 1.5px solid var(--mp-gold);
	border-radius: 8px;
	padding: 22px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.mp-service-card__icon {
	flex: none;
	margin-top: 2px;
}

.mp-service-card__title {
	margin: 0;
	font-size: calc(14px * var(--mp-h3-scale));
	font-weight: 700;
	letter-spacing: 0.06em;
	font-family: var(--mp-sans);
}

.mp-service-card__desc {
	margin: 7px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--mp-muted-2);
}

/* ==========================================================================
   Process
   ========================================================================== */
.mp-process {
	max-width: var(--mp-maxw);
	margin: 0 auto;
	padding: var(--mp-section-y) var(--mp-pad) 0;
	text-align: center;
}

.mp-process .mp-section-title {
	margin-bottom: 36px;
}

.mp-process__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 28px;
}

.mp-process__line {
	position: absolute;
	top: 30px;
	left: 10%;
	right: 10%;
	border-top: 1.5px dashed #d6d6d6;
	z-index: 0;
}

.mp-process__step {
	position: relative;
	z-index: 1;
}

.mp-process__circle {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1.5px solid #cfcfcf;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.mp-process__title {
	margin: 0;
	font-size: calc(12.5px * var(--mp-h3-scale));
	font-weight: 700;
	letter-spacing: 0.06em;
	font-family: var(--mp-sans);
}

.mp-process__desc {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--mp-muted-3);
}

/* ==========================================================================
   Contact
   ========================================================================== */
.mp-contact {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--mp-section-y) var(--mp-pad) calc(var(--mp-section-y) + 20px);
	text-align: center;
}

.mp-contact__lead {
	max-width: 600px;
	margin: 18px auto 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--mp-muted);
}

.mp-notice {
	margin: 28px auto 0;
	padding: 14px 18px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
}

.mp-notice--success {
	background: #f1f8ec;
	border: 1px solid #bfe0a8;
	color: #2f5d1e;
}

.mp-notice--error {
	background: #fdeeee;
	border: 1px solid #f0bcbc;
	color: #8c2020;
}

.mp-form {
	margin: 34px 0 0;
	text-align: left;
}

.mp-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}

.mp-form__row {
	margin: 0 0 18px;
}

.mp-form__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 7px;
}

.mp-form__req {
	color: var(--mp-gold);
	-webkit-text-stroke: 0.6px #000;
	text-stroke: 0.6px #000;
	paint-order: stroke fill;
}

.mp-form__input {
	width: 100%;
	font-family: var(--mp-sans);
	font-size: 15px;
	color: var(--mp-ink);
	padding: 13px 14px;
	border: 1.5px solid var(--mp-hair-2);
	border-radius: 4px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mp-form__input:focus {
	outline: none;
	border-color: var(--mp-gold);
	box-shadow: 0 0 0 3px rgba(255, 229, 0, 0.28);
}

.mp-form__textarea {
	resize: vertical;
	min-height: 120px;
}

.mp-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin: 8px 0 0;
}

.mp-form__note {
	font-size: 12px;
	color: #8a8a8a;
}

/* Honeypot — hidden from users, present for bots. */
.mp-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.mp-footer {
	background: var(--mp-dark);
	color: #cfcfcf;
	margin-top: 0;
}

.mp-footer__inner {
	max-width: var(--mp-maxw);
	margin: 0 auto;
	padding: 30px var(--mp-pad);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* Footer uses the shared .mp-brand component (identical to the header),
   recolored for the dark surface: white mark + name, dark inner line. */
.mp-footer .mp-brand {
	color: #fff;
}

.mp-footer .mp-brand__mark-line {
	stroke: var(--mp-dark);
}

.mp-footer .mp-brand__tagline {
	color: #9a9a9a;
}

.mp-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	letter-spacing: 0.08em;
}

.mp-footer__link {
	color: inherit;
	transition: color 0.15s ease;
}

.mp-footer__link:hover,
.mp-footer__link:focus-visible {
	color: var(--mp-gold);
}

/* Current item — the same gold underline the header and mobile menu use. */
.mp-footer__link.mp-menu-link--current {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--mp-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.mp-footer__copy {
	font-size: 11.5px;
	color: #777;
}

/* ==========================================================================
   Rule heading (line — title — line) for gallery sections
   ========================================================================== */
.mp-rule-heading {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 24px;
}

.mp-rule-heading__line {
	flex: 1;
	height: 1px;
	background: var(--mp-hair-2);
}

.mp-rule-heading__title {
	font-weight: 700;
	/* min() caps the result against the viewport so this nowrap title cannot run
	   off a narrow screen at the larger presets. */
	font-size: min(calc(clamp(22px, 2.6vw, 30px) * var(--mp-h2-scale)), 7.4vw);
	letter-spacing: 0.05em;
	margin: 0;
	white-space: nowrap;
}

/* ==========================================================================
   Galleries (etching + ceramic) — CMS-managed portrait CPT
   ========================================================================== */
.mp-gallery {
	max-width: var(--mp-maxw);
	margin: 0 auto;
	/* Single-rhythm: only padding-top owns the inter-section gap; bottom is 0. */
	padding: var(--mp-section-y) var(--mp-pad) 0;
}

.mp-gallery--ceramic {
	border-top: 1px solid var(--mp-hair);
}

/* ==========================================================================
   Carousel ("drum") — shared by etching, ceramic and before/after
   ========================================================================== */
.mp-carousel {
	position: relative;
	display: flex;
	align-items: center;
	/* Gap keeps the arrows clear of the ovals — the glow has already faded out
	   within the viewport's edge padding before this gap starts. */
	gap: clamp(8px, 1.4vw, 18px);
	max-width: var(--mp-maxw);
	margin: 0 auto;
}

/* The scroll-snapping strip and the scroll container that clips overflow at its
   padding box. Focusable so Arrow keys page it (see gallery.js). */
.mp-carousel__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Vertical padding: room for the cards' raised drop shadows / oval glow.
	   Horizontal padding (--mp-carousel-edge): room so the first and last card's
	   glow + shadow fade softly instead of being clipped into a hard vertical
	   line. scroll-padding-inline matches it so every SNAPPED leading card keeps
	   the same glow room on its edge. The slide calc() widths are a percentage
	   of the (now-narrower) track content box, so the visible full-card count
	   and peek stay exactly the same. */
	padding: 24px var(--mp-carousel-edge) 32px;
	scroll-padding-inline: var(--mp-carousel-edge);
}

.mp-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.mp-carousel__viewport:focus-visible {
	outline: 2px solid var(--mp-gold);
	outline-offset: 4px;
	border-radius: 6px;
}

.mp-carousel__track {
	display: flex;
	align-items: center;
	gap: var(--mp-gallery-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mp-carousel__slide {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* Round gold arrow buttons, matching the site's button language. */
.mp-carousel__arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid #000;
	border-radius: 50%;
	background: var(--mp-gold);
	color: var(--mp-ink);
	cursor: pointer;
	z-index: 2;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.mp-carousel__arrow:hover,
.mp-carousel__arrow:focus-visible {
	background: var(--mp-gold-hover);
}

.mp-carousel__arrow:focus-visible {
	outline: 3px solid var(--mp-gold);
	outline-offset: 2px;
}

.mp-carousel__arrow[disabled] {
	opacity: 0.32;
	cursor: default;
	pointer-events: none;
}

/* ----- Etching cards: fluid, raised (slide width set in "Gallery slide
   sizing" below). 4:5 keeps them noticeably shorter than a 3:4 crop. ----- */
.mp-portrait-card {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	background: linear-gradient(155deg, #2c3036, #4a4f57 60%, #1d2024);
	/* Depth: a soft drop shadow lifts the image off the white page (#6). */
	box-shadow: 0 9px 22px rgba(0, 0, 0, 0.20), 0 2px 6px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mp-portrait-card:hover,
.mp-portrait-card:focus-visible {
	transform: translateY(-5px) scale(1.025);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28), 0 5px 12px rgba(0, 0, 0, 0.18);
}

.mp-portrait-card:focus-visible {
	outline: 3px solid var(--mp-gold);
	outline-offset: 3px;
}

.mp-portrait-card--ph {
	cursor: default;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.mp-portrait-card--ph::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 7px);
}

.mp-portrait-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Before/after cards reuse the portrait-card look but are wide 8:5 landscape
   crops — matching the pre-composited "before + after" source files exactly, so
   object-fit: cover fills the card without trimming any of the artwork. */
.mp-portrait-card--ba {
	aspect-ratio: 8 / 5;
}

/* ----- Ceramic ovals: framed, glowing, with an inner edge shadow (slide
   width set in "Gallery slide sizing" below). Frame + glow are kept modest so
   the smaller ovals read as realistic mounted photos, not oversized. ----- */
.mp-carousel__slide--ceramic {
	/* Padding keeps the outer glow from being clipped by the viewport edge. */
	padding: 4px;
}

.mp-ceramic-oval {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	margin: 0;
	padding: 0;
	/* No border: the bezel is drawn by .mp-ceramic-oval__inner::before, which
	   scales with the oval instead of being a fixed 4px hairline. Must be an
	   explicit 0 — this element is a <button>, so dropping the declaration
	   brings back the UA's grey 2px button border. */
	border: 0;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
	/* Warm dark backing: the photo covers it, but its antialiased edge used to
	   let a cold grey hairline show outside the gold. */
	background: var(--mp-ceramic-frame-back);
	/* 3D depth: crisp edge + drop shadow + soft outer glow around the oval. */
	box-shadow:
		0 0 0 1px rgba(46, 28, 4, 0.55),
		0 12px 26px rgba(0, 0, 0, 0.24),
		0 0 24px 5px var(--mp-ceramic-glow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mp-ceramic-oval:hover,
.mp-ceramic-oval:focus-visible {
	transform: translateY(-5px) scale(1.025);
	box-shadow:
		0 0 0 1px rgba(46, 28, 4, 0.6),
		0 18px 36px rgba(0, 0, 0, 0.28),
		0 0 34px 8px var(--mp-ceramic-glow);
}

.mp-ceramic-oval:focus-visible {
	outline: 3px solid var(--mp-gold);
	outline-offset: 4px;
}

.mp-ceramic-oval--ph {
	cursor: default;
	background: linear-gradient(160deg, #d7dbe0, #eef1f4);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mp-ceramic-oval--ph::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0 1px, transparent 1px 8px);
}

.mp-ceramic-oval__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

/* Inner edge shadow — seats the photo down inside the bezel. A gradient rather
   than an inset box-shadow, because a box-shadow can only be sized in pixels:
   it would have to be retuned for every oval size and, at lightbox scale, it
   sat entirely underneath the bezel. In percentages it starts exactly where the
   bezel ends, at any size. The bezel itself is drawn on ::before, on top. */
.mp-ceramic-oval__inner,
.mp-lightbox--ceramic .mp-lightbox__inner {
	border-radius: 50%;
	background: radial-gradient(
		ellipse farthest-side at 50% 50%,
		transparent calc(100% - var(--mp-ceramic-band) - var(--mp-ceramic-seat)),
		rgba(0, 0, 0, 0.12) calc(100% - var(--mp-ceramic-band) - var(--mp-ceramic-seat) * 0.62),
		rgba(0, 0, 0, 0.34) calc(100% - var(--mp-ceramic-band) - var(--mp-ceramic-seat) * 0.28),
		rgba(0, 0, 0, 0.55) calc(100% - var(--mp-ceramic-band))
	);
}

.mp-ceramic-oval__inner {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ==========================================================================
   Ceramic gold bezel — shared by the carousel oval and the lightbox
   ==========================================================================
   A photographed oval frame has a round (tube) cross-section, and that is what
   reads as metal: a bright specular near the outer third, a dark groove behind
   it, then a weaker glint where the surface turns back toward the photo. The
   whole profile is one elliptical radial-gradient whose colour stops are all
   percentages of the oval's radius, so the bezel keeps its proportions at any
   size — a 230px carousel thumbnail or a 600px lightbox — with no pixel values
   to retune and nothing to change per breakpoint.

   Stop positions were sampled off the reference photo (Frame.png) across the
   band; the shine variation around the loop comes from the same sampling
   (brightest at the top and on the diagonals, dimmest at 3 and 9 o'clock) and
   is applied as a shallow conic-gradient blended over the tube.

   The conic layer needs masking, because on its own it would tint the photo
   inside the ring — so it is added only where mask-image works. Without it the
   bezel still renders, just with an even shine.
   ========================================================================== */
.mp-ceramic-oval__inner::before,
.mp-lightbox--ceramic .mp-lightbox__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Clips the gradient to the ellipse, so the box corners stay empty. */
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(
		ellipse farthest-side at 50% 50%,
		transparent calc(100% - var(--mp-ceramic-band) - 0.4%),
		var(--mp-ceramic-frame-edge)   calc(100% - var(--mp-ceramic-band)),
		var(--mp-ceramic-frame-deep)   calc(100% - var(--mp-ceramic-band) * 0.88),
		var(--mp-ceramic-frame-glint)  calc(100% - var(--mp-ceramic-band) * 0.78),
		var(--mp-ceramic-frame-deep)   calc(100% - var(--mp-ceramic-band) * 0.70),
		var(--mp-ceramic-frame-shadow) calc(100% - var(--mp-ceramic-band) * 0.61),
		var(--mp-ceramic-frame-deep)   calc(100% - var(--mp-ceramic-band) * 0.50),
		var(--mp-ceramic-frame-light)  calc(100% - var(--mp-ceramic-band) * 0.36),
		var(--mp-ceramic-frame-shine)  calc(100% - var(--mp-ceramic-band) * 0.28),
		var(--mp-ceramic-frame-light)  calc(100% - var(--mp-ceramic-band) * 0.22),
		var(--mp-ceramic-frame)        calc(100% - var(--mp-ceramic-band) * 0.10),
		var(--mp-ceramic-frame-rim)    100%
	);
}

@supports (mask-image: radial-gradient(#000, #000)) or (-webkit-mask-image: radial-gradient(#000, #000)) {
	.mp-ceramic-oval__inner::before,
	.mp-lightbox--ceramic .mp-lightbox__inner::before {
		background:
			conic-gradient(
				from 0deg,
				rgba(255, 252, 235, 0.20),
				rgba(255, 252, 235, 0.12) 55deg,
				rgba(0, 0, 0, 0.16) 95deg,
				rgba(255, 252, 235, 0.10) 135deg,
				rgba(0, 0, 0, 0.10) 185deg,
				rgba(255, 252, 235, 0.18) 230deg,
				rgba(0, 0, 0, 0.14) 268deg,
				rgba(255, 252, 235, 0.14) 310deg,
				rgba(255, 252, 235, 0.20) 360deg
			),
			radial-gradient(
				ellipse farthest-side at 50% 50%,
				transparent calc(100% - var(--mp-ceramic-band) - 0.4%),
				var(--mp-ceramic-frame-edge)   calc(100% - var(--mp-ceramic-band)),
				var(--mp-ceramic-frame-deep)   calc(100% - var(--mp-ceramic-band) * 0.88),
				var(--mp-ceramic-frame-glint)  calc(100% - var(--mp-ceramic-band) * 0.78),
				var(--mp-ceramic-frame-deep)   calc(100% - var(--mp-ceramic-band) * 0.70),
				var(--mp-ceramic-frame-shadow) calc(100% - var(--mp-ceramic-band) * 0.61),
				var(--mp-ceramic-frame-deep)   calc(100% - var(--mp-ceramic-band) * 0.50),
				var(--mp-ceramic-frame-light)  calc(100% - var(--mp-ceramic-band) * 0.36),
				var(--mp-ceramic-frame-shine)  calc(100% - var(--mp-ceramic-band) * 0.28),
				var(--mp-ceramic-frame-light)  calc(100% - var(--mp-ceramic-band) * 0.22),
				var(--mp-ceramic-frame)        calc(100% - var(--mp-ceramic-band) * 0.10),
				var(--mp-ceramic-frame-rim)    100%
			);
		background-blend-mode: overlay, normal;
		-webkit-mask-image: radial-gradient(ellipse farthest-side at 50% 50%, transparent calc(100% - var(--mp-ceramic-band) - 0.4%), #000 calc(100% - var(--mp-ceramic-band)));
		mask-image: radial-gradient(ellipse farthest-side at 50% 50%, transparent calc(100% - var(--mp-ceramic-band) - 0.4%), #000 calc(100% - var(--mp-ceramic-band)));
	}
}

/* Placeholder labels (shared by etching + ceramic empty states) */
.mp-tile-ph__label {
	position: relative;
	font-family: ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 12px;
}

.mp-tile-ph__label--dark {
	color: #8b8f95;
	margin-bottom: 0;
}

/* ==========================================================================
   Lightbox modal (built by gallery.js)
   ========================================================================== */
.mp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 56px);
}

.mp-lightbox[hidden] {
	display: none;
}

.mp-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 8, 0.86);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	cursor: zoom-out;
}

.mp-lightbox__body {
	position: relative;
	max-width: min(1100px, 100%);
	max-height: 100%;
	/* Center the frame both axes so it never stretches and pin the image to the
	   top (which caused the "shifted up" regression). */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Frame shrink-wraps the image so the inner-edge overlay can sit exactly over
   it. A block box (not inline-block) keeps flex centering intact; line-height:0
   removes any inline descender gap. */
.mp-lightbox__frame {
	position: relative;
	display: block;
	max-width: 100%;
	line-height: 0;
}

.mp-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 88vh;
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
	background: #1a1a1a;
}

/* Inner-edge overlay — inert for rectangular portraits; the ceramic variant
   below turns it into the seated-in-frame edge shadow. */
.mp-lightbox__inner {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ----- Ceramic variant: reproduce the carousel oval at lightbox scale -------
   Keeps a strict 4:5 box so the ellipse never deforms. The frame border, outer
   glow and inner edge shadow are sized in vh (the oval height ≈ 87.5vh) so they
   scale up with the enlarged portrait instead of looking hairline-thin. ----- */
.mp-lightbox--ceramic .mp-lightbox__img {
	box-sizing: border-box;
	/* 4:5 box capped by both viewport height and width; height follows width. */
	width: min(70vh, 90vw);
	height: auto;
	max-width: 100%;
	max-height: none;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 50%;
	/* No border here either — the shared bezel rule above draws it, and being a
	   percentage of the radius it comes out proportionally thicker at this size
	   than the old clamp() in vh ever did. */
	background: var(--mp-ceramic-frame-back);
	box-shadow:
		0 0 0 1px rgba(46, 28, 4, 0.6),
		0 24px 60px rgba(0, 0, 0, 0.5),
		0 0 clamp(20px, 4vh, 60px) clamp(4px, 1vh, 14px) var(--mp-ceramic-glow);
}

/* The seating shadow and the bezel both come from the shared percentage-based
   rules above, so this variant needs nothing of its own. */

.mp-lightbox__close {
	position: absolute;
	top: -14px;
	right: -14px;
	/* Above the frame (which follows it in the DOM) so it stays clickable. */
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 2px solid #000;
	border-radius: 50%;
	background: var(--mp-gold);
	color: var(--mp-ink);
	cursor: pointer;
	transition: background 0.15s ease;
}

.mp-lightbox__close:hover,
.mp-lightbox__close:focus-visible {
	background: var(--mp-gold-hover);
}

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

/* Lock background scroll while the lightbox is open. */
body.mp-noscroll {
	overflow: hidden;
}

/* ==========================================================================
   Before & After slider
   ========================================================================== */
.mp-ba-section {
	max-width: var(--mp-maxw);
	margin: 0 auto;
	/* Single-rhythm: bottom is 0 so the gap above the stats bar is owned solely
	   by the stats bar's margin-top (= --mp-section-y) and never doubles. */
	padding: var(--mp-section-y) var(--mp-pad) 0;
	border-top: 1px solid var(--mp-hair);
}

.mp-ba-section__cta {
	text-align: center;
	margin: 28px 0 0;
}

/* ==========================================================================
   Stats bar (dark) — values from ACF options page
   ========================================================================== */
.mp-stats {
	background: var(--mp-dark);
	color: #fff;
	margin: var(--mp-section-y) 0 0;
}

.mp-stats__inner {
	max-width: var(--mp-maxw);
	margin: 0 auto;
	padding: 40px var(--mp-pad);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.mp-stats__grid {
	flex: 1 1 540px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 30px;
}

.mp-stat {
	text-align: center;
}

.mp-stat__icon {
	margin: 0 auto 8px;
	display: block;
}

.mp-stat__value {
	font-family: var(--mp-serif);
	font-size: 32px;
	font-weight: 700;
	color: var(--mp-gold);
}

.mp-stat__label {
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #bdbdbd;
	margin-top: 4px;
	text-transform: uppercase;
}

.mp-stats__intro {
	flex: 1 1 300px;
	max-width: 380px;
	font-size: 13.5px;
	line-height: 1.65;
	color: #cfcfcf;
	margin: 0;
}

/* ==========================================================================
   Text sections (About Us + Prices) — CMS-editable, shown on their own pages
   ========================================================================== */
/* Fill the viewport on the standalone About/Prices pages so a short section
   doesn't leave the footer floating mid-screen. Content starts at the TOP:
   centering it used to push the Prices heading ~300px down the screen, so the
   three pages all began at a different height. */
.mp-page {
	min-height: calc(100vh - var(--mp-header-h));
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* Top padding is the shared --mp-page-top so the header -> heading gap matches
   the landing page exactly; the bottom keeps its own generous breathing room. */
.mp-textsection {
	padding: var(--mp-page-top) var(--mp-pad) clamp(56px, 9vh, 104px);
	/* Grow into the rest of .mp-page. The text still starts at the top, but the
	   section's own background (the soft band on Prices) reaches the footer
	   instead of stopping under the last line. */
	flex: 1 0 auto;
}

/* Soft background sets Prices apart as its own clear block. */
.mp-textsection--prices {
	background: var(--mp-soft);
}

.mp-textsection__inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.mp-textsection__body {
	margin: 22px auto 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--mp-muted);
	text-align: left;
}

/* Headings the client types into the page body follow the same size presets. */
.mp-textsection__body h1 {
	font-family: var(--mp-display);
	font-size: calc(clamp(26px, 3.4vw, 40px) * var(--mp-h1-scale));
	line-height: 1.2;
	color: var(--mp-ink);
	margin: 28px 0 12px;
}

.mp-textsection__body h2 {
	font-family: var(--mp-display);
	font-size: calc(clamp(21px, 2.6vw, 28px) * var(--mp-h2-scale));
	line-height: 1.25;
	color: var(--mp-ink);
	margin: 26px 0 10px;
}

.mp-textsection__body h3 {
	font-family: var(--mp-sans);
	font-size: calc(17px * var(--mp-h3-scale));
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--mp-ink);
	margin: 22px 0 8px;
}

/* Text alignment chosen in the editor. WordPress writes `has-text-align-*` on
   block content and an inline `text-align` on classic content; both must beat
   the container's own `text-align: left` above. */
.mp-textsection__body .has-text-align-left {
	text-align: left;
}

.mp-textsection__body .has-text-align-center {
	text-align: center;
}

.mp-textsection__body .has-text-align-right {
	text-align: right;
}

.mp-textsection__body .has-text-align-justify {
	text-align: justify;
}

.mp-textsection__body :first-child {
	margin-top: 0;
}

.mp-textsection__body :last-child {
	margin-bottom: 0;
}

.mp-textsection__body a {
	color: var(--mp-ink);
	text-decoration: underline;
	text-decoration-color: var(--mp-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

/* About Us photo row — 4 equal tiles whose total width matches the hero banner
   (max-width 1300px). Centered inside the section's side padding, so it lines up
   with the banner on the landing page. 4 -> 2 -> 1 columns as the screen narrows. */
.mp-about-photos {
	max-width: 1300px;
	margin: clamp(28px, 4vw, 48px) auto 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--mp-gallery-gap);
}

.mp-about-photos__item {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 9px 22px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.mp-about-photos__img,
.mp-about-photos__ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.mp-about-photos__img {
	object-fit: cover;
	display: block;
}

@media (max-width: 900px) {
	.mp-about-photos {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.mp-about-photos {
		grid-template-columns: 1fr;
		max-width: 420px;
	}
}

/* ==========================================================================
   Gallery slide sizing — widths are a fraction of the CAROUSEL viewport width
   (calc from 100%), NOT viewport units, so the visible-card count is exact and
   the trailing peek is consistent. The gap subtracted in each calc() matches
   the track gap (--mp-gallery-gap). Mobile-first: phone base, then tablet, then
   desktop overrides.
   ========================================================================== */

/* Phone (<600px): 1 card with a small peek. */
.mp-carousel__slide--etching,
.mp-carousel__slide--ceramic {
	flex: 0 0 calc((100% - 1 * var(--mp-gallery-gap)) / 1.15);
}

.mp-carousel__slide--ba {
	flex: 0 0 calc((100% - 1 * var(--mp-gallery-gap)) / 1.1);
}

/* Tablet (600–999px): 2 etching/ceramic cards with a peek. Before/after stays
   1-up (wide 16:10 cards) until the desktop breakpoint. */
@media (min-width: 600px) {
	.mp-carousel__slide--etching,
	.mp-carousel__slide--ceramic {
		flex-basis: calc((100% - 2 * var(--mp-gallery-gap)) / 2.3);
	}
}

/* Desktop (>=1000px): exactly 3 etching/ceramic with a peek; 2 before/after
   with a peek. */
@media (min-width: 1000px) {
	.mp-carousel__slide--etching,
	.mp-carousel__slide--ceramic {
		flex-basis: calc((100% - 3 * var(--mp-gallery-gap)) / 3.3);
	}

	.mp-carousel__slide--ba {
		flex-basis: calc((100% - 2 * var(--mp-gallery-gap)) / 2.3);
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
	/* Swap the inline nav + CTA for the hamburger. */
	.mp-nav,
	.mp-btn--header {
		display: none;
	}

	.mp-nav-toggle {
		display: inline-flex;
	}

	.mp-mobile-menu:not([hidden]) {
		display: block;
	}
}

@media (max-width: 600px) {
	.mp-header__inner {
		gap: 12px;
	}

	.mp-btn--header {
		padding: 11px 16px;
	}

	.mp-process__line {
		display: none;
	}

	/* Phones: one big card per view; smaller arrows; tighter gutters. Keep enough
	   edge padding for the glow to fade (via --mp-carousel-edge), just a little
	   less than on desktop to preserve card size on narrow screens. */
	.mp-carousel {
		gap: 6px;
		--mp-carousel-edge: 22px;
	}

	.mp-carousel__viewport {
		padding: 18px var(--mp-carousel-edge) 24px;
	}

	.mp-carousel__arrow {
		width: 40px;
		height: 40px;
	}

	.mp-lightbox__close {
		top: 6px;
		right: 6px;
	}

	/* Phones get a slightly larger header gap; setting it on the token keeps the
	   landing page and the About/Prices pages identical here too. */
	:root {
		--mp-page-top: 32px;
		/* Damp the heading presets toward 1 so the largest preset still fits a
		   phone screen: at 1.30 the effective scale here is only ~1.17. */
		--mp-h1-scale: calc(1 + (var(--mp-h1-set) - 1) * 0.55);
		--mp-h2-scale: calc(1 + (var(--mp-h2-set) - 1) * 0.55);
		--mp-h3-scale: calc(1 + (var(--mp-h3-set) - 1) * 0.55);
	}

	/* Mobile hero: relax the full-screen lock and cap the image so it stays
	   fully visible (no cropping) on one screen (#7). */
	.mp-hero {
		min-height: auto;
		/* Bottom stays 0 here too so the hero -> services gap doesn't double on phones. */
		padding: var(--mp-page-top) var(--mp-pad) 0;
	}

	.mp-hero__media {
		aspect-ratio: 4 / 3;
		max-height: 42vh;
	}

	/* The phone box is 4:3 while the banner master is 13:4. `contain` shows the
	   whole image, undistorted, instead of cropping away two thirds of its
	   width; the box keeps its size and gold frame either way. */
	.mp-hero__img {
		object-fit: contain;
	}

	/* Keep the trust badges on ONE row even on phones: shrink them and let the
	   row scroll horizontally instead of wrapping. */
	.mp-hero__features {
		gap: 8px 14px;
		font-size: 10.5px;
		overflow-x: auto;
		justify-content: flex-start;
		-webkit-overflow-scrolling: touch;
	}

	.mp-hero__feature {
		font-size: 10.5px;
		letter-spacing: 0.03em;
	}

	.mp-hero__feature svg {
		width: 16px;
		height: 16px;
	}
}