/* ==========================================================================
   Mallorca Concierge — theme stylesheet
   Base tokens live in theme.json; this file covers layout, custom block
   styles and motion that theme.json can't express.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; overflow-x: hidden; position: relative; }
a { text-decoration: none; }
img { max-width: 100%; display: block; }

/* ==========================================================================
   Legibility safety net
   Some existing page content explicitly picked "text" / "text-muted" /
   "white" by name in the block editor's color picker, back when the whole
   site defaulted to a dark background (those slugs meant "light text for
   whatever dark thing this sits on"). Now that the page default is light,
   any block still wearing one of those classes outside a recognised dark
   panel would render near-invisible. Force them legible everywhere by
   default, then hand light text back specifically inside the dark panels
   (hero, chapters, the deep-green bands, footer) where it's actually meant.
   ========================================================================== */
.has-text-color.has-text-color,
.has-white-color.has-white-color {
	color: var(--wp--preset--color--ink) !important;
}
.has-text-muted-color.has-text-muted-color {
	color: var(--wp--preset--color--ink-muted) !important;
}

.wp-block-cover.is-style-hero-home .has-text-color,
.wp-block-cover.is-style-hero-service .has-text-color,
.wp-block-cover.is-style-chapter .has-text-color,
.wp-block-group.is-style-panel-secondary .has-text-color,
.mc-footer .has-text-color,
.wp-block-cover.is-style-hero-home .has-white-color,
.wp-block-cover.is-style-hero-service .has-white-color,
.wp-block-cover.is-style-chapter .has-white-color,
.wp-block-group.is-style-panel-secondary .has-white-color,
.mc-footer .has-white-color {
	color: var(--wp--preset--color--text) !important;
}
.wp-block-cover.is-style-hero-home .has-text-muted-color,
.wp-block-cover.is-style-hero-service .has-text-muted-color,
.wp-block-cover.is-style-chapter .has-text-muted-color,
.wp-block-group.is-style-panel-secondary .has-text-muted-color,
.mc-footer .has-text-muted-color {
	color: var(--wp--preset--color--text-muted) !important;
}

/* Fine paper-grain texture — dark grain (not the old white noise, which
   only read well on a dark page) so it stays subtle on the ivory ground. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 180px 180px;
}

.mc-main { display: block; }

/* ---- Utility width classes (applied via "Additional CSS class" in editor) ---- */
.mc-w-600 { max-width: 600px; }
.mc-w-700 { max-width: 700px; }
.mc-w-760 { max-width: 760px; }
.mc-w-700.mc-center { margin-left: auto; margin-right: auto; }
/* Serif prose paragraph — matches the upright Cormorant Garamond body copy
   of the villa editorial sections (.mc-villa-section__text > p). Upright,
   not italic like .mc-lede. Applied via "Additional CSS class". */
.mc-prose-serif {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
	text-wrap: pretty;
}
.mc-w-780 { max-width: 780px; }
.mc-w-880 { max-width: 880px; }
.mc-grid-autofit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }
.mc-section { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }
.mc-section--narrow { max-width: 880px; position: relative; }
.mc-section--narrow::after {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	background: rgba(200, 185, 154, 0.55);
	margin: 48px auto 0;
}
.mc-center { text-align: center; }

/* Breadcrumb strip — injected by mc_breadcrumb_after_hero() right below the
   full-bleed hero cover, aligned to the page content column. */
.mc-breadcrumb {
	max-width: 1280px;
	margin: 0 auto;
	padding: 18px 32px 0;
}
.mc-breadcrumb__inner {
	font-family: 'Work Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink-muted);
}
.mc-breadcrumb__inner a {
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
}
.mc-breadcrumb__inner a:hover { color: var(--wp--preset--color--accent-ink); }
.mc-breadcrumb__inner .separator { margin: 0 8px; opacity: 0.5; }
@media (max-width: 782px) {
	.mc-breadcrumb { padding: 14px 24px 0; }
}
/* Trimmed from the original 104/96/88/112 — generous dark-editorial
   breathing room read as "empty" once the ground turned light and sparse
   copy no longer fills it visually. Still deliberate, just less slack. */
.mc-py-104 { padding-top: 84px; padding-bottom: 84px; }
.mc-py-96 { padding-top: 76px; padding-bottom: 76px; }
.mc-py-88 { padding-top: 68px; padding-bottom: 68px; }
.mc-pb-112 { padding-bottom: 88px; }
.mc-pt-88 { padding-top: 68px; padding-bottom: 0; }

/* Legal pages (Legal Notice / Privacy / Cookies / Terms) — a narrow reading
   measure and plain document typography inside the standard .mc-section. */
.mc-legal { max-width: 768px; }
.mc-legal h1 { margin-bottom: 0.25em; }
.mc-legal h2 { margin-top: 2em; font-size: 1.15rem; line-height: 1.3; }
.mc-legal h3 { margin-top: 1.4em; font-size: 1rem; }
.mc-legal p, .mc-legal ul, .mc-legal ol { line-height: 1.7; }
.mc-legal ul, .mc-legal ol { padding-left: 1.4em; }
.mc-legal li { margin: 0.35em 0; }
.mc-legal table { border-collapse: collapse; width: 100%; margin: 1.1em 0; font-size: 0.95em; }
.mc-legal th, .mc-legal td { border: 1px solid var(--wp--preset--color--border-light); padding: 0.5em 0.7em; text-align: left; vertical-align: top; }
.mc-legal th { font-weight: 600; }
.mc-legal .mc-legal__flag {
	border: 1px solid var(--wp--preset--color--sand);
	background: rgba(200, 185, 154, 0.12);
	border-radius: 6px;
	padding: 0.9em 1.1em;
	margin: 1.4em 0;
	font-size: 0.95em;
}
/* Villa page (EN 77 / FR 84): first section after the hero is now just the
   short italic .mc-lede standfirst (the subservice cards it was tightened
   for are gone — page is a single pillar now). A little more top room than
   the old 16px so the standfirst doesn't feel crammed against the hero. */
body.page-id-77 .wp-block-cover.is-style-hero-service + .mc-py-96,
body.page-id-84 .wp-block-cover.is-style-hero-service + .mc-py-96 {
	padding-top: 40px;
	padding-bottom: 8px;
}
/* Transport (75/82): still opens on the intro + subservice-card section —
   pulled up so both cards clear the fold on a laptop-height viewport. */
body.page-id-75 .wp-block-cover.is-style-hero-service + .mc-py-96,
body.page-id-82 .wp-block-cover.is-style-hero-service + .mc-py-96 {
	padding-top: 16px;
}
/* Yacht (76/83), Lifestyle (78/85), Corporate Events (79/86): the text +
   photo-placeholder columns block right after the hero (first child of the
   shared .mc-py-96 section, same 76px top padding used everywhere) raised
   35% then further at Lucas's request — 76px -> 49px -> 24px.
   Jet & Helicopter (193/194) got the same columns+photo treatment added to
   its "Private Jet" / "Helicopter" sections later (replacing its old
   plain-paragraph intro, which is why it wasn't included here originally),
   so it now shares this same padding-top too, for the same reason. */
body.page-id-76 .wp-block-cover.is-style-hero-service + .mc-py-96,
body.page-id-83 .wp-block-cover.is-style-hero-service + .mc-py-96,
body.page-id-78 .wp-block-cover.is-style-hero-service + .mc-py-96,
body.page-id-85 .wp-block-cover.is-style-hero-service + .mc-py-96,
body.page-id-79 .wp-block-cover.is-style-hero-service + .mc-py-96,
body.page-id-86 .wp-block-cover.is-style-hero-service + .mc-py-96,
body.page-id-193 .wp-block-cover.is-style-hero-service + .mc-py-96,
body.page-id-194 .wp-block-cover.is-style-hero-service + .mc-py-96,
body.page-id-209 .wp-block-cover.is-style-hero-service + .mc-py-96,
body.page-id-210 .wp-block-cover.is-style-hero-service + .mc-py-96,
body.page-id-211 .wp-block-cover.is-style-hero-service + .mc-py-96,
body.page-id-212 .wp-block-cover.is-style-hero-service + .mc-py-96 {
	padding-top: 24px;
}
/* Jet & Helicopter (193/194) only: the "Jet" and "Helicopter" sections are
   two separate .mc-py-96 groups, each with the default 76px padding on
   BOTH sides — the override above only touches the first section's
   padding-top (it's the one right after the hero). Between the two
   sections, "Jet"'s own 76px bottom padding plus "Helicopter"'s own 76px
   top padding stacked into a 152px gap of dead space, read as the
   Helicopter block sitting too far down. Trimmed both sides of that seam. */
body.page-id-193 #jet,
body.page-id-194 #jet {
	padding-bottom: 40px;
}
body.page-id-193 #jet + .mc-py-96,
body.page-id-194 #jet + .mc-py-96 {
	padding-top: 40px;
}
/* Transport's subservice-card margin-top override (was 28px, added when
   this page was deliberately pulled up further than Stays) removed —
   Lucas later asked for Transport's cards to land at exactly the same
   height as Stays', so this page now falls back to the sitewide default
   (12px, same as Stays uses) instead of its own value. */
.wp-block-buttons.mc-buttons-center { justify-content: center; }
.mc-w-560 { max-width: 560px; margin-left: auto; margin-right: auto; }
.mc-gap-64 { gap: 64px !important; }
.mc-services-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 28px;
}
.mc-services-grid > .wp-block-group {
	/* Same WP core "is-layout-flow" block-spacing footgun found on
	   .mc-subservice/.mc-cross-link: this row still carries that class
	   despite the flex override above, so WP's own global rule
	   (":root :where(.is-layout-flow) > *") was quietly adding
	   margin-top:24px to every card but the first, misaligning their tops
	   by exactly that much. */
	margin-top: 0 !important;
	flex: 0 1 287px;
	min-width: 240px;
	max-width: 342px;
	display: flex;
}
.mc-photo-label { text-align: center; font-size: 13px; color: var(--wp--preset--color--ink); opacity: 0.82; font-style: italic; padding: 0 16px; }

/* ==========================================================================
   SEO content components — introduced on the Villa hub (2026-08-26), reused
   on every service page as the page-by-page content pass proceeds.
   - .mc-lede : the 2-3 sentence plain-language answer under the H1, sized
     up from body copy so it reads as a standalone definition (the shape
     Google / AI answer boxes quote).
   - .mc-zones : simple responsive columns of locality lists ("where I work").
   - .mc-steps : numbered "how it works" row.
   - .mc-faq : native <details>/<summary>, no JS; the visible Q&A is also
     emitted as FAQPage JSON-LD in the same wp:html block.
   ========================================================================== */
/* Centered italic standfirst under the H1. Tuned to the Villa Concierge
   design handoff (2026-08-26): ~66ch measure, 18px/1.75, muted. Site's own
   Cormorant Garamond + blue accent are kept instead of the handoff's EB
   Garamond / bronze, for consistency with every other page (Lucas's call). */
.mc-villa-lead {
	display: flex;
	justify-content: center;
	padding: 48px clamp(24px, 7vw, 120px) 40px;
}
.mc-lede {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.75;
	text-align: center;
	text-wrap: pretty;
	color: var(--wp--preset--color--ink-muted);
	max-width: 940px;
	margin: 0 auto;
}

/* ---- Villa Concierge editorial service sections (handoff option 1a) ----
   Two equal columns, 90px gutter, alternating text/photo sides. Photo cells
   are 620px cover images (colour placeholders until real photography lands).
   Bullet lists are borderless with hairline rules between rows. */
.mc-villa-sections {
	max-width: 1440px;
	margin: 0 auto;
	padding: 23px clamp(24px, 7vw, 120px) 73px;
	display: flex;
	flex-direction: column;
	gap: 73px;
}
.mc-villa-sections > * { margin-top: 0 !important; }
.mc-villa-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 53px;
	align-items: stretch;
}
.mc-villa-section > * { margin-top: 0 !important; }
.mc-villa-section__media {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
}
.mc-villa-section.is-reverse .mc-villa-section__text { order: 2; }
.mc-villa-section.is-reverse .mc-villa-section__media { order: 1; }
.mc-villa-section__media .mc-villa-photo {
	margin: 0 !important;
	flex: 1;
	min-height: 393px;
	overflow: hidden;
}
.mc-villa-section__media .mc-villa-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
body.page-id-84 .mc-villa-section__media .mc-villa-photo { min-height: 415px; }
/* interior shot: bias the crop toward the bed / warm interior, away from
   the glazing so the (non-Mediterranean) view behind it stays out of frame */
#management .mc-villa-photo img,
#gestion .mc-villa-photo img { object-position: 58% 66%; }
/* Location/Rental shot: show the whole 3:2 frame (villa seen from further
   back) rather than a tall centre crop — so the photo runs wider and
   shorter than the management one, and the text column follows its height. */
#rental .mc-villa-photo,
#location .mc-villa-photo {
	flex: none;
	min-height: 0;
	aspect-ratio: 5 / 3;
}
/* FR "Location" photo uses the exact same rule as EN "Rental" above —
   Lucas wants the vignette the same size in both languages, even though the
   FR text column runs a little taller (2-line H2, longer lead). */
/* Text column fills the photo height: eyebrow / H2 / lead keep their natural
   size at the top, the bullet list flexes to take the rest so its last row
   lands level with the bottom of the photo. */
