/* =====================================================================
   Marble subpage templates (tp-*) — the section templates of the reviewed pages,
   plus html.mo-on motion states. Loads on the 24 pages that use them; the three
   pages that use polish.css (blog, carrera, contacto) do not load it.

   Ported from <delivery>/assets/css/marble-templates.css (T2, reviewed-pages-batch-1).
   Faithful port: only colour is tokenized (#fff -> --ms-on-dark, or --mb-white
   where it fills a surface; each #000 mask stop carries a declared exemption).

   ONE DELIBERATE DIFFERENCE: the four [data-reveal] rules in the "Motion" block
   (700ms line reveal, 80ms stagger, 700/800ms items) redefine rules that
   components.css already owns (--ms-dur-reveal 1100ms, --ms-stagger 100ms) and
   that Intelligence and Select are tuned against. The delivered pages need the
   faster timing, so those rules are scoped with :where() to the roots that carry
   a tp-/pg- class. :where() adds no specificity, so on those roots the cascade
   is exactly the delivery's; on any other [data-reveal] root components.css keeps
   its timing no matter which sheet loads last. Load after components.css and
   page.css. Script: assets/js/tp-motion.js.
   ===================================================================== */
/* =====================================================================
   Marble — subpage templates (tp-*)
   Shared sections for the generated Fase 2 subpages (tools/build-subpages.py).
   Sits on top of marble-tokens / marble-components / marble-page: chrome
   (header, hero, FAQ, closing, footer) comes from marble-page.css; this file
   only adds the content sections. Territory colour comes from data-practice.
   Derived from explorations/modelo-de-seleccion.html (md-*), the approved
   Fase 2 reference page.
   ===================================================================== */

.pg-logo--house svg { filter: none; }
.pg-hero { --pg-focus: 50% 45%; --pg-focus-m: 55% 40%; }
/* Long SEO H1s: one step down so the display keeps three lines at most */
.tp-hero--long .pg-hero__display { font-size: clamp(2.9rem, 1.2rem + 3.6vw, 4.6rem); line-height: 0.96; }
.tp-hero--long .pg-hero__content { width: min(56rem, 68vw); }
@media (max-width: 40rem) { .tp-hero--long .pg-hero__display { font-size: clamp(2.3rem, 9.4vw, 3rem); } }

/* Section titles: generated pages keep the approved restraint (smaller over larger) */
.tp-title { font-size: clamp(2.4rem, 1.3rem + 3vw, 4.1rem); }
.tp-section .ms-header { margin-block-end: clamp(2.75rem, 5vw, 4rem); }
.tp-copy p { margin: 0; max-width: 62ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); text-wrap: pretty; }
.tp-copy { display: grid; gap: 1rem; align-content: start; }
.tp-copy .ms-link { color: var(--ms-brand); }
.tp-copy > p:first-child.tp-lead-p { font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.35rem, 1.05rem + 0.8vw, 1.8rem); line-height: 1.28; color: var(--ms-ink); max-width: 34ch; }
.tp-arrows { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; margin-block-start: clamp(1.5rem, 3vw, 2.25rem); }

/* ---------- Plate: approved photo treatment (no radius, no shadow, grayscale, bottom fade) ---------- */
.tp-plate { position: relative; margin: 0; overflow: hidden; }
.tp-plate picture { display: block; height: 100%; }
/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.tp-plate img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(0.92) brightness(1.04);
	-webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }

/* ---------- Split: title aside, reading column ---------- */
.tp-split__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); row-gap: 2.5rem; align-items: start; }
.tp-split__head { grid-column: 1 / span 5; position: sticky; top: 7.5rem; }
.tp-split__body { grid-column: 7 / span 6; }
.tp-split--wide .tp-split__head { grid-column: 1 / span 6; }
.tp-split--wide .tp-split__body { grid-column: 7 / span 6; }
@media (max-width: 64rem) {
	.tp-split__head, .tp-split__body, .tp-split--wide .tp-split__head, .tp-split--wide .tp-split__body { grid-column: 1 / -1; position: static; }
}

/* ---------- Steps: sticky portrait + numbered lead items (same numeral and hairline language as .tp-cols) ---------- */
.tp-steps__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: start; }
.tp-steps__photo { grid-column: 1 / span 4; position: sticky; top: 7.5rem; aspect-ratio: 4 / 5; }
.tp-steps__main { grid-column: 6 / span 7; display: grid; gap: clamp(2rem, 4vw, 3rem); }
.tp-steps--flip .tp-steps__photo { grid-column: 9 / span 4; grid-row: 1; }
.tp-steps--flip .tp-steps__main { grid-column: 1 / span 7; grid-row: 1; }
.tp-steps__list { margin: 0; padding: 0; list-style: none; counter-reset: tpstep; position: relative; }
.tp-step { counter-increment: tpstep; display: grid; grid-template-columns: clamp(3.75rem, 6vw, 5.25rem) 1fr; column-gap: clamp(1.25rem, 2.5vw, 2rem); padding-block: clamp(1.5rem, 2.6vw, 2.1rem); border-block-end: 1px solid var(--ms-line); }
.tp-step__n { font-family: var(--ms-font-display); font-weight: 200; font-size: clamp(2.6rem, 1.8rem + 2.2vw, 3.8rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--ms-brand); font-variant-numeric: tabular-nums; }
.tp-step__n::before { content: counter(tpstep, decimal-leading-zero); }
.tp-step__copy { display: grid; gap: 0.7rem; }
.tp-step__t { margin: 0; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.3rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--ms-ink); text-wrap: balance; }
.tp-step__p { margin: 0; max-width: 58ch; font-size: var(--ms-body-sm); line-height: 1.65; color: var(--ms-ink-soft); }
.tp-step__p .ms-link { color: var(--ms-brand); }
@media (max-width: 64rem) {
	.tp-steps__photo, .tp-steps--flip .tp-steps__photo { grid-column: 1 / -1; grid-row: auto; position: static; aspect-ratio: 16 / 9; margin-block-end: 2rem; }
	.tp-steps__main, .tp-steps--flip .tp-steps__main { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 40rem) {
	.tp-step { grid-template-columns: 1fr; row-gap: 0.5rem; }
	.tp-step__n { font-size: 2.4rem; }
}

/* ---------- Columns: 2 to 4 lead items as an editorial numbered list ---------- */
/* Items as light glass cards (same recipe as the roles panel and Home .ml-card: .ms-glass + data-glass) */
.tp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--ms-grid-gap); margin: 0; padding: 0; list-style: none; }
.tp-col { display: grid; align-content: start; gap: 0.9rem; padding: clamp(1.5rem, 2.6vw, 2.25rem); }
.tp-col__n { font-family: var(--ms-font-display); font-weight: 200; font-size: clamp(3.5rem, 2.4rem + 3vw, 5.5rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--ms-brand); font-variant-numeric: tabular-nums; }
.tp-col__t { margin: 0; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.3rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--ms-ink); text-wrap: balance; }
.tp-col__p { margin: 0; font-size: var(--ms-body); line-height: 1.6; color: var(--ms-ink-soft); }
.tp-col__p .ms-link { color: var(--ms-brand); }
.tp-cols__after { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }
/* card reveal: staggered rise, translate 0 2.5rem + opacity over 1.1s, .12s steps (hidden only while armed).
   Reveal uses opacity/translate (delayed by --k); hover uses transform/box-shadow (never delayed), so the two never fight. */
.tp-cols .tp-col:nth-child(1) { --k: 0; } .tp-cols .tp-col:nth-child(2) { --k: 1; } .tp-cols .tp-col:nth-child(3) { --k: 2; } .tp-cols .tp-col:nth-child(n+4) { --k: 3; }
.tp-items .tp-col {
	transition: opacity 1.1s ease calc(var(--k, 0) * 0.12s), translate 1.1s var(--ms-ease) calc(var(--k, 0) * 0.12s), transform 0.5s var(--ms-ease), box-shadow 0.5s var(--ms-ease);
}
.tp-items.is-armed:not(.is-in) .tp-col { opacity: 0; translate: 0 2.5rem; }
@media (prefers-reduced-motion: reduce) {
	.tp-items.is-armed:not(.is-in) .tp-col { translate: none; opacity: 1; }
	.tp-items .tp-col, .tp-items.is-in .tp-col { transition: none; }
}

/* ---------- Index rows: numbered children with description (index, hub lists, fronts, related) ---------- */
.tp-index__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ms-grid-gap); align-items: start; }
.tp-idx-side { grid-column: 1 / span 5; position: sticky; top: 7.5rem; }
.tp-idx-side__in { display: grid; gap: 1.5rem; justify-items: start; }
.tp-idx-side .ms-title { margin: 0; }
.tp-idx-plate { width: min(100%, 20rem); aspect-ratio: 3 / 2; margin-block-start: 0.5rem; }
.tp-index__main { grid-column: 6 / span 7; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.tp-index__list { margin: 0; padding: 0; list-style: none; position: relative; }
.tp-row {
	position: relative; isolation: isolate;
	display: grid; grid-template-columns: clamp(3rem, 5vw, 4.25rem) minmax(0, 1fr) auto; align-items: center; column-gap: clamp(1rem, 2vw, 1.5rem);
	padding-block: clamp(1.25rem, 2.2vw, 1.75rem);
	border-block-end: 1px solid var(--ms-line);
	color: var(--ms-ink); text-decoration: none;
}
a.tp-row::before {
	content: ""; position: absolute; inset: 0 -1rem; z-index: -1; border-radius: var(--ms-radius-sm);
	background: linear-gradient(90deg, color-mix(in srgb, var(--ms-brand) 7%, transparent), transparent 80%);
	opacity: 0; transition: opacity 0.5s var(--ms-ease);
}
a.tp-row::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ms-brand);
	transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ms-ease);
}
.tp-row__n { font-family: var(--ms-font-display); font-weight: 200; font-size: clamp(1.8rem, 1.3rem + 1.2vw, 2.5rem); line-height: 0.9; color: var(--ms-brand); font-variant-numeric: tabular-nums; }
.tp-row__txt { display: grid; gap: 0.35rem; transition: translate 0.6s var(--ms-ease); }
.tp-row__t { font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--ms-ink); text-wrap: balance; transition: color 0.4s ease; }
.tp-row__d { font-size: var(--ms-body-sm); line-height: 1.6; color: var(--ms-ink-soft); max-width: 56ch; }
.tp-row .ms-cta__circle { width: var(--ms-circle-sm); height: var(--ms-circle-sm); }
.tp-row .ms-cta__circle svg { width: 0.9rem; height: 0.9rem; transition: transform 0.4s var(--ms-ease); }
a.tp-row:is(:hover, :focus-visible)::before { opacity: 1; }
a.tp-row:is(:hover, :focus-visible)::after { transform: scaleX(1); }
a.tp-row:is(:hover, :focus-visible) .tp-row__txt { translate: 0.4rem 0; }
a.tp-row:is(:hover, :focus-visible) .tp-row__t { color: var(--ms-brand); font-weight: 400; }
a.tp-row:is(:hover, :focus-visible) .ms-cta__circle { background: var(--ms-brand); border-color: var(--ms-brand); color: var(--ms-on-dark); }
a.tp-row:is(:hover, :focus-visible) .ms-cta__circle svg { transform: translateX(5px); }
a.tp-row:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; }
@media (max-width: 64rem) {
	.tp-idx-side { grid-column: 1 / -1; position: static; margin-block-end: 1.5rem; }
	.tp-index__main { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
	.tp-row { grid-template-columns: 2.5rem minmax(0, 1fr) auto; column-gap: 0.85rem; }
	a.tp-row::before { inset-inline: -0.5rem; }
}

/* ---------- Roles / deliverables: numbered hairline list ---------- */
.tp-roles__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); row-gap: 2.5rem; align-items: start; }
.tp-roles__head { grid-column: 1 / span 5; }
.tp-roles__head .tp-copy { margin-block-start: 1.5rem; }
.tp-roles__panel { grid-column: 7 / span 6; }
.tp-roles__list { margin: 0; padding: 0; list-style: none; counter-reset: tprole; position: relative; }
.tp-role { counter-increment: tprole; display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline; column-gap: 1rem; padding-block: 1rem; border-block-end: 1px solid var(--ms-line); }
.tp-role::before { content: counter(tprole, decimal-leading-zero); font-family: var(--ms-font-display); font-weight: 200; font-size: 1.5rem; line-height: 1; color: var(--ms-brand); font-variant-numeric: tabular-nums; }
.tp-role__t { font-family: var(--ms-font-display); font-weight: 400; font-size: clamp(1.15rem, 0.98rem + 0.45vw, 1.45rem); line-height: 1.2; color: var(--ms-ink); }
.tp-roles__after { grid-column: 7 / span 6; }
@media (max-width: 64rem) {
	.tp-roles__head, .tp-roles__panel, .tp-roles__after { grid-column: 1 / -1; }
}

