/**
 * Mapyr - home + shared editorial layout (TAVO-inspired)
 * v0.21.0 - 15/05/2026
 * Token-driven. Loaded on front page.
 */

.mapyr-home, .mapyr-page {
	background: var(--mapyr-paper);
	color: var(--mapyr-ink);
}

/* HERO */
.mapyr-hero {
	position: relative;
	min-height: clamp(560px, 88vh, 920px);
	display: flex;
	align-items: flex-end;
	background: var(--mapyr-paper-soft);
	overflow: hidden;
	color: var(--mapyr-paper);
}
.mapyr-hero__media { position: absolute; inset: 0; z-index: 0; }
.mapyr-hero__media img, .mapyr-hero__media video {
	width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.mapyr-hero__media::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.55) 100%);
}
.mapyr-hero__body { position: relative; z-index: 1; padding-block: var(--mapyr-sp-9); max-width: 880px; }
.mapyr-hero__eyebrow {
	display: inline-block;
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-xs);
	font-weight: 500;
	letter-spacing: var(--mapyr-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mapyr-paper);
	opacity: 0.9;
	margin-bottom: var(--mapyr-sp-4);
}
.mapyr-hero__title {
	font-size: var(--mapyr-fs-4xl);
	line-height: var(--mapyr-lh-tight);
	letter-spacing: var(--mapyr-tracking-display);
	color: var(--mapyr-paper);
	margin: 0 0 var(--mapyr-sp-5);
	font-weight: 600;
	max-width: 18ch;
}
.mapyr-hero__lede {
	font-size: var(--mapyr-fs-md);
	line-height: var(--mapyr-lh-base);
	color: var(--mapyr-paper);
	opacity: 0.92;
	max-width: 56ch;
	margin: 0 0 var(--mapyr-sp-6);
}
.mapyr-hero__cta { display: inline-flex; gap: var(--mapyr-sp-3); flex-wrap: wrap; }
.mapyr-hero--ink { background: var(--mapyr-ink); color: var(--mapyr-paper); }
.mapyr-hero--ink .mapyr-hero__media::after { display: none; }
.mapyr-hero--center .mapyr-hero__body { margin: 0 auto; text-align: center; }
.mapyr-hero--short { min-height: clamp(360px, 52vh, 520px); align-items: center; }

/* SECTION HEAD */
.mapyr-section__head {
	display: flex; flex-direction: column;
	gap: var(--mapyr-sp-2);
	margin-bottom: var(--mapyr-sp-6);
	max-width: 64ch;
}
.mapyr-section__head--center { margin-inline: auto; text-align: center; }
.mapyr-section__title {
	font-size: var(--mapyr-fs-3xl);
	line-height: var(--mapyr-lh-tight);
	letter-spacing: var(--mapyr-tracking-display);
	margin: 0;
	font-weight: 600;
}
.mapyr-section__lede {
	font-size: var(--mapyr-fs-md);
	line-height: var(--mapyr-lh-base);
	color: var(--mapyr-ink-soft);
	margin: 0;
	max-width: 60ch;
}

/* EDITORIAL SPLIT */
.mapyr-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-7);
	align-items: center;
}
@media (min-width: 900px) {
	.mapyr-split { grid-template-columns: 1.1fr 1fr; gap: var(--mapyr-sp-9); }
	.mapyr-split--reverse > .mapyr-split__media { order: 2; }
}
.mapyr-split__media {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--mapyr-paper-soft);
	overflow: hidden;
}
.mapyr-split__media--wide { aspect-ratio: 16 / 11; }
.mapyr-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapyr-split__body { padding-inline: 0; }
@media (min-width: 1100px) { .mapyr-split__body { padding-inline: var(--mapyr-sp-5); } }
.mapyr-split__title {
	font-size: var(--mapyr-fs-3xl);
	line-height: var(--mapyr-lh-tight);
	margin: 0 0 var(--mapyr-sp-5);
	letter-spacing: var(--mapyr-tracking-display);
	font-weight: 600;
}
.mapyr-split__body p {
	font-size: var(--mapyr-fs-md);
	line-height: var(--mapyr-lh-base);
	color: var(--mapyr-ink-soft);
	margin: 0 0 var(--mapyr-sp-5);
	max-width: 52ch;
}

/* BRAND LOGO WALL */
.mapyr-brand-wall { overflow: hidden; }
.mapyr-brand-wall__track {
	display: flex; align-items: center;
	gap: var(--mapyr-sp-8);
	flex-wrap: wrap; justify-content: center;
}
.mapyr-brand-wall__item {
	display: flex; align-items: center; justify-content: center;
	min-height: 84px; min-width: 140px;
	flex: 0 0 auto;
	opacity: 0.65;
	transition: opacity var(--mapyr-motion-base);
}
.mapyr-brand-wall__item:hover { opacity: 1; }
.mapyr-brand-wall__item img {
	max-height: 56px; max-width: 160px;
	width: auto; height: auto; object-fit: contain;
	filter: grayscale(1) contrast(1.1);
	transition: filter var(--mapyr-motion-base);
}
.mapyr-brand-wall__item:hover img { filter: none; }
.mapyr-brand-wall__item--placeholder {
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-lg);
	letter-spacing: 0.05em;
	color: var(--mapyr-ink-mute);
}