.mc-villa-section__text {
	display: flex;
	flex-direction: column;
}
.mc-villa-section__text > * { margin-top: 0 !important; }
.mc-villa-section__text .mc-villa-list { flex: 1; display: flex; flex-direction: column; }
.mc-villa-section__text .mc-villa-list li { flex: 1; display: flex; align-items: center; }
.mc-villa-section__text .is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
}
.mc-villa-section__text .is-style-eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 1px;
	background: var(--wp--preset--color--accent);
}
.mc-villa-section__text h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(23px, 2.25vw, 31px);
	line-height: 1.16;
	color: var(--wp--preset--color--ink);
	margin: 0 0 11px;
}
.mc-villa-section__text > p:not(.is-style-eyebrow) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
	margin: 0 0 16px;
	text-wrap: pretty;
}
.mc-villa-list {
	list-style: none;
	margin: 0 !important;
	padding: 0;
}
.mc-villa-list li {
	font-size: 12px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	padding: 7px 0;
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--border-light);
}
.mc-villa-list li:last-child { border-bottom: 1px solid var(--wp--preset--color--border-light); }

/* Swipeable card row — mobile only (see the @media block below). On desktop
   the same <ul> keeps its .mc-villa-list hairline form and the dots stay
   hidden. */
.mc-swipe__dots { display: none; }
.mc-villa-section__media .wp-block-cover {
	min-height: 437px !important;
	border-radius: 0 !important;
}
/* FR copy runs ~15% longer than EN, so the text column outgrows the 460px
   photo on the villas page. Give the photo more height there only. */
body.page-id-84 .mc-villa-section__media .wp-block-cover {
	min-height: 461px !important;
}
.mc-villa-caption {
	margin: 14px 0 0;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink-muted);
}
.mc-villa-sub {
	max-width: 1440px;
	margin: 0 auto;
	padding-left: clamp(24px, 7vw, 120px);
	padding-right: clamp(24px, 7vw, 120px);
}

.mc-zones {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 56px;
	margin: 24px auto 0;
	max-width: 640px;
	text-align: center;
}
.mc-zones > div {
	margin-top: 0 !important;
	border-top: 1px solid var(--wp--preset--color--border-light);
	padding: 18px 0;
}
.mc-zones h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 19px;
	margin: 0 0 6px;
	color: var(--wp--preset--color--ink);
}
.mc-zones p {
	font-size: 12px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	margin: 0;
}

.mc-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 28px;
	margin: 24px auto 0;
	max-width: 900px;
	counter-reset: mc-step;
}
.mc-steps > div {
	margin-top: 0 !important;
	counter-increment: mc-step;
	padding-top: 16px;
	border-top: 2px solid var(--wp--preset--color--accent-ink);
}
.mc-steps > div::before {
	content: counter(mc-step);
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	line-height: 1;
	color: var(--wp--preset--color--accent-ink);
	margin-bottom: 8px;
}
.mc-steps h3 { font-size: 16px; margin: 0 0 6px; color: var(--wp--preset--color--ink); }
.mc-steps p { font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--ink-muted); margin: 0; }

.mc-faq { max-width: 760px; margin: 16px auto 0; }
.mc-faq__item {
	border-top: 1px solid var(--wp--preset--color--border-light);
}
.mc-faq__item:last-child { border-bottom: 1px solid var(--wp--preset--color--border-light); }
.mc-faq__item > summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 34px 16px 0;
	position: relative;
	font-family: var(--wp--preset--font-family--display);
	font-size: 19px;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
}
.mc-faq__item > summary::-webkit-details-marker { display: none; }
.mc-faq__item > summary::after {
	content: "+";
	position: absolute;
	right: 2px;
	top: 14px;
	font-size: 20px;
	line-height: 1;
	color: var(--wp--preset--color--accent-ink);
}
.mc-faq__item[open] > summary::after { content: "\2013"; }
.mc-faq__item > div {
	padding: 0 0 18px;
}
.mc-faq__item > div p {
	font-size: 13px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 10px;
}
.mc-faq__item > div p:last-child { margin-bottom: 0; }
.mc-faq__item a { color: var(--wp--preset--color--accent-ink); }

@media (max-width: 1199px) {
	.mc-villa-sections { padding-left: 64px; padding-right: 64px; }
	.mc-villa-section { gap: 40px; }
	.mc-villa-section__text h2 { font-size: 30px; }
	.mc-villa-section__media .wp-block-cover { min-height: 340px !important; }
}
@media (max-width: 899px) {
	.mc-villa-lead { padding: 36px 24px 36px; }
	.mc-lede { max-width: 92%; }

	/* Villa service sections: one continuous editorial flow on mobile.
	   The desktop side-by-side paddings pile up once everything stacks, so
	   strip .mc-villa-sections' own vertical padding and let a single calm
	   gap handle the section breaks. */
	.mc-villa-sections { padding: 12px 24px 0; gap: 56px; }

	/* Mobile running order inside each section: eyebrow, H2, photo (+ caption),
	   then the lead paragraph and the list. .mc-villa-section__text is
	   flattened with display:contents so its children can interleave with the
	   photo cell; the reversed section is forced back to the same order. */
	.mc-villa-section {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.mc-villa-section__text { display: contents; }
	.mc-villa-section__text .is-style-eyebrow { order: 1; margin: 0 0 10px; }
	.mc-villa-section__text h2 { order: 2; font-size: 24px; line-height: 1.2; margin: 0 0 14px; }
	.mc-villa-section__media,
	.mc-villa-section.is-reverse .mc-villa-section__media {
		order: 3;
		/* !important beats WP core's :where(.is-layout-flow) > :last-child
		   { margin-block-end: 0 } — .mc-villa-section__media is the DOM
		   last child even though `order` puts the text after it. */
		margin-bottom: 28px !important;
	}
	.mc-villa-section__media .mc-villa-caption { margin-top: 12px; }
	.mc-villa-section__text > p:not(.is-style-eyebrow) { order: 4; font-size: 16px; margin: 0 0 16px; }
	.mc-villa-section__text .mc-villa-list { order: 5; }
	.mc-villa-section__media .wp-block-cover,
	body.page-id-84 .mc-villa-section__media .wp-block-cover {
		min-height: 0 !important;
		aspect-ratio: 4 / 3;
	}
	/* Real photo cells: keep them a proper size on phones (a 5/3 crop read as
	   a thin strip once the text around it stayed full-size). 4/3 gives the
	   image roughly a quarter more height for the same width. */
	.mc-villa-section__media .mc-villa-photo,
	body.page-id-84 .mc-villa-section__media .mc-villa-photo {
		flex: none;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
	/* the Villa page's Rental/Location vignette carries an id-specific 5/3
	   on desktop; bring it in line with every other phone photo cell */
	#rental .mc-villa-photo,
	#location .mc-villa-photo { aspect-ratio: 4 / 3; }
	.mc-villa-section__text .mc-villa-list,
	.mc-villa-section__text .mc-villa-list li { display: block; flex: none; }

	/* Mobile-only: the bullet list becomes a horizontal, scroll-snapping
	   card row that bleeds to both screen edges (the 24px gutter comes from
	   .mc-villa-sections). The peek of the next card signals swipeability.
	   Same <ul>/<li> as desktop, just restyled — kept as a real list for AT. */
	.mc-villa-list.mc-swipe {
		order: 5;
		display: flex;
		flex-direction: row;
		gap: 12px;
		overflow-x: auto;
		/* Must pin overflow-y: without it, `overflow-x:auto` makes the spec
		   compute overflow-y to `auto` too, so the row is technically a
		   vertical scroller as well and mobile browsers hand the drag to the
		   page instead of scrolling the row. */
		overflow-y: hidden;
		/* pan-x tells the browser this element owns horizontal drags, so a
		   sideways swipe scrolls the card row instead of the page. proximity
		   (not mandatory) makes the row easy to flick past a card. */
		touch-action: pan-x;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 2px 24px 18px;
		margin: 0 -24px;
	}
	.mc-villa-list.mc-swipe::-webkit-scrollbar { display: none; }
	.mc-villa-list.mc-swipe .mc-swipe__card {
		flex: 0 0 140px;
		scroll-snap-align: start;
		min-height: 58px;
		display: flex;
		align-items: center;
		padding: 9px 12px;
		border: 0;
		border-radius: 0;
		background: var(--wp--preset--color--footer);
		color: var(--wp--preset--color--text);
		font-family: var(--wp--preset--font-family--display);
		font-weight: 500;
		font-size: 13px;
		line-height: 1.3;
	}
	.mc-swipe__dots {
		order: 6;
		display: flex;
		gap: 8px;
		align-items: center;
		margin: 2px 0 0;
	}
	.mc-swipe__dots span {
		width: 22px;
		height: 2px;
		background: rgba(41, 67, 63, 0.22);
		transition: background 0.2s ease;
	}
	.mc-swipe__dots span.is-on { background: var(--wp--preset--color--ink); }

	/* "Where I work" / "Common questions": calmer padding than the sitewide
	   mc-py-96, and the H2 sized to match the service sections. */
	.mc-villa-sub { padding-left: 24px; padding-right: 24px; }
	.mc-villa-sub.mc-py-96 { padding-top: 68px; padding-bottom: 48px; }
	.mc-villa-sub h2.mc-center { font-size: 24px; }

	/* Where I work: a tight, left-aligned editorial list rather than sparse
	   centred cards — reads far better in a narrow column. */
	.mc-zones {
		grid-template-columns: 1fr;
		max-width: none;
		gap: 0;
		text-align: left;
		margin-top: 16px;
	}
	.mc-zones > div { padding: 13px 0; }
	.mc-zones h3 { font-size: 17px; margin: 0 0 3px; }
	.mc-zones p { font-size: 13px; line-height: 1.5; }

	.mc-faq { margin-top: 8px; }
}
@media (max-width: 600px) {
	.mc-lede { font-size: 16px; }
	.mc-faq__item > summary { font-size: 17px; }
}

@media (max-width: 782px) {
	.mc-py-104, .mc-py-96, .mc-py-88 { padding-top: 56px; padding-bottom: 56px; }
	.mc-pb-112 { padding-bottom: 56px; }
	.wp-block-columns.mc-gap-64 { gap: 32px !important; }
}

/* ==========================================================================
   Header
   ========================================================================== */
/* The header is a dark "glass" surface everywhere now — on hero pages it's
   fully transparent at rest and gains opacity/blur as you scroll (still a
   deep-green glass, never flipping to a flat ivory block); on pages
   without a hero (About) it's this same dark glass, just solid from the
   start since there's no photo underneath it to reveal. Text stays ivory
   throughout — the background is always dark, so it never needs to morph. */
.mc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(30, 51, 47, 0.88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(250, 249, 245, 0.14);
	transition: background 0.35s ease, border-color 0.35s ease;
}
.mc-header.is-scrolled {
	background: rgba(30, 51, 47, 0.96);
	border-bottom-color: rgba(250, 249, 245, 0.18);
}

/* ---- Overlay mode: pages that open on a dark hero photo ----
   reveal.js checks whether the page actually starts on a hero cover before
   adding .mc-header-overlay to <html> — pages without one (About) keep the
   plain sticky/solid dark-glass header above as-is.
   2026-08-22 redesign: was a continuous scroll-driven morph (CSS custom
   properties written every frame) between transparent and ~88% opaque —
   replaced with a flat 2-state toggle at rest / .is-scrolled (JS: a single
   40px-threshold class swap, see reveal.js) per explicit request: no
   backdrop-filter blur, no rgba anywhere in the scrolled state — flat,
   opaque #0d2b22 only, the semi-transparency was reading as "dirty". */
html.mc-header-overlay .mc-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
html.mc-header-overlay .mc-header.is-scrolled {
	background: #0d2b22;
	border-bottom: none;
	box-shadow: 0 8px 24px rgba(6, 29, 23, 0.35);
}
/* .mc-header__inner is the flex row (logo / nav / right block) and carries
   the actual padding — 22/20 at rest, tighter 12 once scrolled, per spec. */
html.mc-header-overlay .mc-header__inner {
	gap: 20px;
	padding: 26px 32px 20px;
	transition: padding 0.3s ease;
}
html.mc-header-overlay .mc-header.is-scrolled .mc-header__inner {
	padding: 12px 32px;
}

.mc-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 18px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.mc-logo {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	text-decoration: none;
}
.mc-logo__main {
	font-family: 'Cormorant Garamond', serif;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text);
}
.mc-logo__sub {
	font-size: 10px;
	letter-spacing: 0.34em;
	color: var(--wp--preset--color--text);
	font-weight: 600;
	opacity: 0.75;
}
.mc-nav__list {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mc-nav__list a {
	font-family: 'Work Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--text);
	transition: color 0.2s;
}
.mc-nav__list a:hover { color: var(--wp--preset--color--accent-light); }
.mc-nav__list .current-menu-item > a { color: var(--wp--preset--color--accent-light); }

/* ---- Sous-menu déroulant (ex : Transport ▾ — Chauffeur & Transfers /
   Car Rental / Jet & Helicopter) — desktop uniquement au survol/focus ;
   sur tactile (pas de vrai hover), affiché en permanence en retrait sous
   son parent dans le menu mobile, cf. le bloc @media plus bas. ---- */
.mc-nav__list li.menu-item-has-children { position: relative; }
.mc-nav__list li.menu-item-has-children > a::after {
	content: "▾";
	font-size: 10px;
	margin-left: 5px;
	opacity: 0.7;
	display: inline-block;
}
.mc-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 7px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: rgba(30, 51, 47, 0.96);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(250, 249, 245, 0.14);
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
@media (hover: hover) {
	.mc-nav__list li.menu-item-has-children:hover > .sub-menu,
	.mc-nav__list li.menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}
.mc-nav__list .sub-menu a {
	display: block;
	padding: 9px 18px;
	white-space: nowrap;
	font-weight: 500;
}

.mc-header__right { display: flex; align-items: center; gap: 16px; }

.mc-lang-switch {
	display: flex;
	border: 1px solid rgba(250, 249, 245, 0.32);
	border-radius: 999px;
	overflow: hidden;
}
.mc-lang-switch__btn {
	border: none;
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	background: transparent;
	color: var(--wp--preset--color--text);
	font-family: 'Work Sans', sans-serif;
}
.mc-lang-switch__btn.is-active { background: var(--wp--preset--color--accent-light); color: var(--wp--preset--color--deep-hover); }

/* ---- Mobile nav toggle (hamburger, 2-line) ---- */
.mc-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
}
.mc-nav-toggle span {
	display: block;
	width: 16px;
	height: 1.5px;
	background: var(--wp--preset--color--text);
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.mc-header.is-nav-open .mc-nav-toggle span:nth-child(1) { transform: translateY(2.5px) rotate(45deg); }
.mc-header.is-nav-open .mc-nav-toggle span:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); }