/* ---------- Figures: audited numbers ---------- */
.tp-figures { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) var(--ms-grid-gap); margin: 0; padding: 0; list-style: none; }
.tp-figure { position: relative; grid-column: span 6; display: grid; gap: 0.75rem; align-content: start; padding-block-start: 1.25rem; }
.tp-figure::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--ms-line-strong); transform-origin: left; }
.tp-figures--3 .tp-figure { grid-column: span 4; }
.tp-figure__n { font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(3.4rem, 2rem + 4vw, 6rem); line-height: 0.88; letter-spacing: -0.03em; color: var(--ms-brand); font-variant-numeric: tabular-nums; }
.tp-figure__l { margin: 0; max-width: 40ch; font-size: var(--ms-body-sm); line-height: 1.65; color: var(--ms-ink-soft); }
.tp-figures__after { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 64rem) { .tp-figure, .tp-figures--3 .tp-figure { grid-column: 1 / -1; } }

/* ---------- Team names: quiet typographic initials (portraits pending authorised photos) ---------- */
.tp-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--ms-grid-gap); margin: 0; padding: 0; list-style: none; }
.tp-person { display: grid; gap: 0.9rem; }
.tp-person__frame { aspect-ratio: 4 / 5; border-radius: var(--ms-radius-lg); background: color-mix(in srgb, var(--ms-ink) 4%, var(--ms-surface)); display: grid; place-items: center; }
.tp-person__frame span { font-family: var(--ms-font-display); font-weight: 200; font-size: clamp(4rem, 3rem + 3vw, 6rem); line-height: 1; letter-spacing: -0.03em; color: var(--ms-brand); }
.tp-person__n { font-family: var(--ms-font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.1; color: var(--ms-ink); }
.tp-person__r { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-brand); }

/* ---------- Motion: transform and opacity only, hidden only while armed ---------- */
.tp-section.is-armed:not(.is-in) :is(.tp-step, .tp-row, .tp-role, .tp-figure, .tp-person) { opacity: 0; transform: translateY(1rem); }
.tp-section.is-in :is(.tp-step, .tp-row, .tp-role, .tp-figure, .tp-person) { transition: opacity 0.7s ease, transform 0.9s var(--ms-ease); }
.tp-section.is-in :is(li, .tp-person):nth-child(2) > * { transition-delay: 0.08s; }
.tp-section.is-in :is(li, .tp-person):nth-child(3) > * { transition-delay: 0.16s; }
.tp-section.is-in :is(li, .tp-person):nth-child(4) > * { transition-delay: 0.24s; }
.tp-section.is-in :is(li, .tp-person):nth-child(5) > * { transition-delay: 0.32s; }
.tp-section.is-in :is(li, .tp-person):nth-child(6) > * { transition-delay: 0.4s; }
.tp-section.is-settled :is(.tp-step, .tp-row, .tp-role, .tp-figure, .tp-person) { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
	.tp-row, .tp-row *, .tp-row::before, .tp-row::after { transition: none !important; }
	.tp-section.is-armed:not(.is-in) :is(.tp-step, .tp-row, .tp-role, .tp-figure, .tp-person) { transform: none; }
}

/* ---------- Phases: 'a → b → c' sequences from the method copy ---------- */
.tp-phases { margin: 0.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-block-start: 1px solid var(--ms-line); }
.tp-phase { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; column-gap: 1rem; padding-block: 0.8rem; border-block-end: 1px solid var(--ms-line); }
.tp-phase__n { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: 0.06em; color: var(--ms-brand); font-variant-numeric: tabular-nums; }
.tp-phase__t { font-family: var(--ms-font-display); font-weight: 400; font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.35rem); line-height: 1.25; color: var(--ms-ink); }
.ms-on-dark .tp-phases, .ms-on-dark .tp-phase { border-color: rgb(255 255 255 / 0.16); }
.ms-on-dark .tp-phase__n { color: var(--ms-brand-on-dark); }
.ms-on-dark .tp-phase__t { color: var(--ms-on-dark); }

.tp-col__p strong, .tp-step__p strong { font-weight: 600; color: var(--ms-ink); }


/* =====================================================================
   Composition variants (generator picks per page seed and section index)
   ===================================================================== */
:root { --tp-pad: clamp(3.5rem, 5.5vw, 5rem); --tp-ease: cubic-bezier(0.2, 0.7, 0.2, 1); }
.tp-section, .tp-statement { padding-block: var(--tp-pad); }
.tp-tint { background: var(--ms-brand-tint); }

/* ---------- Statement: shared ---------- */
.tp-statement { position: relative; overflow-x: clip; }
.tp-st__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); }
.tp-st__lead, .tp-st__res { margin: 0; font-family: var(--ms-font-display); color: var(--ms-ink); }
.tp-st__lead .ms-line > span, .tp-st__res .ms-line > span { display: block; text-wrap: balance; }
.tp-st__lead { font-weight: 300; font-size: clamp(1.9rem, 1rem + 2.3vw, 3.2rem); line-height: 1.08; letter-spacing: -0.01em; max-width: 22ch; }
.tp-st__res { font-weight: 600; font-size: clamp(2.2rem, 1rem + 3.4vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; }
.tp-st__sub { margin: clamp(1.25rem, 2.6vw, 2rem) 0 0; max-width: 46ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); text-wrap: pretty; }
.tp-st__sub .ms-link { color: var(--ms-brand); }
.tp-st__res .ms-link { color: var(--ms-brand); }
.tp-statement--long .tp-st__lead { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.5rem); max-width: 26ch; }
.tp-statement--long .tp-st__res { font-size: clamp(1.8rem, 1rem + 2.2vw, 3.2rem); }
.tp-st__frame { height: 100%; }
.tp-st__fig { position: relative; margin: 0; }
.tp-st__frame img { object-position: 50% 35%; }

/* (a) overlap: the resolution crosses the lower edge of a large 4:5 plate, orbit ring and faint column guides behind */
/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.tp-st--a .tp-st__guides {
	position: absolute; inset: 0; width: calc(100% - 2 * var(--ms-gutter)); max-width: var(--ms-container-max); margin-inline: auto; pointer-events: none;
	display: grid; grid-template-columns: repeat(4, 1fr);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.tp-st--a .tp-st__guides i { border-inline-start: 1px solid color-mix(in srgb, var(--ms-ink) 7%, transparent); }
.tp-st--a .tp-st__guides i:last-child { border-inline-end: 1px solid color-mix(in srgb, var(--ms-ink) 7%, transparent); }
.tp-st--a .tp-st__top { grid-column: 1 / span 7; grid-row: 1; position: relative; z-index: 2; align-self: start; }
.tp-st--a .tp-st__low { grid-column: 2 / span 11; grid-row: 2; position: relative; z-index: 3; align-self: end; margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.tp-st--a .tp-st__fig { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: start; aspect-ratio: 4 / 5; z-index: 1; }
/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.tp-st--a .tp-st__fig .tp-plate img { -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent 94%); mask-image: linear-gradient(180deg, #000 22%, transparent 70%); }
.tp-st--a .tp-st__lead { max-width: 19ch; }
.tp-st--a .tp-st__res { text-shadow: 0 0 0.45em color-mix(in srgb, var(--ms-ground) 90%, transparent), 0 0 0.12em color-mix(in srgb, var(--ms-ground) 70%, transparent); }
.tp-st--a .tp-st__res { max-width: 22ch; font-size: clamp(2.4rem, 1rem + 4.2vw, 5.4rem); line-height: 0.98; }
.tp-st--a .tp-st__res .ms-line > span { text-wrap: pretty; }
.tp-st--a.tp-statement--long .tp-st__res { max-width: 24ch; font-size: clamp(1.9rem, 1rem + 2.4vw, 3.4rem); }
.tp-st__orbit { position: absolute; z-index: -1; width: 138%; aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; overflow: visible; pointer-events: none; transform: rotate(calc(var(--pg-sp, 0.5) * 120deg - 20deg)); }
.tp-st__ring { fill: none; stroke: color-mix(in srgb, var(--ms-ink) 16%, transparent); stroke-width: 0.22; }
.tp-st__dot { fill: var(--ms-brand); }

/* (b) wide editorial lead, tall plate bleeding to the page edge */
/* (b) editorial: the lead sets the topic, the resolution is a quieter statement behind a brand bar; copy in cols 1-8, centred against the figure */
.tp-st--b .tp-st__copy { grid-column: 1 / span 7; grid-row: 1; align-self: center; position: relative; z-index: 2; }
.tp-st--b .tp-st__lead, .tp-st--b.tp-statement--long .tp-st__lead { font-weight: 300; font-size: clamp(1.55rem, 1rem + 1.4vw, 2.25rem); line-height: 1.18; letter-spacing: -0.005em; max-width: 30ch; color: var(--ms-ink); }
.tp-st--b .tp-st__res, .tp-st--b.tp-statement--long .tp-st__res {
	margin-block-start: clamp(1.5rem, 3vw, 2.25rem); max-width: 46ch; padding-inline-start: 1.1rem; border-inline-start: 2px solid var(--ms-brand);
	font-family: var(--ms-font-body); font-weight: 400; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); line-height: 1.7; letter-spacing: 0; color: var(--ms-ink-soft);
}
.tp-st--b .tp-st__sub { max-width: 52ch; padding-block-start: 0; position: relative; }
.tp-st--b .tp-st__fig { grid-column: 9 / -1; grid-row: 1; margin-inline-end: calc(-1 * max(var(--ms-gutter), (100vw - var(--ms-container-max)) / 2)); align-self: stretch; min-height: clamp(28rem, 42vw, 40rem); }
.tp-st--b .tp-st__fig .tp-plate { position: absolute; inset: 0; }
@media (max-width: 64rem) {
	.tp-st--a .tp-st__top, .tp-st--a .tp-st__low, .tp-st--b .tp-st__copy { grid-column: 1 / -1; }
	.tp-st--a .tp-st__top { grid-row: 1; }
	.tp-st--a .tp-st__low { grid-row: 2; margin-block-start: 1.25rem; }
	.tp-st--a .tp-st__fig { grid-column: 4 / -1; grid-row: 3; margin-block-start: 2.5rem; }
	.tp-st--a .tp-st__guides { display: none; }
	.tp-st--a .tp-st__res { max-width: 20ch; }
	.tp-st__orbit { width: 120%; }
	.tp-st--b .tp-st__fig { grid-column: 4 / -1; grid-row: 2; margin-block-start: 2.5rem; margin-inline-end: calc(-1 * var(--ms-gutter)); aspect-ratio: 4 / 5; min-height: 0; }
	.tp-st--b .tp-st__fig .tp-plate { position: relative; }
}
@media (max-width: 40rem) { .tp-st--a .tp-st__fig, .tp-st--b .tp-st__fig { grid-column: 2 / -1; } }

/* ---------- Thin sections: lede ---------- */
.tp-lede__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: start; }
.tp-lede__head { grid-column: 1 / span 5; position: sticky; top: 7.5rem; }
.tp-lede__body { grid-column: 7 / span 6; position: relative; padding-inline-start: clamp(1.5rem, 3vw, 2.75rem); padding-block: 0.5rem; align-self: stretch; }
.tp-lede__body::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 1px; background: var(--ms-line-strong); transform-origin: top; }
.tp-lede__body .tp-copy { gap: 1.25rem; }
.tp-lede__body .tp-copy p { max-width: 60ch; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); line-height: 1.55; color: var(--ms-ink); }
.tp-lede__body .tp-copy > p:first-child.tp-lead-p { font-size: clamp(1.4rem, 1.05rem + 0.9vw, 1.9rem); max-width: 36ch; line-height: 1.24; }
.tp-lede__body .tp-copy > p:first-child.tp-lead-p + p { color: var(--ms-ink-soft); }
.tp-lede--flip .tp-lede__head { grid-column: 8 / span 5; grid-row: 1; }
.tp-lede--flip .tp-lede__body { grid-column: 1 / span 6; grid-row: 1; padding-inline-start: 0; padding-inline-end: clamp(1.5rem, 3vw, 2.75rem); }
.tp-lede--flip .tp-lede__body::before { inset-inline-start: auto; inset-inline-end: 0; }
@media (max-width: 64rem) {
	.tp-lede__head, .tp-lede--flip .tp-lede__head { grid-column: 1 / -1; position: static; margin-block-end: 1.5rem; }
	.tp-lede__body, .tp-lede--flip .tp-lede__body { grid-column: 1 / -1; grid-row: auto; padding: 1.5rem 0 0; }
	.tp-lede__body::before, .tp-lede--flip .tp-lede__body::before { inset: 0 0 auto; width: auto; height: 1px; transform-origin: left; }
}