/* AUDIENCE GRID */
.mapyr-audience {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-5);
}
@media (min-width: 700px) { .mapyr-audience { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mapyr-audience { grid-template-columns: repeat(5, 1fr); } }
.mapyr-audience__card {
	background: var(--mapyr-paper);
	border: 1px solid var(--mapyr-line);
	padding: var(--mapyr-sp-6);
	display: flex; flex-direction: column; gap: var(--mapyr-sp-4);
	min-height: 320px;
	transition: border-color var(--mapyr-motion-base), background var(--mapyr-motion-base), transform var(--mapyr-motion-base);
	text-decoration: none;
	color: inherit;
}
.mapyr-audience__card:hover {
	background: var(--mapyr-paper-pure);
	border-color: var(--mapyr-ink);
	transform: translateY(-3px);
}
.mapyr-audience__icon { display: inline-flex; width: 32px; height: 32px; color: var(--mapyr-ink); flex: 0 0 auto; }
.mapyr-audience__icon svg { width: 32px; height: 32px; display: block; }
.mapyr-audience__title {
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-xl);
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0;
}
.mapyr-audience__body {
	font-size: var(--mapyr-fs-sm);
	color: var(--mapyr-ink-soft);
	line-height: var(--mapyr-lh-base);
	margin: 0;
	flex: 1;
}
.mapyr-audience__cta {
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-xs);
	letter-spacing: var(--mapyr-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mapyr-ink);
	padding-block: var(--mapyr-sp-2) 0;
	border-top: 1px solid var(--mapyr-line);
	margin-top: var(--mapyr-sp-3);
	display: inline-flex; align-items: center; gap: var(--mapyr-sp-2);
}

/* STAT BAR */
.mapyr-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-6);
	padding-block: var(--mapyr-sp-7);
	border-top: 1px solid var(--mapyr-line);
	border-bottom: 1px solid var(--mapyr-line);
}
@media (min-width: 700px) { .mapyr-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mapyr-stats { grid-template-columns: repeat(4, 1fr); } }
.mapyr-stats__item { display: flex; flex-direction: column; gap: var(--mapyr-sp-2); }
.mapyr-stats__num {
	font-family: var(--mapyr-font-head);
	font-size: clamp(2.5rem, 4vw, 4rem);
	font-weight: 400;
	letter-spacing: var(--mapyr-tracking-tight);
	line-height: 1;
	color: var(--mapyr-ink);
}
.mapyr-stats__label {
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-xs);
	letter-spacing: var(--mapyr-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mapyr-ink-soft);
}

/* FEATURED PROMO */
.mapyr-featured {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background: var(--mapyr-ink);
	color: var(--mapyr-paper);
	overflow: hidden;
}
@media (min-width: 900px) { .mapyr-featured { grid-template-columns: 1fr 1fr; } }
.mapyr-featured__media { aspect-ratio: 1 / 1; overflow: hidden; }
.mapyr-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapyr-featured__body {
	padding: var(--mapyr-sp-8) var(--mapyr-sp-7);
	display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 1100px) { .mapyr-featured__body { padding: var(--mapyr-sp-9); } }
.mapyr-featured__title {
	font-size: var(--mapyr-fs-3xl);
	font-weight: 600;
	letter-spacing: var(--mapyr-tracking-display);
	margin: 0 0 var(--mapyr-sp-5);
	color: var(--mapyr-paper);
	letter-spacing: var(--mapyr-tracking-tight);
	line-height: var(--mapyr-lh-tight);
}
.mapyr-featured__body p { color: var(--mapyr-sage); max-width: 50ch; margin: 0 0 var(--mapyr-sp-6); font-size: var(--mapyr-fs-md); }

/* MANIFESTO */
.mapyr-manifesto { max-width: 920px; margin: 0 auto; text-align: center; padding-block: var(--mapyr-section-y); }
.mapyr-manifesto__quote {
	font-family: var(--mapyr-font-display);
	font-size: clamp(1.25rem, 0.8vw + 1rem, 1.625rem);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: var(--mapyr-tracking-display);
	margin: 0 0 var(--mapyr-sp-5);
	color: var(--mapyr-ink);
}

/* CTA BAND */
.mapyr-cta-band { background: var(--mapyr-paper-soft); padding-block: var(--mapyr-section-y); }
.mapyr-cta-band__inner {
	display: flex; flex-direction: column; gap: var(--mapyr-sp-5);
	align-items: center; text-align: center;
}
.mapyr-cta-band__title {
	font-family: var(--mapyr-font-display);
	font-size: clamp(1.5rem, 1.2vw + 1rem, 2.125rem);
	font-weight: 600;
	letter-spacing: var(--mapyr-tracking-display);
	line-height: 1.15;
	margin: 0;
	max-width: 26ch;
}
.mapyr-cta-band--ink { background: var(--mapyr-ink); color: var(--mapyr-paper); }
.mapyr-cta-band--ink .mapyr-cta-band__title { color: var(--mapyr-paper); }
.mapyr-cta-band--ink .mapyr-eyebrow { color: var(--mapyr-sage); }
.mapyr-cta-band--accent { background: var(--mapyr-accent); color: var(--mapyr-paper); }
.mapyr-cta-band--accent .mapyr-cta-band__title { color: var(--mapyr-paper); }

/* Inverted CTA strip: image + light scrim, dark text, outlined dark buttons. Consistent across all CTA strips. */
.mapyr-cta-band--paper { background: var(--mapyr-paper-soft); color: var(--mapyr-ink); }
.mapyr-cta-band--paper .mapyr-cta-band__title { color: var(--mapyr-ink); }
.mapyr-cta-band--paper .mapyr-cta-band__text { color: var(--mapyr-ink-soft) !important; }
.mapyr-cta-band--paper .mapyr-eyebrow { color: var(--mapyr-ink-soft); }
/* ghost-light buttons repurposed as dark outline on the light strip (kept outlined, never solid) */
.mapyr-cta-band--paper .mapyr-btn--ghost-light {
	background: transparent !important;
	color: var(--mapyr-ink) !important;
	border-color: var(--mapyr-ink);
}
.mapyr-cta-band--paper .mapyr-btn--ghost-light:hover,
.mapyr-cta-band--paper .mapyr-btn--ghost-light:focus-visible {
	background: var(--mapyr-ink) !important;
	color: var(--mapyr-paper-pure, #ffffff) !important;
	border-color: var(--mapyr-ink);
}

/* ICONIC PRODUCT GRID */
.mapyr-iconic {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mapyr-sp-5);
}
@media (min-width: 900px) { .mapyr-iconic { grid-template-columns: repeat(3, 1fr); gap: var(--mapyr-sp-6); } }
.mapyr-iconic__item { display: flex; flex-direction: column; gap: var(--mapyr-sp-3); }
.mapyr-iconic__img {
	aspect-ratio: 1 / 1;
	background: var(--mapyr-paper-soft);
	overflow: hidden;
}
.mapyr-iconic__img img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.mapyr-iconic__name {
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-base);
	font-weight: 600;
	margin: 0;
}
.mapyr-iconic__brand {
	font-size: var(--mapyr-fs-xs);
	letter-spacing: var(--mapyr-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mapyr-ink-soft);
}