@keyframes menuIn {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Non-overlay pages only (no hero — e.g. About): kept exactly as before,
   independent of the burger breakpoint change below — this is the site's
   existing dark-glass-on-scroll treatment, untouched by the 2026-08-22
   header/hero redesign. The more specific html.mc-header-overlay rules
   above (no media query, so always active on overlay pages) win over
   these on overlay pages regardless of width, so no :not() guard needed. */
@media (max-width: 900px) {
	.mc-header {
		background: rgba(30, 51, 47, 0.7);
		backdrop-filter: blur(18px) saturate(140%);
		-webkit-backdrop-filter: blur(18px) saturate(140%);
		border-bottom: 1px solid rgba(250, 249, 245, 0.1);
	}
	.mc-header.is-scrolled {
		background: rgba(30, 51, 47, 0.92);
		border-bottom-color: rgba(250, 249, 245, 0.14);
	}
}

/* Burger breakpoint: 1100px (was 900) per the 2026-08-22 header redesign —
   shared by all pages since the nav markup/JS toggle is one mechanism, not
   split by overlay vs. non-overlay. Overlay pages' background treatment
   above is already width-independent (flat transparent/#0d2b22 toggle), so
   nothing else needs to move with it. */
@media (max-width: 1100px) {
	.mc-nav-toggle { display: flex; }
	.mc-header .mc-header-wa { display: none; }

	/* Freeze the page while the mobile menu is open: without this a swipe on
	   the open menu scrolls the content behind it instead of the menu. */
	html.mc-nav-lock,
	html.mc-nav-lock body { overflow: hidden; }

	.mc-nav {
		order: 10;
		flex-basis: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	.mc-header.is-nav-open .mc-nav {
		/* tall enough for every item + the Transport sub-menu, capped to the
		   viewport so the last items stay reachable; the menu itself scrolls
		   past that, and overscroll-behavior keeps that scroll from chaining
		   back to the page. */
		max-height: calc(100vh - 72px);
		max-height: calc(100dvh - 72px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	.mc-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px 0 18px;
		border-top: 1px solid rgba(250, 249, 245, 0.16);
		margin-top: 6px;
	}
	.mc-header.is-nav-open .mc-nav__list li {
		animation: menuIn 0.25s ease both;
	}
	.mc-nav__list li:nth-child(1) { animation-delay: 0.02s; }
	.mc-nav__list li:nth-child(2) { animation-delay: 0.05s; }
	.mc-nav__list li:nth-child(3) { animation-delay: 0.08s; }
	.mc-nav__list li:nth-child(4) { animation-delay: 0.11s; }
	.mc-nav__list li:nth-child(5) { animation-delay: 0.14s; }
	.mc-nav__list li:nth-child(6) { animation-delay: 0.17s; }
	.mc-nav__list li:nth-child(7) { animation-delay: 0.2s; }
	.mc-nav__list a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 13px 2px;
		border-bottom: 1px solid rgba(250, 249, 245, 0.14);
	}
	/* Pas de vrai hover sur tactile : le sous-menu (ex. Transport ▾) reste
	   affiché en permanence, en retrait, plutôt que de dépendre d'un survol
	   qui n'existe pas sur mobile. */
	.mc-nav__list li.menu-item-has-children > a::after { content: "→"; }
	.mc-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border: none;
		border-radius: 0;
		padding: 0 0 0 18px;
	}
	.mc-nav__list .sub-menu a {
		padding: 11px 2px;
		font-size: 13px;
		opacity: 0.85;
	}
	.mc-nav__list a::after {
		content: "→";
		opacity: 0.4;
		font-weight: 400;
	}
}

.mc-btn {
	display: inline-block;
	font-family: 'Work Sans', sans-serif;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s, transform 0.2s;
}
.mc-btn--pill { border-radius: 999px; }
.mc-btn--fill { background: var(--wp--preset--color--deep); color: var(--wp--preset--color--white); }
.mc-btn--fill:hover { background: var(--wp--preset--color--deep-hover); color: var(--wp--preset--color--white); }
.mc-btn--sm { padding: 10px 20px; font-size: 13px; }
/* The header itself is dark now — a matching dark-green button would
   vanish into it, so the header's WhatsApp CTA specifically inverts to a
   light pill instead (the reverse of every other --deep button on the site). */
.mc-header-wa.mc-btn--fill {
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--deep);
}
.mc-header-wa.mc-btn--fill:hover {
	background: var(--wp--preset--color--accent-light);
	color: var(--wp--preset--color--deep);
}

/* ---- Header/hero redesign (2026-08-22): logo, nav, lang switch and the
   WhatsApp button on overlay pages get their own typography/colour set —
   Cormorant Garamond (titles, the site's one display face — EB Garamond
   was dropped 2026-08-23 to stop the two Garamonds drifting) / Jost
   (labels, nav, buttons only — never body copy), a flat cream-on-deep-green
   palette instead of the site's ivory-on-translucent-glass one. Scoped to
   html.mc-header-overlay only, so non-hero pages (About) keep the
   existing dark-glass header untouched. ---- */
html.mc-header-overlay .mc-header #mc-logo-wrap .mc-word {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: 0.26em;
	color: #fff;
	text-align: center;
	white-space: nowrap;
}
html.mc-header-overlay .mc-header #mc-logo-wrap .mc-word:last-child {
	font-size: 13px;
	letter-spacing: 0.34em;
}
html.mc-header-overlay .mc-header .mc-line { background: #fff; }
html.mc-header-overlay .mc-header #mc-l-left,
html.mc-header-overlay .mc-header #mc-l-right { stroke: #fff; }
html.mc-header-overlay .mc-header.is-scrolled #mc-logo-wrap .mc-word { color: #f2ede1; }
html.mc-header-overlay .mc-header.is-scrolled .mc-line { background: #f2ede1; }
html.mc-header-overlay .mc-header.is-scrolled #mc-l-left,
html.mc-header-overlay .mc-header.is-scrolled #mc-l-right { stroke: #f2ede1; }

/* True optical centering of the nav within the header row. Tried
   margin:0 auto first (per the brief's literal CSS) — measured live via
   getBoundingClientRect and it does NOT actually center the nav box on
   screen when logo and the lang-switch/WhatsApp/burger block differ in
   width (they do, substantially): auto margins center the nav within its
   own leftover flex space, but that leftover space itself sits off-centre
   whenever the two siblings aren't the same width, so the nav visibly
   drifted toward the (narrower) logo side. Tried absolute-centering next —
   true centering, but with no collision guard against the logo/right-block
   it silently shrank the gap to the right block down to 8px on a live
   check (2026-08-22 follow-up), reading as if "EN · FR" were just another
   nav item. Switched to a 3-column grid (1fr auto 1fr): the two outer
   columns are always equal width to each other by definition, which gives
   the same true centering as absolute-positioning did, but because it's
   normal grid flow (not position:absolute) the `gap` below is a hard
   guarantee, not a hope — the auto (nav) column can never encroach on it. */
@media (min-width: 1101px) {
	html.mc-header-overlay .mc-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 24px;
	}
	html.mc-header-overlay .mc-header .mc-logo {
		justify-self: start;
		margin-left: 20px;
	}
	html.mc-header-overlay .mc-header .mc-nav {
		justify-self: center;
		margin: 0;
		/* The auto column sizes off the nav's max-content contribution — but
		   .mc-nav__list is flex-wrap:wrap, and a wrapping flex container's
		   reported max-content width is just its widest single item, not the
		   full unwrapped row (same footgun hit earlier with absolute
		   positioning, see the note above). nowrap+max-content forces the
		   real, fully unwrapped width so "Événements d'entreprise" (FR, the
		   longest label) doesn't fold onto a second line. */
		width: max-content;
		max-width: 100%;
	}
	html.mc-header-overlay .mc-header .mc-nav__list {
		flex-wrap: nowrap;
	}
	html.mc-header-overlay .mc-header .mc-header__right {
		justify-self: end;
	}
}
html.mc-header-overlay .mc-header .mc-nav__list {
	gap: 20px;
}
html.mc-header-overlay .mc-header .mc-nav__list a {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 8px rgba(6, 29, 23, 0.45);
}
html.mc-header-overlay .mc-header .mc-nav__list li.menu-item-has-children > a::after {
	font-size: 10px;
	opacity: 0.7;
}
html.mc-header-overlay .mc-header .mc-nav__list a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
}
html.mc-header-overlay .mc-header.is-scrolled .mc-nav__list a { color: #e8e2d4; }
html.mc-header-overlay .mc-header.is-scrolled .mc-nav__list a:hover { color: #fff; }

/* Plain "EN · FR" text, no bordered pill (that's the site-wide default
   look elsewhere — this header redesign wants a simpler inline pair).
   2026-08-22 follow-up: the middle "·" (generated content after the
   non-last button, since Polylang renders each language as its own <a>)
   was dropped at Lucas's request — plain "EN FR" now, spaced with `gap`
   instead of the dot carrying the separation. */
html.mc-header-overlay .mc-header .mc-lang-switch {
	border: none;
	border-radius: 0;
	overflow: visible;
	gap: 8px;
}
html.mc-header-overlay .mc-header .mc-lang-switch__btn {
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.14em;
	padding: 0;
	color: rgba(255, 255, 255, 0.75);
}
html.mc-header-overlay .mc-header .mc-lang-switch__btn.is-active { background: transparent; color: #fff; }
html.mc-header-overlay .mc-header.is-scrolled .mc-lang-switch__btn { color: #9fb3a8; }
html.mc-header-overlay .mc-header.is-scrolled .mc-lang-switch__btn.is-active { color: #fff; }

/* WhatsApp button: rectangular (2px, not the site-wide pill), same style
   in both header states per spec — only the hover changes. */
html.mc-header-overlay .mc-header-wa.mc-btn--fill {
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.08em;
	padding: 13px 22px;
	border-radius: 2px;
	background: #f2ede1;
	color: #0d2b22;
	white-space: nowrap;
}
html.mc-header-overlay .mc-header-wa.mc-btn--fill:hover {
	background: #fff;
	color: #0d2b22;
}

/* ==========================================================================
   Floating WhatsApp button (follows scroll, gentle heartbeat)
   ========================================================================== */
.mc-whatsapp-float {
	position: fixed;
	right: 25px;
	bottom: 25px;
	z-index: 9999;
	width: 65px;
	height: 65px;
	background-color: #25D366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	animation: mcHeartbeat 2.8s infinite;
	transition: transform 0.2s ease;
}
.mc-whatsapp-float:hover {
	transform: scale(1.1);
}
@keyframes mcHeartbeat {
	0% { transform: scale(1); }
	20% { transform: scale(1.12); }
	40% { transform: scale(1); }
	60% { transform: scale(1.12); }
	80% { transform: scale(1); }
	100% { transform: scale(1); }
}

@media (max-width: 600px) {
	.mc-whatsapp-float {
		width: 56px;
		height: 56px;
		right: 16px;
		bottom: 16px;
	}
	.mc-wa-icon { width: 30px; height: 30px; }
	.mc-footer { padding-bottom: 96px; }
}

@keyframes mcPulse {
	0% { box-shadow: 0 0 0 0 rgba(30, 51, 47, 0.55); }
	70% { box-shadow: 0 0 0 9px rgba(30, 51, 47, 0); }
	100% { box-shadow: 0 0 0 0 rgba(30, 51, 47, 0); }
}
.mc-btn--pulse { animation: mcPulse 2.6s ease-out infinite; }
.mc-btn--pulse:hover { animation: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.mc-footer {
	/* The same cove photo from the home hero, heavily veiled — discreet,
	   not a repeat of the hero moment, but the site's dark anchor no longer
	   closes on flat colour alone. Swap the path once real photography
	   replaces mer.jpg; everything else here is unaffected either way. */
	background-color: var(--wp--preset--color--footer);
	background-image:
		linear-gradient(165deg, rgba(14, 24, 21, 0.93) 0%, rgba(14, 24, 21, 0.96) 100%),
		url('/wp-content/uploads/2026/08/mer-2048x1365.webp');
	background-size: cover, cover;
	background-position: center, center 30%;
	background-repeat: no-repeat, no-repeat;
	color: rgba(250, 249, 245, 0.75);
	padding: 64px 32px 28px;
}
.mc-footer__grid {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1.5fr 1fr;
	gap: 40px 48px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(250, 249, 245, 0.14);
	align-items: start;
}
.mc-footer__logo {
	font-family: 'Cormorant Garamond', serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--wp--preset--color--text);
	display: block;
	margin-bottom: 6px;
}
.mc-footer__brand p { font-size: 14px; line-height: 1.7; max-width: 340px; margin: 0; }
/* Long list (services + legal) laid in two short columns so the left side
   balances the contact column on the right. */
.mc-footer__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 44px;
}
.mc-footer__nav-list li { break-inside: avoid; margin: 0 0 12px; }
.mc-footer__nav-list a { color: rgba(250, 249, 245, 0.72); font-size: 14px; }
.mc-footer__nav-list a:hover { color: var(--wp--preset--color--accent); }
.mc-footer__contact { display: flex; flex-direction: column; gap: 10px; font-size: 14px; align-items: flex-start; }
.mc-footer__contact a,
.mc-footer__contact .mc-cookie-reopen { color: rgba(250, 249, 245, 0.72); }
.mc-footer__contact a:hover,
.mc-footer__contact .mc-cookie-reopen:hover { color: var(--wp--preset--color--accent); }
.mc-footer__contact .mc-cookie-reopen {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
	text-align: left;
}
.mc-footer__copy { max-width: 1280px; margin: 24px auto 0; font-size: 12px; color: rgba(250, 249, 245, 0.45); }

@media (max-width: 782px) {
	.mc-footer__grid { grid-template-columns: 1fr; }
	.mc-footer__nav-list { columns: 2; column-gap: 24px; }
}

/* ==========================================================================
   Cookie consent banner (assets/js/consent.js)
   ========================================================================== */
.mc-cookie {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: none;
	background: #0e1815;
	border-top: 1px solid rgba(250, 249, 245, 0.16);
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
	color: rgba(250, 249, 245, 0.82);
}
.mc-cookie.is-open { display: block; }
.mc-cookie__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 18px 32px 20px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 14px 32px;
	align-items: center;
}
.mc-cookie__text {
	margin: 0;
	font-family: 'Work Sans', sans-serif;
	font-size: 13.5px;
	line-height: 1.6;
}
.mc-cookie__text a { color: var(--wp--preset--color--accent-light); text-decoration: underline; text-underline-offset: 2px; }
.mc-cookie__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.mc-cookie__btn {
	font-family: 'Work Sans', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 10px 20px;
	border-radius: 2px;
	border: 1px solid #f2ede1;
	background: #f2ede1;
	color: #0d2b22;
	cursor: pointer;
	white-space: nowrap;
}
.mc-cookie__btn:hover { background: #fff; border-color: #fff; }
.mc-cookie__btn[data-act="reject"] {
	background: transparent;
	color: #f2ede1;
}
.mc-cookie__btn[data-act="reject"]:hover { background: rgba(242, 237, 225, 0.12); }
.mc-cookie__link {
	font-family: 'Work Sans', sans-serif;
	font-size: 12.5px;
	font-weight: 500;
	background: none;
	border: 0;
	color: rgba(250, 249, 245, 0.7);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mc-cookie__link:hover { color: #fff; }
.mc-cookie__prefs {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid rgba(250, 249, 245, 0.14);
}
.mc-cookie__row {
	display: flex;
	gap: 12px;
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	line-height: 1.5;
	align-items: start;
}
.mc-cookie__row input { margin-top: 3px; accent-color: #29433f; }
.mc-cookie__note { color: rgba(250, 249, 245, 0.55); font-size: 12px; }
.mc-cookie__save { align-self: flex-start; margin-top: 2px; }
.mc-cookie__btn:focus-visible,
.mc-cookie__link:focus-visible { outline: 2px solid var(--wp--preset--color--accent-light); outline-offset: 2px; }

@media (max-width: 782px) {
	.mc-cookie__inner { grid-template-columns: 1fr; padding: 16px 20px 18px; }
	.mc-cookie__actions { width: 100%; }
	.mc-cookie__btn { flex: 1; text-align: center; }
}

/* ==========================================================================
   Buttons (core/button) — base look set in theme.json; refine variants here
   ========================================================================== */
/* Default (light-context) assumption: outline buttons sit on ivory/blanc
   cassé ground unless one of the dark/photo selectors below applies. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid rgba(41, 67, 63, 0.4);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(41, 67, 63, 0.08);
	color: var(--wp--preset--color--ink);
}

/* Default (light-context) fill button already gets deep-green bg / blanc
   cassé text from theme.json. On dark/photo grounds (hero, chapters, the
   deep-green CTA bands, footer) a deep-green button would vanish against
   its own background, so it inverts to a cream pill instead — and the
   outline variant flips to a light border/text on those same grounds. */
.wp-block-cover.is-style-hero-home .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wp-block-cover.is-style-hero-service .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wp-block-cover.is-style-chapter .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wp-block-group.is-style-panel-secondary .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.mc-footer .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--ink);
}
.wp-block-cover.is-style-hero-home .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-cover.is-style-hero-service .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-cover.is-style-chapter .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-group.is-style-panel-secondary .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.mc-footer .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-light);
	color: var(--wp--preset--color--ink);
}

.wp-block-cover.is-style-hero-home .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-cover.is-style-hero-service .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-cover.is-style-chapter .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-group.is-style-panel-secondary .wp-block-button.is-style-outline .wp-block-button__link,
.mc-footer .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(250, 249, 245, 0.5);
	color: var(--wp--preset--color--text);
}
.wp-block-cover.is-style-hero-home .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-cover.is-style-hero-service .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-cover.is-style-chapter .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-group.is-style-panel-secondary .wp-block-button.is-style-outline .wp-block-button__link:hover,
.mc-footer .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(250, 249, 245, 0.14);
	color: var(--wp--preset--color--text);
}

.wp-block-cover.is-style-hero-home .wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-cover.is-style-hero-home .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	transition: background 0.2s, transform 0.2s;
}
.wp-block-cover.is-style-hero-home .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* ==========================================================================
   Eyebrow (core/paragraph block styles)
   ========================================================================== */