/* ---------- Thin sections: pull-quote ---------- */
.tp-pull__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); row-gap: 2rem; align-items: start; }
.tp-pull__head { grid-column: 1 / span 5; }
.tp-pull__main { grid-column: 6 / span 7; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.tp-pull__q { position: relative; margin: 0; padding-inline-start: clamp(1.25rem, 2.5vw, 2rem); font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.6rem); line-height: 1.14; letter-spacing: -0.01em; color: var(--ms-ink); text-wrap: balance; }
.tp-pull__q::before { content: ""; position: absolute; inset-block: 0.1em; inset-inline-start: 0; width: 2px; background: var(--ms-brand); transform-origin: top; }
.tp-pull__rest { display: grid; gap: 1rem; padding-inline-start: clamp(1.25rem, 2.5vw, 2rem); }
.tp-pull__rest .tp-copy p { max-width: 58ch; color: var(--ms-ink-soft); }
@media (max-width: 64rem) { .tp-pull__head, .tp-pull__main { grid-column: 1 / -1; } }

/* ---------- Dark band: half-bleed photo panel, copy on the other side ---------- */
.tp-band { position: relative; min-height: clamp(26rem, 56svh, 38rem); display: grid; align-items: center; }
.tp-band__panel { position: absolute; inset-block: 0; width: 44%; margin: 0; z-index: 0; }
.tp-band--l .tp-band__panel { inset-inline-start: 0; }
.tp-band--r .tp-band__panel { inset-inline-end: 0; }
.tp-band__panel img { -webkit-mask-image: none; mask-image: none; filter: grayscale(1) contrast(1.08) brightness(0.8); }
.tp-band__panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--tp-fade, 90deg), transparent 50%, color-mix(in srgb, var(--ms-dark) 78%, transparent) 100%), linear-gradient(color-mix(in srgb, var(--ms-dark) 34%, transparent), color-mix(in srgb, var(--ms-dark) 34%, transparent)), radial-gradient(70% 60% at 30% 40%, color-mix(in srgb, var(--ms-brand) 22%, transparent), transparent 70%); }
.tp-band--r .tp-band__panel::after { --tp-fade: 270deg; }
.tp-band .ms-band__grain { z-index: 1; }
.tp-band__in { position: relative; z-index: 2; padding-block: var(--tp-pad); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); }
.tp-band__copy { display: grid; gap: clamp(1.25rem, 2.4vw, 1.75rem); align-content: center; }
.tp-band--l .tp-band__copy { grid-column: 7 / -1; }
.tp-band--r .tp-band__copy { grid-column: 1 / span 6; }
.tp-band__copy .ms-title { font-size: var(--ms-title-lead); }
.tp-band__copy .ms-kicker { margin-block-end: 0; }
.tp-band__lead p { margin: 0; max-width: 40ch; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.35rem, 1rem + 0.8vw, 1.8rem); line-height: 1.25; color: var(--ms-on-dark); text-wrap: pretty; }
.tp-band__lead--long p:first-child { font-family: var(--ms-font-body); font-weight: 400; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-on-dark); max-width: 56ch; }
.tp-band__lead .tp-phases, .tp-band__text .tp-phases { margin-block-start: 1rem; }
.tp-band__text p, .tp-band__lead > p + p { margin: 0; max-width: 56ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-on-dark-soft); }
.tp-band__lead p:not(:first-child) { font-family: var(--ms-font-body); font-weight: 400; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-on-dark-soft); margin-block-start: 1rem; }
.tp-band .ms-link, .tp-band__copy a.ms-link { color: var(--ms-on-dark); }
/* links inside the dark band cards: white, no underline at rest, brand-on-dark on hover */
/* links inside the dark band cards: a small glass pill with a circled arrow, clearly clickable (2026-10-01) */
.tp-pts--cards .ms-link {
	display: flex; width: fit-content; align-items: center; gap: 0.6rem; margin-block-start: 0.85rem; padding: 0.4rem 0.45rem 0.4rem 1rem;
	border: 1px solid rgb(255 255 255 / 0.28); border-radius: 999px; background: rgb(255 255 255 / 0.06);
	font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; line-height: 1.2;
	color: var(--ms-on-dark); text-decoration: none; white-space: normal;
	transition: background-color 0.35s var(--ms-ease), border-color 0.35s var(--ms-ease);
}
.tp-pts--cards .ms-link::after {
	content: ""; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background-color: rgb(255 255 255 / 0.14);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8h9M9 4.5 12.5 8 9 11.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 0.85rem; transition: background-color 0.35s var(--ms-ease), transform 0.35s var(--ms-ease);
}
.tp-pts--cards .ms-link:hover, .tp-pts--cards .ms-link:focus-visible { background: rgb(255 255 255 / 0.12); border-color: color-mix(in srgb, var(--ms-brand-on-dark) 70%, transparent); color: var(--ms-on-dark); text-decoration: none; }
.tp-pts--cards .ms-link:hover::after, .tp-pts--cards .ms-link:focus-visible::after { background-color: var(--ms-brand); transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .tp-pts--cards .ms-link:hover::after { transform: none; } }
.tp-pts--cards .ms-link:focus-visible { outline: 2px solid var(--ms-brand-on-dark); outline-offset: 3px; }
.tp-pts { margin: 0; padding: 0; list-style: none; counter-reset: tppt; position: relative; }
.tp-pts::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--ms-line-on-dark); transform-origin: left; }
.tp-pt { counter-increment: tppt; position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1rem; padding-block: 1.15rem; border-block-end: 1px solid rgb(255 255 255 / 0.14); }
.tp-pt__n { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); letter-spacing: 0.06em; color: var(--ms-brand-on-dark); font-variant-numeric: tabular-nums; padding-block-start: 0.2em; }
.tp-pt__n::before { content: counter(tppt, decimal-leading-zero); }
.tp-pt__b p { margin: 0; max-width: 54ch; font-size: var(--ms-body-sm); line-height: 1.65; color: var(--ms-on-dark-soft); }
.tp-pt__b p strong { color: var(--ms-on-dark); font-weight: 600; }
@media (max-width: 64rem) {
	.tp-band { display: block; min-height: 0; }
	.tp-band__panel { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10; }
	.tp-band__panel::after { background: linear-gradient(180deg, transparent 50%, var(--ms-dark) 100%); }
	.tp-band--l .tp-band__copy, .tp-band--r .tp-band__copy { grid-column: 1 / -1; }
	.tp-band__in { padding-block-start: 2rem; }
	.tp-band--r .tp-band__panel::after { --tp-fade: 180deg; }
}

/* ---------- Motion: opt-in. marble-motion.js adds html.mo-on only when motion is allowed; every hidden state below is gated by it ---------- */
/* h2 / statement lines: mask-up per line, 700ms, 80ms stagger */
:where(.tp-section, .tp-statement, .tp-band, .pg-faq, .pg-close)[data-reveal].is-in .ms-line > span { transition: transform 0.7s var(--tp-ease); }
:where(.tp-section, .tp-statement, .tp-band, .pg-faq, .pg-close)[data-reveal].is-in .ms-line:nth-child(2) > span { transition-delay: 0.08s; }
:where(.tp-section, .tp-statement, .tp-band, .pg-faq, .pg-close)[data-reveal].is-in .ms-line:nth-child(3) > span { transition-delay: 0.16s; }
.tp-statement[data-reveal].is-in .tp-st__res > .ms-line > span { transition-delay: 0.16s; }
:where(.tp-section, .tp-statement, .tp-band, .pg-faq, .pg-close)[data-reveal].is-in [data-reveal-item] { transition: opacity 0.7s ease, transform 0.8s var(--tp-ease); }