/* PILLARS */
.mapyr-pillars {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-7);
}
@media (min-width: 700px) { .mapyr-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mapyr-pillars { grid-template-columns: repeat(4, 1fr); } }
.mapyr-pillars__item {
	display: flex; flex-direction: column; gap: var(--mapyr-sp-3);
	padding-top: var(--mapyr-sp-5);
	border-top: 1px solid var(--mapyr-line-strong);
}
.mapyr-pillars__num {
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-xs);
	letter-spacing: var(--mapyr-tracking-eyebrow);
	color: var(--mapyr-ink-soft);
}
.mapyr-pillars__title {
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-xl);
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0;
}
.mapyr-pillars__body {
	color: var(--mapyr-ink-soft);
	font-size: var(--mapyr-fs-sm);
	line-height: var(--mapyr-lh-base);
	margin: 0;
}

/* TESTIMONIAL */
.mapyr-testimonial { max-width: 880px; margin: 0 auto; text-align: center; }
.mapyr-testimonial__quote {
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-2xl);
	line-height: var(--mapyr-lh-snug);
	font-weight: 600;
	letter-spacing: var(--mapyr-tracking-display);
	margin: 0 0 var(--mapyr-sp-5);
}
.mapyr-testimonial__author {
	font-size: var(--mapyr-fs-xs);
	letter-spacing: var(--mapyr-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mapyr-ink-soft);
}

/* ============================================================
 * v0.31 redesign override - premium B2B distribution editorial
 * 12-col grids, split layouts, dark authority, stat rail,
 * 3-up audience paths, premium logo wall, capability rows.
 * ============================================================ */

