/**
 * Mapyr - shared page chrome (TAVO-inspired)
 * v0.21.0 - 15/05/2026
 */

/* PAGE HERO (short) - used on About, audiences, Contact, Careers, Legal */
.mapyr-page-hero {
	background: var(--mapyr-paper-soft);
	padding-block: clamp(var(--mapyr-sp-8), 14vh, var(--mapyr-sp-10));
	border-bottom: 1px solid var(--mapyr-line);
}
.mapyr-page-hero__inner { max-width: 880px; }
.mapyr-page-hero--center .mapyr-page-hero__inner { margin-inline: auto; text-align: center; }
.mapyr-page-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-ink-soft);
	margin-bottom: var(--mapyr-sp-4);
}
.mapyr-page-hero__title {
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-4xl);
	font-weight: 600;
	line-height: var(--mapyr-lh-tight);
	letter-spacing: var(--mapyr-tracking-display);
	margin: 0 0 var(--mapyr-sp-5);
	color: var(--mapyr-ink);
}
.mapyr-page-hero__lede {
	font-size: var(--mapyr-fs-md);
	line-height: var(--mapyr-lh-base);
	color: var(--mapyr-ink-soft);
	margin: 0;
	max-width: 60ch;
}
.mapyr-page-hero--center .mapyr-page-hero__lede { margin-inline: auto; }

/* PROSE - legal pages + about copy blocks */
.mapyr-prose {
	max-width: 720px;
	margin: 0 auto;
	color: var(--mapyr-ink-soft);
	font-size: var(--mapyr-fs-md);
	line-height: var(--mapyr-lh-loose);
}
.mapyr-prose h2, .mapyr-prose h3, .mapyr-prose h4 {
	font-family: var(--mapyr-font-head);
	color: var(--mapyr-ink);
	letter-spacing: var(--mapyr-tracking-tight);
	font-weight: 600;
	line-height: var(--mapyr-lh-snug);
	margin: var(--mapyr-sp-7) 0 var(--mapyr-sp-3);
}
.mapyr-prose h2 { font-size: var(--mapyr-fs-2xl); }
.mapyr-prose h3 { font-size: var(--mapyr-fs-xl); }
.mapyr-prose h4 { font-size: var(--mapyr-fs-lg); }
.mapyr-prose p { margin: 0 0 var(--mapyr-sp-5); }
.mapyr-prose ul, .mapyr-prose ol { margin: 0 0 var(--mapyr-sp-5); padding-left: 1.25em; }
.mapyr-prose li { margin-bottom: var(--mapyr-sp-2); }
.mapyr-prose a { color: var(--mapyr-ink); text-decoration: underline; text-underline-offset: 3px; }
.mapyr-prose a:hover { color: var(--mapyr-accent); }

/* FORM (B2B Inquiry / Career / Contact) */
.mapyr-form {
	display: flex; flex-direction: column;
	gap: var(--mapyr-sp-5);
	max-width: 720px;
}
.mapyr-form--center { margin: 0 auto; }
.mapyr-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-5);
}
@media (min-width: 700px) {
	.mapyr-form__row--2 { grid-template-columns: 1fr 1fr; }
	.mapyr-form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.mapyr-form__field { display: flex; flex-direction: column; gap: var(--mapyr-sp-2); }
.mapyr-form__label {
	font-family: var(--mapyr-font-head);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--mapyr-ink);
}
.mapyr-form__input, .mapyr-form__select, .mapyr-form__textarea {
	width: 100%;
	background: var(--mapyr-paper-pure);
	border: 1px solid var(--mapyr-line-strong);
	border-radius: var(--mapyr-radius-md);
	padding: 0.85rem 1rem;
	font-family: var(--mapyr-font-body);
	font-size: var(--mapyr-fs-base);
	color: var(--mapyr-ink);
	transition: border-color var(--mapyr-motion-fast);
}
.mapyr-form__input:focus, .mapyr-form__select:focus, .mapyr-form__textarea:focus {
	outline: none;
	border-color: var(--mapyr-ink);
}
.mapyr-form__textarea { min-height: 160px; resize: vertical; line-height: var(--mapyr-lh-base); }
.mapyr-form__select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23111827' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.mapyr-form__hint { font-size: var(--mapyr-fs-xs); color: var(--mapyr-ink-mute); }
.mapyr-form__consent { display: flex; gap: var(--mapyr-sp-3); align-items: flex-start; font-size: var(--mapyr-fs-sm); color: var(--mapyr-ink-soft); }
.mapyr-form__consent input { margin-top: 4px; accent-color: var(--mapyr-ink); }
.mapyr-form__submit { align-self: flex-start; }

/* ============================================================
 * Themed custom <select> dropdown (JS-enhanced in site.js).
 * Replaces the OS/window dropdown across ALL forms with an
 * on-brand listbox. 2-class selectors so they beat the global
 * .mapyr-surface button reset/neutraliser. Native <select>
 * stays in the DOM (transparent) for submit + validation.
 * ============================================================ */
.mapyr-cselect { position: relative; width: 100%; }
.mapyr-cselect .mapyr-cselect__native {
	position: absolute; inset: 0; width: 100%; height: 100%;
	opacity: 0; pointer-events: none;
}
/* bg/color forced with !important: the parent reset.css colours
   [type=button]:hover/:focus #c36 (pink) at equal specificity — without
   !important the focused button flashes pink. */
.mapyr-cselect .mapyr-cselect__btn,
.mapyr-cselect .mapyr-cselect__btn:hover,
.mapyr-cselect .mapyr-cselect__btn:focus,
.mapyr-cselect .mapyr-cselect__btn:active,
.mapyr-cselect .mapyr-cselect__btn:focus-visible {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
	background: var(--mapyr-paper-pure) !important;
	color: var(--mapyr-ink) !important;
	border: 1px solid var(--mapyr-line-strong);
	border-radius: var(--mapyr-radius-md);
	padding: 0.85rem 1rem;
	font-family: var(--mapyr-font-body); font-size: var(--mapyr-fs-base);
	text-align: left; cursor: pointer; box-shadow: none !important;
	transition: border-color var(--mapyr-motion-fast);
}
.mapyr-cselect .mapyr-cselect__btn:hover { border-color: var(--mapyr-ink-soft); }
.mapyr-cselect.is-open .mapyr-cselect__btn,
.mapyr-cselect .mapyr-cselect__btn:focus,
.mapyr-cselect .mapyr-cselect__btn:focus-visible { outline: none; border-color: var(--mapyr-ink); }
.mapyr-cselect .mapyr-cselect__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapyr-cselect .mapyr-cselect__label.is-placeholder { color: var(--mapyr-ink-mute); }
.mapyr-cselect .mapyr-cselect__chev { display: inline-flex; color: var(--mapyr-ink-mute); transition: transform var(--mapyr-motion-fast); flex: 0 0 auto; }
.mapyr-cselect.is-open .mapyr-cselect__chev { transform: rotate(180deg); }
.mapyr-cselect .mapyr-cselect__list {
	position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0;
	background: var(--mapyr-paper); border: 1px solid var(--mapyr-line);
	border-radius: var(--mapyr-radius-md); box-shadow: 0 16px 40px rgba(17, 24, 39, 0.16);
	padding: 4px; max-height: 260px; overflow-y: auto;
	display: flex; flex-direction: column; gap: 1px;
}
/* `display:flex` above would override the UA [hidden] rule and leave every
   list visible (all dropdowns look open). Re-assert hidden = closed. */
.mapyr-cselect .mapyr-cselect__list[hidden] { display: none; }
.mapyr-cselect .mapyr-cselect__opt {
	display: block; width: 100%; text-align: left; border: 0;
	background: transparent !important; color: var(--mapyr-ink) !important;
	font-family: var(--mapyr-font-body); font-size: var(--mapyr-fs-base);
	padding: 0.6rem 0.7rem; border-radius: var(--mapyr-radius-sm); cursor: pointer; box-shadow: none !important;
}
.mapyr-cselect .mapyr-cselect__opt:hover,
.mapyr-cselect .mapyr-cselect__opt:focus,
.mapyr-cselect .mapyr-cselect__opt:focus-visible { background: var(--mapyr-paper-soft) !important; color: var(--mapyr-ink) !important; outline: none; }
.mapyr-cselect .mapyr-cselect__opt.is-selected,
.mapyr-cselect .mapyr-cselect__opt.is-selected:hover,
.mapyr-cselect .mapyr-cselect__opt.is-selected:focus { background: var(--mapyr-ink) !important; color: var(--mapyr-paper) !important; }
.mapyr-cselect .mapyr-cselect__opt.is-placeholder { color: var(--mapyr-ink-mute) !important; }
.mapyr-cselect .mapyr-cselect__opt:disabled { opacity: 0.5; cursor: not-allowed; }

/* TABS (B2B inquiry 4-tab) */
.mapyr-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--mapyr-line-strong);
	margin-bottom: var(--mapyr-sp-7);
	flex-wrap: wrap;
}
.mapyr-tabs__btn {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: var(--mapyr-sp-4) var(--mapyr-sp-5);
	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);
	cursor: pointer;
	transition: color var(--mapyr-motion-fast), border-color var(--mapyr-motion-fast);
	margin-bottom: -1px;
}
.mapyr-tabs__btn:hover { color: var(--mapyr-ink); }
.mapyr-tabs__btn[aria-selected="true"] {
	color: var(--mapyr-ink);
	border-bottom-color: var(--mapyr-ink);
}
.mapyr-tab-panel { display: none; }
.mapyr-tab-panel.is-active { display: block; }