/* hero: slower, shallower settle */
.pg-hero__media picture { animation-name: tp-settle; }
@keyframes tp-settle { from { transform: scale(1.06); opacity: 0.001; } 30% { opacity: 1; } to { transform: scale(1); opacity: 1; } }

/* the clip lives on the picture (an element with its own clip-path never intersects an observer), the plate stays observable */
html.mo-on .tp-plate picture { transition: clip-path 1s var(--tp-ease); }
html.mo-on .tp-plate:not(.mo-in) picture { clip-path: inset(100% 0 0 0); }
html.mo-on .tp-plate.mo-in picture { clip-path: inset(0 0 0 0); }
html.mo-on .tp-band--l .tp-band__panel:not(.mo-in) picture { clip-path: inset(0 100% 0 0); }
html.mo-on .tp-band--r .tp-band__panel:not(.mo-in) picture { clip-path: inset(0 0 0 100%); }
html.mo-on .tp-band__panel::after { transition: opacity 1s ease 0.3s; }
html.mo-on .tp-band__panel:not(.mo-in)::after { opacity: 0; }
html.mo-on .tp-plate img { transition: transform 1.2s var(--tp-ease); transform: scale(1.06); }
html.mo-on .tp-plate.mo-in img { transform: none; }
html.mo-on .tp-plate picture { transform: translate3d(0, calc(var(--mo-p, 0) * min(4%, 24px)), 0) scale(1.08); will-change: transform; }
html.mo-on .tp-st--b .tp-st__fig .tp-plate, html.mo-on .tp-st__fig .tp-plate { height: 100%; }

/* hairlines draw in (scaleX, origin left) */
html.mo-on :is(.tp-index__list, .tp-steps__list, .tp-roles__list, .tp-pts, .tp-figure)::before { transition: transform 0.9s var(--tp-ease); }
html.mo-on :is(.tp-index__list, .tp-steps__list, .tp-roles__list, .tp-pts, .tp-figure):not(.mo-in)::before { transform: scaleX(0); }
html.mo-on .tp-pull__q::before { transition: transform 0.9s var(--tp-ease) 0.1s; }
html.mo-on .tp-pull__q:not(.mo-in)::before { transform: scaleY(0); }
/* scroll-linked vertical rule of the lede */
html.mo-on .tp-lede__body::before { transform: scaleY(var(--pg-sp, 0)); }
@media (max-width: 64rem) { html.mo-on .tp-lede__body::before { transform: scaleX(var(--pg-sp, 0)); } }
/* orbit ring draws once */
html.mo-on .tp-st__ring { stroke-dasharray: 616; stroke-dashoffset: 616; }
html.mo-on .tp-st__fig.mo-in .tp-st__ring { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--tp-ease) 0.3s; }

@media (prefers-reduced-motion: reduce) {
	html.mo-on .tp-plate, html.mo-on .tp-plate img, html.mo-on .tp-plate picture { clip-path: none !important; transform: none !important; transition: none !important; }
	.pg-hero__media picture { animation: none; }
}

/* =====================================================================
   2026-10-01 template fixes
   1. Subpage heroes grow with their content instead of clipping it.
   2. S.01 statement (variant a): calmer layout, full photo, no mask.
   3. Sector roles note.
   4. Dark band with cards (>= 2 points).
   Everything here overrides marble-page.css from this file only (marble-page.css is shared with the main pages).
   ===================================================================== */

/* ---------- 1. Hero never clips ---------- */
.pg-hero__lede { max-width: 34rem; }
@media (min-width: 64.01rem) {
	.pg-hero:not(.pg-hero--short) { --tp-hero-min: max(calc(100svh - 2.25rem), 40rem); }
	.pg-hero--short { --tp-hero-min: max(min(82svh, 46rem), 36rem); }
	.pg-hero, .pg-hero--short { height: auto; min-height: var(--tp-hero-min); }
	/* the frame moves into the flow so the hero measures its content; clip-path hand-off (--pg-p) is unchanged */
	.pg-hero__frame { position: relative; inset: auto; min-height: var(--tp-hero-min); display: grid; align-content: center; }
	.pg-hero__content {
		position: relative; inset: auto; margin-inline-start: var(--ms-container-edge);
		translate: 0 calc(var(--pg-p) * -4rem);
		padding-block: clamp(8.5rem, 17vh, 11rem) clamp(3rem, 7vh, 4.5rem);
	}
}

/* ---------- 2. S.01 statement ---------- */
.tp-st__fig .tp-plate img, .tp-st--a .tp-st__fig .tp-plate img, .tp-st--b .tp-st__fig .tp-plate img { -webkit-mask-image: none; mask-image: none; }
.tp-st--a .tp-st__lead { max-width: 24ch; }
.tp-st--a.tp-statement--long .tp-st__lead { max-width: 24ch; }
.tp-st--a .tp-st__res, .tp-st--a.tp-statement--long .tp-st__res {
	max-width: 26ch; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.4rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em;
	margin-block-start: clamp(1.5rem, 3vw, 2.25rem); text-shadow: none;
}
.tp-st--a .tp-st__orbit { z-index: -1; }
@media (min-width: 64.01rem) {
	.tp-st--a .tp-st__grid { grid-template-rows: auto auto; }
	.tp-st--a .tp-st__top { grid-column: 1 / span 7; grid-row: 1; align-self: end; }
	.tp-st--a .tp-st__low { grid-column: 1 / span 7; grid-row: 2; align-self: start; margin-block-start: 0; }
	.tp-st--a .tp-st__fig { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: center; aspect-ratio: 4 / 5; }
}
@media (max-width: 64rem) {
	.tp-st--a .tp-st__low { margin-block-start: 0; }
	.tp-st--a .tp-st__fig { grid-column: 2 / -1; }
}

/* ---------- 3. Roles note (sector pages) ---------- */
.tp-roles__note { margin: 1rem 0 0; max-width: 28ch; text-wrap: balance; font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.2rem); line-height: 1.45; color: var(--ms-ink-soft); }

/* ---------- 4. Dark band with cards ---------- */
.tp-band--cards { display: block; min-height: 0; padding-block: 0; }
.tp-band--cards .tp-band__top { position: relative; min-height: clamp(24rem, 50svh, 34rem); display: grid; align-items: center; }
.tp-band--cards .tp-band__in { width: 100%; }
.tp-band__row { position: relative; z-index: 2; padding-block: clamp(2rem, 4vw, 3rem) var(--tp-pad); }
.tp-pts--cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); counter-reset: tppt; }
.tp-pts--cards::before { content: none; }
/* Home dark liquid glass: .ms-glass.ms-glass--dark supplies the radius, gradient rim (::after), blur and inset highlights; the
   pointer glare (--gx/--gy, set by marble-system.js on [data-glass]) is layered over the dark glass recipe here. */
.tp-pts--cards .tp-pt {
	display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0.9rem; column-gap: 0;
	padding: clamp(1.75rem, 2.6vw, 2.25rem); border: 0;
	background: radial-gradient(15rem 11rem at var(--gx) var(--gy), rgb(255 255 255 / 0.13), rgb(255 255 255 / 0) 70%), var(--ms-glass-dark);
	-webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
	box-shadow: var(--ms-glass-dark-inset), 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.5);
}
.tp-pts--cards .tp-pt::after { opacity: 0.8; transition: opacity 0.45s var(--ms-ease); }
.tp-pts--cards .tp-pt__n { padding: 0; font-family: var(--ms-font-display); font-weight: 200; font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem); line-height: 0.9; letter-spacing: 0; color: var(--ms-brand-on-dark); }
.tp-pts--cards .tp-pt__b p { max-width: none; font-size: var(--ms-body); line-height: 1.55; }
.tp-pts--cards .tp-pt__b p strong:first-child { display: block; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem); line-height: 1.15; color: var(--ms-on-dark); margin-block-end: 0.5rem; }
/* reveal: translate 0 2.5rem + fade over 1.1s, staggered .12s per card (own index, not the section-wide --i).
   Reveal uses opacity/transform; hover uses translate/box-shadow, so the two never fight. */
.tp-pts--cards .tp-pt:nth-child(1) { --k: 0; } .tp-pts--cards .tp-pt:nth-child(2) { --k: 1; } .tp-pts--cards .tp-pt:nth-child(3) { --k: 2; }
.tp-pts--cards .tp-pt:nth-child(4) { --k: 3; } .tp-pts--cards .tp-pt:nth-child(5) { --k: 4; } .tp-pts--cards .tp-pt:nth-child(n+6) { --k: 5; }
.tp-band--cards.is-armed:not(.is-in) .tp-pts--cards .tp-pt[data-reveal-item] { opacity: 0; transform: translate3d(0, 2.5rem, 0); }
.tp-band--cards .tp-pts--cards .tp-pt[data-reveal-item] {
	transition-property: opacity, transform, translate, box-shadow;
	transition-duration: 1.1s, 1.1s, 0.45s, 0.45s;
	transition-timing-function: ease, var(--ms-ease), var(--ms-ease), var(--ms-ease);
	transition-delay: calc(var(--k, 0) * 0.12s + 0.15s), calc(var(--k, 0) * 0.12s + 0.15s), 0s, 0s;
}
@media (prefers-reduced-motion: no-preference) {
	.tp-pts--cards .tp-pt:is(:hover, :focus-within) {
		translate: 0 -4px;
		box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.38), inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 2.25rem 4rem -1.5rem rgb(0 0 0 / 0.62);
	}
	.tp-pts--cards .tp-pt:is(:hover, :focus-within)::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.tp-band--cards.is-armed:not(.is-in) .tp-pts--cards .tp-pt[data-reveal-item] { transform: none; }
	.tp-band--cards .tp-pts--cards .tp-pt[data-reveal-item] { transition-duration: 0.01ms; transition-delay: 0s; }
}
@media (max-width: 64rem) {
	.tp-band--cards .tp-band__top { display: block; min-height: 0; }
	.tp-pts--cards { grid-template-columns: minmax(0, 1fr); }
}

/* Custom closing titular (docx "Titular de cierre"): the heading may run wider than the default 34rem column; lede and actions keep it */
.pg-close__lead.tp-close__lead--wide { max-width: min(52rem, 100%); }
.tp-close__lead--wide .pg-close__lede, .tp-close__lead--wide .pg-close__actions { max-width: 34rem; }