/* Default (light-context) eyebrow — most of the site now. */
p.is-style-eyebrow {
	font-family: 'Work Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-ink);
	margin: 0 0 14px;
}
/* Cartes de services de la home uniquement — étiquettes 30% plus petites
   que la valeur par défaut du site (12px -> 8.4px), demandé par Lucas. */
.mc-services-grid p.is-style-eyebrow {
	font-size: 8.4px;
}

/* Dedicated dark/photo variant — hero, chapters, panel-secondary. */
p.is-style-eyebrow-light {
	font-family: 'Work Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-light);
	margin: 0 0 14px;
}

/* ==========================================================================
   Card (core/group block style) — service cards, cross-link cards
   ========================================================================== */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.25s, box-shadow 0.25s;
	flex-direction: column;
	width: 100%;
	min-height: 500px;
}
.mc-card--clickable { cursor: pointer; }
.wp-block-group.is-style-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
/* Une couleur plate en attente de photo n'a pas la même valeur qu'une vraie
   photo — on réduit la hauteur réservée pour les cartes sans photo pour
   l'instant (min-height:220px posé en inline sur le bloc, d'où !important).
   Repasse automatiquement en taille pleine dès qu'une vraie image est ajoutée. */
/* Le "stretch" flex n'égalisait pas les cartes de façon fiable dans une même
   rangée (la première carte finissait ~24px plus haute que les autres dès
   que le plancher ci-dessous était réduit pour coller aux descriptions
   courtes) — un plancher explicite règle ça. Valeur choisie légèrement
   au-dessus de la plus grande carte réelle observée (~400px de contenu pour
   une description sur 3-4 lignes), pour que toutes les cartes d'une même
   rangée aient la même hauteur sans dépendre du stretch. Abaissé de 560 à
   440px à la demande de Lucas — le plancher précédent laissait un grand vide
   avant "Learn more →" sur les cartes à description courte. */
.wp-block-group.is-style-card:not(.mc-cross-link) {
	min-height: 312px !important;
}
.wp-block-group.is-style-card:not(:has(img)) .wp-block-cover {
	min-height: 150px !important;
}
@media (max-width: 900px) {
	.wp-block-group.is-style-card {
		border-radius: 14px;
		background: var(--wp--preset--color--panel);
		border-color: rgba(41, 67, 63, 0.1);
	}
	.wp-block-group.is-style-card:hover {
		transform: none;
		box-shadow: none;
	}
	.wp-block-group.is-style-card:active {
		transform: scale(0.98);
	}
}
.wp-block-group.is-style-card .wp-block-cover {
	border-radius: 0;
	flex-shrink: 0;
}
/* Home service cards: shorter photo band so the 6-card grid fits on
   screen without scrolling (Lucas). Overrides the block's inline
   min-height:220px (stylesheet !important beats non-important inline). */
.mc-services-grid .wp-block-group.is-style-card .wp-block-cover {
	min-height: 184px !important;
}

/* These covers only ever exist to hold a not-yet-supplied photo, captioned
   by mc-photo-label (e.g. "Luxury car with driver, Mallorca airport") — the
   block's own dim-0 setting makes its colour layer fully transparent, so
   today it just shows the card's plain background with the caption
   floating on it. Same discreet placeholder treatment as the hero/chapter
   placeholders instead of a blank box. Drops out on its own — no code to
   touch — the moment a real photo is added in the editor. */
.wp-block-cover:not(:has(img)):has(.mc-photo-label) {
	background:
		linear-gradient(160deg, rgba(250, 249, 245, 0.05) 0%, transparent 40%),
		repeating-linear-gradient(135deg, rgba(250, 249, 245, 0.03) 0px, rgba(250, 249, 245, 0.03) 1px, transparent 1px, transparent 28px),
		linear-gradient(135deg, #29433F 0%, #1E332F 100%);
}
.wp-block-cover:not(:has(img)) .mc-photo-label {
	color: rgba(250, 249, 245, 0.6);
	opacity: 1;
}

.mc-card__body {
	padding: 18px 22px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.mc-card__body h3 { margin: 0 0 8px; font-size: 20px; color: var(--wp--preset--color--ink); }
.mc-card__body h3 a { color: inherit; }
.mc-card__body p { font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--ink-muted); margin: 0 0 10px; }
.mc-card__learn-more { font-size: 13px; font-weight: 600; color: var(--wp--preset--color--ink); }
.mc-card__body .mc-card__learn-more { margin: auto 0 0; padding-top: 2px; }
.mc-card__learn-more a { color: inherit; text-decoration: none; display: inline-block; transition: letter-spacing 0.2s ease, color 0.2s ease; }
.mc-card__learn-more a:hover { letter-spacing: 0.04em; color: var(--wp--preset--color--accent-ink); }
.mc-cross-link h3 a { transition: letter-spacing 0.2s ease; display: inline-block; }
.mc-cross-link h3 a:hover { letter-spacing: 0.02em; }

/* Overrides is-style-card's 500px min-height, sized for a photo+body
   card — this variant is only ever an eyebrow + a title link. */
.wp-block-group.is-style-card.mc-cross-link {
	/* Was a hard `height:150px` (not just min-height) to force the pair to
	   match regardless of flex/grid stretch quirks — but combined with
	   .is-style-card's inherited overflow:hidden, that silently clips any
	   card whose eyebrow+title wraps to more lines than the 150px box has
	   room for (found live: some pages were sitting at 149px of content in
	   a 150px box — 1px of slack from actually clipping a title). Kept
	   min-height for the common-case match, dropped the hard cap, and
	   un-hid overflow so a longer pair simply grows a little taller
	   (a minor height mismatch between the two cards) instead of ever
	   invisibly cutting text off. */
	min-height: 150px;
	overflow: visible;
	justify-content: center;
	/* Same "is-layout-flow" WP core block-spacing footgun found and fixed on
	   .mc-subservice: this card's own row still carries that class despite
	   the flex/grid display override on its parent, so the second card was
	   quietly getting margin-top:24px from WP core, misaligning its top
	   edge against the first card even though both boxes were otherwise the
	   same height. */
	margin-top: 0 !important;
}
.mc-cross-link { padding: 28px 22px; }
.mc-cross-link p.is-style-eyebrow { margin-bottom: 10px; }
.mc-cross-link h3 { margin: 0; font-size: 19px; }
.mc-cross-link h3 a { color: inherit; }
.wp-block-group.is-style-card.mc-cross-link:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

/* "Tailor-Made" catch-all card at the end of a photo-card grid (e.g.
   Lifestyle's "Experiences" section) — deliberately NOT another
   photo-placeholder tile, since it isn't a specific experience waiting on a
   photo, it's an intentional standing CTA. Solid brand navy, centered text,
   no cover block at all. */
.wp-block-group.is-style-card.mc-card--cta {
	background: #16324a;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 32px 28px;
}
.mc-card--cta p.is-style-eyebrow { color: var(--wp--preset--color--accent-light); }
.mc-card--cta h3 { color: #fff; }
.mc-card--cta p:not(.is-style-eyebrow) { color: rgba(250, 249, 245, 0.82); }

/* ==========================================================================
   Sous-services (core/group block style) — petites offres complémentaires
   présentées à l'intérieur d'une page de service (ex : location de voiture /
   jet / hélico sur Transport, vélo sur Lifestyle). Volontairement sans la
   hauteur plancher de .is-style-card : ce sont des compléments, pas des
   piliers, donc la carte se limite à la taille de son propre contenu. Le
   flex-wrap fait déjà tout le travail responsive (empilement automatique en
   dessous d'une certaine largeur, sans media query dédiée). */
.mc-subservices {
	/* Was flex + align-items:stretch — measured live (getBoundingClientRect,
	   offsetHeight) with two subservice cards of different content length:
	   despite align-items computing to "stretch" (checked via
	   getComputedStyle, even force-set inline with !important), the two
	   card boxes stayed genuinely unequal height (e.g. 205px vs 181px, tops
	   misaligned, bottoms flush) — a real flex stretch failure with this
	   flex-basis+flex-wrap combination, not a specificity/cascade issue.
	   Grid's row-stretch is a different algorithm and isn't affected the
	   same way. */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	align-items: stretch;
	gap: 24px;
	margin-top: 12px;
}
.mc-subservice {
	min-width: 220px;
	/* Real root cause of the "staircase" misalignment (found live via
	   getComputedStyle on each card individually, not just the container):
	   .mc-subservices still carries Gutenberg's own "is-layout-flow" class
	   regardless of the display:grid override above, and WP core's global
	   block-spacing rule (":root :where(.is-layout-flow) > *") applies
	   margin-top:24px to every child except the first — pushing the second
	   card down by exactly that much, independent of grid/flex entirely.
	   height:100% (equalizes the two cards even when one has more text —
	   grid's own align-items:stretch resolved the row height correctly but
	   wasn't reliably filling the shorter item, so this is explicit rather
	   than implicit) plus margin-top:0 (kills the WP block-spacing offset)
	   together fix both the height mismatch and the top-edge misalignment. */
	height: 100%;
	margin-top: 0 !important;
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 4px;
	transition: transform 0.25s, box-shadow 0.25s;
}
.mc-subservice:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}
/* La vignette entière est cliquable (SEO : chaque sous-service a sa propre
   page, ex. /transport/jet/) — le lien porte le padding via une marge
   négative pour occuper exactement la même zone visuelle que la carte,
   plutôt que de limiter la cible de clic au seul titre. */
.mc-subservice__link {
	display: block;
	margin: -1px;
	padding: 24px;
	color: inherit;
}
.mc-subservice p.is-style-eyebrow { margin-bottom: 8px; }
.mc-subservice h3 { font-size: 18px; margin: 0 0 8px; color: var(--wp--preset--color--ink); }
.mc-subservice p:not(.is-style-eyebrow):not(.mc-subservice__cta) { font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--ink-muted); margin: 0 0 10px; }
.mc-subservice__cta { font-size: 13px; font-weight: 600; color: var(--wp--preset--color--ink); margin: 0; }
.mc-subservice:hover .mc-subservice__cta { color: var(--wp--preset--color--accent-ink); letter-spacing: 0.02em; }