/* CONTACT INFO ROW */
.mapyr-contact-info {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-6);
}
@media (min-width: 700px) { .mapyr-contact-info { grid-template-columns: repeat(3, 1fr); } }
.mapyr-contact-info__item { display: flex; flex-direction: column; gap: var(--mapyr-sp-2); padding-top: var(--mapyr-sp-5); border-top: 1px solid var(--mapyr-line-strong); }
.mapyr-contact-info__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);
}
.mapyr-contact-info__value { font-family: var(--mapyr-font-head); font-size: var(--mapyr-fs-lg); color: var(--mapyr-ink); }
.mapyr-contact-info__value a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--mapyr-line-strong); }
.mapyr-contact-info__value a:hover { border-color: var(--mapyr-ink); }

/* JOB CARDS (careers) */
.mapyr-jobs { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--mapyr-line-strong); }
.mapyr-jobs__item {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-3);
	padding-block: var(--mapyr-sp-6);
	border-bottom: 1px solid var(--mapyr-line-strong);
	text-decoration: none;
	color: inherit;
	transition: background var(--mapyr-motion-fast);
}
@media (min-width: 800px) {
	.mapyr-jobs__item { grid-template-columns: 2fr 1fr 1fr auto; align-items: center; gap: var(--mapyr-sp-5); }
}
.mapyr-jobs__item:hover { background: var(--mapyr-paper-soft); }
.mapyr-jobs__title {
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-xl);
	font-weight: 600;
	margin: 0;
	letter-spacing: var(--mapyr-tracking-tight);
}
.mapyr-jobs__meta {
	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);
}
.mapyr-jobs__arrow {
	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);
	display: inline-flex; align-items: center; gap: var(--mapyr-sp-2);
}

/* CASE STUDY / CARD GRID */
.mapyr-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-6);
}
@media (min-width: 700px) { .mapyr-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mapyr-cards { grid-template-columns: repeat(3, 1fr); } }
.mapyr-card {
	display: flex; flex-direction: column;
	background: var(--mapyr-paper);
	text-decoration: none;
	color: inherit;
	transition: transform var(--mapyr-motion-base);
}
.mapyr-card:hover { transform: translateY(-3px); }
.mapyr-card__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mapyr-paper-soft); }
.mapyr-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--mapyr-motion-slow); }
.mapyr-card:hover .mapyr-card__img img { transform: scale(1.03); }
.mapyr-card__body { padding: var(--mapyr-sp-5) 0; display: flex; flex-direction: column; gap: var(--mapyr-sp-2); }
.mapyr-card__tag {
	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);
}
.mapyr-card__title {
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-xl);
	font-weight: 600;
	margin: 0;
	color: var(--mapyr-ink);
	letter-spacing: var(--mapyr-tracking-tight);
}
.mapyr-card__excerpt { color: var(--mapyr-ink-soft); font-size: var(--mapyr-fs-sm); margin: 0; }

/* ========== CASE STUDY CARD — editorial redesign ========== */

.mapyr-case-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-6);
}
@media (min-width: 760px)  { .mapyr-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .mapyr-case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mapyr-case-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mapyr-paper);
	border: 1px solid var(--mapyr-line);
	border-radius: var(--mapyr-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 200ms ease, box-shadow 220ms ease, transform 220ms ease;
	box-shadow: 0 1px 0 rgba(17, 24, 39, 0.02);
}
.mapyr-case-card:hover {
	transform: translateY(-4px);
	border-color: var(--mapyr-ink);
	box-shadow: 0 14px 28px -16px rgba(17, 24, 39, 0.18), 0 4px 8px -4px rgba(17, 24, 39, 0.08);
}

.mapyr-case-card__demo {
	position: absolute;
	top: var(--mapyr-sp-4);
	right: var(--mapyr-sp-4);
	z-index: 3;
	font-family: var(--mapyr-font-head);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: #fef3c7;
	color: #92400e;
	padding: 0.3rem 0.65rem;
	border-radius: 9999px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.mapyr-case-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--mapyr-ink);
	color: var(--mapyr-paper);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mapyr-case-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms cubic-bezier(0.32, 0.72, 0, 1);
}
.mapyr-case-card:hover .mapyr-case-card__media img { transform: scale(1.04); }

/* Headline-metric fallback when no thumbnail */
.mapyr-case-card__hero-stat {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	text-align: center;
	padding: var(--mapyr-sp-6);
}
.mapyr-case-card__hero-stat-value {
	font-family: var(--mapyr-font-head);
	font-size: clamp(2.5rem, 4vw + 0.5rem, 4.5rem);
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--mapyr-paper);
}
.mapyr-case-card__hero-stat-label {
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.mapyr-case-card__body {
	padding: var(--mapyr-sp-6) var(--mapyr-sp-6) var(--mapyr-sp-7);
	display: flex;
	flex-direction: column;
	gap: var(--mapyr-sp-4);
	flex: 1;
}

.mapyr-case-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0;
}
.mapyr-case-card__chip {
	font-family: var(--mapyr-font-head);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 0.3rem 0.65rem;
	border: 1px solid var(--mapyr-line);
	border-radius: 9999px;
	color: var(--mapyr-ink-soft);
	background: var(--mapyr-paper);
}
.mapyr-case-card__chip--accent {
	background: var(--mapyr-ink);
	color: var(--mapyr-paper);
	border-color: var(--mapyr-ink);
}

.mapyr-case-card__title {
	font-family: var(--mapyr-font-head);
	font-size: clamp(1.25rem, 0.6vw + 1rem, 1.5rem);
	line-height: 1.2;
	letter-spacing: -0.025em;
	font-weight: 600;
	color: var(--mapyr-ink);
	margin: 0;
}

.mapyr-case-card__meta {
	font-size: 0.8125rem;
	color: var(--mapyr-ink-mute);
	margin: 0;
	line-height: 1.45;
}

.mapyr-case-card__metrics {
	display: grid;
	gap: var(--mapyr-sp-3);
	padding: var(--mapyr-sp-4) 0;
	border-top: 1px solid var(--mapyr-line);
	border-bottom: 1px solid var(--mapyr-line);
}
.mapyr-case-card__metrics[data-count="1"] { grid-template-columns: 1fr; }
.mapyr-case-card__metrics[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mapyr-case-card__metrics[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mapyr-case-card__metric {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}
.mapyr-case-card__metric-value {
	font-family: var(--mapyr-font-head);
	font-size: clamp(1.5rem, 1.4vw + 0.5rem, 2rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--mapyr-ink);
}
.mapyr-case-card__metric-label {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mapyr-ink-mute);
	line-height: 1.4;
}

.mapyr-case-card__excerpt {
	color: var(--mapyr-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
}

.mapyr-case-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--mapyr-font-head);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--mapyr-ink);
	border-bottom: 1px solid var(--mapyr-ink);
	align-self: flex-start;
	padding-bottom: 0.2rem;
	transition: gap 200ms ease, border-color 200ms ease;
}
.mapyr-case-card:hover .mapyr-case-card__cta { gap: 0.7rem; }

/* ========== SINGLE CASE STUDY — inner page ========== */

.mapyr-case-single { background: var(--mapyr-paper); }

.mapyr-case-hero {
	padding-block: clamp(var(--mapyr-sp-7), 8vw, var(--mapyr-sp-9));
	background: var(--mapyr-paper-soft);
	border-bottom: 1px solid var(--mapyr-line);
}
.mapyr-case-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	color: var(--mapyr-ink-soft);
	text-decoration: none;
	margin-bottom: var(--mapyr-sp-5);
}
.mapyr-case-hero__back:hover { color: var(--mapyr-ink); }

.mapyr-case-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: var(--mapyr-sp-4);
}
.mapyr-case-hero__chip {
	font-family: var(--mapyr-font-head);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 0.32rem 0.7rem;
	border-radius: 9999px;
	border: 1px solid var(--mapyr-line);
	color: var(--mapyr-ink-soft);
	background: var(--mapyr-paper);
}
.mapyr-case-hero__chip--accent {
	background: var(--mapyr-ink);
	color: var(--mapyr-paper);
	border-color: var(--mapyr-ink);
}
.mapyr-case-hero__chip--demo {
	background: #fef3c7;
	color: #92400e;
	border-color: #fde68a;
}

.mapyr-case-hero__title {
	font-family: var(--mapyr-font-head);
	font-size: clamp(2rem, 2.4vw + 1rem, 3.5rem);
	line-height: 1.05;
	letter-spacing: var(--mapyr-tracking-display);
	font-weight: 600;
	color: var(--mapyr-ink);
	margin: 0 0 var(--mapyr-sp-4);
	max-width: 22ch;
}
.mapyr-case-hero__lede {
	font-size: clamp(1rem, 0.3vw + 0.95rem, 1.25rem);
	line-height: 1.6;
	color: var(--mapyr-ink-soft);
	margin: 0 0 var(--mapyr-sp-6);
	max-width: 60ch;
}
.mapyr-case-hero__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--mapyr-sp-5);
	padding-top: var(--mapyr-sp-5);
	border-top: 1px solid var(--mapyr-line);
}
.mapyr-case-hero__meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.mapyr-case-hero__meta-label {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mapyr-ink-mute);
}
.mapyr-case-hero__meta-value {
	font-family: var(--mapyr-font-head);
	font-size: 1rem;
	font-weight: 500;
	color: var(--mapyr-ink);
	letter-spacing: -0.005em;
}