/* ---------- 5. Roles panel: light glass card (Home .ml-card recipe via .ms-glass) ---------- */
.tp-roles__panel.ms-glass { padding: clamp(1.25rem, 2.4vw, 2rem); }
.tp-roles__panel .tp-role:last-child { border-block-end: 0; }
.tp-roles__panel .tp-role:first-child { padding-block-start: 0.25rem; }
.tp-roles__panel .tp-role:last-child { padding-block-end: 0.25rem; }
.tp-roles.is-armed:not(.is-in) .tp-role { opacity: 0; translate: 0 0.9rem; }
.tp-roles .tp-role { transition: opacity 0.9s ease, translate 0.9s var(--ms-ease); }
.tp-roles.is-in .tp-role:nth-child(1) { transition-delay: 0.3s; }
.tp-roles.is-in .tp-role:nth-child(2) { transition-delay: 0.38s; }
.tp-roles.is-in .tp-role:nth-child(3) { transition-delay: 0.46s; }
.tp-roles.is-in .tp-role:nth-child(4) { transition-delay: 0.54s; }
.tp-roles.is-in .tp-role:nth-child(5) { transition-delay: 0.62s; }
.tp-roles.is-in .tp-role:nth-child(6) { transition-delay: 0.7s; }
.tp-roles.is-in .tp-role:nth-child(7) { transition-delay: 0.78s; }
.tp-roles.is-in .tp-role:nth-child(8) { transition-delay: 0.86s; }
.tp-roles.is-in .tp-role:nth-child(n+9) { transition-delay: 0.94s; }
@media (prefers-reduced-motion: reduce) {
	.tp-roles.is-armed:not(.is-in) .tp-role { translate: none; }
	.tp-roles .tp-role, .tp-roles.is-in .tp-role { transition: none; transition-delay: 0s; }
}

/* ---------- 6. Statement: links without underline, rounded photo, Home easing ---------- */
.tp-st__res .ms-link, .tp-st__res a { color: var(--ms-brand); text-decoration: none; transition: color 0.3s var(--ms-ease); }
.tp-st__res .ms-link:hover, .tp-st__res a:hover { color: var(--ms-brand-deep); text-decoration: none; }
.tp-st__res .ms-link:focus-visible, .tp-st__res a:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; border-radius: 0.25rem; }
.tp-st--a .tp-st__fig .tp-plate { border-radius: 1.5rem; isolation: isolate; }
/* variant b bleeds to the page edge: only the corners facing the copy are rounded */
.tp-st--b .tp-st__fig .tp-plate { border-start-start-radius: 1.5rem; border-end-start-radius: 1.5rem; isolation: isolate; }
/* plate reveal (marble-motion.js adds .mo-in): clip-path from the bottom + img scale 1.06 -> 1, 1.2s Home ease */
html.mo-on .tp-st__fig .tp-plate picture { transition: clip-path 1.2s var(--ms-ease); }
html.mo-on .tp-st__fig .tp-plate img { transition: transform 1.2s var(--ms-ease); }

/* ---------- 7. Closing frame: Home inset radius 2rem (subpages only) ---------- */
.pg-close__frame {
	clip-path: inset(calc((1 - var(--pg-c)) * 1.5rem) calc((1 - var(--pg-c)) * 2.4vw) 0 round calc((1 - var(--pg-c)) * 2rem) calc((1 - var(--pg-c)) * 2rem) 0 0);
}

/* =====================================================================
   2026-10-01d  Template refinements
   ===================================================================== */

/* ---------- Balanced line breaks ---------- */
.pg-hero__display .pg-line > span, .tp-title .ms-line > span, .pg-close__h .ms-line > span { text-wrap: balance; }
.pg-close__lede { text-wrap: balance; }

/* ---------- Line-rise wrappers (overflow: hidden) must not clip overhanging or descending glyphs ("¿", "¡", "j") ---------- */
.pg-hero__display .pg-line, .tp-title .ms-line, .pg-close__h .ms-line, .tp-st__lead .ms-line, .tp-st__res .ms-line {
	padding-inline: 0.08em; margin-inline: -0.08em; padding-block-end: 0.16em; margin-block-end: -0.16em;
}
@media (prefers-reduced-motion: no-preference) {
	/* the larger wrapper must still hide the line while it waits below */
	.pg-hero__display .pg-line > span { transform: translateY(calc(108% + 0.2em)); }
	[data-reveal].is-armed:not(.is-in) :is(.tp-title, .tp-st__lead, .tp-st__res, .pg-close__h) .ms-line > span { transform: translateY(calc(105% + 0.2em)); }
}

/* ---------- S.01 variant b without a photo: decorative composition in cols 9-12 ---------- */
.tp-st--deco .tp-st__fig--deco { grid-column: 9 / -1; grid-row: 1; align-self: stretch; position: relative; isolation: isolate; margin: 0; min-height: clamp(16rem, 28vw, 24rem); pointer-events: none; }
/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.tp-st__fig--deco .tp-st__guides {
	position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.tp-st__fig--deco .tp-st__guides i { border-inline-start: 1px solid color-mix(in srgb, var(--ms-ink) 7%, transparent); }
.tp-st__fig--deco .tp-st__guides i:last-child { border-inline-end: 1px solid color-mix(in srgb, var(--ms-ink) 7%, transparent); }
.tp-st__fig--deco .tp-st__orbit { z-index: 0; width: min(100%, 22rem); }
@media (max-width: 64rem) { .tp-st--deco .tp-st__fig--deco { display: none; } }

/* ---------- S.02 glass cards: ground glows, tinted pool, drawing rule, hover ---------- */
.tp-cols { position: relative; isolation: isolate; }
/* soft practice glows behind the row so the glass reads as glass (Home .ml-lines::before recipe) */
/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.tp-cols::before {
	content: ""; position: absolute; inset: -26% -4%; z-index: -1; pointer-events: none; opacity: 0.85;
	background:
		radial-gradient(28% 46% at 22% 56%, color-mix(in srgb, var(--ms-brand) 30%, transparent), transparent 70%),
		radial-gradient(28% 46% at 50% 62%, color-mix(in srgb, var(--ms-brand-state) 26%, transparent), transparent 70%),
		radial-gradient(28% 46% at 78% 54%, color-mix(in srgb, var(--ms-brand-on-dark) 28%, transparent), transparent 70%);
	filter: blur(8px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);
}
.tp-col { -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%); }
/* tinted pool at the top-right of each card */
.tp-col::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--ms-brand) 14%, transparent), transparent 70%);
	opacity: 0.8; transition: opacity 0.6s var(--ms-ease);
}
.tp-col__n { transition: color 0.45s var(--ms-ease); }
/* rule under the numeral: draws in on reveal, extends on hover */
.tp-col__n::after, .tp-pts--cards .tp-pt__n::after {
	content: ""; display: block; width: 2.5rem; height: 2px; margin-block-start: 0.85rem; background: var(--ms-brand); transform-origin: left center;
	transition: transform 0.9s var(--ms-ease) calc(var(--k, 0) * 0.12s + 0.5s), width 0.6s var(--ms-ease);
}
.tp-pts--cards .tp-pt__n::after { background: var(--ms-brand-on-dark); }
@media (prefers-reduced-motion: no-preference) {
	.tp-items.is-armed:not(.is-in) .tp-col__n::after, .tp-band--cards.is-armed:not(.is-in) .tp-pts--cards .tp-pt__n::after { transform: scaleX(0); }
	.tp-col:is(:hover, :focus-within) { transform: translateY(-4px); box-shadow: var(--ms-glass-light-inset), 0 2.25rem 3.75rem -1.25rem rgb(51 51 51 / 0.3), 0 2px 6px rgb(51 51 51 / 0.06); }
	.tp-col:is(:hover, :focus-within) .tp-col__n::after, .tp-pts--cards .tp-pt:is(:hover, :focus-within) .tp-pt__n::after { width: 4.5rem; }
}
.tp-col:is(:hover, :focus-within)::before { opacity: 1; }
.tp-col:is(:hover, :focus-within) .tp-col__n { color: var(--ms-brand-deep); }

/* four cards: one row of four on wide screens, 2 x 2 below, never 3 + 1 */
@media (min-width: 40.01rem) and (max-width: 75rem) {
	.tp-pts--cards:has(.tp-pt:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75.01rem) {
	.tp-pts--cards:has(.tp-pt:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Regions: count-up head + region glass cards with country pills (Alcance hub only) ---------- */
.tp-regions__n { margin: 0; font-family: var(--ms-font-display); font-weight: 200; font-size: clamp(5rem, 3rem + 6vw, 9rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--ms-brand); font-variant-numeric: tabular-nums; }
.tp-regions__grid { position: relative; isolation: isolate; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); gap: var(--ms-grid-gap); }
/* soft glows behind the cards so the glass reads as glass (same recipe as .tp-cols) */
.tp-regions__grid::before {
	content: ""; position: absolute; inset: -10% -6%; z-index: -1; pointer-events: none; opacity: 0.8;
	background:
		radial-gradient(34% 30% at 22% 24%, color-mix(in srgb, var(--ms-brand) 28%, transparent), transparent 70%),
		radial-gradient(34% 30% at 80% 52%, color-mix(in srgb, var(--ms-brand-state) 24%, transparent), transparent 70%),
		radial-gradient(34% 30% at 30% 86%, color-mix(in srgb, var(--ms-brand-on-dark) 26%, transparent), transparent 70%);
	filter: blur(8px);
}
.tp-region {
	position: relative; isolation: isolate; display: grid; align-content: start; gap: 1.25rem;
	padding: clamp(1.5rem, 2.6vw, 2.25rem); border-radius: var(--ms-radius-lg);
	-webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%);
}
.tp-region::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--ms-brand) 14%, transparent), transparent 70%);
	opacity: 0.8; transition: opacity 0.6s var(--ms-ease);
}
.tp-region:is(:hover, :focus-within)::before { opacity: 1; }
.tp-region__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.tp-region__t { margin: 0; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--ms-ink); text-wrap: balance; }
.tp-region__tag {
	display: inline-flex; align-items: center; padding: 0.28rem 0.7rem; border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--ms-brand) 38%, transparent); background: color-mix(in srgb, var(--ms-brand) 8%, transparent);
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; color: var(--ms-brand);
}
.tp-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.tp-pill {
	display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 999px; text-decoration: none;
	border: 1px solid var(--ms-line); background: color-mix(in srgb, var(--mb-white) 55%, transparent);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	font-size: var(--ms-body-sm); line-height: 1.2; color: var(--ms-ink);
	transition: border-color 0.35s ease, color 0.35s ease, transform 0.45s var(--ms-ease), box-shadow 0.45s var(--ms-ease);
}
.tp-pill:is(:hover, :focus-visible) { border-color: var(--ms-brand); color: var(--ms-brand); }
.tp-pill:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 3px; }
@media (min-width: 64.01rem) {
	.tp-regions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tp-region--hq { grid-column: 1 / -1; }
}
/* reveal: cards rise (translate 0 2.5rem + opacity, 1.1s, .12s steps), pills follow (.5rem, .05s steps); hover uses transform/box-shadow */
.tp-region { transition: opacity 1.1s ease calc(var(--k, 0) * 0.12s), translate 1.1s var(--ms-ease) calc(var(--k, 0) * 0.12s), transform 0.5s var(--ms-ease), box-shadow 0.5s var(--ms-ease); }
.tp-pill-li { transition: opacity 0.8s ease calc(var(--k, 0) * 0.12s + 0.45s + var(--j, 0) * 0.05s), translate 0.8s var(--ms-ease) calc(var(--k, 0) * 0.12s + 0.45s + var(--j, 0) * 0.05s); }
.tp-region:nth-child(1) .tp-pill-li { --k: 0; } .tp-region:nth-child(2) .tp-pill-li { --k: 1; } .tp-region:nth-child(3) .tp-pill-li { --k: 2; } .tp-region:nth-child(4) .tp-pill-li { --k: 3; } .tp-region:nth-child(n+5) .tp-pill-li { --k: 4; }
.tp-regions.is-armed:not(.is-in) .tp-region { opacity: 0; translate: 0 2.5rem; }
.tp-regions.is-armed:not(.is-in) .tp-pill-li { opacity: 0; translate: 0.5rem 0; }
@media (prefers-reduced-motion: no-preference) {
	.tp-region:is(:hover, :focus-within) { transform: translateY(-4px); box-shadow: var(--ms-glass-light-inset), 0 2.25rem 3.75rem -1.25rem rgb(51 51 51 / 0.3), 0 2px 6px rgb(51 51 51 / 0.06); }
	.tp-pill:is(:hover, :focus-visible) { transform: translateY(-2px); box-shadow: 0 0.75rem 1.5rem -0.75rem rgb(51 51 51 / 0.35); }
}
@media (prefers-reduced-motion: reduce) {
	.tp-regions.is-armed:not(.is-in) .tp-region, .tp-regions.is-armed:not(.is-in) .tp-pill-li { translate: none; opacity: 1; }
	.tp-region, .tp-pill-li, .tp-pill { transition: none; }
}