/* SECTION 1 - editorial hero (split) */
.mapyr-home-hero {
	position: relative;
	background: var(--mapyr-paper-soft);
}
/* Columns stretch to equal height: image height tracks the copy block. */
.mapyr-home-hero__grid { align-items: stretch; padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.mapyr-home-hero__copy {
	grid-column: 1 / span 6;
	padding-right: clamp(1rem, 3vw, 3rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Right column - rotating image with the accordion overlaid; stays inside the page. */
.mapyr-home-hero__media-col { grid-column: 7 / span 6; position: relative; min-height: 460px; }
.mapyr-home-hero .mapyr-home-hero__title {
	margin: 0;
	max-width: 680px;
	font-family: var(--mapyr-font-display);
	font-size: clamp(2.2rem, 1.6vw + 1rem, 3rem);
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--mapyr-ink);
	font-weight: 600;
	text-wrap: balance;
}
.mapyr-home-hero__lede {
	max-width: 560px;
	margin-top: 1.25rem;
	font-size: clamp(0.95rem, 0.25vw + 0.9rem, 1.0625rem);
	line-height: 1.6;
	color: var(--mapyr-ink-soft);
}
.mapyr-home-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.mapyr-home-hero__proof {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--mapyr-line);
	max-width: 760px;
}
@media (max-width: 600px) { .mapyr-home-hero__proof { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
.mapyr-home-hero__proof-item { display: flex; flex-direction: column; gap: 0.25rem; }
.mapyr-home-hero__proof-num {
	font-family: var(--mapyr-font-display);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--mapyr-ink);
	line-height: 1.1;
	white-space: nowrap;
}
.mapyr-home-hero__proof-label { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mapyr-ink-soft); }
/* Expanding panels - each its own image + heading + description. Active widens
   and shows its text; the rest are slivers with a vertical heading. Auto-rotates. */
.mapyr-hero-panels {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 8px;
}
.mapyr-hero-panel {
	position: relative;
	flex: 1 1 0;
	min-width: 46px;
	border-radius: var(--mapyr-radius-lg);
	overflow: hidden;
	cursor: pointer;
	background: var(--mapyr-primary-fade);
	transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	outline: none;
}
.mapyr-hero-panel.is-active { flex-grow: 7; }
.mapyr-hero-panel__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 32%;
}
.mapyr-hero-panel__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(17, 24, 39, 0.82) 0%, rgba(17, 24, 39, 0.32) 38%, rgba(17, 24, 39, 0.05) 70%);
}
/* Active content (horizontal heading + description) - cross-fades in on open. */
.mapyr-hero-panel__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.4rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}
.mapyr-hero-panel.is-active .mapyr-hero-panel__content {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.55s ease 0.15s;
}
.mapyr-hero-panel .mapyr-hero-panel__title {
	margin: 0;
	color: var(--mapyr-paper);
	font-family: var(--mapyr-font-head);
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.mapyr-hero-panel__desc {
	margin: 0.7rem 0 0;
	color: var(--mapyr-paper);
	font-size: 0.9375rem;
	line-height: 1.6;
	max-width: 42ch;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
/* Vertical tab label on the collapsed slivers - fades out as the panel opens. */
.mapyr-hero-panel__tab {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 1.4rem;
	transform: translateX(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	white-space: nowrap;
	color: var(--mapyr-paper);
	font-family: var(--mapyr-font-head);
	font-weight: 700;
	font-size: 0.98rem;
	letter-spacing: 0.01em;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
	opacity: 1;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.mapyr-hero-panel.is-active .mapyr-hero-panel__tab { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.mapyr-hero-panel,
	.mapyr-hero-panel__content,
	.mapyr-hero-panel__tab { transition: none; }
}

/* Hover-open accordion - value props. Collapsed to titles, body reveals on hover/focus. */
.mapyr-hero-acc {
	list-style: none;
	margin: 1.75rem 0 2rem;
	padding: 0;
	max-width: 540px;
	border-top: 1px solid var(--mapyr-line);
}
.mapyr-hero-acc__item { border-bottom: 1px solid var(--mapyr-line); }
.mapyr-hero-acc__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.95rem 0;
	cursor: pointer;
	outline: none;
}
.mapyr-hero-acc__title {
	font-family: var(--mapyr-font-head);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: -0.01em;
	color: var(--mapyr-ink);
	transition: color 0.25s ease;
}
.mapyr-hero-acc__icon {
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--mapyr-ink-mute);
	transition: transform 0.3s ease, color 0.3s ease;
}
/* Smooth height via grid-template-rows 0fr -> 1fr (no magic max-height). */
.mapyr-hero-acc__body {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.35s ease, opacity 0.3s ease, padding 0.35s ease;
}
.mapyr-hero-acc__body > p {
	overflow: hidden;
	min-height: 0;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--mapyr-ink-soft);
}
.mapyr-hero-acc__item:hover .mapyr-hero-acc__body,
.mapyr-hero-acc__item:focus-within .mapyr-hero-acc__body,
.mapyr-hero-acc__item.is-open .mapyr-hero-acc__body {
	grid-template-rows: 1fr;
	opacity: 1;
	padding-bottom: 1rem;
}
.mapyr-hero-acc__item:hover .mapyr-hero-acc__icon,
.mapyr-hero-acc__item:focus-within .mapyr-hero-acc__icon,
.mapyr-hero-acc__item.is-open .mapyr-hero-acc__icon {
	transform: rotate(180deg);
	color: var(--mapyr-ink);
}

/* Hero stacks under ~980px: image becomes a banner above the copy. */
@media (max-width: 980px) {
	.mapyr-home-hero__grid { display: flex; flex-direction: column; padding-block: 2rem 3rem; }
	.mapyr-home-hero__copy { padding-right: 0; }
	.mapyr-home-hero__media-col {
		order: -1;
		width: 100%;
		min-height: 0;
		height: 56vh;
		max-height: 560px;
	}
}

/* SECTION SPLIT - sticky head left + body right */
.mapyr-section-split { padding-block: var(--mapyr-section-y); }
.mapyr-section-split__head { grid-column: 1 / span 4; }
.mapyr-section-split__body { grid-column: 6 / span 7; }
.mapyr-section-split__head .mapyr-eyebrow { display: block; margin-bottom: 1rem; }
.mapyr-section-split__head h2 {
	font-family: var(--mapyr-font-display);
	font-size: clamp(1.625rem, 1.4vw + 1rem, 2.375rem);
	line-height: 1.2;
	letter-spacing: 0.01em;
	font-weight: 600;
	margin: 0 0 1.25rem;
	color: var(--mapyr-ink);
}
.mapyr-section-split__head p { color: var(--mapyr-ink-soft); font-size: 0.9375rem; line-height: 1.6; max-width: 30ch; }
@media (min-width: 1024px) {
	.mapyr-section-split__head { position: sticky; top: 96px; align-self: start; }
}

/* LARGE CARD */
.mapyr-large-card {
	display: grid;
	gap: 1rem;
	padding: clamp(1.5rem, 2vw, 2.5rem);
	min-height: 260px;
	border: 1px solid var(--mapyr-line);
	border-radius: var(--mapyr-radius-lg);
	background: var(--mapyr-paper-pure);
	transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
	text-decoration: none;
	color: inherit;
}
.mapyr-large-card:hover {
	transform: translateY(-4px);
	border-color: var(--mapyr-line-strong);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}
.mapyr-large-card__num { font-family: var(--mapyr-font-display); font-size: 1.5rem; color: var(--mapyr-accent-dark); letter-spacing: -0.02em; }
.mapyr-large-card .mapyr-large-card__title { font-family: var(--mapyr-font-head); font-size: 1.25rem; letter-spacing: -0.015em; font-weight: 600; margin: 0; color: var(--mapyr-ink); }
.mapyr-large-card__body { color: var(--mapyr-ink-soft); font-size: 0.9375rem; line-height: 1.6; margin: 0; }
.mapyr-large-card__icon { width: 28px; height: 28px; color: var(--mapyr-accent-dark); }
.mapyr-large-card__icon svg { width: 100%; height: 100%; }

/* LOGO WALL */
.mapyr-logo-wall {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0;
	/* white bg so trailing empty cells blend instead of showing grey blocks;
	   gridlines come from per-item borders below. */
	background: var(--mapyr-paper-pure);
	border-top: 1px solid var(--mapyr-line);
	border-left: 1px solid var(--mapyr-line);
}
@media (min-width: 1280px) { .mapyr-logo-wall { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.mapyr-logo-wall__item {
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	background: var(--mapyr-paper-pure);
	overflow: hidden;
	transition: background 200ms ease;
	text-decoration: none;
	border-right: 1px solid var(--mapyr-line);
	border-bottom: 1px solid var(--mapyr-line);
}
.mapyr-logo-wall__item:hover { background: var(--mapyr-paper-soft); }
.mapyr-logo-wall__item img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 18%; box-sizing: border-box; }
.mapyr-logo-wall__item:hover img { filter: grayscale(0); }
.mapyr-logo-wall__placeholder { font-family: var(--mapyr-font-head); font-size: 1rem; letter-spacing: 0.04em; color: var(--mapyr-ink-soft); text-align: center; }
@media (max-width: 900px) {
	.mapyr-logo-wall { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px) {
	/* 3-up logo grid on phones — square 2-up cells were ~190px each, making
	   the wall extremely tall. */
	.mapyr-logo-wall { grid-template-columns: repeat(3, 1fr); }
	.mapyr-logo-wall__item img { padding: 14%; }
}

/* STAT RAIL */
.mapyr-stat-rail {
	background: #ffffff;
	color: var(--mapyr-ink);
	padding-block: var(--mapyr-section-y);
}
.mapyr-stat-rail .mapyr-eyebrow { color: var(--mapyr-ink-soft); }
.mapyr-stat-rail__head { max-width: 720px; margin: 0 0 3rem; }
.mapyr-stat-rail__head h2 {
	font-family: var(--mapyr-font-display);
	font-size: clamp(1.625rem, 1.4vw + 1rem, 2.375rem);
	line-height: 1.25;
	letter-spacing: 0.01em;
	font-weight: 600;
	margin: 0;
	color: var(--mapyr-ink);
}
.mapyr-stat-rail__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 3vw, 3.5rem) clamp(1.5rem, 2vw, 2.5rem);
}
@media (max-width: 900px) {
	.mapyr-stat-rail__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.mapyr-stat-rail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
}
.mapyr-stat-rail__item { border-top: 1px solid var(--mapyr-line); padding-top: 1.25rem; }
.mapyr-stat-rail__num {
	display: block;
	font-family: var(--mapyr-font-display);
	font-size: clamp(2.25rem, 2.4vw + 1rem, 3.75rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--mapyr-ink);
	font-weight: 400;
}
/* Stat item = 3 containers: number, heading (full box width), description */
.mapyr-stat-rail__title { display: block; width: 100%; margin-top: 0.75rem; color: var(--mapyr-ink); font-size: 1.0625rem; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.mapyr-stat-rail__desc { display: block; width: 100%; margin-top: 0.4rem; color: var(--mapyr-ink-soft); font-size: 0.9rem; font-weight: 400; line-height: 1.5; }

/* CAPABILITY ROWS */
.mapyr-capability-rows { border-top: 1px solid var(--mapyr-line); margin-top: 2.5rem; }
.mapyr-capability-row {
	display: grid;
	grid-template-columns: 56px 1fr 2fr;
	gap: clamp(1.25rem, 2vw, 2.5rem);
	padding-block: clamp(1.75rem, 2.5vw, 2.5rem);
	border-bottom: 1px solid var(--mapyr-line);
	align-items: start;
	transition: background 200ms ease;
}
.mapyr-capability-row:hover { background: var(--mapyr-paper-pure); }
.mapyr-capability-row__num { font-family: var(--mapyr-font-display); font-size: 1.5rem; color: var(--mapyr-accent-dark); letter-spacing: -0.02em; }
.mapyr-capability-row__title { font-family: var(--mapyr-font-head); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; margin: 0; color: var(--mapyr-ink); }
.mapyr-capability-row__body { color: var(--mapyr-ink-soft); font-size: 0.9375rem; line-height: 1.6; margin: 0; }
.mapyr-capability-row__icon { width: 40px; height: 40px; color: var(--mapyr-accent-dark); justify-self: start; }
.mapyr-capability-row__icon svg { width: 100%; height: 100%; }
@media (max-width: 900px) {
	.mapyr-capability-row {
		grid-template-columns: auto 1fr;
		grid-template-areas: "icon title" "icon body";
		gap: 0.5rem 1.25rem;
	}
	.mapyr-capability-row__icon { grid-area: icon; justify-self: start; align-self: start; width: 32px; height: 32px; }
	.mapyr-capability-row__title { grid-area: title; }
	.mapyr-capability-row__body { grid-area: body; }
}

/* AUDIENCE PATHS 3-up */
.mapyr-audience-paths {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--mapyr-line);
	border: 1px solid var(--mapyr-line);
}
@media (max-width: 900px) { .mapyr-audience-paths { grid-template-columns: 1fr; } }
.mapyr-audience-paths__card {
	min-height: 360px;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 2.5vw, 2.75rem);
	background: var(--mapyr-paper-pure);
	gap: 1rem;
	transition: background 200ms ease;
	text-decoration: none;
	color: inherit;
}
.mapyr-audience-paths__card:hover { background: var(--mapyr-paper-soft); }
.mapyr-audience-paths__label { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mapyr-accent-dark); }
.mapyr-audience-paths__title {
	font-family: var(--mapyr-font-display);
	font-size: clamp(1.35rem, 0.7vw + 1rem, 1.75rem);
	line-height: 1.15;
	letter-spacing: var(--mapyr-tracking-display);
	font-weight: 600;
	margin: 0;
	color: var(--mapyr-ink);
}
.mapyr-audience-paths__body { color: var(--mapyr-ink-soft); font-size: 0.9375rem; line-height: 1.55; max-width: 34ch; margin: 0; flex: 1; }
.mapyr-audience-paths__card .mapyr-btn { margin-top: auto; align-self: flex-start; }

