/**
 * Mapyr — Centralized semantic type system
 * Client spec ("keep this" table, 2026-07). Single source of truth for the
 * content type roles. Loaded LAST (after tokens/home/pages/brand) so its
 * !important + :root-prefixed selectors win every scattered retouch override.
 * Change a role here -> whole role changes site-wide.
 *
 * Role         | Size (mobile -> desktop) | Weight | Line-height
 * Hero Label   | 36 -> 52px               | 700    | 1.1
 * Heading      | 28 -> 40px               | 600    | 1.2   (section titles, site-wide)
 * Sub-heading  | 28 -> 40px               | 600    | 1.2   (row / stat-rail head)
 * Subtitle     | 20 -> 24px               | 500    | 1.2   (card titles)
 * Accent       | 14px (fixed, all caps)   | 700    | 1.18
 * CTA Label    | 18px (fixed)             | 500    | 1.2   (buttons)
 * Body         | 18px (fixed)             | 400    | 1.7
 * Stat number  | 20 -> 24px               | 600    | 1.1
 * Stat label   | 20 -> 24px (Title-Case)  | 600    | 1.2
 * Caption      | 14px                     | 400    | 1.6   (metas/tags/notes)
 * ============================================================ */

:root {
	--type-hero-size:     clamp(2.25rem, 4.4vw + 1rem, 3.25rem);   /* 36 -> 52 */
	--type-hero-weight:   700;
	--type-hero-lh:       1.1;

	/* Section titles: 36-40 site-wide (client 15/07 — every section title matches).
	   Same scale as sub-heading; both kept as distinct roles so they can diverge later. */
	--type-heading-size:  clamp(1.75rem, 1.6vw + 1rem, 2.5rem);    /* 28 -> 40 (section titles) */
	--type-heading-weight:600;
	--type-heading-lh:    1.2;

	--type-subheading-size:  clamp(1.75rem, 1.6vw + 1rem, 2.5rem); /* 28 -> 40 (row / sub titles) */
	--type-subheading-weight:600;
	--type-subheading-lh:    1.2;

	--type-subtitle-size: clamp(1.25rem, 1vw + 1rem, 1.5rem);      /* 20 -> 24 */
	--type-subtitle-weight:500;
	--type-subtitle-lh:   1.2;

	--type-accent-size:   0.875rem;                                /* 14 */
	--type-accent-weight: 400;
	--type-accent-lh:     1.18;

	--type-cta-size:      1.125rem;                                /* 18 (client 15/07) */
	--type-cta-weight:    500;
	--type-cta-lh:        1.2;

	--type-body-size:     1.125rem;                                /* 18 */
	--type-body-weight:   400;
	--type-body-lh:       1.7;

	/* Stat block — dedicated semantic role (hero proof + stat-rail) */
	--type-stat-num-size:     clamp(1.25rem, 1vw + 1rem, 1.5rem);  /* 20 -> 24 */
	--type-stat-num-weight:   600;
	--type-stat-num-lh:       1.1;

	/* Compact hero proof labels (home / about / horeca / b2b): small all-caps */
	--type-stat-label-size:   0.875rem;                            /* 14 (all-caps) */
	--type-stat-label-weight: 400;
	--type-stat-label-lh:     1.35;

	/* Stat-rail card titles ("Years in the Middle East"): Title-Case, larger.
	   Split from --type-stat-label so the compact hero labels stay 14 caps. */
	--type-stat-title-size:   clamp(1.25rem, 1vw + 1rem, 1.5rem);  /* 20 -> 24 (Title-Case) */
	--type-stat-title-weight: 600;
	--type-stat-title-lh:     1.2;

	/* Caption — small supporting text (card metas, tags, notes, counters) */
	--type-caption-size:   0.875rem;                               /* 14 */
	--type-caption-weight: 400;
	--type-caption-lh:     1.6;
}

/* ---- 1. HERO LABEL — page hero headline ----
   NOTE: home hero is re-mapped at the foot of this file (kicker is the hero
   statement there, headline drops to body) per client annotation 2026-07.
   NOTE: .mapyr-page-hero__title moved to the 36-40 sub-heading tier (client
   annotation) — it is the banner hero used across 13 templates. */
:root .brand-hero__title,
:root .mapyr-case-hero__title,
:root .mapyr-job-hero__title,
:root .mapyr-hero__title,
:root .mapyr-mission__quote {
	font-size:   var(--type-hero-size) !important;
	font-weight: var(--type-body-weight) !important;   /* Regular (client 17/07) */
	line-height: var(--type-hero-lh) !important;
}