/* 2026-10-01 (alcance): optional heading above a band's card row ("Titular de tarjetas:" in the docx) */
.tp-band__row-title { margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); display: flex; align-items: center; gap: 0.9rem; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.8rem); line-height: 1.15; color: var(--ms-on-dark); }
.tp-band__row-title::before { content: ""; width: 2.75rem; height: 1px; background: linear-gradient(90deg, var(--ms-brand-on-dark), rgb(255 255 255 / 0.25)); flex: none; }

/* 2026-10-01 (alcance): both statement variants share the Home-like hierarchy:
   a moderate light display lead, then the resolution as body copy with a brand bar */
.tp-st--a .tp-st__lead, .tp-st--a.tp-statement--long .tp-st__lead { font-weight: 300; font-size: clamp(1.55rem, 1rem + 1.4vw, 2.25rem); line-height: 1.18; letter-spacing: -0.005em; max-width: 30ch; }
.tp-st--a .tp-st__res, .tp-st--a.tp-statement--long .tp-st__res {
	max-width: 46ch; margin-block-start: clamp(1.5rem, 3vw, 2.25rem); padding-inline-start: 1.1rem; border-inline-start: 2px solid var(--ms-brand);
	font-family: var(--ms-font-body); font-weight: 400; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); line-height: 1.7; letter-spacing: 0; color: var(--ms-ink-soft);
}

/* Instrument chips inside a dark band (' · ' list with durations): Home dark glass recipe, 2x2 in the copy column, staggered reveal */
.tp-chips { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.tp-chip {
	display: flex; flex-direction: column; justify-content: space-between; gap: 0.75rem; min-height: 6rem;
	padding: 1.1rem 1.25rem; border-radius: 1.25rem; border: 0; position: relative; isolation: isolate; overflow: hidden;
	/* Home .mc-routes dark liquid glass: layered sheen, inner rim, soft drop; the system adds the gradient rim and pointer glare */
	background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.04)), rgb(20 12 14 / 0.35);
	-webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.5);
	transition: transform 0.45s cubic-bezier(.22,1,.36,1), box-shadow 0.45s cubic-bezier(.22,1,.36,1);
}
.tp-chip::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
	background: radial-gradient(14rem 9rem at var(--gx, 30%) var(--gy, 0%), rgb(255 255 255 / 0.14), transparent 70%); opacity: 0.7; transition: opacity 0.45s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: no-preference) {
	.tp-chip:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 2rem 3.5rem -1.5rem rgb(0 0 0 / 0.6); }
}
.tp-chip:hover::before { opacity: 1; }
.tp-chip__t { font-family: var(--ms-font-display); font-weight: 400; font-size: clamp(1rem, 0.92rem + 0.3vw, 1.15rem); line-height: 1.25; color: var(--ms-on-dark); text-wrap: balance; }
.tp-chip__m { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-brand-on-dark); }
.tp-band .tp-chips .tp-chip[data-reveal-item] { transition-delay: calc(var(--k, 0) * 0.1s + 0.2s); }
@media (max-width: 26rem) { .tp-chips { grid-template-columns: minmax(0, 1fr); } .tp-chip { min-height: 0; } }
@media (prefers-reduced-motion: reduce) {
	.tp-band .tp-chips .tp-chip[data-reveal-item] { transition-delay: 0s; transform: none; }
}

/* 2026-10-01 (banca): mirrored hero photo, so the subject sits on the side opposite the copy */
.tp-hero--flip .pg-hero__media img { transform: scaleX(-1); }

/* 2026-10-01 (banca): the cards band's photo panel melts into the dark ground instead of ending on a hard edge:
   it fades at the bottom (toward the card row) and on the side that faces the copy */
/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.tp-band--cards .tp-band__panel {
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%), linear-gradient(var(--tp-mask-x, 90deg), #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 100%), linear-gradient(var(--tp-mask-x, 90deg), #000 55%, transparent 100%);
	-webkit-mask-composite: source-in; mask-composite: intersect;
}
.tp-band--cards.tp-band--r .tp-band__panel { --tp-mask-x: 270deg; }
@media (max-width: 64rem) {
	/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.tp-band--cards .tp-band__panel { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
}

/* mirrored closing photo (HERO_FLIP plates placed in the closing): keeps the scroll zoom */
.tp-close--flip .pg-close__media img { transform: scaleX(-1) scale(calc(1.08 - var(--pg-c) * 0.08)); }
@media (prefers-reduced-motion: reduce) { .tp-close--flip .pg-close__media img { transform: scaleX(-1); } }

/* 2026-10-01 (board-services): bright hero photos get a deeper scrim on the copy side and a dimmer plate */
.tp-hero--dim .pg-hero__media img { filter: grayscale(1) contrast(1.04) brightness(calc(0.72 - var(--pg-p) * 0.3)); }
.tp-hero--dim .pg-hero__scrim {
	background:
		linear-gradient(90deg, rgb(var(--pg-shade) / 0.94) 0%, rgb(var(--pg-shade) / 0.86) 38%, rgb(var(--pg-shade) / 0.5) 62%, rgb(var(--pg-shade) / 0.12) 82%),
		linear-gradient(0deg, rgb(var(--pg-shade) / 0.9) 0%, rgb(var(--pg-shade) / 0.35) 28%, rgb(var(--pg-shade) / 0) 46%),
		linear-gradient(180deg, rgb(var(--pg-shade) / 0.55) 0%, rgb(var(--pg-shade) / 0) 20%),
		radial-gradient(60% 50% at 18% 44%, color-mix(in srgb, var(--ms-brand) 34%, transparent), transparent 70%);
}

/* 2026-10-01: every dark band's photo panel melts into the ground (user liked the cards-band fade);
   plain bands fade on the copy-facing side and softly at the bottom */
/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.tp-band:not(.tp-band--cards) .tp-band__panel {
	-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%), linear-gradient(var(--tp-mask-x, 90deg), #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 70%, transparent 100%), linear-gradient(var(--tp-mask-x, 90deg), #000 55%, transparent 100%);
	-webkit-mask-composite: source-in; mask-composite: intersect;
}
.tp-band--r:not(.tp-band--cards) .tp-band__panel { --tp-mask-x: 270deg; }
@media (max-width: 64rem) {
	/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.tp-band:not(.tp-band--cards) .tp-band__panel { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
}

/* Office address card (bogota; reusable through OFFICE_ADDRESS in tools/build-subpages.py) */
.tp-office__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: center; }
.tp-office__head { grid-column: 1 / span 5; }
.tp-office__card { grid-column: 7 / span 6; display: grid; gap: clamp(1rem, 1.6vw, 1.4rem); padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: var(--ms-radius-lg); }
.tp-office__label { margin: 0; display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ms-ink-soft); }
.tp-office__pin { flex: none; color: var(--ms-brand); }
.tp-office__addr { display: grid; gap: 0.15rem; font-style: normal; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.55rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--ms-ink); text-wrap: balance; }
.tp-office__addr span:first-child { font-weight: 600; }
.tp-office__ref { margin: 0; max-width: 44ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); text-wrap: pretty; }
.tp-office__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding-block-start: 0.5rem; }
@media (max-width: 64rem) {
	.tp-office__head, .tp-office__card { grid-column: 1 / -1; }
	.tp-office__head { margin-block-end: 1.5rem; }
}

/* 2026-10-01 (bpo-kpo): closing photo with a centred face, so the heading wraps in a narrow left column and the bold line drops its 1.22em step */
@media (min-width: 64.01rem) {
	.tp-close--narrow .pg-close__lead, .tp-close--narrow .pg-close__lead.tp-close__lead--wide { max-width: 26rem; }
	.tp-close--narrow .pg-close__h strong { font-size: 1em; }
}

/* 2026-10-01 (bpo-kpo): portrait whose head reaches the top edge of the photo, so the plate starts below the nav and fades in from the dark frame */
@media (min-width: 64.01rem) {
	/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.tp-hero--drop .pg-hero__media { inset-block-start: 4.75rem; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%); mask-image: linear-gradient(180deg, transparent 0, #000 9%); }
}

/* 2026-10-01 (bpo-kpo): bright closing photos get a dimmer plate and a deeper scrim on the heading side */
.tp-close--dim .pg-close__media img { filter: grayscale(1) contrast(1.04) brightness(0.68); }
.tp-close--dim .pg-close__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgb(var(--pg-shade) / 0.88) 0%, rgb(var(--pg-shade) / 0.7) 38%, rgb(var(--pg-shade) / 0.25) 62%, transparent 80%); }

/* 2026-10-01 (ciberseguridad): the portrait slides right so the face clears the copy; the plate fades in from the left into the dark frame */
@media (min-width: 64.01rem) {
	/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.tp-hero--shift .pg-hero__media { inset-inline-start: 22%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
	/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.tp-hero--shift.tp-hero--drop .pg-hero__media {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 9%);
		mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 9%);
		-webkit-mask-composite: source-in; mask-composite: intersect;
	}
}

/* 2026-10-01 (colombia): a second consecutive pull-quote section becomes a centred feature card, so the two never mirror each other */
.tp-feature { display: grid; justify-items: center; text-align: center; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
.tp-feature__head { display: grid; justify-items: center; }
.tp-feature__head .ms-kicker { justify-content: center; }
.tp-feature__head .tp-title { max-width: 22ch; }
.tp-feature__card { position: relative; margin: 0; width: min(100%, 52rem); padding: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.75rem, 5vw, 4rem); border-radius: var(--ms-radius-lg); }
.tp-feature__mark { display: block; width: 3rem; height: 2px; margin: 0 auto clamp(1.25rem, 2.4vw, 1.75rem); background: var(--ms-brand); }
.tp-feature__q { position: relative; margin: 0; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.45rem, 1rem + 1.3vw, 2.15rem); line-height: 1.22; letter-spacing: -0.005em; color: var(--ms-ink); text-wrap: balance; }
.tp-feature__rest { max-width: 60ch; }
.tp-feature__rest .tp-copy { justify-items: center; }
.tp-feature__rest .tp-copy p { margin-inline: auto; color: var(--ms-ink-soft); }
.tp-feature__rest .tp-copy { gap: 1rem; }