/* ==========================================================================
   Panel secondary (core/group block style) — CTA bands, about band
   ========================================================================== */
/* Deep-green premium band — About/CTA bands on every page. The dark
   register against the light default: light text, sea-blue eyebrow. */
.wp-block-group.is-style-panel-secondary {
	/* Same reasoning as the footer above — a veiled photo instead of a flat
	   panel, so the CTA/About bands carry a little of the hero's presence
	   onto every page rather than just the home. */
	background-color: var(--wp--preset--color--panel-secondary);
	background-image:
		linear-gradient(165deg, rgba(30, 51, 47, 0.85) 0%, rgba(30, 51, 47, 0.9) 100%),
		url('/wp-content/uploads/2026/08/mer-2048x1365.webp');
	background-size: cover, cover;
	background-position: center, center 35%;
	background-repeat: no-repeat, no-repeat;
	color: var(--wp--preset--color--text);
}
.wp-block-group.is-style-panel-secondary h1,
.wp-block-group.is-style-panel-secondary h2,
.wp-block-group.is-style-panel-secondary h3 { color: var(--wp--preset--color--text); }
.wp-block-group.is-style-panel-secondary p { color: var(--wp--preset--color--text-muted); }
.wp-block-group.is-style-panel-secondary p.is-style-eyebrow,
.wp-block-group.is-style-panel-secondary p.is-style-eyebrow-light { color: var(--wp--preset--color--accent-light); }
.wp-block-group.is-style-panel-secondary .wp-block-quote p { color: var(--wp--preset--color--text); }
.wp-block-group.is-style-panel-secondary .wp-block-quote { border-left-color: var(--wp--preset--color--accent); }

/* ==========================================================================
   Dash list (core/list block style) — feature bullets
   ========================================================================== */
ul.wp-block-list.is-style-dash-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
ul.wp-block-list.is-style-dash-list li {
	position: relative;
	padding-left: 26px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}
ul.wp-block-list.is-style-dash-list li::before {
	content: "—";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* ==========================================================================
   Quote (core/quote) — pull-quote used on service pages
   ========================================================================== */
.wp-block-quote {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding-left: 20px;
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
}
.wp-block-quote p {
	font-size: 19px;
	font-style: italic;
	color: var(--wp--preset--color--ink);
	line-height: 1.6;
	margin: 0;
}

/* ==========================================================================
   Fixed photo backdrop (home page only, header.php)
   Pinned behind the hero and the intro statement so the photo's presence
   doesn't end at the hero's edge — the intro section below is made
   transparent so this shows through as you scroll past the hero. Desktop
   only: fixed backgrounds are unreliable on mobile browsers (iOS Safari
   especially), so under 900px this backdrop is hidden and the intro
   section gets a plain ivory background back, same as every other page.
   ========================================================================== */
.mc-fixed-backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
	/* Lightened a second time (2026-08-22, was 0.88/0.55/0.72 originally,
	   then 0.65/0.35/0.5) — Lucas flagged the water still reading too
	   green/washed-out even after the hero's own extra scrim was dropped.
	   If text on any section relying on this tint (chapters, CTA/About
	   band, footer, testimonials) gets hard to read, that's this rule. */
	background:
		linear-gradient(0deg, rgba(30, 51, 47, 0.45) 0%, rgba(30, 51, 47, 0.24) 45%, rgba(30, 51, 47, 0.35) 100%),
		url('/wp-content/uploads/2026/08/mer-2048x1365.webp') center 30% / cover no-repeat;
}
@media (max-width: 900px) {
	.mc-fixed-backdrop { display: none; }
}
body.home .mc-section--narrow {
	position: relative;
	z-index: 1;
}
/* Full-width transparent dark band behind ONLY the Services heading +
   intro line (Lucas: keep it to those two lines, but back to full width
   and a light dark veil so the sea backdrop still shows through). */
/* 2026-08-28: reverted from full-bleed back to a band that just hugs the
   two lines of text (Lucas: "un bandeau rectangle qui fasse la taille du
   texte") — width:fit-content + auto margins instead of the viewport-wide
   negative-margin trick, so it reads as a tag/label over the photo rather
   than a bar spanning the page. */
#services-section .mc-services-band {
	background: rgba(20, 38, 34, 0.45);
	padding: 32px 48px;
	width: fit-content;
	max-width: calc(100% - 64px);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 48px;
	border-radius: 12px;
	position: relative;
	z-index: 1;
}
#services-section .mc-services-band h2,
#services-section .mc-services-band p {
	color: var(--wp--preset--color--text) !important;
}
/* Mobile: there is no fixed photo backdrop under 901px, so the translucent
   dark veil just sat as a muddy green slab on the ivory page. Drop the band
   entirely here — plain centred intro, dark ink, like the rest of the page. */
@media (max-width: 900px) {
	/* 2026-08-28: margin-left/right:0 predates the fit-content band added
	   above — back when this box was always full-width, zero margins and
	   auto margins looked identical, so it went unnoticed that zero margins
	   on a now-narrower (fit-content) box leaves it flush against the
	   left edge instead of centered (confirmed live: 32px gap on the left,
	   96px on the right, on a 390px phone). auto/auto centers it like the
	   desktop version already does. */
	#services-section .mc-services-band {
		background: none;
		padding: 4px 24px 0;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0;
	}
	#services-section .mc-services-band h2 {
		color: var(--wp--preset--color--ink) !important;
	}
	#services-section .mc-services-band p {
		color: var(--wp--preset--color--ink-muted) !important;
	}
}
@media (min-width: 901px) {
	body.home .mc-section--narrow {
		background: transparent;
	}
	/* The safety-net rules further down force has-text-color/-muted-color
	   back to ink/ink-muted wherever they show up outside a recognised
	   dark panel — correct everywhere else, but this specific section is
	   deliberately sitting on the photo backdrop above, so it needs the
	   opposite: light text, overriding that safety net's !important with
	   matching !important of its own. */
	body.home .mc-section--narrow h2,
	body.home .mc-section--narrow p,
	body.home .mc-section--narrow .has-text-color,
	body.home .mc-section--narrow .has-text-muted-color {
		color: var(--wp--preset--color--text) !important;
	}
	body.home .mc-section--narrow p:not(.has-text-color):not(.has-text-muted-color) {
		color: var(--wp--preset--color--text-muted);
	}
	body.home .mc-section--narrow::after {
		background: rgba(250, 249, 245, 0.3);
	}
	/* The "Services" heading + intro line sit inside .mc-services-band (a
	   solid grey panel, styled above) so they no longer need the old
	   light-on-photo hack — the panel handles legibility. */
	/* CTA/About band and footer each used to carry their OWN separate copy
	   of mer.jpg (a different crop/zoom, since each is "cover"-fit to its
	   own much-shorter box) — right where the always-on-screen, never-
	   moving .mc-fixed-backdrop photo (above) met this element's own
	   independently-scaled copy of the same file, the two visibly
	   disagreed and produced a hard seam (confirmed from Lucas's
	   screenshots: two different crops of the same cove meeting mid-page).
	   On the home page specifically only — where the fixed backdrop
	   exists at all — drop each element's own photo layer, keeping only
	   its tint gradient, so the SAME fixed image just keeps showing
	   through underneath, unbroken, all the way to the bottom of the
	   page. Other pages (no .mc-fixed-backdrop present) keep their own
	   independent photo treatment unchanged. */
	body.home .wp-block-group.is-style-panel-secondary {
		background-image: linear-gradient(165deg, rgba(30, 51, 47, 0.85) 0%, rgba(30, 51, 47, 0.9) 100%);
		background-color: transparent;
	}
	body.home .mc-footer {
		background-image: linear-gradient(165deg, rgba(14, 24, 21, 0.93) 0%, rgba(14, 24, 21, 0.96) 100%);
		background-color: transparent;
	}
	/* Testimonials section: same treatment — transparent so the fixed
	   backdrop keeps showing through here too, rather than a flat ivory
	   block breaking the "one continuous photo" effect. The individual
	   review cards stay opaque (blanc cassé) so the quotes stay legible,
	   same pattern as the service cards floating over this same photo
	   further up the page — only the section's own background and its
	   eyebrow/heading (which default to dark ink, unreadable on the photo)
	   need overriding here. */
	body.home .mc-testimonials {
		background: transparent;
	}
	body.home .mc-testimonials p.is-style-eyebrow,
	body.home .mc-testimonials h2 {
		color: var(--wp--preset--color--text) !important;
	}
}

/* ==========================================================================
   Hero (core/cover block styles)
   ========================================================================== */
@keyframes heroPan {
	from { transform: scale(1.06) translateY(-14px); }
	to { transform: scale(1.06) translateY(14px); }
}

.wp-block-cover.is-style-hero-home,
.wp-block-cover.is-style-hero-service {
	overflow: hidden;
	position: relative;
}
.wp-block-cover.is-style-hero-home { min-height: min(960px, 100vh) !important; }
.wp-block-cover.is-style-hero-service { min-height: min(420px, 65vh) !important; }

/* No photo set yet on this hero — a shorter, solid, deliberately-textured
   deep-green panel instead of the full-bleed height with a translucent
   gradient floating on nothing. Bumped from 320 to 390px: at 320px, pages
   with a longer two-line H1 (e.g. "Private Jet & Helicopter Charters in
   Mallorca") pushed the bottom-anchored eyebrow up underneath the sticky
   header, overlapping it by ~10px instead of clearing it — confirmed via
   getBoundingClientRect, not just a visual impression. 390px keeps a safe
   margin even for the longest titles on the site. */