/* About banner heading: hero SIZE but hero WEIGHT (bold) — client 18/07 */
:root .mapyr-about-banner__text {
	font-size:   var(--type-hero-size) !important;
	font-weight: var(--type-hero-weight) !important;   /* 700 — was collateral-regular in the group above */
	line-height: var(--type-hero-lh) !important;
}

/* ---- 2. MAIN HEADING / SECTION TITLE ---- */
:root .mapyr-section__title,
:root .mapyr-section-rows__head h2,
:root .mapyr-section-split__head h2,
:root .mapyr-featured__title,
:root .mapyr-split__title,
:root .brand-section h2,
:root .brand-cta h2,
:root .mapyr-horeca-form__title,
:root .mapyr-job-apply__title,
:root .mapyr-job-section__title,
:root .mapyr-jobs__title,
:root .mapyr-hero-acc__title,
:root .mapyr-prose h2,
:root .mapyr-job-body__prose h2 {
	font-size:   var(--type-heading-size) !important;
	font-weight: var(--type-heading-weight) !important;
	line-height: var(--type-heading-lh) !important;
}

/* ---- 2b. SUB-HEADINGS — media-row / stat-rail head / prominent sub-section titles (36 -> 40) ---- */
:root .mapyr-media-row__title,
:root .mapyr-portfolio__title,
:root .mapyr-stat-rail__head h2,
:root .mapyr-dual-cta__title,
:root .mapyr-page-hero__title,
:root .mapyr-final-cta__title,
:root .mapyr-cta-band__title,
:root .mapyr-uc__title,
:root .mapyr-about-hero__title,
:root .mapyr-section--brandfilters .mapyr-section__title {
	font-size:   var(--type-subheading-size) !important;
	font-weight: var(--type-subheading-weight) !important;
	line-height: var(--type-subheading-lh) !important;
}
/* "Learn More" row link -> body size */
:root .mapyr-media-row__link {
	font-size: var(--type-body-size) !important;   /* 18 */
}