/* PORTFOLIO FILTERS + FEATURED BRANDS */
.mapyr-portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: 2.5rem;
}
.mapyr-portfolio-filter {
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--mapyr-line-strong);
	border-radius: 999px;
	background: transparent;
	font-family: var(--mapyr-font-head);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mapyr-ink-soft);
	cursor: pointer;
	text-decoration: none;
	transition: all 180ms ease;
}
.mapyr-portfolio-filter:hover, .mapyr-portfolio-filter.is-active {
	background: var(--mapyr-ink);
	color: var(--mapyr-paper);
	border-color: var(--mapyr-ink);
}
/* Filters are now <button>s — restore the pill look over the global
   `.mapyr-surface button` reset/neutraliser (2-class specificity wins). */
.mapyr-portfolio-filters .mapyr-portfolio-filter {
	-webkit-appearance: none; appearance: none;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--mapyr-line-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--mapyr-ink-soft);
	font-family: var(--mapyr-font-head);
	font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
	cursor: pointer; line-height: 1.2;
}
.mapyr-portfolio-filters .mapyr-portfolio-filter:hover,
.mapyr-portfolio-filters .mapyr-portfolio-filter.is-active {
	background: var(--mapyr-ink);
	color: var(--mapyr-paper);
	border-color: var(--mapyr-ink);
}
.mapyr-featured-brands {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	margin-top: 2.5rem;
}
@media (max-width: 900px) { .mapyr-featured-brands { grid-template-columns: 1fr; } }
.mapyr-featured-brand {
	min-height: 280px;
	background: var(--mapyr-paper-pure);
	border: 1px solid var(--mapyr-line);
	border-radius: var(--mapyr-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.mapyr-featured-brand:hover {
	transform: translateY(-4px);
	border-color: var(--mapyr-line-strong);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}
.mapyr-featured-brand__logo { aspect-ratio: 1500 / 1750; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--mapyr-line); }
.mapyr-featured-brand__logo:has(.mapyr-featured-brand__logo-placeholder) { padding: 1.5rem; }
.mapyr-featured-brand__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapyr-featured-brand__logo-placeholder { font-family: var(--mapyr-font-head); font-size: 1.5rem; letter-spacing: -0.02em; color: var(--mapyr-ink); }
.mapyr-featured-brand__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.mapyr-featured-brand__cat { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mapyr-accent-dark); }
.mapyr-featured-brand__name { font-family: var(--mapyr-font-head); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; margin: 0; color: var(--mapyr-ink); }
.mapyr-featured-brand__desc { color: var(--mapyr-ink-soft); font-size: 0.9375rem; line-height: 1.6; margin: 0; flex: 1; }
.mapyr-featured-brand__cta { font-family: var(--mapyr-font-head); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mapyr-ink); margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.5rem; }