.wp-block-cover.is-style-hero-service:not(:has(img)) {
	min-height: min(390px, 58vh) !important;
	background:
		linear-gradient(160deg, rgba(250, 249, 245, 0.05) 0%, transparent 40%),
		repeating-linear-gradient(135deg, rgba(250, 249, 245, 0.03) 0px, rgba(250, 249, 245, 0.03) 1px, transparent 1px, transparent 28px),
		linear-gradient(135deg, #29433F 0%, #1E332F 100%);
}
/* Stays (EN 77 / FR 84) and Transport (EN 75 / FR 82) hub pages used to sit
   shorter here (360px) than the rest of the service pages, specifically so
   their two subservice cards stayed visible on arrival without scrolling.
   2026-08-28: Lucas asked for Chauffeur's hero to be "exactement la même
   taille que toutes les autres pages" — these two were the only ones still
   at 360px, so they now fall through to the shared 381px rule just below
   instead of keeping their own value. Worth knowing: their cards now sit
   ~21px lower on arrival than before. */
/* Jet & Helicopter (193/194), Yacht (76/83), Lifestyle (78/85), Corporate
   (79/86), Stays (77/84), Transport (75/82), Chauffeur (209/210) and Car
   Rental (211/212): one flat 381px across every service-page hero.
   2026-08-28: dropped the min(381px, 53vh) vh cap here too — same bug
   Lucas caught on Chauffeur (a short browser window, or any mobile
   portrait phone, could shrink this below the fixed header's own height
   and overlap the eyebrow badge; see the Chauffeur/Car Rental rule below
   for the exact measurements) applied equally to this whole group, so the
   fix is applied site-wide at the same time as the height unification. */
body.page-id-193 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-194 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-76 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-83 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-78 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-85 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-79 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-86 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-77 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-84 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-75 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-82 .wp-block-cover.is-style-hero-service:not(:has(img)) {
	min-height: 381px !important;
}
/* Chauffeur & Airport Transfers (209/210) and Car Rental (211/212): same
   "match the other pillar pages" request. Car Rental's H1 is one line, no
   risk either way. Chauffeur's H1 is two lines ("...Airport Transfers in
   Mallorca") like Jet & Helicopter's used to be — but 390px -> 381px is
   only a 9px cut (checked live: header clearance was 49px at 390px, still
   ~40px at 381px, nowhere near the ~10px overlap threshold that set the
   floor originally), so unlike Jet & Helicopter this one didn't need a
   title trim to move safely. */
/* 2026-08-28: the min(381px, 53vh) cap let this box shrink below the fixed
   header's own height whenever the browser window itself is short — Lucas
   caught it live at a 582px-tall window, where the box dropped to 308px
   and the "During Your Stay" eyebrow badge overlapped the header by ~40px
   (confirmed via getBoundingClientRect: eyebrow top 98px vs header bottom
   140px). The same math also puts mobile portrait phones in the overlap
   zone at the ORIGINAL 381px height (eyebrow top ~159px vs header bottom
   ~160px on a 390x844 viewport — already touching before any window is
   even short). Flooring at a flat 381px on every viewport size removes the
   vh dependency that caused both: still the same height tuned for
   Villas/Transport symmetry, just no longer able to shrink under it. */
body.page-id-209 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-210 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-211 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-212 .wp-block-cover.is-style-hero-service:not(:has(img)) {
	min-height: 381px !important;
}
/* Transport (75/82) used to get its own 360px/52vh rule here, re-matching
   Stays after several independent tuning rounds. 2026-08-28: folded into
   the single 381px rule above (site-wide height unification), so this
   page-specific override is gone — nothing left here needs its own value. */
.wp-block-cover.is-style-hero-service:has(img) .mc-hero-ph-mark,
.wp-block-cover.is-style-hero-home:has(img) .mc-hero-ph-mark {
	display: none;
}

/* Yacht (76/83): real photo added — same technique as the home hero (a
   CSS background-image on the still-photo-less cover, not a true <img>
   tag), so this stays scoped to :not(:has(img)) and every height/spacing
   rule already tuned for this page today keeps applying unchanged. Only
   the background itself, the legibility scrim (normally zeroed out for
   the placeholder panel, restored here to the same gradient a genuinely
   photographed hero-service page would get) and the "Photography coming"
   badge (hidden — there's a real photo now) are touched. Portrait source
   photo; positioned to keep the yacht (right-of-centre, mid-height in the
   original) in frame once cropped to the hero's wide/short box. */
body.page-id-76 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-83 .wp-block-cover.is-style-hero-service:not(:has(img)) {
	background: url('/wp-content/uploads/2026/08/yacht-cove-mallorca.webp') center 53% / cover no-repeat;
}
body.page-id-76 .wp-block-cover.is-style-hero-service:not(:has(img))::after,
body.page-id-83 .wp-block-cover.is-style-hero-service:not(:has(img))::after {
	background: linear-gradient(0deg, rgba(30, 51, 47, 0.84) 0%, rgba(41, 67, 63, 0.32) 60%, rgba(250, 249, 245, 0.1) 100%);
}
body.page-id-76 .mc-hero-ph-mark,
body.page-id-83 .mc-hero-ph-mark {
	display: none;
}

/* Transport (75/82): real photo added — same CSS-background technique as
   Yacht/Jet (not a true <img>), so the 360px/52vh hero box tuned above
   keeps applying and this hero stays exactly the same size as the other
   service heroes. Aerial Sa Calobra road; scrim heavier at the bottom so
   the bottom-left eyebrow + H1 stay clearly readable (Lucas: "titre bien
   visible"). */
body.page-id-75 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-82 .wp-block-cover.is-style-hero-service:not(:has(img)) {
	background: url('/wp-content/uploads/2026/08/transport-sa-calobra-hero-v2.webp') center 55% / cover no-repeat;
}
body.page-id-75 .wp-block-cover.is-style-hero-service:not(:has(img))::after,
body.page-id-82 .wp-block-cover.is-style-hero-service:not(:has(img))::after {
	background: linear-gradient(0deg, rgba(11, 22, 20, 0.86) 0%, rgba(20, 38, 34, 0.42) 52%, rgba(250, 249, 245, 0.06) 100%);
}
body.page-id-75 .mc-hero-ph-mark,
body.page-id-82 .mc-hero-ph-mark {
	display: none;
}

/* Car Rental (211/212) hero already carries the Porsche-at-Portals photo
   further down this file (added earlier). The R8 Lucas supplied lives in
   the #fleet body section as a real <img>, not here. */

/* Jet & Helicopter (193/194): same real-photo treatment as Yacht above —
   background-image (not a true <img>) so today's height/spacing tuning
   keeps applying, scrim restored, placeholder badge hidden. Portrait
   source photo (jet + car on the tarmac); positioned to keep both
   vehicles in frame. */
body.page-id-193 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-194 .wp-block-cover.is-style-hero-service:not(:has(img)) {
	/* v4: instead of fighting the leftover side gaps from the v3 "dezoom"
	   compromise in CSS, Lucas ran v3 through an AI outpaint (Perplexity,
	   prompt in prompts-recadrage-photos-ia.md) asking it to extend the
	   sky/tarmac sideways rather than zoom — v4 (1942x809, ~2.4:1) has
	   enough width now that plain `cover` + center covers the hero cleanly
	   with no background-color fallback needed. */
	background: url('/wp-content/uploads/2026/08/private-jet-panorama-mallorca.webp') center center / cover no-repeat;
}
body.page-id-193 .wp-block-cover.is-style-hero-service:not(:has(img))::after,
body.page-id-194 .wp-block-cover.is-style-hero-service:not(:has(img))::after {
	background: linear-gradient(0deg, rgba(30, 51, 47, 0.84) 0%, rgba(41, 67, 63, 0.32) 60%, rgba(250, 249, 245, 0.1) 100%);
}
body.page-id-193 .mc-hero-ph-mark,
body.page-id-194 .mc-hero-ph-mark {
	display: none;
}

/* Villas (77/84): same real-photo treatment as Yacht/Jet above. v1 source
   photo was 2100x1400 (~1.5:1, near-square) — couldn't show both the
   roofline and the pool at once (Lucas: "on ne voit pas la villa"). Fixed
   at the source instead of fighting it in CSS: Lucas ran it through an AI
   reformat (Perplexity, prompt in prompts-recadrage-photos-ia.md) asking
   for both the roof AND the pool in one wide band — v2 (1983x793, ~2.5:1)
   keeps both, so `cover` only needs to trim ~27% of the height, plain
   center works. */
body.page-id-77 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-84 .wp-block-cover.is-style-hero-service:not(:has(img)) {
	background: url('/wp-content/uploads/2026/08/villa-pool-sunset-mallorca-v2.webp') center center / cover no-repeat;
}
body.page-id-77 .wp-block-cover.is-style-hero-service:not(:has(img))::after,
body.page-id-84 .wp-block-cover.is-style-hero-service:not(:has(img))::after {
	background: linear-gradient(0deg, rgba(30, 51, 47, 0.84) 0%, rgba(41, 67, 63, 0.32) 60%, rgba(250, 249, 245, 0.1) 100%);
}
body.page-id-77 .mc-hero-ph-mark,
body.page-id-84 .mc-hero-ph-mark {
	display: none;
}

/* Car Rental (211/212): same real-photo treatment as Yacht/Jet/Villas
   above. Real (not AI-generated) photo Lucas took himself at Puerto
   Portals — a Porsche 911 Turbo S at sunset, marina tower and yachts in
   the background. Original was portrait with a lot of empty sky; v1
   (AI-recomposed, 1727x910) lost the tower — same "two features too far
   apart vertically" problem as the Villas hero. v2 (1727x911) had the AI
   close the gap between the car and the tower specifically, same fix as
   Villas' v2. Still narrower than the hero's ~3.78:1 box so `cover` crops
   roughly half the height — centered as a first pass. */
body.page-id-211 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-212 .wp-block-cover.is-style-hero-service:not(:has(img)) {
	/* v4: instead of compressing the composition vertically (v3, lost the
	   car's wheels) or forcing a literal zoom-out with big side gaps,
	   Lucas had the AI EXTEND the original portrait photo sideways instead
	   — widened the quay/water/sky left and right rather than moving
	   anything closer together. Result is 1983x793 (~2.5:1), close enough
	   to the hero's ~3.78:1 that `cover` now shows ~66% of the height
	   (vs ~50% for v2/v3), fitting the tower AND the car's wheels with no
	   background-color fallback needed. */
	background: url('/wp-content/uploads/2026/08/porsche-portals-mallorca-v4.webp') center 85% / cover no-repeat;
}
body.page-id-211 .wp-block-cover.is-style-hero-service:not(:has(img))::after,
body.page-id-212 .wp-block-cover.is-style-hero-service:not(:has(img))::after {
	background: linear-gradient(0deg, rgba(30, 51, 47, 0.84) 0%, rgba(41, 67, 63, 0.32) 60%, rgba(250, 249, 245, 0.1) 100%);
}
body.page-id-211 .mc-hero-ph-mark,
body.page-id-212 .mc-hero-ph-mark {
	display: none;
}

/* Villa Management (167/168): same real-photo treatment as the others
   above. Oceanfront terrace with a set dining table, sunset over the
   cliffs — fits the "your villa is always ready" positioning of this
   page. 1929x1080 (~1.79:1), reasonably close to the 420px hero's ~3.43:1
   box, so `cover` shows ~52% of the height — content is fairly evenly
   spread top-to-bottom (villa facade fills the full right side, table +
   sea sit lower/left) so a plain center crop works without an obvious
   "two features too far apart" conflict like the other photos had. */
body.page-id-167 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-168 .wp-block-cover.is-style-hero-service:not(:has(img)) {
	background: url('/wp-content/uploads/2026/08/villa-terrace-dining-mallorca.webp') center center / cover no-repeat;
}
body.page-id-167 .wp-block-cover.is-style-hero-service:not(:has(img))::after,
body.page-id-168 .wp-block-cover.is-style-hero-service:not(:has(img))::after {
	/* Lighter than the standard scrim (0.84/0.32/0.1) — this photo's warm
	   sunset gold got muddied by the usual dark teal overlay more than the
	   other hero photos did. Still dark enough at the bottom for the
	   eyebrow/H1 (bottom-left) to stay legible. */
	background: linear-gradient(0deg, rgba(30, 51, 47, 0.65) 0%, rgba(41, 67, 63, 0.22) 60%, rgba(250, 249, 245, 0.05) 100%);
}
body.page-id-167 .mc-hero-ph-mark,
body.page-id-168 .mc-hero-ph-mark {
	display: none;
}

/* Corporate Events (79/86): same real-photo treatment as the others above.
   AI-generated (Gemini) outdoor meeting table on a villa terrace, sea +
   mountains behind — no people, avoids the AI-face problem. 1600x656
   (~2.44:1), close to the hero's ~3.78:1 box, so `cover` shows ~64% of the
   height, plain center works with no extra tuning. */
body.page-id-79 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-86 .wp-block-cover.is-style-hero-service:not(:has(img)) {
	background: url('/wp-content/uploads/2026/08/corporate-terrace-meeting-mallorca.webp') center center / cover no-repeat;
}
body.page-id-79 .wp-block-cover.is-style-hero-service:not(:has(img))::after,
body.page-id-86 .wp-block-cover.is-style-hero-service:not(:has(img))::after {
	background: linear-gradient(0deg, rgba(30, 51, 47, 0.84) 0%, rgba(41, 67, 63, 0.32) 60%, rgba(250, 249, 245, 0.1) 100%);
}
body.page-id-79 .mc-hero-ph-mark,
body.page-id-86 .mc-hero-ph-mark {
	display: none;
}

/* Lifestyle (78/85): same real-photo treatment as the others above. Real
   (not AI-generated) photo Lucas took himself — sunset over the Illes
   Malgrats off Santa Ponça, southwest coast. Landscape 3840x2160 (~1.78:1),
   the same near-square-ish ratio as the Villa Management hero, so `cover`
   shows ~47% of the height; a plain centre crop lands on the horizon band
   (islands + sunset strip), dropping the heavy grey cloud top and the wild
   fennel foreground — which is the wanted framing here. "Pour l'instant" per
   Lucas: a straight CSS crop of the full frame, no AI reformat pass yet. */
body.page-id-78 .wp-block-cover.is-style-hero-service:not(:has(img)),
body.page-id-85 .wp-block-cover.is-style-hero-service:not(:has(img)) {
	background: url('/wp-content/uploads/2026/08/lifestyle-sunset-malgrats-mallorca.webp') center 50% / cover no-repeat;
}
body.page-id-78 .wp-block-cover.is-style-hero-service:not(:has(img))::after,
body.page-id-85 .wp-block-cover.is-style-hero-service:not(:has(img))::after {
	background: linear-gradient(0deg, rgba(30, 51, 47, 0.84) 0%, rgba(41, 67, 63, 0.32) 60%, rgba(250, 249, 245, 0.1) 100%);
}
body.page-id-78 .mc-hero-ph-mark,
body.page-id-85 .mc-hero-ph-mark {
	display: none;
}

/* Home hero: no longer has its own in-flow <img> — removed on purpose so
   the SAME single .mc-fixed-backdrop image shows through from the very
   top of the page (Lucas: "on doit rester sur cette même image au
   défilement" — the hero's own separately-animated copy of the photo
   never quite matched the static fixed one once you scrolled past it).
   Desktop: transparent, fixed backdrop shows through, exactly like every
   other section below it. Mobile: .mc-fixed-backdrop is disabled there
   (fixed backgrounds are unreliable on iOS Safari especially), so fall
   back to the same photo as a normal scrolling background instead — same
   pattern already used for chapters/subservices elsewhere on this page. */
.wp-block-cover.is-style-hero-home:not(:has(img)) {
	background-image: url('/wp-content/uploads/2026/08/mer-scaled.webp');
	background-size: cover;
	background-position: center 30%;
}
@media (min-width: 901px) {
	.wp-block-cover.is-style-hero-home:not(:has(img)) {
		background-image: none;
	}
}
.mc-hero-ph-mark {
	position: absolute;
	z-index: 2;
	right: 24px;
	bottom: 20px;
	font-family: 'Work Sans', sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(250, 249, 245, 0.4);
	border: 1px solid rgba(250, 249, 245, 0.2);
	border-radius: 999px;
	padding: 6px 14px;
}
/* Yacht (76/83), Lifestyle (78/85), Corporate Events (79/86): "Photography
   coming" badge raised 35% (bottom 20px -> 27px) at Lucas's request. */
body.page-id-76 .mc-hero-ph-mark,
body.page-id-83 .mc-hero-ph-mark,
body.page-id-78 .mc-hero-ph-mark,
body.page-id-85 .mc-hero-ph-mark,
body.page-id-79 .mc-hero-ph-mark,
body.page-id-86 .mc-hero-ph-mark,
body.page-id-209 .mc-hero-ph-mark,
body.page-id-210 .mc-hero-ph-mark,
body.page-id-211 .mc-hero-ph-mark,
body.page-id-212 .mc-hero-ph-mark {
	bottom: 27px;
}

/* Short top scrim so the light-coloured nav stays legible over the cliff
   photo right under the header — independent of ::after (the bottom
   scrim/tint below), and NOT a general re-darkening of the image: only the
   top 120px, fading to nothing by the time it reaches the eyebrow/H1. */
.wp-block-cover.is-style-hero-home::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 120px;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(6, 29, 23, 0.38), rgba(6, 29, 23, 0));
}
.wp-block-cover.is-style-hero-home::after,
.wp-block-cover.is-style-hero-service::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
.wp-block-cover.is-style-hero-home::after {
	background: linear-gradient(0deg, rgba(30, 51, 47, 0.88) 0%, rgba(41, 67, 63, 0.46) 55%, rgba(41, 67, 63, 0.2) 100%);
}
/* Desktop: the hero has no photo of its own any more — .mc-fixed-backdrop
   shows through instead, and IT already carries its own darkening gradient
   as part of that same background image. Keeping this second, separate
   gradient on top made the hero read visibly darker than the backdrop
   continuing right below it — a hard tint seam at the hero's own bottom
   edge (confirmed from Lucas's screenshot), even after the photo itself
   became continuous. Drop it here specifically. Mobile keeps it: the hero
   still shows its own real (non-fixed) photo fallback there, which still
   needs its own legibility scrim. */