/* 2026-10-01 (construccion-infraestructura-real-estate): hub front cards, where the whole glass card links to the child practice */
.tp-col--link { padding: 0; display: flex; }
.tp-col--link .tp-col__a { flex: 1; }
.tp-col__a { display: flex; flex-direction: column; gap: 0.9rem; height: 100%; padding: clamp(1.5rem, 2.4vw, 2rem); color: inherit; text-decoration: none; border-radius: inherit; }
.tp-col__go { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: auto; padding-block-start: 1rem;
	font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-brand); }
.tp-col__a:hover .ms-cta__circle, .tp-col__a:focus-visible .ms-cta__circle { background: var(--ms-brand); border-color: var(--ms-brand); color: var(--ms-on-dark); }
.tp-col__a:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; }

/* 2026-10-02 (data centers): a shifted portrait that still touches a long H1 slides further right */
@media (min-width: 64.01rem) { .tp-hero--shift.tp-hero--shift-more .pg-hero__media { inset-inline-start: 34%; } }

/* =====================================================================
   2026-10-02  Team pages: one grouped people section, a small title per area
   ===================================================================== */
.tp-people-groups { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); }
.tp-people-g { display: grid; gap: 1.25rem; padding-block-start: 1.25rem; border-block-start: 1px solid rgb(51 51 51 / 0.14); }
.tp-people-g__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; }
.tp-people-g__t { margin: 0; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-ink); }
.tp-people-g__note p { margin: 0; max-width: 48ch; font-size: var(--ms-body-sm); line-height: 1.5; color: var(--ms-ink-soft); }
.tp-people-groups .tp-people { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.tp-people-groups .tp-person__frame { aspect-ratio: 1 / 1; }
.tp-people-groups .tp-person__frame span { font-size: clamp(2.6rem, 2rem + 1.6vw, 3.6rem); }
.tp-people-groups .tp-person__n { font-size: 1.15rem; }

/* =====================================================================
   2026-10-02  Process timeline: horizontal steps (distinct from the index rows of "Siga explorando")
   ===================================================================== */
.tp-tl { position: relative; display: grid; grid-template-columns: repeat(var(--tl-n, 4), minmax(0, 1fr)); gap: var(--ms-grid-gap); margin: 0; padding: 0; list-style: none; }
.tp-tl--3 { --tl-n: 3; } .tp-tl--5 { --tl-n: 5; }
.tp-tl::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0.55rem; height: 1px; background: linear-gradient(90deg, var(--ms-brand), color-mix(in srgb, var(--ms-brand) 20%, transparent)); }
.tp-tl__i { position: relative; display: grid; align-content: start; gap: 0.6rem; padding-block-start: 2.25rem; }
/* The delivery writes background: var(--ms-surface, #f5f5f5); the fallback is unreachable
   because --ms-surface is defined at :root in tokens.css, as it is in the delivery's own
   marble-tokens.css, so the literal is dropped rather than carried into the theme. */
.tp-tl__dot { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--ms-surface); border: 2px solid var(--ms-brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ms-brand) 10%, transparent); }
.tp-tl__n { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-brand); }
.tp-tl__t { margin: 0; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem); line-height: 1.12; color: var(--ms-ink); text-wrap: balance; }
.tp-tl__p { margin: 0; max-width: 30ch; font-size: var(--ms-body-sm); line-height: 1.55; color: var(--ms-ink-soft); }
.tp-tl__after { margin-block-start: clamp(2.25rem, 4vw, 3rem); max-width: 60ch; padding-block-start: 1.25rem; border-block-start: 1px solid rgb(51 51 51 / 0.14); }
.tp-tl__after p { margin: 0; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); }
.tp-section.is-armed:not(.is-in) .tp-tl__i { opacity: 0; transform: translateY(1rem); }
.tp-section.is-in .tp-tl__i { transition: opacity 0.7s ease, transform 0.9s var(--ms-ease); }
.tp-section.is-in .tp-tl__i:nth-child(2) { transition-delay: 0.1s; } .tp-section.is-in .tp-tl__i:nth-child(3) { transition-delay: 0.2s; } .tp-section.is-in .tp-tl__i:nth-child(4) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) { .tp-section.is-armed:not(.is-in) .tp-tl__i { opacity: 1; transform: none; } }
@media (max-width: 52rem) {
	.tp-tl { grid-template-columns: 1fr; gap: 1.75rem; padding-inline-start: 2rem; }
	.tp-tl::before { inset-block: 0.55rem 0; inset-inline-start: 0.5rem; inset-inline-end: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--ms-brand), color-mix(in srgb, var(--ms-brand) 20%, transparent)); }
	.tp-tl__i { padding-block-start: 0; }
	.tp-tl__dot { inset-inline-start: -2rem; }
}

/* 2026-10-02  Index side title: a full grid column of air before the rows, so long bold titles never touch the list */
@media (min-width: 64.01rem) {
	.tp-idx-side { grid-column: 1 / span 4; }
	.tp-idx-side .ms-title { text-wrap: balance; }
}

/* 2026-10-02  Every subpage hero at full height on desktop, like the hubs (user decision); mobile keeps its own rule.
   The frame and the section both read --tp-hero-min (block 1), so the height is set there, never on the section alone. */
@media (min-width: 64.01rem) {
	.pg-hero--short { --tp-hero-min: max(calc(100svh - 2.25rem), 40rem); }
}

/* 2026-10-02  Closing photo with a person behind the copy: slide it right and fade it in from the left (desktop) */
@media (min-width: 64.01rem) {
	/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
	.tp-close--shift .pg-close__media { inset-inline-start: 34%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
	.tp-close--shift .pg-close__media img { object-position: 50% 50%; }
}

/* =====================================================================
   2026-10-03  Appended from <delivery marble-paginas-revisadas-completas-2026-10-03>
   /assets/css/marble-templates.css lines 847-989 (T1, reviewed-pages-batch-3).

   The delivered sheet is the previous one plus a pure 143-line append: 0 lines
   removed, 0 modified. Thirteen unrelated blocks, not one feature. Taken from
   the delivered bytes, not retyped. Three declared deviations, all colour:
   the single `color: #fff` on .tp-rm__i--now .tp-rm__chip becomes
   --ms-on-dark (#ffffff, the sheet's own substitution), and the #000 mask
   stops of .tp-hero--lift and .tp-hero--shift-max each carry the standard
   mask-stop exemption. Everything else, rgb() channel triplets and the
   `white 10%` color-mix operand included, is byte-for-byte the delivery's.
   ===================================================================== */

/* 2026-10-02  Pull section with a small floating plate under the title (PULL_PHOTO): breaks a long run of text on desktop */
.tp-pull__fig { display: none; }
@media (min-width: 64.01rem) {
	.tp-pull__fig { display: block; width: min(18rem, 66%); margin: clamp(2rem, 3vw, 2.75rem) 0 0 14%; }
	.tp-pull__fig .tp-plate { aspect-ratio: 4 / 3; border-radius: 1.5rem; overflow: hidden; isolation: isolate; box-shadow: 0 1.5rem 3rem -1.5rem rgb(51 51 51 / 0.35); }
	.tp-pull__fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
	html.mo-on .tp-pull__fig { animation: tp-pull-float 7s ease-in-out infinite alternate; }
}
@keyframes tp-pull-float { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-0.9rem) rotate(0.5deg); } }
@media (prefers-reduced-motion: reduce) { html.mo-on .tp-pull__fig { animation: none; } }

/* 2026-10-03: hero people photos kept bright, with a dark gradient only behind the copy (HERO_LEFT_SCRIM in build-subpages.py) */
.tp-hero--leftscrim .pg-hero__media img { filter: grayscale(1) contrast(1.05) brightness(calc(1.08 - var(--pg-p) * 0.3)); }
.tp-hero--leftscrim .pg-hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgb(20 17 18 / 0.9) 0%, rgb(20 17 18 / 0.72) 34%, rgb(20 17 18 / 0.25) 52%, rgb(20 17 18 / 0) 62%); }
@media (max-width: 40rem) { .tp-hero--leftscrim .pg-hero__media::after { background: linear-gradient(0deg, rgb(20 17 18 / 0.9) 0%, rgb(20 17 18 / 0.6) 55%, rgb(20 17 18 / 0.2) 100%); } }

/* 2026-10-03: roadmap composition (ROADMAP in build-subpages.py): "now" solid glass card, "next" dashed card, scope rings that grow */
.tp-rm { display: grid; grid-template-columns: minmax(0, 1fr) clamp(3rem, 7vw, 6.5rem) minmax(0, 1fr); align-items: stretch; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.tp-rm__i { position: relative; display: grid; align-content: start; justify-items: start; gap: 0.85rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--ms-radius-lg); overflow: hidden; }
.tp-rm__i--now { background: linear-gradient(150deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.6)); box-shadow: inset 0 0 0 1px rgb(51 51 51 / 0.07), 0 2rem 3.5rem -2.25rem rgb(63 21 28 / 0.35); }
.tp-rm__i--next { background: radial-gradient(80% 70% at 85% 10%, color-mix(in srgb, var(--ms-brand) 7%, transparent), transparent 70%); border: 1.5px dashed color-mix(in srgb, var(--ms-brand) 35%, transparent); }
.tp-rm__chip { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; padding: 0.45rem 0.8rem; border-radius: 999px; }
.tp-rm__i--now .tp-rm__chip { background: var(--ms-brand); color: var(--ms-on-dark); }
.tp-rm__i--next .tp-rm__chip { color: var(--ms-brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-brand) 40%, transparent); }
.tp-rm__scope { position: absolute; right: clamp(1.25rem, 3vw, 2.25rem); top: clamp(1.25rem, 3vw, 2rem); display: block; width: 9.5rem; height: 9.5rem; pointer-events: none; }
.tp-rm__scope i { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; }
.tp-rm__scope i:nth-child(1) { width: 0.7rem; background: var(--ms-brand); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ms-brand) 18%, transparent); }
.tp-rm__scope i:nth-child(2) { width: 4.5rem; border: 1px solid color-mix(in srgb, var(--ms-brand) 45%, transparent); }
.tp-rm__scope i:nth-child(3) { display: none; }
.tp-rm__i--next .tp-rm__scope i:nth-child(1) { background: transparent; box-shadow: inset 0 0 0 2px var(--ms-brand); }
.tp-rm__i--next .tp-rm__scope i:nth-child(2) { width: 9rem; border-style: dashed; }
.tp-rm__i--next .tp-rm__scope i:nth-child(3) { display: block; width: 4.5rem; border: 1px solid color-mix(in srgb, var(--ms-brand) 25%, transparent); }
.tp-rm__i .tp-rm__t { margin-block-start: clamp(3.5rem, 6vw, 5rem); }
.tp-rm__t { margin: 0; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); line-height: 1.05; color: var(--ms-ink); }
.tp-rm__p { margin: 0; max-width: 40ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); }
.tp-rm__place { display: inline-flex; align-items: center; gap: 0.4rem; margin-block-start: 0.35rem; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-ink-subtle); }
.tp-rm__place svg { width: 1rem; height: 1rem; fill: none; stroke: var(--ms-brand); stroke-width: 1.6; }
.tp-rm__link { position: relative; display: grid; place-items: center; }
.tp-rm__link span { position: relative; display: block; width: 100%; height: 2px; background: linear-gradient(90deg, var(--ms-brand), color-mix(in srgb, var(--ms-brand) 25%, transparent)); }
.tp-rm__link span::after { content: ""; position: absolute; right: -2px; top: 50%; width: 0.65rem; height: 0.65rem; border-top: 2px solid color-mix(in srgb, var(--ms-brand) 45%, transparent); border-right: 2px solid color-mix(in srgb, var(--ms-brand) 45%, transparent); translate: 0 -50%; rotate: 45deg; }
html.pl-on .tp-roadmap.is-armed:not(.is-in) .tp-rm__link span { transform: scaleX(0); }
html.pl-on .tp-roadmap.is-in .tp-rm__link span { transform-origin: left; transition: transform 1.2s var(--ms-ease) 0.35s; }
@media (max-width: 52rem) {
	.tp-rm { grid-template-columns: 1fr; gap: 0; }
	.tp-rm__scope { width: 7rem; height: 7rem; } .tp-rm__i--next .tp-rm__scope i:nth-child(2) { width: 6.6rem; } .tp-rm__scope i:nth-child(2), .tp-rm__i--next .tp-rm__scope i:nth-child(3) { width: 3.4rem; }
	.tp-rm__link { height: 3rem; }
	.tp-rm__link span { width: 2px; height: 100%; background: linear-gradient(180deg, var(--ms-brand), color-mix(in srgb, var(--ms-brand) 25%, transparent)); }
	.tp-rm__link span::after { right: auto; left: 50%; top: auto; bottom: -2px; translate: -50% 0; rotate: 135deg; }
}
@media (prefers-reduced-motion: reduce) { .tp-roadmap .tp-rm__link span { transform: none !important; transition: none !important; } }