/* TRUST + TESTIMONIALS split */
.mapyr-trust-grid { gap: clamp(2rem, 3vw, 3.5rem); }
.mapyr-trust-quote { grid-column: 1 / span 6; padding: clamp(1.75rem, 2.5vw, 2.75rem); background: var(--mapyr-paper-pure); border: 1px solid var(--mapyr-line); }
.mapyr-trust-quote__text { font-family: var(--mapyr-font-display); font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem); line-height: 1.5; letter-spacing: -0.01em; margin: 0 0 1.5rem; color: var(--mapyr-ink); font-weight: 400; }
.mapyr-trust-quote__author { font-size: 0.95rem; color: var(--mapyr-ink-soft); }
.mapyr-trust-quote__author strong { color: var(--mapyr-ink); display: block; font-weight: 500; }
.mapyr-trust-logos { grid-column: 8 / span 5; align-self: center; }
@media (max-width: 900px) {
	.mapyr-trust-quote, .mapyr-trust-logos { grid-column: auto; }
}

/* FINAL CTA premium */
.mapyr-final-cta {
	background: var(--mapyr-primary);
	color: var(--mapyr-paper);
	padding-block: clamp(2.5rem, 8vw, 6rem);
	border-top: 1px solid var(--mapyr-primary-soft);
	border-bottom: 1px solid var(--mapyr-primary-soft);
	text-align: center;
}
.mapyr-final-cta__inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
.mapyr-final-cta__title {
	font-family: var(--mapyr-font-display);
	font-size: clamp(1.65rem, 1.5vw + 1rem, 2.5rem);
	line-height: 1.15;
	letter-spacing: var(--mapyr-tracking-display);
	color: var(--mapyr-paper);
	margin: 0;
	font-weight: 600;
}

/* Mobile collapse hero */
@media (max-width: 900px) {
	.mapyr-home-hero {
		min-height: auto;
		background: var(--mapyr-paper-soft);
	}
	.mapyr-home-hero__grid { padding-block: 2.25rem 2.5rem; }
	.mapyr-home-hero__copy, .mapyr-home-hero__visual,
	.mapyr-section-split__head, .mapyr-section-split__body {
		grid-column: auto;
	}
	/* Phone: lead with the image, copy below. */
	.mapyr-home-hero__visual { order: -1; margin-bottom: var(--mapyr-sp-5); }
	.mapyr-home-hero__copy { order: 0; }
	.mapyr-home-hero__title { font-size: clamp(2rem, 7vw, 2.75rem); }
	.mapyr-home-hero__visual { min-height: 420px; margin-top: 2.5rem; }
}

/* ============================================================
 * v0.40 - 15/06/2026 client QA pass: contrast fix, Who-We-Serve
 * cards, dual-CTA boxes, phone/tablet responsive polish.
 * ============================================================ */

/* FINAL CTA contrast fix - `.mapyr-surface h2 {color:ink}` (0,1,1) was
   beating `.mapyr-final-cta__title` (0,1,0) -> dark heading on dark bg.
   Bump specificity so the heading stays paper-light. */
.mapyr-surface .mapyr-final-cta__title,
.mapyr-final-cta .mapyr-final-cta__title { color: var(--mapyr-paper); }
.mapyr-final-cta .mapyr-eyebrow { color: var(--mapyr-sage); }

/* Light-overlay final-CTA variant (dark text + dark outline buttons) - mirrors
   .mapyr-cta-band--paper so every CTA strip is consistent (client "all pages" rule). */
.mapyr-final-cta--light .mapyr-final-cta__title,
.mapyr-surface .mapyr-final-cta--light .mapyr-final-cta__title { color: var(--mapyr-ink); }
.mapyr-final-cta--light .mapyr-eyebrow { color: var(--mapyr-ink-soft) !important; }
.mapyr-final-cta--light .mapyr-btn--ghost-light {
	background: transparent !important;
	color: var(--mapyr-ink) !important;
	border-color: var(--mapyr-ink);
}
.mapyr-final-cta--light .mapyr-btn--ghost-light:hover,
.mapyr-final-cta--light .mapyr-btn--ghost-light:focus-visible {
	background: var(--mapyr-ink) !important;
	color: var(--mapyr-paper-pure, #ffffff) !important;
	border-color: var(--mapyr-ink);
}

/* WHO WE SERVE cards (home section 2) */
.mapyr-who-card { gap: 0.85rem; }
.mapyr-who-card__label {
	font-size: var(--mapyr-fs-xs);
	letter-spacing: var(--mapyr-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mapyr-ink-soft);
	font-weight: 600;
}
.mapyr-who-card__link {
	font-family: var(--mapyr-font-head);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--mapyr-ink);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.15rem;
}
.mapyr-who-card:hover .mapyr-who-card__link { gap: 0.65rem; }