@media (min-width: 901px) {
	/* 2026-08-22, third pass: Lucas asked for the bottom of the image
	   specifically darkened back up (was reading too light after the full
	   removal below this comment, and after .mc-fixed-backdrop's own tint
	   was also lightened in the same session). Bottom-only this time —
	   transparent until 65%, so nothing darkens near the eyebrow/H1 (the
	   ::before top scrim above handles nav legibility separately) — but
	   this reintroduces some of the exact seam risk documented below: the
	   hero's own extra darkening stops dead at the hero's bottom edge,
	   while .mc-fixed-backdrop's (lighter, differently-coloured) tint
	   continues unbroken into the next section. If a visible step reappears
	   there, this is the rule to soften first. */
	.wp-block-cover.is-style-hero-home:not(:has(img))::after {
		background: linear-gradient(180deg, rgba(6, 29, 23, 0) 65%, rgba(6, 29, 23, 0.55) 100%);
	}
}

.wp-block-cover.is-style-hero-service::after {
	background: linear-gradient(0deg, rgba(30, 51, 47, 0.84) 0%, rgba(41, 67, 63, 0.32) 60%, rgba(250, 249, 245, 0.1) 100%);
}
/* The gradient above assumes a photo underneath; with no photo it would
   otherwise just wash out over the panel's own background — drop it there. */
.wp-block-cover.is-style-hero-service:not(:has(img))::after {
	background: none;
}

/* "Live" pulse dot before the hero eyebrow — on every screen size. */
/* A constant soft glow (first shadow layer, always on) plus the expanding
   pulse ring on top — reads as "lit from within", not a flat pale dot. */
@keyframes mcLiveDot {
	0% { box-shadow: 0 0 6px 2px rgba(232, 201, 138, 0.85), 0 0 0 0 rgba(232, 201, 138, 0.55); }
	70% { box-shadow: 0 0 6px 2px rgba(232, 201, 138, 0.85), 0 0 0 8px rgba(232, 201, 138, 0); }
	100% { box-shadow: 0 0 6px 2px rgba(232, 201, 138, 0.85), 0 0 0 0 rgba(232, 201, 138, 0); }
}
.wp-block-cover.is-style-hero-home p.is-style-eyebrow-light::before,
.wp-block-cover.is-style-hero-service p.is-style-eyebrow-light::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #E8C98A;
	margin-right: 8px;
	vertical-align: middle;
	animation: mcLiveDot 2.4s infinite;
}

/* Lucas (2026-08-27): every service-page hero eyebrow + pulse dot now uses
   the same gold as the home hero ("PALMA DE MALLORCA"), instead of the
   paler accent-light text / #E8C98A dot they had before. */
.wp-block-cover.is-style-hero-service p.is-style-eyebrow-light {
	color: #f6cc7f;
	text-shadow: 0 1px 12px rgba(6, 29, 23, 0.55);
}
.wp-block-cover.is-style-hero-service p.is-style-eyebrow-light::before {
	background: #e6bf50;
	animation: mcLiveDotGold 1.8s ease-in-out infinite;
}

/* ==========================================================================
   Home hero redesign (2026-08-22) — Cormorant Garamond title (was EB
   Garamond until 2026-08-23, consolidated to the site's one display face)
   and nav (header, handled above), Jost eyebrow/buttons only — never body
   copy (fixed 2026-08-23: the subtitle class below used to be Jost too).
   Scoped to
   .is-style-hero-home only — hero-service (the 5 service pages) keeps its
   existing Cormorant-everywhere look, untouched.
   ========================================================================== */
.wp-block-cover.is-style-hero-home .wp-block-cover__inner-container {
	/* Forced explicitly rather than relying on core's own cover-block flex
	   (which for reasons not tracked down was resolving to display:block
	   here — confirmed via getComputedStyle, not just a visual guess —
	   silently breaking centering: text-align:center alone only centers
	   text runs, not the h1/p boxes themselves, which stayed flush left). */
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	padding-left: 120px;
	padding-right: 120px;
	padding-bottom: 72px;
	gap: 24px;
}
.wp-block-cover.is-style-hero-home .wp-block-cover__inner-container > * {
	margin: 0 !important;
	margin-inline: auto !important;
}
@media (max-width: 782px) {
	.wp-block-cover.is-style-hero-home .wp-block-cover__inner-container {
		padding-left: 40px;
		padding-right: 40px;
	}
}
/* Gold pulse dot: home hero uses the brief's exact gold (#d9b95c) rather
   than the site's original eyebrow-dot gold (#E8C98A) — service pages
   keep the original, unaffected. */
.wp-block-cover.is-style-hero-home p.is-style-eyebrow-light {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: #f6cc7f;
	text-shadow: 0 1px 12px rgba(6, 29, 23, 0.6);
}
.wp-block-cover.is-style-hero-home p.is-style-eyebrow-light::before {
	width: 7px;
	height: 7px;
	margin-right: 0;
	background: #e6bf50;
	animation: mcLiveDotGold 1.8s ease-in-out infinite;
}
@keyframes mcLiveDotGold {
	0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px 2px rgba(230, 191, 80, 0.8); }
	50% { opacity: 0.35; transform: scale(0.8); box-shadow: 0 0 10px 2px rgba(230, 191, 80, 0.8); }
}
.wp-block-cover.is-style-hero-home h1 {
	max-width: 820px;
	margin: 0 !important;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: clamp(38px, 5vw, 64px);
	line-height: 1.02;
	text-wrap: balance;
}
.wp-block-cover.is-style-hero-home h1 em {
	font-style: italic;
	font-weight: 500;
}
.wp-block-cover.is-style-hero-home h1 .nowrap { white-space: nowrap; }
.wp-block-cover.is-style-hero-home p.mc-w-600 {
	max-width: 520px;
	font-family: 'Work Sans', sans-serif;
	font-weight: 300;
	font-size: 13px;
	line-height: 1.7;
	color: rgba(251, 249, 244, 0.85);
}
.wp-block-cover.is-style-hero-home .wp-block-buttons {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 6px !important;
}
.wp-block-cover.is-style-hero-home .wp-block-button__link {
	font-family: 'Jost', sans-serif;
}
.wp-block-cover.is-style-hero-home .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.1em;
	padding: 15px 26px;
	border-radius: 2px;
	background: #f2ede1;
	color: #0d2b22;
}
.wp-block-cover.is-style-hero-home .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: #fff;
	color: #0d2b22;
}
.wp-block-cover.is-style-hero-home .wp-block-button.is-style-outline .wp-block-button__link {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.1em;
	padding: 15px 26px;
	border-radius: 2px;
	border: 1px solid rgba(242, 237, 225, 0.75);
	color: #f2ede1;
	background: transparent;
}
/* The shared cross-section hover (line ~722, rgba(250,249,245,.14)) still
   applies on hover here otherwise — close but not quite the spec's lighter
   fill, and it doesn't brighten the border. Home-specific override, same
   specificity/later-wins pattern as the rest of this block. */
.wp-block-cover.is-style-hero-home .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(242, 237, 225, 0.08);
	border-color: #f2ede1;
	color: #f2ede1;
}
@media (max-width: 782px) {
	.wp-block-cover.is-style-hero-home h1 {
		font-size: clamp(32px, 8vw, 44px);
	}
}

/* Mobile: stronger bottom gradient + a light top layer for header
   legibility, and tactile CTA. */
@media (max-width: 900px) {
	.wp-block-cover.is-style-hero-home::after {
		/* Bottom-anchored text scrim, plus a separate top-anchored layer
		   for header legibility over the photo — ::before is reserved for
		   the ivory dissolve at the bottom (see base rules above) so both
		   concerns are combined into this one background here instead. */
		background:
			linear-gradient(180deg, rgba(24, 41, 38, 0.55) 0%, rgba(24, 41, 38, 0) 18%),
			linear-gradient(0deg, rgba(24, 41, 38, 0.96) 0%, rgba(24, 41, 38, 0.56) 45%, rgba(24, 41, 38, 0.18) 100%);
	}

	.wp-block-cover.is-style-hero-home .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
		box-shadow: 0 8px 24px rgba(30, 51, 47, 0.3);
	}
	.wp-block-cover.is-style-hero-home .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
		transform: scale(0.97);
	}
}
.wp-block-cover.is-style-hero-home .wp-block-cover__inner-container,
.wp-block-cover.is-style-hero-service .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	padding-left: 32px;
	padding-right: 32px;
}
/* hero-home's own padding-bottom (68px, set above with the rest of the
   2026-08-22 redesign block) used to be silently overridden by a 96px
   value here — same selector, later in the file, so it won — leaving the
   content sitting further from the bottom edge than the spec called for.
   That's why it's not repeated: hero-service is untouched, hero-home now
   keeps the 68px from its own rule. */
.wp-block-cover.is-style-hero-service .wp-block-cover__inner-container { padding-bottom: 56px; }

/* Soft zoom on photo covers (cards, secondary/portrait shots) — not the
   full-bleed heroes, which already pan continuously. */
.wp-block-cover:not(.is-style-hero-home):not(.is-style-hero-service) {
	overflow: hidden;
}
.wp-block-cover:not(.is-style-hero-home):not(.is-style-hero-service) .wp-block-cover__background,
.wp-block-cover:not(.is-style-hero-home):not(.is-style-hero-service) .wp-block-cover__image-background {
	transition: transform 0.6s ease;
}
.wp-block-group.is-style-card:hover .wp-block-cover__background,
.wp-block-group.is-style-card:hover .wp-block-cover__image-background {
	transform: scale(1.08);
}
.wp-block-cover:not(.is-style-hero-home):not(.is-style-hero-service):hover .wp-block-cover__background,
.wp-block-cover:not(.is-style-hero-home):not(.is-style-hero-service):hover .wp-block-cover__image-background {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-cover.is-style-hero-home .wp-block-cover__image-background,
	.wp-block-cover.is-style-hero-home img.wp-block-cover__image-background {
		animation: heroPan 16s ease-in-out infinite alternate;
	}
}

/* cinematic.js (GSAP) drives the hero image's transform directly once it
   takes over on desktop — the ambient CSS pan would otherwise fight it
   frame by frame. */
.mc-cinematic-active .wp-block-cover.is-style-hero-home .wp-block-cover__image-background {
	animation: none;
}

/* Entrance animation for the home hero content — plays once on load. */
@keyframes mcHeroIn {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: translateY(0); }
}
.wp-block-cover.is-style-hero-home .wp-block-cover__inner-container > * {
	opacity: 0;
	animation: mcHeroIn 0.8s ease forwards;
}
.wp-block-cover.is-style-hero-home .wp-block-cover__inner-container > *:nth-child(1) { animation-delay: 0s; }
.wp-block-cover.is-style-hero-home .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: 0.2s; }
.wp-block-cover.is-style-hero-home .wp-block-cover__inner-container > *:nth-child(3) { animation-delay: 0.38s; }
.wp-block-cover.is-style-hero-home .wp-block-cover__inner-container > *:nth-child(4) { animation-delay: 0.56s; }
.wp-block-cover.is-style-hero-home .wp-block-cover__inner-container > *:nth-child(5) { animation-delay: 0.74s; }

/* ==========================================================================
   Animated wordmark logo (hero, above the eyebrow)
   ========================================================================== */
#mc-logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 32px; }
#mc-logo-wrap .mc-logo-row { display: flex; align-items: center; gap: 14px; }
.mc-word {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--text);
	line-height: 1;
	font-size: 32px;
	animation: mc-fade-word 8s ease-in-out infinite;
}
.mc-line { height: 1px; width: 36px; background: var(--wp--preset--color--text); animation: mc-fade-l 8s ease-in-out infinite; animation-delay: 0.5s; }
.mc-brackets { width: 44px; height: 36px; overflow: visible; }
#mc-l-left { animation: mc-fade-l 8s ease-in-out infinite; animation-delay: 0.5s; }
#mc-l-right { animation: mc-fade-l 8s ease-in-out infinite; animation-delay: 0.85s; }

@keyframes mc-fade-word {
	0% { opacity: 0; filter: blur(4px); transform: translateY(4px); }
	15% { opacity: 1; filter: blur(0); transform: translateY(0); }
	70% { opacity: 1; filter: blur(0); transform: translateY(0); }
	85%, 100% { opacity: 0; filter: blur(4px); transform: translateY(4px); }
}
@keyframes mc-fade-l {
	0% { opacity: 0; }
	15% { opacity: 1; }
	70% { opacity: 1; }
	85%, 100% { opacity: 0; }
}