/* 2026-10-03: timeline with a photo beside the title (TIMELINE_PHOTO in build-subpages.py) */
.tp-tl__fig { margin: 0 0 1.25rem; display: grid; gap: 0.6rem; }
.tp-tl__frame { overflow: hidden; border-radius: var(--ms-radius-lg); aspect-ratio: 16 / 10; box-shadow: 0 1.75rem 3rem -2rem rgb(63 21 28 / 0.45); }
.tp-tl__frame picture, .tp-tl__frame img { display: block; width: 100%; height: 100%; }
.tp-tl__frame img { object-fit: cover; object-position: 50% 35%; filter: grayscale(1); transition: transform 1.2s var(--ms-ease); }
.tp-tl__fig:hover .tp-tl__frame img { transform: scale(1.03); }
.tp-tl__cap { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-ink-subtle); }
@media (prefers-reduced-motion: reduce) { .tp-tl__frame img { transition: none; } }

/* 2026-10-03: timeline with a large photo beside the title (nuestra-historia) */
.tp-tl__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 2rem; align-items: center; margin-block-end: clamp(3rem, 6vw, 4.5rem); }
.tp-tl__headmain { display: grid; gap: 1.25rem; align-content: center; }
.tp-tl__headmain .ms-title { margin: 0; }
.tp-tl__lead { max-width: 34ch; font-size: var(--ms-body-lg, 1.125rem); line-height: 1.55; color: var(--ms-ink-soft); }
.tp-tl__lead p { margin: 0; }
.tp-tl__head .tp-tl__fig { margin: 0; }
.tp-tl__head .tp-tl__frame { aspect-ratio: 16 / 9; }
.tp-timeline--photo .tp-tl__p { font-size: var(--ms-body-sm); }
@media (max-width: 52rem) { .tp-tl__head { grid-template-columns: 1fr; } }
.tp-tl__lead p, .tp-tl__lead .tp-copy p { font-size: inherit; line-height: inherit; color: inherit; }

/* 2026-10-03: two office cards side by side (OFFICE_PAIR, nuestras-oficinas) */
.tp-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.tp-offices__card { display: grid; align-content: start; gap: 0.85rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--ms-radius-lg); }
.tp-offices__city { margin: 0.25rem 0 0; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); line-height: 1; color: var(--ms-ink); }
.tp-offices__card .tp-office__addr { display: grid; font-style: normal; font-family: var(--ms-font-display); font-size: clamp(1.1rem, 1rem + 0.3vw, 1.3rem); line-height: 1.3; color: var(--ms-ink); }
.tp-offices__card .tp-office__addr span + span { color: var(--ms-ink-soft); font-weight: 300; }
.tp-offices__p { margin: 0.25rem 0 0.5rem; max-width: 46ch; font-size: var(--ms-body); line-height: 1.6; color: var(--ms-ink-soft); }
.tp-offices__card .tp-office__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin-block-start: auto; padding-block-start: 0.75rem; border-top: 1px solid rgb(51 51 51 / 0.08); }
@media (max-width: 52rem) { .tp-offices { grid-template-columns: 1fr; } }
.tp-hero--leftscrim-wide .pg-hero__media img { filter: grayscale(1) contrast(1.05) brightness(calc(0.92 - var(--pg-p) * 0.3)); }
.tp-hero--leftscrim-wide .pg-hero__media::after { background: linear-gradient(90deg, rgb(20 17 18 / 0.92) 0%, rgb(20 17 18 / 0.82) 40%, rgb(20 17 18 / 0.45) 62%, rgb(20 17 18 / 0) 82%); }
/* office cards: the actions row (divider + buttons) always sits on the card's bottom edge */
.tp-offices__card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; height: 100%; }
.tp-offices__card .tp-office__actions { align-self: stretch; margin-block-start: auto; }
.tp-offices__p { flex: 0 0 auto; }

/* downloadable guide links (2026-10-03) */
.tp-dl { font-size: 0.8em; opacity: 0.7; white-space: nowrap; }

/* =====================================================================
   2026-10-03  Nine-box panel (potential-talent-review): the cards band draws the 3x3 talent matrix instead of a photo
   ===================================================================== */
.tp-nine { display: grid; place-items: center; padding: clamp(2rem, 4vw, 3.5rem); }
.tp-nine__fig { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 0.9rem; width: min(100%, 22rem); }
.tp-nine__grid { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; aspect-ratio: 1; }
.tp-nine__c { border-radius: 0.6rem; border: 1px solid rgb(255 255 255 / 0.14); background: rgb(255 255 255 / 0.04); }
.tp-nine__c--mid { background: color-mix(in srgb, var(--ms-brand) 22%, transparent); border-color: color-mix(in srgb, var(--ms-brand) 45%, transparent); }
.tp-nine__c--hi { background: color-mix(in srgb, var(--ms-brand) 70%, transparent); border-color: color-mix(in srgb, var(--ms-brand) 90%, white 10%); box-shadow: 0 0 2.5rem color-mix(in srgb, var(--ms-brand) 45%, transparent); }
.tp-nine__x, .tp-nine__y { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: rgb(255 255 255 / 0.6); }
.tp-nine__x { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 0.6rem; }
.tp-nine__x::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgb(255 255 255 / 0.4), transparent); }
.tp-nine__y { grid-column: 1; grid-row: 1; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: 0.6rem; }
.tp-nine__y::after { content: ""; flex: 1; width: 1px; background: linear-gradient(0deg, transparent, rgb(255 255 255 / 0.4)); }
.tp-band--cards .tp-band__panel.tp-nine { -webkit-mask-image: none; mask-image: none; }
.tp-band__panel.tp-nine::after { content: none; }
.tp-section.is-armed:not(.is-in) .tp-nine__c { opacity: 0; transform: scale(0.85); }
.tp-section.is-in .tp-nine__c { transition: opacity 0.6s ease, transform 0.8s var(--ms-ease); }
.tp-section.is-in .tp-nine__c:nth-child(3n+2) { transition-delay: 0.08s; } .tp-section.is-in .tp-nine__c:nth-child(3n) { transition-delay: 0.16s; }
.tp-section.is-in .tp-nine__c--hi { transition-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) { .tp-section.is-armed:not(.is-in) .tp-nine__c { opacity: 1; transform: none; } }
@media (max-width: 52rem) { .tp-nine { aspect-ratio: auto; padding-block: 2.5rem 0; } .tp-nine__fig { width: min(100%, 16rem); } }

/* six-phase timeline: tighter columns, staggered reveal for steps 5 and 6 */
.tp-tl--6 { --tl-n: 6; column-gap: clamp(1rem, 1.6vw, 1.5rem); }
.tp-tl--6 .tp-tl__t { font-size: clamp(1.1rem, 0.98rem + 0.4vw, 1.3rem); }
.tp-section.is-in .tp-tl__i:nth-child(5) { transition-delay: 0.4s; } .tp-section.is-in .tp-tl__i:nth-child(6) { transition-delay: 0.5s; }
@media (min-width: 52.01rem) and (max-width: 72rem) { .tp-tl--6 { --tl-n: 3; row-gap: 2.5rem; } .tp-tl--6::before { display: none; } }

/* 2026-10-03  Steps photo with the Home's rounded corners (presidencias): 1.5rem radius, soft shadow, no bottom fade */
.tp-steps--round .tp-steps__photo { border-radius: 1.5rem; isolation: isolate; box-shadow: 0 1.5rem 3rem -1.5rem rgb(51 51 51 / 0.35); }
.tp-steps--round .tp-steps__photo img { -webkit-mask-image: none; mask-image: none; }

/* 2026-10-03  Privacy page: four summary cards and the full-document card */
.tp-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 72rem) { .tp-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .tp-cols--4 { grid-template-columns: 1fr; } }
.tp-legal-note { margin: 0; font-size: var(--ms-body-sm); line-height: 1.55; color: var(--ms-ink-soft); }
.tp-legal-doc__card { display: grid; gap: 1rem; max-width: 48rem; margin-inline: auto; padding: clamp(2rem, 4vw, 3.25rem); border-radius: 1.5rem; }
.tp-legal-doc__card .ms-kicker { margin: 0; }
.tp-legal-doc__t { margin: 0; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; color: var(--ms-ink); text-wrap: balance; }
.tp-legal-doc__p { margin: 0; max-width: 56ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); }
.tp-legal-doc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-block-start: 0.5rem; }

/* 2026-10-03  Hero lift: a photo cut at the shoulders in the source moves up inside the hero and its bottom edge fades into the dark */
/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.tp-hero--lift .pg-hero__media img { translate: 0 -9%; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 91%); mask-image: linear-gradient(180deg, #000 80%, transparent 91%); }
@media (max-width: 52rem) { .tp-hero--lift .pg-hero__media img { translate: 0 -6%; } }

/* 2026-10-03  Hero shift max: two-person photos slide furthest right so no face sits under the H1 (soluciones) */
/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
@media (min-width: 64.01rem) { .tp-hero--shift.tp-hero--shift-max .pg-hero__media { inset-inline-start: 44%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); } }