/* Metric tile strip */
.mapyr-case-tiles {
	padding-block: clamp(var(--mapyr-sp-7), 6vw, var(--mapyr-sp-8));
	background: var(--mapyr-ink);
	color: var(--mapyr-paper);
}
.mapyr-case-tiles__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-6);
}
@media (min-width: 760px) {
	.mapyr-case-tiles__inner[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mapyr-case-tiles__inner[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mapyr-case-tile {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border-left: 2px solid var(--mapyr-paper);
	padding-left: var(--mapyr-sp-5);
}
.mapyr-case-tile__value {
	font-family: var(--mapyr-font-head);
	font-size: clamp(2.5rem, 3.6vw + 1rem, 4.5rem);
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--mapyr-paper);
}
.mapyr-case-tile__label {
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.45;
	max-width: 30ch;
}

/* Body + pull quote */
.mapyr-case-body {
	padding-block: clamp(var(--mapyr-sp-8), 6vw, var(--mapyr-sp-9));
}
.mapyr-case-body__prose {
	max-width: 64ch;
	margin: 0 auto;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--mapyr-ink-soft);
}
.mapyr-case-body__prose p { margin: 0 0 1.2em; }
.mapyr-case-body__prose p em:first-child { color: var(--mapyr-ink-mute); font-style: italic; }

.mapyr-case-quote {
	max-width: 64ch;
	margin: var(--mapyr-sp-7) auto;
	padding: var(--mapyr-sp-6);
	border-left: 3px solid var(--mapyr-ink);
	background: var(--mapyr-paper-soft);
	border-radius: 0 var(--mapyr-radius-md) var(--mapyr-radius-md) 0;
}
.mapyr-case-quote__text {
	font-family: var(--mapyr-font-head);
	font-size: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
	line-height: 1.5;
	font-weight: 400;
	letter-spacing: -0.015em;
	color: var(--mapyr-ink);
	margin: 0 0 var(--mapyr-sp-4);
	font-style: italic;
}
.mapyr-case-quote__attrib {
	font-size: 0.875rem;
	color: var(--mapyr-ink-mute);
	letter-spacing: 0.02em;
}

/* CTA band already provided by .mapyr-cta-band--ink */

/* Related case studies grid */
.mapyr-case-related {
	padding-block: clamp(var(--mapyr-sp-7), 6vw, var(--mapyr-sp-9));
	background: var(--mapyr-paper-soft);
	border-top: 1px solid var(--mapyr-line);
}

/* ========== SINGLE JOB — inner page + form ========== */

.mapyr-job-single { background: var(--mapyr-paper); }

.mapyr-job-hero {
	padding-block: clamp(var(--mapyr-sp-7), 8vw, var(--mapyr-sp-9));
	background: var(--mapyr-paper-soft);
	border-bottom: 1px solid var(--mapyr-line);
}
.mapyr-job-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	color: var(--mapyr-ink-soft);
	text-decoration: none;
	margin-bottom: var(--mapyr-sp-5);
}
.mapyr-job-hero__back:hover { color: var(--mapyr-ink); }
.mapyr-job-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: var(--mapyr-sp-5);
}
.mapyr-job-hero__chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--mapyr-font-head);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 0.32rem 0.7rem;
	border-radius: 9999px;
	border: 1px solid var(--mapyr-line);
	color: var(--mapyr-ink-soft);
	background: var(--mapyr-paper);
}
.mapyr-job-hero__chip--accent { background: var(--mapyr-ink); color: var(--mapyr-paper); border-color: var(--mapyr-ink); }
.mapyr-job-hero__chip--demo { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.mapyr-job-hero__title {
	font-family: var(--mapyr-font-head);
	font-size: clamp(2rem, 2.4vw + 1rem, 3.5rem);
	line-height: 1.05;
	letter-spacing: var(--mapyr-tracking-display);
	font-weight: 600;
	color: var(--mapyr-ink);
	margin: 0 0 var(--mapyr-sp-4);
	max-width: 22ch;
}
.mapyr-job-hero__lede {
	font-size: clamp(1rem, 0.3vw + 0.95rem, 1.25rem);
	line-height: 1.6;
	color: var(--mapyr-ink-soft);
	margin: 0 0 var(--mapyr-sp-6);
	max-width: 60ch;
}
.mapyr-job-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mapyr-sp-3);
	margin-bottom: var(--mapyr-sp-7);
}
.mapyr-job-hero__closed {
	font-family: var(--mapyr-font-head);
	font-size: 0.875rem;
	font-weight: 500;
	padding: 0.6rem 1rem;
	color: var(--mapyr-ink-mute);
	background: var(--mapyr-paper-mute);
	border: 1px dashed var(--mapyr-line-strong);
	border-radius: var(--mapyr-radius-md);
}
.mapyr-job-hero__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--mapyr-sp-5);
	padding-top: var(--mapyr-sp-5);
	border-top: 1px solid var(--mapyr-line);
	margin: 0;
}
.mapyr-job-hero__facts > div { display: flex; flex-direction: column; gap: 0.2rem; }
.mapyr-job-hero__facts dt {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mapyr-ink-mute);
	margin: 0;
}
.mapyr-job-hero__facts dd {
	font-family: var(--mapyr-font-head);
	font-size: 1rem;
	font-weight: 500;
	color: var(--mapyr-ink);
	letter-spacing: -0.005em;
	margin: 0;
}

/* Body grid (prose + sticky aside) */
.mapyr-job-body { padding-block: clamp(var(--mapyr-sp-7), 6vw, var(--mapyr-sp-9)); }
.mapyr-job-body__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 4rem);
}
@media (min-width: 960px) {
	.mapyr-job-body__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.mapyr-job-body__prose {
	max-width: 64ch;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--mapyr-ink-soft);
}
.mapyr-job-body__prose h2 {
	font-family: var(--mapyr-font-head);
	font-size: clamp(1.25rem, 0.4vw + 1rem, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--mapyr-ink);
	margin: 1.8em 0 0.6em;
}
.mapyr-job-body__prose ul { padding-left: 1.2em; }
.mapyr-job-body__prose li { margin: 0.4em 0; }

.mapyr-job-section__title {
	font-family: var(--mapyr-font-head);
	font-size: clamp(1.25rem, 0.5vw + 1rem, 1.5rem);
	font-weight: 600;
	letter-spacing: var(--mapyr-tracking-display);
	color: var(--mapyr-ink);
	margin: 2em 0 0.6em;
}
.mapyr-job-section__list {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.mapyr-job-section__list li {
	position: relative;
	padding-left: 1.6rem;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--mapyr-ink-soft);
}
.mapyr-job-section__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	background: var(--mapyr-ink);
	border-radius: 9999px;
}

.mapyr-job-aside { position: relative; }
@media (min-width: 960px) {
	.mapyr-job-aside { position: sticky; top: 96px; align-self: start; }
}
.mapyr-job-aside__card {
	background: var(--mapyr-paper-soft);
	border: 1px solid var(--mapyr-line);
	border-radius: var(--mapyr-radius-lg);
	padding: clamp(1.5rem, 2.5vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: var(--mapyr-sp-4);
}
.mapyr-job-aside__title {
	font-family: var(--mapyr-font-head);
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--mapyr-ink);
	margin: 0;
	font-weight: 600;
}
.mapyr-job-aside__body { font-size: 0.9375rem; color: var(--mapyr-ink-soft); margin: 0; line-height: 1.55; }
.mapyr-job-aside__cta { align-self: flex-start; }
.mapyr-job-aside__list {
	margin: 0;
	padding: var(--mapyr-sp-3) 0 0;
	list-style: none;
	border-top: 1px solid var(--mapyr-line);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.mapyr-job-aside__list li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.875rem;
	color: var(--mapyr-ink-soft);
}
.mapyr-job-aside__list svg { color: var(--mapyr-ink); flex: 0 0 auto; }

/* Apply form */
.mapyr-job-apply {
	padding-block: clamp(var(--mapyr-sp-8), 7vw, var(--mapyr-sp-9));
	background: var(--mapyr-paper-soft);
	border-top: 1px solid var(--mapyr-line);
	border-bottom: 1px solid var(--mapyr-line);
}
.mapyr-job-apply__head { text-align: center; max-width: 640px; margin: 0 auto var(--mapyr-sp-7); }
.mapyr-job-apply__title {
	font-family: var(--mapyr-font-head);
	font-size: clamp(1.5rem, 1.2vw + 1rem, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.025em;
	font-weight: 600;
	color: var(--mapyr-ink);
	margin: 0.5rem 0 0.6rem;
}
.mapyr-job-apply__lede { color: var(--mapyr-ink-soft); margin: 0; font-size: 0.9375rem; }

.mapyr-job-form {
	background: var(--mapyr-paper);
	border: 1px solid var(--mapyr-line);
	border-radius: var(--mapyr-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: var(--mapyr-sp-5);
}
.mapyr-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-4);
}
@media (min-width: 720px) {
	.mapyr-form__grid { grid-template-columns: 1fr 1fr; }
}
.mapyr-form__field { display: flex; flex-direction: column; gap: 0.4rem; }
.mapyr-form__field label {
	font-family: var(--mapyr-font-head);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--mapyr-ink);
	letter-spacing: -0.005em;
}
.mapyr-form__field input[type="text"],
.mapyr-form__field input[type="email"],
.mapyr-form__field input[type="tel"],
.mapyr-form__field input[type="url"],
.mapyr-form__field textarea,
.mapyr-form__field input[type="file"] {
	font-family: var(--mapyr-font-body);
	font-size: 0.9375rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--mapyr-line);
	border-radius: var(--mapyr-radius-sm);
	background: var(--mapyr-paper);
	color: var(--mapyr-ink);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.mapyr-form__field input:focus,
.mapyr-form__field textarea:focus {
	outline: 0;
	border-color: var(--mapyr-ink);
	box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}
.mapyr-form__field input[type="file"] { padding: 0.55rem 0.7rem; cursor: pointer; }
.mapyr-form__field textarea { min-height: 140px; resize: vertical; }

/* iOS Safari auto-zooms the viewport when a field <16px receives focus.
   Lock fields to 16px on touch widths so forms never trigger the zoom. */
@media (max-width: 768px) {
	.mapyr-form__field input[type="text"],
	.mapyr-form__field input[type="email"],
	.mapyr-form__field input[type="tel"],
	.mapyr-form__field input[type="url"],
	.mapyr-form__field input[type="number"],
	.mapyr-form__field input[type="search"],
	.mapyr-form__field input[type="file"],
	.mapyr-form__field select,
	.mapyr-form__field textarea,
	.mapyr-cselect__trigger { font-size: 16px; }
}