@media (min-width: 601px) {
	#mc-logo-wrap { gap: 19px; }
	#mc-logo-wrap .mc-logo-row { gap: 19px; }
	.mc-word { font-size: clamp(32px, 4vw, 56px); }
	.mc-brackets { width: 60px; height: 48px; }
}
@media (max-width: 600px) {
	#mc-logo-wrap { margin-bottom: 18px; gap: 10px; }
}

/* ---- The same mark, reused as the site-wide nav logo (header.php) ----
   Structure and proportions are untouched (still the exact stacked
   word / line-bracket-line / word layout) — only scaled down via CSS so it
   sits comfortably in the header, and the infinite hero loop is swapped
   for a one-shot entrance that then holds its settled, fully-visible
   state, so it doesn't keep fading in and out as a permanent nav element.
   The header background is dark everywhere now, so — unlike the sizing
   rules above, which still branch on overlay vs. fallback — colour here
   is just a constant ivory, no morphing needed. */
.mc-header #mc-logo-wrap {
	gap: 11px;
	margin-bottom: 0;
}
.mc-header #mc-logo-wrap .mc-logo-row { gap: 11px; }
.mc-header .mc-word {
	font-size: 22px;
	color: var(--wp--preset--color--text);
	animation: mc-nav-logo-in 0.9s ease both;
}
.mc-header .mc-line {
	width: 25px;
	background: var(--wp--preset--color--text);
	animation: mc-nav-logo-line-in 0.6s ease both;
	animation-delay: 0.5s;
}
.mc-header .mc-brackets { width: 34px; height: 27px; }
.mc-header #mc-l-left {
	stroke: var(--wp--preset--color--text);
	animation: mc-nav-logo-line-in 0.6s ease both;
	animation-delay: 0.5s;
}
.mc-header #mc-l-right {
	stroke: var(--wp--preset--color--text);
	animation: mc-nav-logo-line-in 0.6s ease both;
	animation-delay: 0.85s;
}

@keyframes mc-nav-logo-in {
	from { opacity: 0; filter: blur(4px); transform: translateY(4px); }
	to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes mc-nav-logo-line-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Same entrance treatment for the service-page hero (eyebrow + H1) and the
   About page header (eyebrow + H1), which load above the fold too. */
.wp-block-cover.is-style-hero-service .wp-block-cover__inner-container > * {
	opacity: 0;
	animation: mcHeroIn 0.8s ease forwards;
}
.wp-block-cover.is-style-hero-service .wp-block-cover__inner-container > *:nth-child(1) { animation-delay: 0.15s; }
.wp-block-cover.is-style-hero-service .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: 0.32s; }

.mc-header-cascade > *:nth-child(1) { transition-delay: 0.1s; }
.mc-header-cascade > *:nth-child(2) { transition-delay: 0.24s; }

.wp-block-cover.is-style-hero-home h1,
.wp-block-cover.is-style-hero-service h1 {
	font-size: clamp(40px, 5.4vw, 68px);
	line-height: 1.06;
	margin: 0;
	color: var(--wp--preset--color--text);
	text-wrap: balance;
}
.wp-block-cover.is-style-hero-service h1 { font-size: clamp(34px, 4vw, 46px); line-height: 1.14; margin: 0; }

/* ==========================================================================
   Chapters (core/cover block style) — the ARRIVE/STAY/SAIL/LIVE/GATHER/
   BESPOKE sequence on the home page. One continuous photographic filmstrip:
   no gap between panels, alternating text anchor for editorial rhythm.
   ========================================================================== */
.wp-block-cover.is-style-chapter {
	overflow: hidden;
	position: relative;
	min-height: clamp(560px, 92vh, 880px) !important;
	margin: 0 !important;
}
.wp-block-cover.is-style-chapter::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(30, 51, 47, 0.9) 0%, rgba(41, 67, 63, 0.4) 48%, rgba(41, 67, 63, 0.1) 100%);
}
/* Chapters without their own photo share one fixed backdrop image (see
   :not(:has(img)) below) — a slightly different tint per panel keeps each
   "window" onto it visually distinct instead of six identical overlays. */
.wp-block-cover.is-style-chapter:nth-of-type(3n+2):not(:has(img))::after {
	background: linear-gradient(0deg, rgba(58, 64, 56, 0.9) 0%, rgba(58, 64, 56, 0.42) 48%, rgba(58, 64, 56, 0.12) 100%);
}
.wp-block-cover.is-style-chapter:nth-of-type(3n+3):not(:has(img))::after {
	background: linear-gradient(0deg, rgba(30, 51, 47, 0.94) 0%, rgba(30, 51, 47, 0.5) 48%, rgba(30, 51, 47, 0.16) 100%);
}
.wp-block-cover.is-style-chapter .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	padding: 0 32px 76px;
}
.wp-block-cover.is-style-chapter .mc-chapter__frame {
	max-width: 560px;
}
.wp-block-cover.is-style-chapter.mc-chapter--right .mc-chapter__frame {
	margin-left: auto;
	text-align: right;
}
.wp-block-cover.is-style-chapter.mc-chapter--right .mc-chapter__frame .mc-chapter__num,
.wp-block-cover.is-style-chapter.mc-chapter--right p.is-style-eyebrow-light {
	justify-content: flex-end;
}
.wp-block-cover.is-style-chapter.mc-chapter--right ul.wp-block-list.is-style-dash-list li { padding-left: 0; padding-right: 26px; }
.wp-block-cover.is-style-chapter.mc-chapter--right ul.wp-block-list.is-style-dash-list li::before { left: auto; right: 0; }

.mc-chapter__num {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: clamp(46px, 6vw, 78px);
	line-height: 1;
	color: rgba(250, 249, 245, 0.4);
	margin: 0 0 4px;
}
/* A single, deliberate touch of sand — the only place it's used at any
   size, matching "micro-accent only". */
.mc-chapter__num span.mc-chapter__of {
	font-size: 12px;
	font-family: 'Work Sans', sans-serif;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgba(200, 185, 154, 0.8);
}

.wp-block-cover.is-style-chapter h2 {
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.1;
	margin: 0 0 14px;
	color: var(--wp--preset--color--text);
	text-wrap: balance;
}
.wp-block-cover.is-style-chapter p.mc-chapter__lede {
	font-size: 16px;
	line-height: 1.7;
	color: rgba(250, 249, 245, 0.85);
	margin: 0 0 22px;
}

/* Baseline idle motion for chapter photography (JS layers scroll-scrubbed
   parallax on top; this covers the pre-JS / reduced-motion-safe state). */
.wp-block-cover.is-style-chapter .wp-block-cover__image-background {
	transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.is-style-chapter .wp-block-cover__image-background { transform: none; }
}

/* ---- Chapters without their own photo: reveal the shared cove backdrop ----
   Desktop (>900px): transparent, so .mc-fixed-backdrop — the same mer.jpg,
   pinned position:fixed behind the whole page (see header.php) — shows
   through every one of these panels. The page never scrolls past the cove;
   each chapter is just a fresh, tinted window onto the one photo behind it,
   with the opaque ivory interludes as the breaks in between.
   Mobile (<=900px): fixed backgrounds are unreliable there (iOS Safari
   especially — same reasoning as .mc-fixed-backdrop), so panels fall back to
   the same photo as a normal, non-fixed background instead of a flat colour;
   it scrolls with the page rather than staying pinned, but the branding
   stays consistent across breakpoints.
   Assigning a real, chapter-specific photo via the block editor's Cover
   image control overrides all of this automatically — no theme code to
   touch. */
.wp-block-cover.is-style-chapter:not(:has(img)) {
	background-color: var(--wp--preset--color--panel-secondary);
	background-image: url('/wp-content/uploads/2026/08/mer-2048x1365.webp');
	background-position: center 40%;
	background-size: cover;
}
@media (min-width: 901px) {
	.wp-block-cover.is-style-chapter:not(:has(img)) {
		background-image: none;
		background-color: transparent;
	}
}

/* ---- Interlude — the short ivory pause dropped between chapters ---- */
.mc-interlude {
	padding: 96px 32px;
	text-align: center;
}
.mc-interlude p {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(22px, 2.6vw, 32px);
	line-height: 1.5;
	max-width: 680px;
	margin: 0 auto;
	color: var(--wp--preset--color--ink);
}
@media (max-width: 782px) {
	.mc-interlude { padding: 56px 24px; }
}

/* ---- Optional ivory editorial pause (available as a Group block style
   for text-only breathing moments between chapters). ---- */
.wp-block-group.is-style-ivory-panel {
	background: var(--wp--preset--color--ivory-panel);
	color: var(--wp--preset--color--ink);
}
.wp-block-group.is-style-ivory-panel p { color: var(--wp--preset--color--ink-muted); }
.wp-block-group.is-style-ivory-panel h2,
.wp-block-group.is-style-ivory-panel h3 { color: var(--wp--preset--color--ink); }
.wp-block-group.is-style-ivory-panel p.is-style-eyebrow { color: var(--wp--preset--color--accent-ink); }
.wp-block-group.is-style-ivory-panel a { color: var(--wp--preset--color--accent-ink); }

/* ---- Chapter rail (desktop only) — position dots, JS toggles .is-active ---- */
.mc-chapter-rail {
	position: fixed;
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 40;
	display: none;
	flex-direction: column;
	gap: 14px;
}
.mc-chapter-rail a {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(250, 249, 245, 0.32);
	transition: background 0.3s ease, transform 0.3s ease;
}
.mc-chapter-rail a.is-active {
	background: var(--wp--preset--color--accent-light);
	transform: scale(1.35);
}
@media (min-width: 1100px) {
	.mc-chapter-rail { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
	.mc-chapter-rail a { transition: none; }
}

/* ==========================================================================
   Scroll reveal (paired with assets/js/reveal.js)
   ========================================================================== */
.mc-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.mc-reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* Deliberate, sober cascade for grids of cards — reveals left-to-right
   instead of each card animating independently at a slightly different
   moment (which reads as jittery/misaligned rather than intentional). */
.mc-services-grid > .mc-reveal:nth-child(1) { transition-delay: 0s; }
.mc-services-grid > .mc-reveal:nth-child(2) { transition-delay: 0.1s; }
.mc-services-grid > .mc-reveal:nth-child(3) { transition-delay: 0.2s; }
.mc-services-grid > .mc-reveal:nth-child(4) { transition-delay: 0.3s; }
.mc-services-grid > .mc-reveal:nth-child(5) { transition-delay: 0.4s; }

/* Same cascade treatment for the About band (eyebrow / heading / bio /
   buttons on the left, portrait on the right). */
.mc-about-cascade .wp-block-column:first-child > .mc-reveal:nth-child(1) { transition-delay: 0s; }
.mc-about-cascade .wp-block-column:first-child > .mc-reveal:nth-child(2) { transition-delay: 0.12s; }
.mc-about-cascade .wp-block-column:first-child > .mc-reveal:nth-child(3) { transition-delay: 0.24s; }
.mc-about-cascade .wp-block-column:first-child > .mc-reveal:nth-child(4) { transition-delay: 0.36s; }
.mc-about-cascade .wp-block-column:last-child > .mc-reveal { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
	.mc-reveal { opacity: 1; transform: none; transition: none; }
	.wp-block-cover.is-style-hero-home .wp-block-cover__image-background { animation: none; }
	.mc-btn--pulse { animation: none; }
	.mc-whatsapp-float { animation: none; }
	.wp-block-cover.is-style-hero-home .wp-block-cover__inner-container > * { animation: none; opacity: 1; }
	.wp-block-cover.is-style-hero-service .wp-block-cover__inner-container > * { animation: none; opacity: 1; }
	.wp-block-cover.is-style-hero-home p.is-style-eyebrow-light::before,
	.wp-block-cover.is-style-hero-service p.is-style-eyebrow-light::before { animation: none; }
	.mc-nav__list li { animation: none; }
	.mc-word, .mc-line, #mc-l-left, #mc-l-right { animation: none; opacity: 1; filter: none; transform: none; }
}

/* ==========================================================================
   Contact card (About page)
   ========================================================================== */
.mc-contact-card {
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 4px;
	padding: 28px;
}
.mc-contact-card .mc-contact-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
}
.mc-contact-card .mc-contact-row p { margin: 0; }
.mc-contact-card .wp-block-buttons { margin-top: 6px; }
.mc-contact-card .mc-contact-row .mc-contact-label {
	font-size: 13px;
	color: var(--wp--preset--color--ink);
	opacity: 0.75;
}
.mc-contact-card .mc-contact-row a,
.mc-contact-card .mc-contact-row span.mc-contact-value {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* ==========================================================================
   Témoignages clients — juste avant le footer sur les pages qui en ont.
   Vrais avis Google saisis en dur (texte + JSON-LD Review en bloc html
   adjacent dans le contenu de la page, jamais de widget externe). Fond
   clair délibéré : la page passe de son propre contenu à ce module clair,
   puis au footer sombre juste après — jamais sombre-sur-sombre.
   ========================================================================== */
.mc-testimonials {
	padding: 76px 32px;
	background: var(--wp--preset--color--navy);
}
.mc-testimonials__inner {
	max-width: 1280px;
	margin: 0 auto;
}
.mc-testimonials__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
	margin-top: 32px;
}
.mc-testimonial {
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 4px;
	padding: 28px;
	flex: 1 1 260px;
	max-width: 340px;
}
.mc-testimonial__stars {
	color: var(--wp--preset--color--sand);
	font-size: 13px;
	letter-spacing: 2px;
	margin-bottom: 14px;
}
.mc-testimonial__quote {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
	margin: 0 0 15px;
}
.mc-testimonial__name {
	font-size: 12px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0;
}
.mc-testimonial__source {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin-top: 4px;
}
@media (max-width: 782px) {
	.mc-testimonials { padding: 56px 24px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Hero/service H1 sizing is fluid (clamp) above — no fixed override needed here. */