/* Variant A - side image, alternating L/R per card. */
.mapyr-who-card {
	grid-template-columns: 1fr 220px;
	align-items: stretch;
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
	min-height: 0;
}
.mapyr-who-card__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.7rem;
	min-width: 0;
}
.mapyr-who-card__img {
	width: 100%;
	height: 100%;
	min-height: 190px;
	object-fit: cover;
	border-radius: var(--mapyr-radius-md);
	display: block;
}
.mapyr-who-card:nth-child(even) { grid-template-columns: 220px 1fr; }
.mapyr-who-card:nth-child(even) .mapyr-who-card__img { order: -1; }
@media (max-width: 640px) {
	.mapyr-who-card,
	.mapyr-who-card:nth-child(even) { grid-template-columns: 1fr; gap: 1.1rem; }
	.mapyr-who-card__img,
	.mapyr-who-card:nth-child(even) .mapyr-who-card__img { order: 0; min-height: 0; height: 200px; }
}

/* DUAL CTA boxes (home section 5 / V10) */
.mapyr-dual-cta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}
.mapyr-dual-cta__box {
	background: var(--mapyr-paper-pure);
	border: 1px solid var(--mapyr-line);
	border-radius: var(--mapyr-radius-lg);
	padding: clamp(1.75rem, 3vw, 2.75rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	min-height: 240px;
}
.mapyr-dual-cta__label {
	font-family: var(--mapyr-font-display);
	font-size: clamp(1.35rem, 0.7vw + 1rem, 1.75rem);
	line-height: 1.15;
	letter-spacing: var(--mapyr-tracking-display);
	font-weight: 600;
	color: var(--mapyr-ink);
}
.mapyr-dual-cta__body {
	color: var(--mapyr-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
	flex: 1;
	max-width: 42ch;
}
.mapyr-dual-cta__box .mapyr-btn { margin-top: auto; }
@media (max-width: 700px) {
	.mapyr-dual-cta { grid-template-columns: 1fr; }
	.mapyr-dual-cta__box { min-height: 0; }
}

/* Full-width banner image (e.g. above Core Services) — edge to edge. */
.mapyr-fullbleed { width: 100%; line-height: 0; }
.mapyr-fullbleed-img { width: 100%; height: auto; display: block; max-height: 520px; object-fit: cover; }
/* Homepage banner: breathing room below the dark stat-rail strip so the
   full-bleed image isn't flush against the black section above it. */
.mapyr-home .mapyr-fullbleed { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

/* 3-up pillars variant (e.g. HORECA service model) — full-width 33% cols. */
@media (min-width: 700px) {
	.mapyr-pillars--3 { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
}

/* Balance the Why Choose Mapyr heading wrap (no orphan word) */
.mapyr-stat-rail__head h2 { text-wrap: balance; }

/* Begin a partnership (final CTA) background image */
.mapyr-final-cta--bg { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Shoot carousel (between Brands & Categories cards and brand filter) - full-bleed, faded white edges */
.mapyr-shoot-carousel { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 3rem; overflow: hidden; }
.mapyr-shoot-carousel__track { display: flex; gap: 1rem; will-change: transform; }
.mapyr-shoot-carousel__slide { flex: 0 0 calc((100vw - 1.5rem) / 2.5); margin: 0; border-radius: var(--mapyr-radius-lg); overflow: hidden; background: var(--mapyr-paper-soft); aspect-ratio: 3 / 2; }
.mapyr-shoot-carousel__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapyr-shoot-carousel::before, .mapyr-shoot-carousel::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(48px, 10vw, 240px); z-index: 2; pointer-events: none; }
.mapyr-shoot-carousel::before { left: 0; background: linear-gradient(to right, #f9fafb, rgba(249, 250, 251, 0)); }
.mapyr-shoot-carousel::after { right: 0; background: linear-gradient(to left, #f9fafb, rgba(249, 250, 251, 0)); }
@media (max-width: 700px) { .mapyr-shoot-carousel__slide { flex-basis: calc((100vw - 0.5rem) / 1.15); } .mapyr-shoot-carousel::before, .mapyr-shoot-carousel::after { width: 40px; } }

/* View Brand CTA + arrow bold */
.mapyr-featured-brand__cta { font-weight: 700; }
.mapyr-featured-brand__cta svg { stroke-width: 2.4; }

/* ============================================================
 * Section 2 - Making Global Brands Locally Relevant (deck slide 6, 08/07/2026)
 * Full-width alternating media rows: R1 img right, R2 img left, R3 img right.
 * Text vertically centered; standardized image aspect; mobile = image above text.
 * Replaces the old sticky-split + narrow who-cards treatment.
 * ============================================================ */
.mapyr-section-rows { padding-block: var(--mapyr-section-y); }
.mapyr-section-rows__head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.75rem, 5vw, 4.5rem); }
.mapyr-section-rows__head .mapyr-eyebrow { display: block; margin-bottom: 1rem; }
.mapyr-section-rows .mapyr-section-rows__head h2 {
	font-family: var(--mapyr-font-display);
	font-size: clamp(1.75rem, 1.6vw + 1rem, 2.5rem);
	line-height: 1.1; letter-spacing: -0.025em; font-weight: 600;
	margin: 0 0 1rem; color: var(--mapyr-ink); text-wrap: balance;
}
.mapyr-section-rows__head p { color: var(--mapyr-ink-soft); font-size: 1rem; line-height: 1.6; margin: 0 auto; max-width: 60ch; }
.mapyr-section-rows__body { display: flex; flex-direction: column; gap: clamp(2.75rem, 5vw, 5.5rem); }

.mapyr-media-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 4.5rem);
	text-decoration: none;
	color: inherit;
}
.mapyr-media-row__text { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.mapyr-media-row__label {
	font-size: var(--mapyr-fs-xs);
	letter-spacing: var(--mapyr-tracking-eyebrow);
	text-transform: uppercase; color: var(--mapyr-ink-soft); font-weight: 600;
}
.mapyr-media-row .mapyr-media-row__title {
	font-family: var(--mapyr-font-head);
	font-size: clamp(1.35rem, 1vw + 1rem, 1.9rem);
	line-height: 1.18; letter-spacing: -0.015em; font-weight: 600;
	margin: 0; color: var(--mapyr-ink); text-wrap: balance;
}
.mapyr-media-row__body { color: var(--mapyr-ink-soft); font-size: 1rem; line-height: 1.6; margin: 0; max-width: 52ch; }
.mapyr-media-row__link {
	font-family: var(--mapyr-font-head); font-size: 0.9rem; font-weight: 600;
	color: var(--mapyr-ink); display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem;
	transition: gap 160ms ease;
}
.mapyr-media-row:hover .mapyr-media-row__link { gap: 0.7rem; }
.mapyr-media-row__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--mapyr-radius-lg);
	overflow: hidden;
	background: var(--mapyr-paper-soft);
}
.mapyr-media-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.mapyr-media-row:hover .mapyr-media-row__media img { transform: scale(1.03); }
/* Alternate: even rows put the image on the left. */
.mapyr-media-row:nth-child(even) .mapyr-media-row__media { order: -1; }
/* Mobile: image above text for every row. */
@media (max-width: 768px) {
	.mapyr-media-row,
	.mapyr-media-row:nth-child(even) { grid-template-columns: 1fr; gap: 1.25rem; }
	.mapyr-media-row__media,
	.mapyr-media-row:nth-child(even) .mapyr-media-row__media { order: -1; }
	.mapyr-media-row .mapyr-media-row__title { font-size: 1.3rem; }
	.mapyr-media-row__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 520px) {
	.mapyr-media-row .mapyr-media-row__title { font-size: 1.18rem; }
}

/* Slide 7: per-category description shown under the brand tabs on click (tiles removed). */
.mapyr-portfolio-desc {
	max-width: 62ch;
	margin: -1.25rem auto 2rem;
	text-align: center;
	color: var(--mapyr-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
}
.mapyr-portfolio-desc[hidden] { display: none; }

/* ============================================================
 * Slide 8: All-Brands single-row auto-play logo carousel + dots.
 * Replaces the static logo grid. Loops, autoplays, dot + swipe nav,
 * respects the category filter tabs. 08/07/2026.
 * ============================================================ */
/* Full container width (matches the media-rows section); no boxed border / edge fades. */
/* Full-bleed: break the brand carousel out of the 1360 container so the
   white band + logos span the full viewport width (pills/dots stay centred). */
.mapyr-logo-marquee { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); }
.mapyr-logo-marquee__viewport {
	overflow: hidden;
	background: var(--mapyr-paper-pure);
	touch-action: pan-y;
}
/* Continuous marquee: transform driven per-frame by JS, so no CSS transition. */
.mapyr-logo-marquee__track { display: flex; will-change: transform; }
/* Equal-height logo strip: every logo the SAME height, width auto (deck slide 9
   "size should be equal and VISIBLE"). Auto-width items suit the marquee. */
.mapyr-logo-marquee__item {
	flex: 0 0 auto;
	display: grid; place-items: center;
	min-height: 120px;
	padding-inline: clamp(1.75rem, 3.5vw, 3.5rem);
	text-decoration: none;
	box-sizing: border-box;
}
.mapyr-logo-marquee__item img { height: 38px; width: auto; max-width: none; object-fit: contain; display: block; }

/* RETOUCH — home brand carousel: 150px square cells, logo contained, 3x gap. */
[data-brand-carousel] .mapyr-logo-marquee__viewport { background: var(--mapyr-paper-soft); }
[data-brand-carousel] .mapyr-logo-marquee__track { gap: 24px; }
[data-brand-carousel] .mapyr-logo-marquee__item {
	height: 150px;
	aspect-ratio: 1 / 1;
	min-height: 0;
	padding: 18px;
}
[data-brand-carousel] .mapyr-logo-marquee__item img { height: auto; max-height: 100%; max-width: 100%; }
.mapyr-logo-marquee__ph { font-family: var(--mapyr-font-head); font-size: 0.9rem; color: var(--mapyr-ink-soft); text-align: center; line-height: 1.2; }
@media (max-width: 768px) {
	.mapyr-logo-marquee__item { min-height: 104px; padding-inline: 1.5rem; }
	.mapyr-logo-marquee__item img { height: 32px; }
}
/* Slide 32: retail-partner logos sit larger and fit the row height (width auto). */
[data-retail-marquee] .mapyr-logo-marquee__item img { height: 80px; width: auto; }
@media (max-width: 768px) { [data-retail-marquee] .mapyr-logo-marquee__item img { height: 56px; } }

/* Small dots. Higher specificity beats `.mapyr-surface button{background:transparent}`
   which was hiding the inactive dots. */
.mapyr-logo-marquee__dots { display: flex; justify-content: center; gap: 7px; margin-top: 1.5rem; flex-wrap: wrap; }
.mapyr-logo-marquee__dots .mapyr-logo-marquee__dot {
	width: 6px; height: 6px; border-radius: 50%; border: 0; padding: 0;
	-webkit-appearance: none; appearance: none; flex: 0 0 auto;
	background: var(--mapyr-line-strong); cursor: pointer;
	transition: background 200ms ease, transform 200ms ease;
}
.mapyr-logo-marquee__dots .mapyr-logo-marquee__dot:hover { background: var(--mapyr-ink-mute); }
.mapyr-logo-marquee__dots .mapyr-logo-marquee__dot.is-active { background: var(--mapyr-ink); transform: scale(1.5); }