.mapyr-form__consent label {
	display: block;
	font-family: var(--mapyr-font-body);
	font-size: 0.875rem;
	color: var(--mapyr-ink-soft);
	line-height: 1.5;
	cursor: pointer;
	font-weight: 400;
	letter-spacing: 0;
}
.mapyr-form__consent input[type="checkbox"] { margin-top: 0.25rem; flex: 0 0 auto; }
.mapyr-form__consent a { color: var(--mapyr-ink); text-decoration: underline; text-underline-offset: 3px; }

.mapyr-form__actions { display: flex; justify-content: flex-end; }
.mapyr-form__actions .mapyr-btn { padding-inline: 1.6rem; }

.mapyr-form__alert {
	padding: var(--mapyr-sp-4);
	border-radius: var(--mapyr-radius-md);
	margin-bottom: var(--mapyr-sp-5);
	font-size: 0.9375rem;
}
.mapyr-form__alert--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

/* Related job cards */
.mapyr-job-related {
	padding-block: clamp(var(--mapyr-sp-7), 6vw, var(--mapyr-sp-9));
	background: var(--mapyr-paper);
	border-top: 1px solid var(--mapyr-line);
}
.mapyr-job-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-5);
}
@media (min-width: 760px) { .mapyr-job-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .mapyr-job-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mapyr-job-card {
	display: flex;
	flex-direction: column;
	gap: var(--mapyr-sp-3);
	padding: var(--mapyr-sp-5);
	border: 1px solid var(--mapyr-line);
	border-radius: var(--mapyr-radius-lg);
	background: var(--mapyr-paper);
	text-decoration: none;
	color: inherit;
	transition: border-color 200ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.mapyr-job-card:hover {
	transform: translateY(-3px);
	border-color: var(--mapyr-ink);
	box-shadow: 0 10px 20px -12px rgba(17, 24, 39, 0.16);
}
.mapyr-job-card__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mapyr-job-card__chip {
	font-family: var(--mapyr-font-head);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 0.28rem 0.6rem;
	border-radius: 9999px;
	border: 1px solid var(--mapyr-line);
	color: var(--mapyr-ink-soft);
}
.mapyr-job-card__chip--accent { background: var(--mapyr-ink); color: var(--mapyr-paper); border-color: var(--mapyr-ink); }
.mapyr-job-card__title {
	font-family: var(--mapyr-font-head);
	font-size: 1.125rem;
	line-height: 1.25;
	letter-spacing: -0.02em;
	font-weight: 600;
	color: var(--mapyr-ink);
	margin: 0;
}
.mapyr-job-card__meta { font-size: 0.875rem; color: var(--mapyr-ink-mute); margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; }
.mapyr-job-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--mapyr-font-head);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--mapyr-ink);
	border-bottom: 1px solid var(--mapyr-ink);
	align-self: flex-start;
	padding-bottom: 0.2rem;
	transition: gap 200ms ease;
}
.mapyr-job-card:hover .mapyr-job-card__cta { gap: 0.6rem; }

/* ========== ABOUT — hero + team cards ========== */

.mapyr-about-hero {
	padding-block: clamp(var(--mapyr-sp-8), 9vw, var(--mapyr-sp-10));
	background:
		linear-gradient(135deg, rgba(17,24,39,0.04) 0%, rgba(255,255,255,0) 65%),
		var(--mapyr-paper-soft);
	border-bottom: 1px solid var(--mapyr-line);
	overflow: hidden;
}
.mapyr-about-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 960px) {
	.mapyr-about-hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.mapyr-about-hero__copy { max-width: 60ch; }
.mapyr-about-hero__title {
	font-family: var(--mapyr-font-head);
	font-size: clamp(2.25rem, 3vw + 1rem, 4.25rem);
	line-height: 1.02;
	letter-spacing: var(--mapyr-tracking-display);
	font-weight: 600;
	color: var(--mapyr-ink);
	margin: 0.4rem 0 var(--mapyr-sp-5);
}
.mapyr-about-hero__title em {
	font-style: italic;
	font-weight: 400;
	color: var(--mapyr-ink-soft);
}
.mapyr-about-hero__lede {
	font-size: clamp(1rem, 0.3vw + 0.95rem, 1.25rem);
	line-height: 1.6;
	color: var(--mapyr-ink-soft);
	margin: 0 0 var(--mapyr-sp-4);
}
.mapyr-about-hero__lede--soft { color: var(--mapyr-ink-mute); }
.mapyr-about-hero__actions {
	margin-top: var(--mapyr-sp-5);
	display: flex;
	gap: var(--mapyr-sp-3);
	flex-wrap: wrap;
}
.mapyr-about-hero__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mapyr-sp-6) var(--mapyr-sp-5);
	padding: clamp(1.75rem, 2.5vw, 2.5rem);
	background: var(--mapyr-paper);
	border: 1px solid var(--mapyr-line);
	border-radius: var(--mapyr-radius-lg);
	box-shadow: 0 16px 32px -20px rgba(17,24,39,0.16);
}
.mapyr-about-hero__stats > div {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: var(--mapyr-sp-3);
	border-left: 2px solid var(--mapyr-ink);
}
.mapyr-about-hero__stat-num {
	font-family: var(--mapyr-font-head);
	font-size: clamp(2rem, 2vw + 1rem, 3rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--mapyr-ink);
}
.mapyr-about-hero__stat-label {
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mapyr-ink-mute);
	line-height: 1.35;
}

/* Team / Leadership grid */
.mapyr-team-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-6);
}
@media (min-width: 720px)  { .mapyr-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .mapyr-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mapyr-team-card {
	display: flex;
	flex-direction: column;
	gap: var(--mapyr-sp-4);
	background: var(--mapyr-paper);
	border: 1px solid var(--mapyr-line);
	border-radius: var(--mapyr-radius-lg);
	overflow: hidden;
	transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.mapyr-team-card:hover {
	transform: translateY(-4px);
	border-color: var(--mapyr-ink);
	box-shadow: 0 14px 28px -16px rgba(17,24,39,0.18);
}
.mapyr-team-card__photo {
	aspect-ratio: 4 / 5;
	background: var(--mapyr-ink);
	color: var(--mapyr-paper);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.mapyr-team-card__photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms cubic-bezier(0.32,0.72,0,1);
}
.mapyr-team-card:hover .mapyr-team-card__photo img { transform: scale(1.04); }
.mapyr-team-card__initials {
	font-family: var(--mapyr-font-head);
	font-size: clamp(2.5rem, 3vw + 1rem, 4rem);
	font-weight: 400;
	letter-spacing: -0.04em;
	color: var(--mapyr-paper);
}
.mapyr-team-card__body {
	padding: 0 var(--mapyr-sp-5) var(--mapyr-sp-5);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}
.mapyr-team-card__role {
	font-family: var(--mapyr-font-head);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mapyr-ink-mute);
}
.mapyr-team-card__name {
	font-family: var(--mapyr-font-head);
	font-size: 1.125rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 600;
	color: var(--mapyr-ink);
	margin: 0;
}
.mapyr-team-card__bio {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--mapyr-ink-soft);
	margin: 0;
}
.mapyr-team-card__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--mapyr-font-head);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--mapyr-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--mapyr-ink);
	align-self: flex-start;
	padding-bottom: 0.15rem;
	transition: gap 200ms ease;
}
.mapyr-team-card__link:hover { gap: 0.6rem; }

/* FAQ */
.mapyr-faq { max-width: 880px; margin: 0 auto; }
.mapyr-faq__item {
	border-top: 1px solid var(--mapyr-line-strong);
}
.mapyr-faq__item:last-child { border-bottom: 1px solid var(--mapyr-line-strong); }
.mapyr-faq__summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--mapyr-sp-4);
	padding-block: var(--mapyr-sp-5);
	cursor: pointer;
	list-style: none;
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-lg);
	font-weight: 400;
	color: var(--mapyr-ink);
}
.mapyr-faq__summary::-webkit-details-marker { display: none; }
.mapyr-faq__icon { width: 14px; height: 14px; flex: 0 0 auto; transition: transform var(--mapyr-motion-base); }
.mapyr-faq__item[open] .mapyr-faq__icon { transform: rotate(45deg); }
.mapyr-faq__body { padding-bottom: var(--mapyr-sp-6); color: var(--mapyr-ink-soft); font-size: var(--mapyr-fs-md); line-height: var(--mapyr-lh-loose); max-width: 68ch; }

/* THANK YOU */
.mapyr-thanks {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}
.mapyr-thanks__icon {
	width: 56px; height: 56px;
	margin: 0 auto var(--mapyr-sp-5);
	border-radius: 999px;
	background: var(--mapyr-paper-soft);
	display: flex; align-items: center; justify-content: center;
	color: var(--mapyr-ink);
}

/* RETAILER STOCKIST GRID */
.mapyr-stockists {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-4);
}
@media (min-width: 700px) { .mapyr-stockists { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mapyr-stockists { grid-template-columns: repeat(3, 1fr); } }
.mapyr-stockists__item {
	padding: var(--mapyr-sp-5);
	border: 1px solid var(--mapyr-line);
	display: flex; flex-direction: column; gap: var(--mapyr-sp-2);
}
.mapyr-stockists__name { font-family: var(--mapyr-font-head); font-size: var(--mapyr-fs-lg); font-weight: 600; margin: 0; }
.mapyr-stockists__city { font-size: var(--mapyr-fs-xs); letter-spacing: var(--mapyr-tracking-eyebrow); text-transform: uppercase; color: var(--mapyr-ink-soft); }
.mapyr-stockists__addr { font-size: var(--mapyr-fs-sm); color: var(--mapyr-ink-soft); line-height: var(--mapyr-lh-base); }


/* HORECA REVAMP v2 (22/05/2026) ---------------------------------------- */

/* full-width form variant — removes 720px cap */
.mapyr-form--wide { max-width: none; }

/* checkbox grid for product interests */
.mapyr-form__checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--mapyr-sp-3);
	padding-top: var(--mapyr-sp-2);
}
.mapyr-form__check {
	display: flex;
	gap: var(--mapyr-sp-2);
	align-items: center;
	font-size: var(--mapyr-fs-sm);
	color: var(--mapyr-ink-soft);
	padding: var(--mapyr-sp-3) var(--mapyr-sp-4);
	border: 1px solid var(--mapyr-line);
	border-radius: var(--mapyr-radius-md);
	background: var(--mapyr-paper-pure);
	cursor: pointer;
	transition: border-color var(--mapyr-motion-fast), background var(--mapyr-motion-fast);
}
.mapyr-form__check:hover { border-color: var(--mapyr-ink-soft); }
.mapyr-form__check input { accent-color: var(--mapyr-ink); }
.mapyr-form__check input:checked + span { color: var(--mapyr-ink); font-weight: 500; }