/* ---- 3. SUBTITLES — card / sub-section titles ---- */
:root .mapyr-pillars__title,
:root .mapyr-audience__title,
:root .mapyr-audience-paths__title,
:root .mapyr-capability-row__title,
:root .mapyr-featured-brand__name,
:root .mapyr-brand-card .mapyr-brand-card__name,
:root .mapyr-large-card__title,
:root .mapyr-large-card h3,
:root .mapyr-who-card h3,
:root .mapyr-hero-panel__title,
:root .mapyr-be-card__title,
:root .mapyr-card__title,
:root .mapyr-case-card__title,
:root .mapyr-cat-tile__title,
:root .mapyr-job-card__title,
:root .mapyr-job-aside__title,
:root .mapyr-team-card__name,
:root .mapyr-stockists__name,
:root .mapyr-iconic__name,
:root .mapyr-tl__title,
:root .mapyr-process-steps__title,
:root .mapyr-dual-cta__label,
:root .mapyr-prose h3,
:root .mapyr-job-body__prose h3 {
	font-size:   var(--type-subtitle-size) !important;
	font-weight: var(--type-subtitle-weight) !important;
	line-height: var(--type-subtitle-lh) !important;
}
/* dual-cta card label was an all-caps eyebrow; now a Title-Case card title */
:root .mapyr-dual-cta__label {
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* ---- 4. ACCENT LABELS — all-caps eyebrows / kickers ---- */
:root .mapyr-eyebrow:not(.mapyr-eyebrow--timeline),
:root .mapyr-home-hero__eyebrow,
:root .mapyr-page-hero__eyebrow,
:root .brand-hero__eyebrow,
:root .mapyr-hero__eyebrow,
:root .mapyr-media-row__label,
:root .mapyr-audience-paths__label,
:root .mapyr-featured-brand__cat,
:root .mapyr-brand-card__cats,
:root .mapyr-who-card__label,
:root .mapyr-case-tile__label,
:root .mapyr-horeca-band__label,
:root .mapyr-stats__label,
:root .mapyr-brand-carousel__label {
	font-size:      var(--type-accent-size) !important;
	font-weight:    var(--type-accent-weight) !important;
	line-height:    var(--type-accent-lh) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
}

/* ---- 5. CTA LABELS — buttons ---- */
:root .mapyr-btn:not(.mapyr-btn--link) {
	font-size:   var(--type-cta-size) !important;
	font-weight: var(--type-cta-weight) !important;
	line-height: var(--type-cta-lh) !important;
}

/* ---- 6. BODY TEXT — ledes, section/card body copy, prose ---- */
:root .mapyr-home-hero__lede,
:root .mapyr-page-hero__lede,
:root .mapyr-hero__lede,
:root .mapyr-about-hero__lede,
:root .mapyr-case-hero__lede,
:root .mapyr-job-hero__lede,
:root .mapyr-section__lede,
:root .mapyr-job-apply__lede,
:root .mapyr-pillars__body,
:root .mapyr-audience__body,
:root .mapyr-audience-paths__body,
:root .mapyr-capability-row__body,
:root .mapyr-large-card__body,
:root .mapyr-featured-brand__desc,
:root .mapyr-featured-brand__body,
:root .mapyr-featured__body,
:root .mapyr-media-row__body,
:root .mapyr-media-row__text,
:root .mapyr-uc__text,
:root .mapyr-section-rows__body,
:root .mapyr-section-split__body,
:root .mapyr-split__body,
:root .mapyr-who-card__text,
:root .mapyr-hero-acc__body,
:root .mapyr-hero__body,
:root .mapyr-hero-panel__desc,
:root .mapyr-dual-cta__body,
:root .mapyr-cta-band__text,
:root .mapyr-faq__body,
:root .mapyr-team-card__body,
:root .mapyr-tl__body,
:root .mapyr-process-steps__body,
:root .mapyr-process-steps__text,
:root .mapyr-job-aside__body,
:root .brand-hero__tag,
:root .brand-hero__tagline,
:root .brand-hero__about-v2,
:root .brand-hero__facts-v2 dd,
:root .brand-hero__facts-v2 dd a,
:root .brand-section p,
:root .mapyr-prose p,
:root .mapyr-job-body__prose p {
	font-size:   var(--type-body-size) !important;
	font-weight: var(--type-body-weight) !important;
	line-height: var(--type-body-lh) !important;
}
/* Brand-hero fact labels: body size, kept as small-caps labels (client: whole block 18px) */
:root .brand-hero__facts-v2 dt {
	font-size:      var(--type-body-size) !important;   /* 18 */
	font-weight:    500 !important;
	line-height:    var(--type-body-lh) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}
/* Brand-hero category chips: same type style as the tagline (body 18/400,
   normal tracking) but uppercase (client 16/07). */
:root .single-mapyr_brand .chip {
	font-size:      var(--type-accent-size) !important;  /* 14 (client 16/07) */
	font-weight:    var(--type-body-weight) !important;  /* 400 — matches tagline */
	line-height:    1.2 !important;                       /* tight for the pill */
	letter-spacing: normal !important;                    /* matches tagline (was 0.18em) */
	text-transform: uppercase !important;
}

/* ============================================================
 * SWEEP — remaining content brought onto tokens (site-wide audit 2026-07).
 * ============================================================ */
/* Stat numbers (about + horeca/retailers hero) -> stat-num 24 */
:root .mapyr-about-hero__stat-num,
:root .mapyr-horeca-hero__proof-num {
	font-size:   var(--type-stat-num-size) !important;
	font-weight: var(--type-stat-num-weight) !important;
	line-height: var(--type-stat-num-lh) !important;
}
/* Stat labels -> stat-label 14 all-caps (client 15/07: back to 14px caps) */
:root .mapyr-about-hero__stat-label,
:root .mapyr-horeca-hero__proof-label {
	font-size:      var(--type-stat-label-size) !important;
	font-weight:    var(--type-stat-label-weight) !important;
	line-height:    var(--type-stat-label-lh) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
}
/* Field / eyebrow labels missed by the accent group -> accent 14 caps */
:root .mapyr-contact-info__label,
:root .mapyr-eyebrow--timeline,
:root .mapyr-fact__label {
	font-size:      var(--type-accent-size) !important;
	font-weight:    var(--type-accent-weight) !important;
	line-height:    var(--type-accent-lh) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
}
/* Caption tier -> small supporting text 14 */
:root .mapyr-be-card__body,
:root .mapyr-brand-card__tag,
:root .mapyr-pillars__num,
:root .mapyr-jobs__empty,
:root .mapyr-contact-note {
	font-size:   var(--type-caption-size) !important;
	font-weight: var(--type-caption-weight) !important;
	line-height: var(--type-caption-lh) !important;
}
/* Brand fact values -> body 18 */
:root .mapyr-fact__value {
	font-size:   var(--type-body-size) !important;
	font-weight: var(--type-body-weight) !important;
	line-height: var(--type-body-lh) !important;
}
/* Prominent one-offs -> subtitle 24 (client choice) */
:root .mapyr-contact-info__value,
:root .mapyr-contact-info__value a,
:root .mapyr-tl__year {
	font-size:   var(--type-subtitle-size) !important;
	font-weight: var(--type-subtitle-weight) !important;
	line-height: var(--type-subtitle-lh) !important;
}

/* Unclassed section content -> role defaults. :not([class]) matches ONLY
 * classless elements, so zero collision with any classed role above.
 * Catches the many inline-styled bare <h2>/<h3>/<p> section titles that
 * retouch had capped to 18px (invisible to a size-only audit). */
:root .mapyr-container h2:not([class]) {
	font-size:   var(--type-heading-size) !important;
	font-weight: var(--type-heading-weight) !important;
	line-height: var(--type-heading-lh) !important;
}
:root .mapyr-container h3:not([class]) {
	font-size:   var(--type-subtitle-size) !important;
	font-weight: var(--type-subtitle-weight) !important;
	line-height: var(--type-subtitle-lh) !important;
}
:root .mapyr-container p:not([class]) {
	font-size:   var(--type-body-size) !important;
	font-weight: var(--type-body-weight) !important;
	line-height: var(--type-body-lh) !important;
}
/* Brand single: its section titles sit at the 36-40 sub-heading tier (client
 * annotation 15/07). Higher specificity (0,4,1) than the broad h2 rule above
 * (0,3,1), so only the brand pages drop to 40 — other pages stay at 52. */
:root .single-mapyr_brand .mapyr-container h2:not([class]) {
	font-size:   var(--type-subheading-size) !important;
	font-weight: var(--type-subheading-weight) !important;
	line-height: var(--type-subheading-lh) !important;
}

/* ---- Stat-rail "By the Numbers" — reuses stat + body tokens (client choice 24/24/18, Title-Case). ---- */
:root .mapyr-stat-rail__num {
	font-size:   var(--type-stat-num-size) !important;      /* 24 */
	font-weight: var(--type-stat-num-weight) !important;    /* 600 */
	line-height: var(--type-stat-num-lh) !important;        /* 1.1 */
}
:root .mapyr-stat-rail__title {
	font-size:      var(--type-stat-title-size) !important;   /* 20 -> 24 */
	font-weight:    var(--type-stat-title-weight) !important; /* 600 */
	line-height:    var(--type-stat-title-lh) !important;     /* 1.2 */
	text-transform: none !important;                          /* Title-Case, not caps */
	letter-spacing: normal !important;
}
:root .mapyr-stat-rail__desc {
	font-size:   var(--type-body-size) !important;          /* 18 */
	font-weight: var(--type-body-weight) !important;        /* 400 */
	line-height: var(--type-body-lh) !important;            /* 1.7 */
}

/* ============================================================
 * HOME HERO re-map (client annotation 2026-07).
 * The uppercase kicker is the 48-52px hero statement; the sentence
 * headline + lede drop to 18px body. Scoped to .mapyr-home-hero so
 * other pages' heroes keep the standard headline-as-hero mapping.
 * Placed last -> wins the role rules above by source order.
 * ============================================================ */
/* Kicker is now the actual <h1> hero statement, Capital Case (not all-caps). */
:root .mapyr-home-hero .mapyr-eyebrow {
	font-size:      var(--type-hero-size) !important;   /* 36 -> 52 */
	font-weight:    var(--type-hero-weight) !important; /* 700 */
	line-height:    var(--type-hero-lh) !important;     /* 1.1 */
	text-transform: none !important;                    /* Title Case comes from the source text
	                                                       (capitalize would force "Across The") */
	letter-spacing: 0 !important;
	color:          var(--mapyr-ink) !important;        /* dark, prominent h1 */
	display:        block;
	margin:         0 0 0.75rem !important;             /* reset browser h1 top margin */
}
/* Headline + lede merged into this single body paragraph. */
:root .mapyr-home-hero__lede {
	text-wrap: pretty !important;                        /* clean rag, one flowing paragraph */
}
:root .mapyr-home-hero__proof-num {
	font-size:   var(--type-stat-num-size) !important;      /* 20 -> 24 */
	font-weight: var(--type-stat-num-weight) !important;    /* 600 */
	line-height: var(--type-stat-num-lh) !important;        /* 1.1 */
}
:root .mapyr-home-hero__proof-label {
	font-size:      var(--type-stat-label-size) !important;   /* 14 */
	font-weight:    var(--type-stat-label-weight) !important; /* 400 */
	line-height:    var(--type-stat-label-lh) !important;     /* 1.35 */
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
}