/* HERO -- split copy + visual */
.mapyr-horeca-hero {
	padding: clamp(40px, 7vw, 80px) 0 clamp(24px, 3vw, 40px);
}
.mapyr-horeca-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 5vw, 56px);
	align-items: center;
}
@media (min-width: 960px) {
	.mapyr-horeca-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}
/* For Brands (pg 49): diaporama image first on mobile, copy below. Desktop layout unchanged. */
@media (max-width: 959px) {
	.page-id-49 .mapyr-horeca-hero__visual { order: -1; }
}
.mapyr-horeca-hero__copy { max-width: 640px; }
.mapyr-horeca-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mapyr-sp-3);
	margin-top: var(--mapyr-sp-5);
}
.mapyr-horeca-hero__proof {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mapyr-sp-4);
	margin-top: var(--mapyr-sp-7);
	padding-top: var(--mapyr-sp-5);
	border-top: 1px solid var(--mapyr-line);
}
/* Slide 30: themed multi-select dropdown (checkbox groups collapse into a
   dropdown). 2-class selectors beat .mapyr-surface button reset. */
.mapyr-msel { position: relative; width: 100%; }
.mapyr-msel .mapyr-msel__toggle {
	width: 100%;
	display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
	background: var(--mapyr-paper-pure);
	border: 1px solid var(--mapyr-line-strong);
	border-radius: var(--mapyr-radius-md);
	padding: 0.85rem 1rem;
	font-family: var(--mapyr-font-body);
	font-size: var(--mapyr-fs-base);
	color: var(--mapyr-ink);
	cursor: pointer;
	text-align: left;
	transition: border-color var(--mapyr-motion-fast);
}
/* Force white bg on every state — the Hello-Elementor parent reset paints
   button:hover/focus pink, which must not leak onto the dropdown trigger. */
.mapyr-msel .mapyr-msel__toggle:hover,
.mapyr-msel .mapyr-msel__toggle:focus,
.mapyr-msel .mapyr-msel__toggle:active,
.mapyr-msel.is-open .mapyr-msel__toggle {
	background: var(--mapyr-paper-pure);
	color: var(--mapyr-ink);
	border-color: var(--mapyr-ink);
	box-shadow: none;
	outline: none;
}
.mapyr-msel__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapyr-msel__value--placeholder { color: var(--mapyr-ink-mute); }
.mapyr-msel__chev { flex-shrink: 0; transition: transform var(--mapyr-motion-fast); }
.mapyr-msel.is-open .mapyr-msel__chev { transform: rotate(180deg); }
.mapyr-msel__panel {
	position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
	background: var(--mapyr-paper-pure);
	border: 1px solid var(--mapyr-line-strong);
	border-radius: var(--mapyr-radius-md);
	box-shadow: 0 18px 40px -20px rgba(17, 24, 39, 0.35);
	padding: 0.5rem;
	max-height: 288px; overflow-y: auto;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
}
.mapyr-msel__opt {
	display: flex; align-items: center; gap: 0.6rem;
	padding: 0.55rem 0.6rem; border-radius: var(--mapyr-radius-sm, 8px);
	font-size: 0.9375rem; color: var(--mapyr-ink); cursor: pointer;
}
.mapyr-msel__opt:hover { background: var(--mapyr-paper-soft); }
.mapyr-msel__opt input { accent-color: var(--mapyr-ink); flex-shrink: 0; margin: 0; }
@media (max-width: 560px) { .mapyr-msel__panel { grid-template-columns: 1fr; } }

/* Slide 29: Omnichannel expertise pills (icon + label). */
.mapyr-omni-pills { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(2rem, 3vw, 2.5rem); }
.mapyr-omni-pill {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.55rem 1.05rem;
	border: 1px solid var(--mapyr-line);
	border-radius: 999px;
	font-size: 0.9375rem;
	color: var(--mapyr-ink);
	background: var(--mapyr-paper-pure);
}
.mapyr-omni-pill svg { width: 18px; height: 18px; color: var(--mapyr-ink-soft); flex-shrink: 0; }

/* Slide 28: "We Build Brands" cards — background image, scrim, white text, no icon. */
.mapyr-be-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
/* Slide 37: 5-up core-services card row on wide screens. */
.mapyr-be-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .mapyr-be-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .mapyr-be-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } }
.mapyr-be-card {
	position: relative;
	min-height: 360px;
	border-radius: var(--mapyr-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	color: #fff;
	background: var(--mapyr-ink) center / cover no-repeat;
	transition: transform 0.4s ease;
}
.mapyr-be-card::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgba(13,18,28,0.90) 0%, rgba(13,18,28,0.55) 46%, rgba(13,18,28,0.20) 100%);
}
.mapyr-be-card--noimg::after {
	background: linear-gradient(to top, rgba(13,18,28,0.55) 0%, rgba(13,18,28,0.30) 100%);
}
.mapyr-be-card > * { position: relative; z-index: 2; }
.mapyr-be-card:hover { transform: translateY(-4px); }
.mapyr-be-card__title { font-family: var(--mapyr-font-head); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.5rem; color: #fff; }
.mapyr-be-card__body { font-size: 0.75rem; line-height: 1.6; margin: 0; color: rgba(255,255,255,0.88); }

/* Slide 26/27: b2b hero shows 4 stats. */
.mapyr-horeca-hero__proof--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .mapyr-horeca-hero__proof--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* CTA sits below the stats — give it breathing room. */
.mapyr-horeca-hero__proof + .mapyr-horeca-hero__actions { margin-top: var(--mapyr-sp-6); }
.mapyr-horeca-hero__proof > div { display: flex; flex-direction: column; gap: 4px; }
.mapyr-horeca-hero__proof-num {
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-xl);
	font-weight: 500;
	color: var(--mapyr-ink);
	line-height: 1.1;
}
.mapyr-horeca-hero__proof-label {
	font-size: var(--mapyr-fs-xs);
	letter-spacing: var(--mapyr-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mapyr-ink-soft);
}
.mapyr-horeca-hero__visual {
	position: relative;
	border-radius: var(--mapyr-radius-lg, 18px);
	overflow: hidden;
	background: var(--mapyr-paper-soft);
	box-shadow: 0 30px 60px -32px rgba(17, 24, 39, 0.45);
}
/* Adapt the frame to the image's own (horizontal) format — no fixed crop. */
.mapyr-horeca-hero__visual img {
	width: 100%; height: auto;
	display: block;
}
/* Slide 26: hero visual holding the diaporama needs an explicit height
   (the .mapyr-hero-panels track is absolute/inset:0). */
.mapyr-horeca-hero__visual--panels {
	min-height: 460px;
	background: transparent;
	box-shadow: none;
}
/* Beat .mapyr-horeca-hero__visual img { height:auto } (0,1,1) so the panel
   image fills the full collapsed height via object-fit:cover. */
.mapyr-horeca-hero__visual--panels .mapyr-hero-panel__img {
	width: 100%;
	height: 100%;
}
@media (max-width: 600px) {
	.mapyr-horeca-hero__visual--panels { min-height: 380px; }
}

/* FEATURED BRAND BAND */
.mapyr-horeca-band {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mapyr-sp-4);
	margin-top: var(--mapyr-sp-6);
}
@media (min-width: 720px)  { .mapyr-horeca-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mapyr-horeca-band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .mapyr-horeca-band { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mapyr-horeca-band__card {
	display: flex;
	flex-direction: column;
	gap: var(--mapyr-sp-3);
	text-decoration: none;
	color: inherit;
	background: var(--mapyr-paper-pure);
	border: 1px solid var(--mapyr-line);
	border-radius: var(--mapyr-radius-md);
	overflow: hidden;
	transition: transform var(--mapyr-motion-fast), box-shadow var(--mapyr-motion-fast), border-color var(--mapyr-motion-fast);
}
.mapyr-horeca-band__card:hover {
	transform: translateY(-3px);
	border-color: var(--mapyr-ink-soft);
	box-shadow: 0 18px 32px -22px rgba(17, 24, 39, 0.35);
}
.mapyr-horeca-band__media {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--mapyr-paper-soft);
	padding: 12%;
	box-sizing: border-box;
}
.mapyr-horeca-band__label {
	padding: var(--mapyr-sp-3) var(--mapyr-sp-4) var(--mapyr-sp-4);
	font-family: var(--mapyr-font-head);
	font-size: var(--mapyr-fs-sm);
	color: var(--mapyr-ink);
	font-weight: 500;
}
.mapyr-horeca-band__cta {
	text-align: center;
	margin-top: var(--mapyr-sp-6);
}

/* INQUIRY -- aside + form */
.mapyr-horeca-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 4vw, 56px);
	align-items: stretch;
}
@media (min-width: 960px) {
	.mapyr-horeca-form {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
	}
}
.mapyr-horeca-form__aside {
	position: relative;
	background: var(--mapyr-ink, #111827);
	color: var(--mapyr-paper-pure, #ffffff);
	border-radius: var(--mapyr-radius-lg, 18px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 380px;
}
.mapyr-horeca-form__cover {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.62;
	filter: grayscale(0.05);
}
.mapyr-horeca-form__aside::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(17, 24, 39, 0.38) 0%, rgba(17, 24, 39, 0.80) 78%);
}
.mapyr-horeca-form__aside-body {
	position: relative;
	z-index: 1;
	padding: clamp(28px, 4vw, 44px);
	display: flex;
	flex-direction: column;
	gap: var(--mapyr-sp-4);
	height: 100%;
}
.mapyr-horeca-form__aside .mapyr-eyebrow {
	color: rgba(255, 255, 255, 0.7);
}
.mapyr-horeca-form__title {
	font-family: var(--mapyr-font-head);
	font-size: clamp(1.4rem, 2.4vw, 1.85rem);
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
	color: var(--mapyr-paper-pure, #ffffff);
}
.mapyr-horeca-form__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mapyr-sp-3);
}
.mapyr-horeca-form__list li {
	position: relative;
	padding-left: 22px;
	font-size: var(--mapyr-fs-sm);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}
.mapyr-horeca-form__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 12px;
	height: 1.5px;
	background: var(--mapyr-paper, #fff);
}
.mapyr-horeca-form__list strong { color: var(--mapyr-paper-pure, #ffffff); font-weight: 500; }
.mapyr-horeca-form__contact {
	display: flex;
	flex-direction: column;
	gap: var(--mapyr-sp-3);
	margin-top: auto;
	padding-top: var(--mapyr-sp-5);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.mapyr-horeca-form__contact > div { display: flex; flex-direction: column; gap: 4px; font-size: var(--mapyr-fs-sm); }
.mapyr-horeca-form__contact a { color: var(--mapyr-paper-pure, #ffffff); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 1px; }
.mapyr-horeca-form__contact a:hover { border-color: var(--mapyr-paper-pure, #ffffff); }
.mapyr-horeca-form__contact-label {
	font-size: var(--mapyr-fs-xs);
	letter-spacing: var(--mapyr-tracking-eyebrow);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

/* override 720px cap inside the HORECA 2-col layout */
.mapyr-horeca-form .mapyr-form {
	max-width: none;
	width: 100%;
}


/* B2B + RETAILERS REVAMP v2 (22/05/2026) ------------------------------- */

.mapyr-pillars--five {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mapyr-sp-5);
}
@media (min-width: 720px)  { .mapyr-pillars--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mapyr-pillars--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .mapyr-pillars--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* dense pill grid for brand list */
.mapyr-form__checks--dense {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--mapyr-sp-2);
}
.mapyr-form__checks--dense .mapyr-form__check {
	padding: var(--mapyr-sp-2) var(--mapyr-sp-3);
	font-size: var(--mapyr-fs-xs);
}

/* B2B form column inside 2-col layout */
.mapyr-b2b-formwrap {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mapyr-sp-5);
}
.mapyr-b2b-formwrap .mapyr-tabs {
	flex-wrap: wrap;
	gap: var(--mapyr-sp-2);
}
.mapyr-b2b-formwrap .mapyr-form {
	max-width: none;
	width: 100%;
}

/* sticky aside on lg+ for b2b page */
@media (min-width: 1100px) {
	.mapyr-horeca-form > .mapyr-horeca-form__aside {
		position: sticky;
		top: 96px;
		align-self: flex-start;
		/* natural height (no max-height cap): bg cover fills the whole box (no
		   seam) and content never crops on zoom. overflow:hidden from base
		   still clips the cover to rounded corners. */
	}
}

/* ============================================================
 * Timeline (about page) — vertical rail w/ alternating cards
 * Locked 23rd May 2026 (child theme 0.39.0)
 * ============================================================ */

.mapyr-tl {
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 100%;
}

/* Center vertical rail (desktop) */
.mapyr-tl::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: linear-gradient(to bottom,
		transparent 0,
		var(--mapyr-line-strong) 6%,
		var(--mapyr-line-strong) 94%,
		transparent 100%);
	transform: translateX(-50%);
	pointer-events: none;
}

.mapyr-tl__item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 88px 1fr;
	column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
	align-items: center;
	padding-block: clamp(1rem, 2vw, 1.6rem);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms cubic-bezier(0.32,0.72,0,1) var(--mapyr-tl-delay, 0ms),
		transform 600ms cubic-bezier(0.32,0.72,0,1) var(--mapyr-tl-delay, 0ms);
	will-change: opacity, transform;
}
.mapyr-tl__item.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

.mapyr-tl__year {
	font-family: var(--mapyr-font-head);
	font-size: clamp(1.5rem, 1.2vw + 1rem, 2.25rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--mapyr-ink);
	line-height: 1;
	justify-self: end;
	text-align: right;
}

.mapyr-tl__dot {
	position: relative;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--mapyr-paper);
	border: 2px solid var(--mapyr-accent, var(--mapyr-ink));
	justify-self: center;
	z-index: 1;
	box-shadow: 0 0 0 6px var(--mapyr-paper-soft, var(--mapyr-paper));
	transition: transform 300ms ease, background 300ms ease;
}
.mapyr-tl__item.is-revealed .mapyr-tl__dot {
	background: var(--mapyr-accent, var(--mapyr-ink));
}

.mapyr-tl__card {
	background: var(--mapyr-paper);
	border: 1px solid var(--mapyr-line);
	border-radius: var(--mapyr-radius-lg);
	padding: clamp(1.1rem, 1.5vw, 1.6rem) clamp(1.25rem, 2vw, 1.75rem);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
	transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.mapyr-tl__item:hover .mapyr-tl__card {
	border-color: var(--mapyr-line-strong);
	box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.18);
	transform: translateY(-2px);
}

.mapyr-tl__title {
	font-family: var(--mapyr-font-head);
	font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 0.4rem;
	color: var(--mapyr-ink);
}

.mapyr-tl__body {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--mapyr-ink-soft);
	max-width: 48ch;
}

/* Alternate sides on desktop */
.mapyr-tl__item:nth-child(even) {
	grid-template-areas: 'card dot year';
	grid-template-columns: 1fr 88px 1fr;
}
.mapyr-tl__item:nth-child(odd) {
	grid-template-areas: 'year dot card';
}
.mapyr-tl__item:nth-child(odd)  .mapyr-tl__year { grid-area: year; }
.mapyr-tl__item:nth-child(odd)  .mapyr-tl__dot  { grid-area: dot; }
.mapyr-tl__item:nth-child(odd)  .mapyr-tl__card { grid-area: card; justify-self: start; max-width: 460px; }
.mapyr-tl__item:nth-child(even) .mapyr-tl__year { grid-area: year; justify-self: start; text-align: left; }
.mapyr-tl__item:nth-child(even) .mapyr-tl__dot  { grid-area: dot; }
.mapyr-tl__item:nth-child(even) .mapyr-tl__card { grid-area: card; justify-self: end; max-width: 460px; }
.mapyr-tl__item:nth-child(even) .mapyr-tl__body { margin-left: auto; }

/* Mobile: single column rail on left (<=768 so phone target gets the
   stacked rail, not the desktop alternating grid with narrow cards). */
@media (max-width: 768px) {
	.mapyr-tl { max-width: 100%; padding-left: 8px; }
	.mapyr-tl::before { left: 18px; transform: none; }
	.mapyr-tl__item,
	.mapyr-tl__item:nth-child(odd),
	.mapyr-tl__item:nth-child(even) {
		grid-template-areas: 'dot year' 'dot card';
		grid-template-columns: 36px 1fr;
		grid-template-rows: auto auto;
		row-gap: 0.5rem;
		column-gap: 1rem;
		align-items: start;
	}
	.mapyr-tl__year { justify-self: start; text-align: left; font-size: 1.25rem; }
	.mapyr-tl__dot { align-self: start; margin-top: 0.45rem; }
	.mapyr-tl__card { justify-self: stretch; max-width: 100%; }
	.mapyr-tl__body { max-width: 100%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.mapyr-tl__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
 * Team-card extra meta (department / years / location / expertise tags)
 * Added 23rd May 2026 (child theme 0.41.0)
 * ============================================================ */

.mapyr-team-card__meta {
	margin: 0.15rem 0 0.6rem;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: var(--mapyr-ink-mute, var(--mapyr-ink-soft));
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
	text-transform: none;
}
.mapyr-team-card__dept {
	font-weight: 500;
	color: var(--mapyr-ink-soft);
}
.mapyr-team-card__sep {
	opacity: 0.55;
}
.mapyr-team-card__bits {
	color: var(--mapyr-ink-mute, var(--mapyr-ink-soft));
}
.mapyr-team-card__tags {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}
.mapyr-team-card__tag {
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.25rem 0.55rem;
	border: 1px solid var(--mapyr-line);
	border-radius: 9999px;
	color: var(--mapyr-ink-soft);
	background: var(--mapyr-paper-soft, transparent);
	white-space: nowrap;
	line-height: 1.2;
}
.mapyr-team-card:hover .mapyr-team-card__tag {
	border-color: var(--mapyr-line-strong, var(--mapyr-line));
}

/* ============================================================
 * v0.40 - 15/06/2026 client QA: dark-panel contrast, B2B right
 * column partnership process, tab cleanup, responsive polish.
 * ============================================================ */

/* CONTRAST FIX: `.mapyr-surface h2 {color:ink}` (0,1,1) was overriding
   the dark-aside heading `.mapyr-horeca-form__title` (0,1,0) -> dark text
   on the dark form aside (HORECA + B2B). Bump specificity to keep it light. */
.mapyr-surface .mapyr-horeca-form__title,
.mapyr-horeca-form__aside .mapyr-horeca-form__title { color: var(--mapyr-paper-pure, #fff); }

/* B2B: form is the main (left) column, partnership process is the right column. */
@media (min-width: 960px) {
	#b2b-form .mapyr-horeca-form { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr); }
	#b2b-form .mapyr-b2b-formwrap { order: 1; }
	#b2b-form .mapyr-horeca-form__aside { order: 2; }
}

/* Numbered partnership-process steps inside the dark aside */
.mapyr-process-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.mapyr-process-steps__item { display: flex; gap: 0.85rem; align-items: flex-start; }
.mapyr-process-steps__num {
	flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9999px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, 0.16); color: var(--mapyr-paper-pure, #fff);
	font-family: var(--mapyr-font-head); font-size: 0.85rem; font-weight: 600;
}
.mapyr-process-steps__text { display: flex; flex-direction: column; gap: 0.2rem; }
.mapyr-process-steps__title { font-family: var(--mapyr-font-head); font-weight: 600; font-size: 0.95rem; color: var(--mapyr-paper-pure, #fff); }
.mapyr-process-steps__body { font-size: 0.85rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }

/* Tabs: keep transparent bg (HE-fork pink-button bleed guard) + clean active state */
.mapyr-tabs__btn,
.mapyr-tabs__btn:hover,
.mapyr-tabs__btn:focus { background: transparent !important; }
.mapyr-tabs__btn[aria-selected="true"] {
	color: var(--mapyr-ink) !important;
	border-bottom-color: var(--mapyr-ink) !important;
}
.mapyr-tabs__btn:focus-visible { outline: 2px solid var(--mapyr-ink); outline-offset: 2px; }

/* Tablet form polish: 3-up rows step down to 2-up on narrow tablets,
   and the 2-col form/aside layout stays single-column under 960px. */
@media (min-width: 700px) and (max-width: 859px) {
	.mapyr-form__row--3 { grid-template-columns: 1fr 1fr; }
}
/* Hero proof grid: keep 2-up on phones so stat cells never overflow */
@media (max-width: 560px) {
	.mapyr-horeca-hero__proof { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.75rem; }
	.mapyr-horeca-hero__proof-num { font-size: 1.25rem; }
}
/* About + page heroes: contain on small screens */
@media (max-width: 600px) {
	.mapyr-page-hero__title { font-size: clamp(1.75rem, 8vw, 2.25rem); }
}

/* ============================================================
 * v0.41 - 15/06/2026 client QA round 2: tab active state,
 * consent row mobile, thank-you centering safety.
 * ============================================================ */

/* B2B form tabs: make the selected tab unmistakable - filled pill + label
   flips to paper. Inactive tabs darker for legibility. Overrides the
   transparent-bg guard (both !important; [aria-selected] wins on specificity). */
.mapyr-tabs { gap: 0.4rem; }
.mapyr-tabs__btn {
	color: var(--mapyr-ink) !important;
	border: 1px solid transparent;
	border-bottom: 2px solid transparent;
	border-radius: var(--mapyr-radius-md) var(--mapyr-radius-md) 0 0;
}
.mapyr-tabs__btn:hover { background: var(--mapyr-paper-mute) !important; }
.mapyr-tabs__btn[aria-selected="true"] {
	background: var(--mapyr-ink) !important;
	color: var(--mapyr-paper) !important;
	border-color: var(--mapyr-ink) !important;
}

/* Consent row: keep checkbox aligned to the first text line on small screens. */
.mapyr-form__consent { line-height: 1.5; align-items: flex-start; }
.mapyr-form__consent input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.mapyr-form__consent label { flex: 1 1 auto; min-width: 0; }
@media (max-width: 600px) {
	.mapyr-form__consent { gap: var(--mapyr-sp-2); font-size: 0.85rem; }
	.mapyr-form__submit { width: 100%; justify-content: center; margin-top: var(--mapyr-sp-2); }
}

/* Mobile touch targets — parent reset.css forces a tight button box (8px pad)
   and blocks width:100%, so enforce a 48px tap height + full-width submit with
   !important (same parent-override pattern used for the pink-button guard). */
@media (max-width: 600px) {
	.mapyr-btn { min-height: 48px !important; }
	.mapyr-form__submit { width: 100% !important; }
}

/* Thank-you block always centers within its container (full width after
   the 2-col form grid is collapsed to block by site.js). */
.mapyr-horeca-form .mapyr-thanks { margin-inline: auto; }

/* Active tab must win even while focused/hovered (the HE-fork pink guard
   sets a transparent bg on :focus that otherwise ties and hides the fill). */
.mapyr-tabs__btn[aria-selected="true"],
.mapyr-tabs__btn[aria-selected="true"]:hover,
.mapyr-tabs__btn[aria-selected="true"]:focus,
.mapyr-tabs__btn[aria-selected="true"]:focus-visible {
	background: var(--mapyr-ink) !important;
	color: var(--mapyr-paper) !important;
	border-color: var(--mapyr-ink) !important;
}

/* Brand single: hero + CTA buttons embed the brand name; long names
   overflow the inline-flex pill at 520. Full-width + wrap on small phone. */
@media (max-width: 520px) {
	.single-mapyr_brand .brand-hero .mapyr-btn,
	.single-mapyr_brand .brand-cta .mapyr-btn {
		width: 100%;
		max-width: 100%;
		white-space: normal;
		justify-content: center;
		text-align: center;
	}
}

/* About page top banner: full-width image, height adapts to aspect ratio */
.mapyr-about-banner { position: relative; width: 100%; line-height: 0; overflow: hidden; }
.mapyr-about-banner__img { display: block; width: 100%; height: auto; }
/* Slide 33: scrim + overlay title on the team banner. */
.mapyr-about-banner__scrim {
	position: absolute; inset: 0;
	background: rgba(241,241,241,0.5);
}
.mapyr-about-banner__overlay {
	position: absolute; inset: 0; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	padding: clamp(1.5rem, 5vw, 4rem);
	line-height: 1.15;
}
.mapyr-about-banner__text {
	margin: 0;
	font-family: var(--mapyr-font-display);
	font-weight: 600;
	color: var(--mapyr-ink);
	text-align: center;
	font-size: clamp(1.5rem, 3.2vw, 3rem);
	letter-spacing: -0.02em;
	max-width: 22ch;
	text-shadow: 0 1px 10px rgba(255,255,255,0.6);
	text-wrap: balance;
}

/* About page Our Mission - two-column statement + team photo */
.mapyr-mission__split { align-items: center; }
.mapyr-mission__quote {
	font-family: var(--mapyr-font-display);
	font-size: clamp(1.5rem, 1.2vw + 1rem, 2.125rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--mapyr-tracking-display);
	color: var(--mapyr-ink);
	margin: var(--mapyr-sp-4) 0 0;
	max-width: 26ch;
}
.mapyr-mission__media { margin: 0; border-radius: var(--mapyr-radius-lg); }

/* Slide 35: mission as a big, bold, centered quote (photo removed). */
.mapyr-mission--centered .mapyr-mission__inner {
	max-width: 60rem;
	margin: 0 auto;
	display: flex; flex-direction: column; align-items: center;
	gap: var(--mapyr-sp-4);
	text-align: center;
}
.mapyr-mission--centered .mapyr-mission__quote {
	margin: 0;
	max-width: 62ch;
	text-align: center;
	line-height: 1.22;
	font-size: clamp(1.5rem, 1.6vw + 0.9rem, 2.375rem);
	text-wrap: balance;
}
.mapyr-mission--centered .mapyr-mission__inner { max-width: 84rem; }

/* About hero redesign: portrait team photo (right) + full-width stat band below */
.mapyr-about-hero__media { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--mapyr-radius-lg); overflow: hidden; background: var(--mapyr-paper); box-shadow: 0 24px 48px -24px rgba(17,24,39,0.28); }
.mapyr-about-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapyr-about-hero__stats { grid-column: 1 / -1; }
@media (min-width: 760px) { .mapyr-about-hero__stats { grid-template-columns: repeat(4, 1fr); } }

/* About full-width photo band (between What We Do and Our Values) */
.mapyr-about-band { width: 100%; line-height: 0; }
.mapyr-about-band__img { display: block; width: 100%; height: auto; }

/* Balance the about hero heading wrap (no forced breaks, tidy line lengths) */
.mapyr-about-hero__title { text-wrap: balance; }

/* Form dropdowns match the text-input font exactly (was 16px vs input 15px) */
.mapyr-form__select,
.mapyr-cselect__btn,
.mapyr-cselect__label,
.mapyr-cselect__option { font-family: var(--mapyr-font-body); font-size: 0.9375rem; font-weight: 400; }
@media (max-width: 768px) {
	.mapyr-form__select, .mapyr-cselect__btn, .mapyr-cselect__label { font-size: 16px; }
}

/* cselect button: beat the .mapyr-cselect .mapyr-cselect__btn (0,2,0) base so it is 15px like inputs */
.mapyr-cselect .mapyr-cselect__btn { font-size: 0.9375rem; }
@media (max-width: 768px) { .mapyr-cselect .mapyr-cselect__btn { font-size: 16px; } }

/* For-Retailers brand carousel: full-bleed, 4.5 cards, image covers full box, continuous scroll */
.mapyr-brand-carousel { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: 2.5rem; overflow: hidden; }
.mapyr-brand-carousel__track { display: flex; gap: 1rem; will-change: transform; }
.mapyr-brand-carousel__card { position: relative; flex: 0 0 calc((100vw - 3.5rem) / 4.5); aspect-ratio: 3 / 4; border-radius: var(--mapyr-radius-lg); overflow: hidden; text-decoration: none; background: var(--mapyr-paper-mute, #eef0f3); }
.mapyr-brand-carousel__media { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 450ms ease; }
.mapyr-brand-carousel__card:hover .mapyr-brand-carousel__media { transform: scale(1.04); }
.mapyr-brand-carousel__logobar { position: absolute; left: 0.9rem; bottom: 0.9rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.85rem; background: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.14); max-width: 72%; }
.mapyr-brand-carousel__logo { max-height: 26px; max-width: 130px; width: auto; height: auto; object-fit: contain; display: block; }
.mapyr-brand-carousel__label { color: var(--mapyr-ink); font-family: var(--mapyr-font-head); font-weight: 600; font-size: 0.85rem; line-height: 1.1; }
.mapyr-brand-carousel::before, .mapyr-brand-carousel::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(48px, 8vw, 200px); z-index: 2; pointer-events: none; }
.mapyr-brand-carousel::before { left: 0; background: linear-gradient(to right, #f9fafb, rgba(249,250,251,0)); }
.mapyr-brand-carousel::after { right: 0; background: linear-gradient(to left, #f9fafb, rgba(249,250,251,0)); }
@media (max-width: 900px) { .mapyr-brand-carousel__card { flex-basis: calc((100vw - 1rem) / 2.3); } }
@media (max-width: 600px) { .mapyr-brand-carousel__card { flex-basis: calc((100vw - 0.5rem) / 1.3); } }

/* Brands archive: photo backgrounds (hero + Stock-the-Portfolio band) */
.mapyr-page-hero--image { background-size: cover; background-position: center; background-repeat: no-repeat; }
.mapyr-page-hero--image .mapyr-page-hero__eyebrow, .mapyr-page-hero--image .mapyr-page-hero__title, .mapyr-page-hero--image .mapyr-page-hero__lede { color: #fff; }
/* Slide 21: light (paper) overlay hero variant -> dark text. Reusable (Careers header). */
.mapyr-page-hero--image.mapyr-page-hero--light .mapyr-page-hero__eyebrow,
.mapyr-page-hero--image.mapyr-page-hero--light .mapyr-page-hero__title { color: var(--mapyr-ink); }
.mapyr-page-hero--image.mapyr-page-hero--light .mapyr-page-hero__lede { color: var(--mapyr-ink-soft); }
.mapyr-cta-band--image { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* HORECA Use Cases: alternating split rows (mobile-optimized) */
.mapyr-uc--rows { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4.5rem); margin-top: 1.5rem; }
.mapyr-uc__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.mapyr-uc__row:nth-child(even) .mapyr-uc__row-media { order: 2; }
.mapyr-uc__row-media { aspect-ratio: 1 / 1; border-radius: var(--mapyr-radius-lg); overflow: hidden; background: var(--mapyr-paper-soft); }
.mapyr-uc__row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapyr-uc__title { font-family: var(--mapyr-font-head); font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem); font-weight: 600; letter-spacing: -0.02em; margin: 0.6rem 0 0.8rem; color: var(--mapyr-ink); }
.mapyr-uc__text { font-size: 1.02rem; line-height: 1.7; color: var(--mapyr-ink-soft); margin: 0; max-width: 46ch; }
@media (max-width: 760px) {
	.mapyr-uc__row { grid-template-columns: 1fr; gap: 1.1rem; }
	.mapyr-uc__row:nth-child(even) .mapyr-uc__row-media { order: 0; }
	.mapyr-uc__row-media { aspect-ratio: 1 / 1; }
	.mapyr-uc__text { max-width: none; }
}

/* Category banner hero: cap description at 3 lines */
.mapyr-page-hero--image .mapyr-page-hero__lede { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Category banner heroes: fixed 500px section height, content centered */
.mapyr-page-hero--image { min-height: 500px; display: flex; align-items: center; }
.mapyr-page-hero--image > .mapyr-container { width: 100%; }

/* Slide 11: /brands/ archive hero uses a WHITE overlay (see archive-mapyr_brand.php),
   so its text must be dark to stay legible. Scoped to the brands archive body class
   only — For-Retailers / Horeca image heroes keep white text. */
.post-type-archive-mapyr_brand .mapyr-page-hero--image .mapyr-page-hero__title { color: var(--mapyr-ink); }
.post-type-archive-mapyr_brand .mapyr-page-hero--image .mapyr-page-hero__eyebrow { color: var(--mapyr-ink); }
.post-type-archive-mapyr_brand .mapyr-page-hero--image .mapyr-page-hero__lede { color: var(--mapyr-ink-soft); }

/* Brand filter bar: parent pills + Sub Category multi-select dropdown */
.mapyr-bfilter__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: var(--mapyr-sp-3); border-bottom: 1px solid var(--mapyr-line); margin-bottom: var(--mapyr-sp-5); }
.mapyr-bfilter__parents { margin: 0 !important; padding-block: 0 !important; border: 0 !important; }
.mapyr-bfilter__sub { position: relative; flex: 0 0 auto; }
.mapyr-bfilter__toggle { display: inline-flex; align-items: center; gap: 0.5rem; 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: var(--mapyr-sp-2) var(--mapyr-sp-4); border: 1px solid var(--mapyr-line-strong); border-radius: var(--mapyr-radius-pill); background: transparent; cursor: pointer; transition: border-color var(--mapyr-motion-fast); }
.mapyr-bfilter__toggle:hover, .mapyr-bfilter__sub.is-open .mapyr-bfilter__toggle { border-color: var(--mapyr-ink); }
.mapyr-bfilter__count { font-weight: 600; }
.mapyr-bfilter__toggle svg { transition: transform var(--mapyr-motion-fast); }
.mapyr-bfilter__sub.is-open .mapyr-bfilter__toggle svg { transform: rotate(180deg); }
.mapyr-bfilter__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 260px; background: var(--mapyr-paper); border: 1px solid var(--mapyr-line); border-radius: var(--mapyr-radius-md); box-shadow: 0 16px 40px rgba(17,24,39,0.16); padding: 0.5rem; }
.mapyr-bfilter__opt { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: var(--mapyr-radius-sm); cursor: pointer; font-size: 0.9rem; color: var(--mapyr-ink); }
.mapyr-bfilter__opt:hover { background: var(--mapyr-paper-soft); }
.mapyr-bfilter__opt input { width: 16px; height: 16px; accent-color: var(--mapyr-ink); flex: 0 0 auto; }
.mapyr-bfilter__menu-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.6rem 0.25rem; margin-top: 0.25rem; border-top: 1px solid var(--mapyr-line); }
.mapyr-bfilter__clear { background: none; border: 0; color: var(--mapyr-ink-soft); font-size: 0.8rem; cursor: pointer; text-decoration: underline; padding: 0; }
.mapyr-bfilter__result { font-size: 0.8rem; color: var(--mapyr-ink-mute); white-space: nowrap; }
.mapyr-bfilter__empty { color: var(--mapyr-ink-soft); margin-top: var(--mapyr-sp-6); }
@media (max-width: 600px) { .mapyr-bfilter__menu { right: auto; left: 0; width: 100%; } }

/* Neutralize parent reset.css pink (#c36) on filter buttons (it colours every <button>:hover/:focus) */
.mapyr-bfilter__toggle,
.mapyr-bfilter__toggle:hover,
.mapyr-bfilter__toggle:focus,
.mapyr-bfilter__toggle:focus-visible,
.mapyr-bfilter__sub.is-open .mapyr-bfilter__toggle { background-color: transparent !important; color: var(--mapyr-ink) !important; }
.mapyr-bfilter__toggle:hover,
.mapyr-bfilter__toggle:focus,
.mapyr-bfilter__sub.is-open .mapyr-bfilter__toggle { border-color: var(--mapyr-ink) !important; }
.mapyr-brand-archive__filter,
.mapyr-brand-archive__filter:focus,
.mapyr-brand-archive__filter:focus-visible { background-color: transparent !important; color: var(--mapyr-ink-soft) !important; border-color: var(--mapyr-line-strong) !important; }
.mapyr-brand-archive__filter:hover,
.mapyr-brand-archive__filter.is-active { background-color: var(--mapyr-ink) !important; color: var(--mapyr-paper) !important; border-color: var(--mapyr-ink) !important; }
.mapyr-bfilter__clear,
.mapyr-bfilter__clear:hover,
.mapyr-bfilter__clear:focus { background-color: transparent !important; color: var(--mapyr-ink-soft) !important; border: 0 !important; }

/* Filter pills + Sub Category toggle: unified outlined-pill style (match shared design) */
.mapyr-brand-archive__filter,
.mapyr-bfilter__toggle {
	font-family: var(--mapyr-font-head);
	font-size: 0.78rem !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase;
	line-height: 1 !important;
	white-space: nowrap !important;
	padding: 0.5rem 1.1rem !important;
	border: 1px solid var(--mapyr-line-strong) !important;
	border-radius: 999px !important;
	background-color: transparent !important;
	color: var(--mapyr-ink) !important;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.mapyr-brand-archive__filter:hover,
.mapyr-bfilter__toggle:hover,
.mapyr-bfilter__sub.is-open .mapyr-bfilter__toggle { border-color: var(--mapyr-ink) !important; color: var(--mapyr-ink) !important; background-color: transparent !important; }
.mapyr-brand-archive__filter.is-active { background-color: var(--mapyr-ink) !important; color: var(--mapyr-paper) !important; border-color: var(--mapyr-ink) !important; }
.mapyr-bfilter__parents { gap: 0.6rem !important; }
.mapyr-bfilter__toggle { display: inline-flex; align-items: center; gap: 0.5rem; }
.mapyr-bfilter__count { font-weight: 600; }

.mapyr-bfilter__toggle, .mapyr-bfilter__toggle span, .mapyr-bfilter__count { white-space: nowrap !important; }

.mapyr-bfilter__toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; line-height: 1 !important; }
.mapyr-bfilter__toggle svg { flex: 0 0 auto; }

/* About page: tighten section rhythm (was too loose vs other pages) */
.mapyr-about .mapyr-section { padding-block: clamp(2.5rem, 4.5vw, 4rem); }

/* Wide centred head: hold a long title on one line on desktop (Horeca products, client 18/07) */
.mapyr-section__head--wide { max-width: 46rem; }

/* Responsive CSS backgrounds. `background-image` can't use srcset, so phones
   would pull the same 1536px hero as desktop. umapyr_rbg_style() emits both
   URLs as custom properties and this swaps to the 768px file on mobile.
   !important is required: the inline --rbg would otherwise win. (20/07) */
@media (max-width: 768px) {
	.mapyr-rbg { --rbg: var(--rbg-sm) !important; }
}