/* =====================================================================
   Marble Intelligence — practice page (template 11.1, docs/design-system.md)
   Consumes tokens.css + components.css. Page compositions below mirror the
   approved Home; every brand value comes from the territorial tokens set by
   <body data-practice="intelligence">.
   Manual ch.05: colour marks under 32px on light ground use the digital green (--mb-petrol-digital).

   Ported from build/extracted/css/intelligence.css (T6, design-system-v2):
   the standalone-preview chrome (.ip-preview-bar and its children — the bar
   was the approved mockup's own "you are viewing a preview" banner, not part
   of the shipped design) is dropped, every raw hex outside a mask/-webkit-mask
   gradient stop is replaced by its exact-equivalent token, and the S.03 client
   heading + breathing ruler-dot rules that had drifted into the generated
   tokens.css tail are ported back here, where page CSS belongs.

   Reconciled against marble-paginas-revisadas-completas-2026-10-03/intelligence.html
   (T8), rule by rule, against all three of its inlined <style> blocks:

     - Its page block, <style id="marble-intelligence">, is 50,486 B / 371
       declaration blocks. 303 of its keys are here already, and of those only
       ONE declaration differs: .ip-line, which gains the inline overhang pair
       (padding-inline / margin-inline 0.08em) and takes the block-end pair from
       0.07em to 0.16em — the same promotion T1 ported into marble-page.css's
       .pg-line. Taken from the delivered bytes.
     - Its other 60 keys are the standalone file's own chrome and preview banner
       (.ip-preview-bar, .ip-head, .ip-logo, .ip-nav and its .menu/.sub-menu
       tree, .ip-drop, .ip-foot*). The theme prints the header and the footer
       itself (inc/chrome.php, page.css), nothing emits those classes, and the
       previous port dropped them for the same reason. Not ported, deliberately.
     - The nine keys this sheet has and its page block does not (.ip-clients__label
       + .ip-clients and the ruler-dot drift/pulse set) are still delivered — in
       the delivery's TOKENS block, the generated-file tail they had drifted into,
       which is why they live here. Compared declaration by declaration they agree,
       and ONE of that tail's rules was missing here: .ip-shl-sec .ip-clients__label,
       added below with the measurement that found it.
     - The delivery's components block is the shared layer, loaded as
       components.css; nothing of it belongs here.

   Everything else is unchanged, including the 17 `color: #fff` the delivered
   block writes where this sheet substitutes --ms-on-dark (the sheet's standing
   substitution, #ffffff, applied from the first port).
   ===================================================================== */
[data-practice="intelligence"] {
	--ip-shade: 8 20 17;           /* petrol-tinted black for photo scrims (rgb channels) */
	--ip-neutral-glass: 19 21 20;  /* navigation stays neutral grey (manual, chapter 09) */
	--ip-margin: max(1.5rem, 5.2vw);
}

.ip-wrap { position: relative; }

/* The practice lockup's "by Marble Headhunter" line (the lockup symbol is in the theme sprite). */
.mb-lockup__endorse { opacity: 0.72; }

/* ---------- Intro band: mirrors the Home hero frame and its scroll hand-off ---------- */
.ip-hero { --ip-p: 0; position: relative; height: max(calc(100svh - 2.25rem), 40rem); color: var(--ms-on-dark); isolation: isolate; }
.ip-hero__frame {
	position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: var(--ms-dark);
	clip-path: inset(calc(var(--ip-p) * 1.5rem) calc(var(--ip-p) * 2.4vw) calc(var(--ip-p) * 1.5rem) round calc(var(--ip-p) * var(--ms-radius-lg)));
	will-change: clip-path;
}
.ip-hero__media { position: absolute; inset: 0; z-index: -3; transform: scale(calc(1 + var(--ip-p) * 0.06)); transform-origin: 50% 40%; }
.ip-hero__media picture { display: block; width: 100%; height: 100%; animation: ip-settle 2.4s var(--ms-ease) both; }
.ip-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: grayscale(1) contrast(1.06) brightness(calc(1 - var(--ip-p) * 0.35)); }
@keyframes ip-settle { from { transform: scale(1.1); opacity: 0.001; } 30% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
.ip-hero__scrim {
	position: absolute; inset: 0; z-index: -2;
	background:
		linear-gradient(90deg, rgb(var(--ip-shade) / 0.84) 0%, rgb(var(--ip-shade) / 0.68) 34%, rgb(var(--ip-shade) / 0.22) 56%, rgb(var(--ip-shade) / 0) 68%),
		linear-gradient(0deg, rgb(var(--ip-shade) / 0.92) 0%, rgb(var(--ip-shade) / 0.6) 24%, rgb(var(--ip-shade) / 0) 46%),
		linear-gradient(180deg, rgb(var(--ip-shade) / 0.55) 0%, rgb(var(--ip-shade) / 0) 20%),
		radial-gradient(60% 50% at 18% 44%, color-mix(in srgb, var(--ms-brand) 42%, transparent), transparent 70%),
		radial-gradient(26% 36% at 92% 90%, rgb(var(--ip-shade) / 0.6), transparent 72%);
}
.ip-hero__grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.22; mix-blend-mode: overlay; background-image: var(--ms-grain); }

.ip-hero__content {
	position: absolute; inset-inline-start: var(--ms-container-edge); inset-block-start: 50%;
	width: min(52rem, 64vw);
	translate: 0 calc(-50% - var(--ip-p) * 4rem); opacity: calc(1 - var(--ip-p) * 1.4);
	display: grid;
}
.ip-hero__title { margin: 0; font-weight: inherit; }
.ip-hero__kicker {
	display: flex; align-items: center; gap: 0.9rem; margin-block-end: var(--ms-kicker-gap);
	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.3;
	color: rgb(255 255 255 / 0.82);
	opacity: 0; animation: ip-fade 1s var(--ms-ease) 0.35s forwards;
}
.ip-hero__kicker .ip-idx { color: var(--ms-brand-on-dark); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.ip-hero__kicker i { width: 2.75rem; height: 1px; background: linear-gradient(90deg, var(--ms-brand-on-dark), rgb(255 255 255 / 0.25)); transform-origin: left; animation: ip-draw 1.1s var(--ms-ease) 0.5s both; }
.ip-hero__display { display: block; font-family: var(--ms-font-display); font-size: var(--ms-display); line-height: 0.94; letter-spacing: -0.012em; color: var(--ms-on-dark); }
.ip-line { display: block; overflow: hidden; padding-inline: 0.08em; margin-inline: -0.08em; padding-block-end: 0.16em; margin-block-end: -0.16em; font-weight: 600; }
.ip-line--light { font-weight: 300; color: rgb(255 255 255 / 0.94); }
.ip-line > span { display: inline-block; transform: translateY(108%); animation: ip-rise 1.25s var(--ms-ease) forwards; }
.ip-line:nth-child(1) > span { animation-delay: 0.45s; }
.ip-line:nth-child(2) > span { animation-delay: 0.58s; }
.ip-line:nth-child(3) > span { animation-delay: 0.71s; }
.ip-line:nth-child(4) > span { animation-delay: 0.84s; }
.ip-hero__lede { font-size: var(--ms-body); line-height: 1.65; color: rgb(255 255 255 / 0.92); text-wrap: pretty; text-shadow: 0 1px 2px rgb(0 0 0 / 0.55), 0 1px 14px rgb(0 0 0 / 0.6); }
@keyframes ip-draw { from { transform: scaleX(0); } }
@keyframes ip-fade { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
@keyframes ip-rise { to { transform: translateY(0); } }

/* Hero CTA: glass pill grows out of the circle (Home hero language) */
.ip-hero-cta {
	position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 1.1rem;
	margin-block-start: clamp(1.75rem, 3.6vh, 2.5rem); padding: 0.35rem 0.35rem 0.35rem 1.4rem;
	border-radius: var(--ms-radius-pill); color: var(--ms-on-dark); text-decoration: none; isolation: isolate;
	opacity: 0; animation: ip-fade 1s var(--ms-ease) 1.15s forwards;
}
.ip-hero-cta::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.22);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	clip-path: inset(0 0 0 calc(100% - 3.7rem) round 999px);
	transition: clip-path 0.7s var(--ms-ease), background-color 0.5s var(--ms-ease);
}
.ip-hero-cta__label { font-family: var(--ms-font-label); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; transition: letter-spacing 0.7s var(--ms-ease); }
.ip-hero-cta .ms-cta__circle { border-color: color-mix(in srgb, var(--ms-brand-on-dark) 85%, transparent); color: var(--ms-on-dark); background: radial-gradient(120% 90% at 30% 0%, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 62%), rgb(255 255 255 / 0.06); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 8px 18px -10px rgb(0 0 0 / 0.6); }
.ip-hero-cta:is(:hover, :focus-visible)::before { clip-path: inset(0 0 0 0 round 999px); background: rgb(255 255 255 / 0.16); }
.ip-hero-cta:is(:hover, :focus-visible) .ip-hero-cta__label { letter-spacing: 0.24em; }
.ip-hero-cta:is(:hover, :focus-visible) .ms-cta__circle { background: var(--ms-brand); border-color: var(--ms-brand); }
.ip-hero-cta:is(:hover, :focus-visible) svg { transform: translateX(3px); }
.ip-hero-cta:focus-visible { outline: 2px solid var(--ms-on-dark); outline-offset: 4px; }

/* Aside: the page's two axes as a quiet index, bottom right */
.ip-hero__aside {
	position: absolute; right: var(--ms-container-edge); bottom: clamp(1.75rem, 6vh, 3.75rem);
	width: min(22rem, 26vw); display: grid; gap: 1rem;
	padding-block-start: 1.25rem; border-block-start: 1px solid rgb(255 255 255 / 0.22);
	opacity: 0; animation: ip-fade 1.1s var(--ms-ease) 1.35s forwards; translate: 0 calc(var(--ip-p) * -2rem);
}
.ip-hero__aside::before { content: ""; position: absolute; top: -1px; left: 0; width: 3rem; height: 2px; background: var(--ms-brand-on-dark); }
/* Reading pool: the lede sits over a busy table, so a feathered dark, softly blurred ground sits behind it (no hard panel) */
/* 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. */
.ip-hero__aside::after {
	content: ""; position: absolute; inset: -3.5rem -3rem -2.5rem -3.5rem; z-index: -1; pointer-events: none;
	background: radial-gradient(closest-side, rgb(var(--ip-shade) / 0.82) 0%, rgb(var(--ip-shade) / 0.7) 55%, rgb(var(--ip-shade) / 0) 100%);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	-webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.ip-hero__credential { margin: 0; display: flex; align-items: center; gap: 0.7rem; 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.78); }
.ip-hero__credential::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--ms-brand-on-dark); }

@media (min-width: 64.01rem) and (max-height: 760px) {
	.ip-hero__display { font-size: clamp(3rem, 1rem + 4.2vw, 4.9rem); }
	.ip-hero-cta { margin-block-start: 1.25rem; }
}
@media (max-width: 64rem) {
	.ip-hero { height: auto; }
	.ip-hero__frame { position: relative; min-height: max(100svh, 44rem); }
	.ip-hero__media img { object-position: 70% 50%; }
	.ip-hero__content { position: relative; inset: auto; width: auto; translate: 0 calc(var(--ip-p) * -4rem); padding: 9rem var(--ms-gutter) 15rem; }
	.ip-hero__aside { left: var(--ms-gutter); right: var(--ms-gutter); width: auto; bottom: 1.75rem; }
	.ip-hero__scrim { background: linear-gradient(0deg, rgb(var(--ip-shade) / 0.94) 0%, rgb(var(--ip-shade) / 0.74) 55%, rgb(var(--ip-shade) / 0.55) 100%), radial-gradient(70% 50% at 20% 40%, color-mix(in srgb, var(--ms-brand) 35%, transparent), transparent 70%); }
}
@media (max-width: 40rem) {
	.ip-hero__display { font-size: clamp(2.6rem, 11vw, 3.4rem); }
}

/* ---------- Shared section bits ---------- */
.ip-lede-link { margin-block-start: 0.25rem; }
.ip-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.ip-list li { display: flex; align-items: baseline; gap: 0.85rem; font-size: var(--ms-body-sm); line-height: 1.6; color: var(--ms-ink-soft); }
.ip-list__n { font-family: var(--ms-font-label); font-weight: 600; font-size: 0.625rem; letter-spacing: 0.06em; color: var(--ms-brand); font-variant-numeric: tabular-nums; }
.ip-label { margin: 0 0 0.9rem; 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); }

/* ---------- S.01 Cuatro diagnósticos: dark explorer panel + four questions ---------- */
.ip-dx { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: start; }
.ip-dx__panel { grid-column: 1 / span 5; position: sticky; top: 6rem; display: grid; grid-template-rows: auto 1fr auto; gap: 1.5rem; min-height: 34rem; padding: 2rem 2rem 1.9rem; color: var(--ms-on-dark); }
.ip-dx__panel .ms-card__meta { color: var(--ms-brand-line); }
.ip-dx__count { font-variant-numeric: tabular-nums; color: rgb(255 255 255 / 0.72); }
.ip-dx__stage { display: grid; place-items: center; }
.ip-dx__stage > * { grid-area: 1 / 1; }
.ip-viz { width: 100%; max-width: 22rem; height: auto; overflow: visible; opacity: 0; transform: translateY(0.5rem); transition: opacity 0.45s ease, transform 0.7s var(--ms-ease); }
.ip-viz.is-active { opacity: 1; transform: none; transition-delay: 0.12s; }
.ip-viz text { font-family: var(--ms-font-label); font-weight: 600; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; fill: rgb(255 255 255 / 0.62); }
.ip-viz * { transform-box: fill-box; transform-origin: center; }
.ip-v-line { stroke: rgb(255 255 255 / 0.16); stroke-width: 1; fill: none; }
.ip-v-dash { stroke: rgb(255 255 255 / 0.4); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.ip-v-dot { fill: rgb(255 255 255 / 0.22); }
.ip-v-dot--mid { fill: rgb(255 255 255 / 0.6); }
.ip-v-dot--on { fill: var(--ms-brand-on-dark); }
.ip-v-ring { fill: none; stroke: var(--ms-brand-on-dark); stroke-width: 1.2; }
.ip-v-cell { fill: rgb(255 255 255 / 0.04); stroke: rgb(255 255 255 / 0.14); stroke-width: 1; }
.ip-v-cell--on { fill: color-mix(in srgb, var(--ms-brand-on-dark) 22%, transparent); stroke: color-mix(in srgb, var(--ms-brand-on-dark) 70%, transparent); }
.ip-v-node { fill: rgb(255 255 255 / 0.1); stroke: rgb(255 255 255 / 0.5); stroke-width: 1; }
.ip-v-node--gap { fill: none; stroke: var(--ms-brand-on-dark); stroke-width: 1.2; stroke-dasharray: 4 4; }
.ip-v-bar { fill: rgb(255 255 255 / 0.55); transform-origin: left center; }
.ip-v-goal { stroke: var(--ms-brand-on-dark); stroke-width: 2; }
.ip-v-gap { fill: color-mix(in srgb, var(--ms-brand-on-dark) 24%, transparent); transform-origin: left center; }
/* Each drawing builds when it becomes active */
.ip-viz:not(.is-active) .ip-v-dot, .ip-viz:not(.is-active) .ip-v-ring { transform: scale(0.2); opacity: 0; }
.ip-viz.is-active .ip-v-dot, .ip-viz.is-active .ip-v-ring { transition: transform 0.6s var(--ms-ease-spring), opacity 0.35s ease; transition-delay: calc(var(--d, 0) * 0.03s + 0.2s); }
.ip-viz:not(.is-active) .ip-v-bar, .ip-viz:not(.is-active) .ip-v-gap { transform: scaleX(0); }
.ip-viz.is-active .ip-v-bar, .ip-viz.is-active .ip-v-gap { transition: transform 0.9s var(--ms-ease); transition-delay: calc(var(--d, 0) * 0.07s + 0.25s); }
.ip-dx__caption { display: grid; gap: 0.6rem; padding-block-start: 1.25rem; border-block-start: 1px solid rgb(255 255 255 / 0.14); }
.ip-dx__caption > div { display: grid; }
.ip-dx__caption > div > * { grid-area: 1 / 1; }
.ip-dx__service { font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.6rem, 1.1rem + 0.9vw, 2.1rem); line-height: 1.02; color: var(--ms-on-dark); text-wrap: balance; opacity: 0; transform: translateY(0.4rem); transition: opacity 0.35s ease, transform 0.6s var(--ms-ease); }
.ip-dx__service.is-active { opacity: 1; transform: none; transition-delay: 0.1s; }
.ip-dx__service strong { font-weight: 600; }
.ip-dx__foot { 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-line); }

.ip-dx__list { grid-column: 7 / span 6; margin: 0; padding: 0; list-style: none; }
.ip-q {
	position: relative; display: grid; grid-template-columns: 2.25rem 1fr auto; column-gap: 1rem; align-items: start;
	padding: 1.6rem 0.25rem 1.7rem 0; color: var(--ms-ink); text-decoration: none;
}
.ip-q::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: var(--ms-line); transform-origin: left; }
.ip-dx__list li:last-child .ip-q { box-shadow: inset 0 -1px 0 var(--ms-line); }
/* Dwell progress: the active question draws its rule in brand color */
.ip-q::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--ms-brand); transform: scaleX(0); transform-origin: left; }
.ip-q.is-active::after { animation: ip-dwell 6.5s linear forwards; }
.ip-dx:hover .ip-q.is-active::after, .ip-dx:focus-within .ip-q.is-active::after { animation: none; transform: scaleX(1); }
@keyframes ip-dwell { to { transform: scaleX(1); } }
.ip-q__n { padding-block-start: 0.45rem; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); letter-spacing: 0.06em; color: var(--ms-ink-subtle); font-variant-numeric: tabular-nums; transition: color var(--ms-dur-micro) ease; }
.ip-q__body { display: grid; gap: 0.5rem; }
.ip-q__service { 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); }
.ip-q__t { font-family: var(--ms-font-display); font-weight: 400; font-size: clamp(1.45rem, 1.05rem + 0.8vw, 1.85rem); line-height: 1.08; text-wrap: balance; transition: transform var(--ms-dur-ui) var(--ms-ease); }
.ip-q__d { max-width: 44ch; font-size: var(--ms-body-sm); line-height: 1.65; color: var(--ms-ink-soft); }
.ip-q .ms-cta__circle { width: var(--ms-circle-sm); height: var(--ms-circle-sm); margin-block-start: 0.2rem; }
.ip-q .ms-cta__circle svg { width: 0.9rem; height: 0.9rem; }
.ip-q.is-active .ip-q__n { color: var(--ms-brand); }
.ip-q.is-active .ip-q__t { transform: translateX(0.3rem); }
.ip-q:is(:hover, :focus-visible) .ms-cta__circle { background: var(--ms-brand); border-color: var(--ms-brand); color: var(--ms-on-dark); }
.ip-q:is(:hover, :focus-visible) svg { transform: translateX(3px); }
.ip-q:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 2px; border-radius: 0.75rem; }
@media (max-width: 64rem) {
	.ip-dx__panel { grid-column: 1 / -1; position: relative; top: auto; min-height: 0; }
	.ip-dx__list { grid-column: 1 / -1; margin-block-start: 2rem; }
}
@media (max-width: 40rem) { .ip-dx__panel { padding: 1.5rem 1.25rem; } .ip-q { grid-template-columns: 1.75rem 1fr auto; } }

/* ---------- S.02 Datos de las personas: mosaic, dark territory for the order of delivery ---------- */
.ip-data__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ms-grid-gap); }
.ip-first { grid-column: 1 / span 5; grid-row: 1 / span 2; padding: 2.25rem 2.25rem 2rem; display: flex; flex-direction: column; gap: 1rem; color: var(--ms-on-dark); }
.ip-first .ms-card__meta { color: var(--ms-brand-line); }
.ip-first__title { margin-block-start: auto; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(2.2rem, 1.3rem + 1.9vw, 3.25rem); line-height: 0.98; letter-spacing: -0.01em; color: var(--ms-on-dark); text-wrap: balance; }
.ip-first__title strong { font-weight: 600; }
.ip-first__text { max-width: 40ch; font-size: var(--ms-body-sm); line-height: 1.7; color: var(--ms-on-dark-soft); }
.ip-first__text { padding-block-end: 0.25rem; }
/* Order of delivery: the person first, the aggregate after */
.ip-order { position: relative; margin: 1.25rem 0 2.25rem; padding: 0; list-style: none; display: grid; gap: 1.4rem; }
.ip-order::before { content: ""; position: absolute; left: 0.4rem; top: 0.6rem; bottom: 0.6rem; width: 1px; background: linear-gradient(to bottom, var(--ms-brand-on-dark), rgb(255 255 255 / 0.18)); transform-origin: top; }
.ip-order li { position: relative; display: grid; gap: 0.2rem; padding-inline-start: 2rem; }
.ip-order li::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--ms-brand-deep); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5); }
.ip-order li:first-child::before { background: var(--ms-brand-on-dark); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ms-brand-on-dark) 22%, transparent); }
.ip-order__l { 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.62); }
.ip-order__t { font-family: var(--ms-font-display); font-weight: 400; font-size: clamp(1.35rem, 1rem + 0.6vw, 1.65rem); line-height: 1.1; color: var(--ms-on-dark); }
.ip-order li:first-child .ip-order__t { font-weight: 600; }

.ip-agg, .ip-frame { grid-column: 6 / span 7; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.5rem 2.5rem; align-items: end; padding: 2rem 2.25rem; }
.ip-agg .ms-card__meta, .ip-frame .ms-card__meta { grid-column: 1 / -1; }
.ip-copy { display: grid; gap: 0.9rem; }
.ip-agg .ms-card__title, .ip-frame .ms-card__title { margin-block-start: 0; }
.ip-agg .ms-card__text, .ip-frame .ms-card__text { max-width: 42ch; }
/* Individual records resolve into three patterns */
.ip-patterns { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.1rem; align-self: center; }
.ip-people { display: grid; grid-template-columns: repeat(4, 0.5rem); gap: 0.45rem; }
.ip-people i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgb(51 51 51 / 0.28); transition: opacity 0.8s ease, transform 0.9s var(--ms-ease); }
.ip-bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.8rem; padding-inline-start: 1.1rem; border-inline-start: 1px solid var(--ms-line); }
.ip-bars li { display: grid; gap: 0.35rem; }
.ip-bars__l { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ms-ink-subtle); }
.ip-bars__track { position: relative; height: 6px; border-radius: 3px; background: rgb(51 51 51 / 0.08); }
.ip-bars__fill { position: absolute; inset: 0 var(--r, 30%) 0 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--mb-petrol-digital) 35%, transparent), var(--mb-petrol-digital)); transform-origin: left; }

.ip-frame__dl { margin: 0; display: grid; align-self: center; }
.ip-frame__dl > div { display: grid; gap: 0.3rem; padding-block: 0.9rem; border-block-start: 1px solid var(--ms-line); }
.ip-frame__dl > div:first-child { border-block-start: 0; padding-block-start: 0; }
.ip-frame__dl dt { 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); }
.ip-frame__dl dd { margin: 0; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.45rem, 1rem + 0.9vw, 2rem); line-height: 1.02; color: var(--ms-ink); text-wrap: balance; }
.ip-frame__dl > div:first-child dd { color: var(--ms-ink-subtle); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgb(51 51 51 / 0.35); }
.ip-frame__dl > div:last-child dd { justify-self: start; position: relative; font-weight: 600; color: var(--ms-brand); }
.ip-frame__dl > div:last-child dd::after { content: ""; position: absolute; inset-inline: 0; bottom: -0.3rem; height: 2px; background: var(--ms-brand); transform-origin: left; }
@media (max-width: 64rem) {
	.ip-first, .ip-agg, .ip-frame { grid-column: 1 / -1; grid-row: auto; }
	.ip-agg, .ip-frame { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) { .ip-first, .ip-agg, .ip-frame { padding: 1.75rem 1.5rem; } }

/* ---------- S.03 SHL y para quién: one ruler for every comparison, then the clients ---------- */
/* 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. */
.ip-shl-sec::before {
	content: ""; position: absolute; inset: 24% 0 10% 0; z-index: -1; pointer-events: none;
	background: radial-gradient(34% 46% at 28% 50%, color-mix(in srgb, var(--ms-brand-on-dark) 22%, transparent), transparent 70%), radial-gradient(30% 40% at 76% 62%, color-mix(in srgb, var(--ms-brand) 14%, 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%);
}
.ip-ruler { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem 3.5rem; align-items: center; padding: 2.25rem 2.5rem; }
.ip-ruler__copy { display: grid; gap: 1rem; align-content: start; }
.ip-ruler__copy .ms-card__title { margin-block-start: 0.25rem; }
.ip-ruler__copy .ms-card__text { max-width: 44ch; }
.ip-ruler__copy .ms-stats { margin-block-start: 0.75rem; }
.ip-lanes { display: grid; gap: 1.35rem; }
.ip-lane { display: grid; gap: 0.55rem; }
.ip-lane__l { display: flex; justify-content: space-between; gap: 1rem; 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); }
.ip-lane__l span:last-child { color: var(--ms-brand); }
.ip-lane svg { display: block; width: 100%; height: auto; overflow: visible; }
.ip-lane__axis { stroke: rgb(51 51 51 / 0.2); stroke-width: 1; }
.ip-lane__tick { stroke: rgb(51 51 51 / 0.22); stroke-width: 1; }
.ip-lane__dot { fill: rgb(51 51 51 / 0.34); transform-box: fill-box; transform-origin: center; }
.ip-lane__dot--on { fill: var(--mb-petrol-digital); }

.ip-clients { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); margin-block-start: clamp(3rem, 6vw, 4.5rem); }
.ip-clients__col { position: relative; grid-column: span 3; padding-block-start: 1.25rem; }
.ip-clients__col::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: var(--ms-line); transform-origin: left; }
.ip-clients__n { display: block; margin-block-end: 0.8rem; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); letter-spacing: 0.06em; color: var(--ms-brand); font-variant-numeric: tabular-nums; }
.ip-clients__t { font-family: var(--ms-font-display); font-weight: 400; font-size: clamp(1.4rem, 1.05rem + 0.7vw, 1.75rem); line-height: 1.08; color: var(--ms-ink); text-wrap: balance; }
.ip-clients__col p { margin-block-start: 0.6rem; max-width: 30ch; font-size: var(--ms-body-sm); line-height: 1.6; color: var(--ms-ink-soft); }
.ip-bridge { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: end; margin-block-start: clamp(3.5rem, 7vw, 5.5rem); }
.ip-bridge .ms-quote { grid-column: 1 / span 7; }
.ip-bridge .ms-cta { grid-column: 9 / span 4; justify-self: end; margin-block-end: 0.35rem; }
@media (max-width: 64rem) {
	.ip-ruler { grid-template-columns: 1fr; }
	.ip-clients__col { grid-column: span 6; margin-block-end: 2rem; }
	.ip-bridge .ms-quote, .ip-bridge .ms-cta { grid-column: 1 / -1; justify-self: start; }
	.ip-bridge .ms-cta { margin-block-start: 1.75rem; }
}
@media (max-width: 40rem) { .ip-ruler { padding: 1.75rem 1.5rem; } .ip-clients__col { grid-column: 1 / -1; } }

/* ---------- S.04 Preguntas frecuentes: sticky aside + accordion ---------- */
.ip-faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: start; }
.ip-faq__aside { grid-column: 1 / span 4; align-self: stretch; }
.ip-faq__sticky { position: sticky; top: 7rem; }
.ip-help { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); max-width: 22rem; padding: 1.75rem; gap: 0.75rem; align-items: flex-start; }
.ip-help__t { font-family: var(--ms-font-display); font-weight: 600; font-size: 1.75rem; line-height: 1; color: var(--ms-ink); }
.ip-help .ms-card__text { max-width: none; }
.ip-help .ms-cta { margin-block-start: 0.5rem; }
.ip-faq .ms-accordion { grid-column: 6 / span 7; padding-block-start: 0.25rem; }
.ip-faq .ms-acc__inner p a { color: var(--ms-brand); text-underline-offset: 0.22em; }
.ms-acc__btn:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 6px; border-radius: 0.75rem; }
@media (max-width: 64rem) {
	.ip-faq__aside, .ip-faq .ms-accordion { grid-column: 1 / -1; }
	.ip-faq__sticky { position: static; }
	.ip-help { display: none; }
	.ip-faq .ms-accordion { margin-block-start: 2.5rem; }
}

/* ---------- S.05 Contacto: framed closing that mirrors the hero, then footer ---------- */
.ip-close { --ip-c: 0; position: relative; height: max(128svh, 62rem); color: var(--ms-on-dark); }
.ip-close__frame {
	position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: var(--ms-dark);
	clip-path: inset(calc((1 - var(--ip-c)) * 1.5rem) calc((1 - var(--ip-c)) * 2.4vw) 0 round calc((1 - var(--ip-c)) * var(--ms-radius-lg)) calc((1 - var(--ip-c)) * var(--ms-radius-lg)) 0 0);
}
.ip-close::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--ms-dark); }
.ip-close__media { position: absolute; inset: 0; z-index: -3; display: block; }
.ip-close__media img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; filter: grayscale(1) contrast(1.05); transform: scale(calc(1.08 - var(--ip-c) * 0.08)); }
.ip-close__scrim {
	position: absolute; inset: 0; z-index: -2;
	background:
		linear-gradient(90deg, rgb(var(--ip-shade) / 0.86) 0%, rgb(var(--ip-shade) / 0.66) 36%, rgb(var(--ip-shade) / 0.1) 62%),
		linear-gradient(0deg, var(--ms-dark) 0%, color-mix(in srgb, var(--ms-dark) 70%, transparent) 22%, transparent 42%),
		radial-gradient(50% 45% at 20% 38%, color-mix(in srgb, var(--ms-brand) 40%, transparent), transparent 70%);
}
.ip-close__grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.2; mix-blend-mode: overlay; background-image: var(--ms-grain); }
.ip-close__grid {
	position: relative; height: 100%; box-sizing: border-box;
	max-width: calc(var(--ms-container-max) + 2 * var(--ms-gutter)); margin-inline: auto;
	padding: clamp(6.5rem, 14vh, 9.5rem) var(--ms-gutter) clamp(2rem, 5vh, 3.5rem);
	display: grid; grid-template-rows: 1fr auto; gap: clamp(4rem, 12vh, 9rem);
}
.ip-close__lead { align-self: start; max-width: 34rem; }
.ip-close__h { display: grid; font-family: var(--ms-font-display); font-weight: 300; font-size: var(--ms-display); line-height: 0.92; letter-spacing: -0.015em; color: var(--ms-on-dark); }
.ip-close__h strong { font-weight: 600; font-size: 1.22em; line-height: 0.86; letter-spacing: -0.02em; }
.ip-close__lede { margin-block-start: 1.1rem; max-width: 40ch; font-size: var(--ms-body); line-height: 1.7; color: var(--ms-on-dark-soft); }
.ip-close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-block-start: clamp(1.75rem, 3vw, 2.25rem); }
.ip-close__alt { font-size: var(--ms-body-sm); color: rgb(255 255 255 / 0.8); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.ip-close__alt:hover { color: var(--ms-on-dark); text-decoration-thickness: 2px; }
.ip-routes { position: relative; align-self: end; padding: 1.25rem 1.25rem 1rem; }
.ip-routes__title { margin: 0 0 0.75rem 0.5rem; 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.62); }
.ip-routes ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.ip-route { height: 100%; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1rem 1rem 1rem 1.1rem; border-radius: var(--ms-radius-sm); color: var(--ms-on-dark); text-decoration: none; transition: background-color 0.35s ease; }
.ip-route:is(:hover, :focus-visible) { background: rgb(255 255 255 / 0.08); }
.ip-route:focus-visible { outline: 2px solid var(--ms-on-dark); outline-offset: 2px; }
.ip-route__txt { display: grid; gap: 0.3rem; }
.ip-route__t { font-family: var(--ms-font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.1; }
.ip-route__d { font-size: 0.78rem; line-height: 1.45; color: rgb(255 255 255 / 0.66); }
.ip-route .ms-cta__circle { width: var(--ms-circle-sm); height: var(--ms-circle-sm); }
.ip-route .ms-cta__circle svg { width: 0.9rem; height: 0.9rem; }
.ip-route:is(:hover, :focus-visible) .ms-cta__circle { background: var(--ms-brand); border-color: var(--ms-brand); }

@media (max-width: 64rem) {
	.ip-close { height: auto; min-height: 100svh; }
	.ip-close__frame { position: relative; min-height: 100svh; }
	.ip-close__grid { min-height: 100svh; }
	.ip-routes ul { grid-template-columns: 1fr 1fr; }
	
	
}
@media (max-width: 40rem) {
	.ip-close__scrim { background: linear-gradient(0deg, rgb(var(--ip-shade) / 0.95) 0%, rgb(var(--ip-shade) / 0.74) 55%, rgb(var(--ip-shade) / 0.58) 100%); }
	.ip-routes ul { grid-template-columns: 1fr; }
	
	
}

@media (prefers-reduced-motion: reduce) {
	.ip-hero__media picture, .ip-line > span, .ip-hero__kicker, .ip-hero__kicker i, .ip-hero-cta, .ip-hero__aside { animation: ip-fade-only 0.4s ease-out both !important; transform: none; }
	.ip-close__media img { transform: none; }
	.ip-viz, .ip-dx__service { transition: opacity 0.2s ease !important; transform: none !important; }
	.ip-q.is-active::after { animation: none; transform: scaleX(1); }
}
@keyframes ip-fade-only { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   MOTION — the Home's language: masks, drawn rules, staggered entries and
   scroll-driven drift. Transform and opacity only. Hidden states apply only
   while JS has armed a section and it has not entered yet (never stuck).
   --ip-sp is written once per frame by the page script while visible.
   ===================================================================== */
/* Drawn rules and bars */
.ip-data .ms-quote, .ip-shl-sec .ms-quote, .ip-shl-sec .ms-stat, .ip-dx-sec .ms-stat { position: relative; border-inline-start-color: transparent; }
.ip-data .ms-quote::before, .ip-shl-sec .ms-quote::before, .ip-shl-sec .ms-stat::before, .ip-dx-sec .ms-stat::before {
	content: ""; position: absolute; inset-block: 0; left: -2px; width: 2px; background: var(--ms-brand); transform-origin: top;
}
.ip-shl-sec .ms-stat::before, .ip-dx-sec .ms-stat::before { width: 1px; left: -1px; background: color-mix(in srgb, var(--ms-brand) 55%, transparent); }
.ms-kicker__rule { transform-origin: left; }

[data-reveal].is-armed:not(.is-in) .ms-kicker__rule { transform: scaleX(0); }
[data-reveal].is-in .ms-kicker__rule { transition: transform 1s var(--ms-ease) 0.15s; }
.ip-data.is-armed:not(.is-in) .ms-quote::before,
.ip-shl-sec.is-armed:not(.is-in) .ms-quote::before,
.ip-shl-sec.is-armed:not(.is-in) .ms-stat::before,
.ip-dx-sec.is-armed:not(.is-in) .ms-stat::before { transform: scaleY(0); }
.ip-data.is-in .ms-quote::before, .ip-shl-sec.is-in .ms-quote::before { transition: transform 1.2s var(--ms-ease) 0.45s; }
.ip-shl-sec.is-in .ms-stat::before, .ip-dx-sec.is-in .ms-stat::before { transition: transform 0.9s var(--ms-ease) 0.6s; }

/* Words light up as the statement travels up the viewport */
.ip-word { transition: opacity 0.45s ease; }
.is-split .ip-word:not(.is-lit) { opacity: 0.2; }

/* S.01: header drifts apart; questions draw in one by one; the panel rises */
@media (min-width: 64.01rem) {
	.ip-dx-sec .ms-header__main { translate: 0 calc((0.5 - var(--ip-sp, 0.5)) * 3rem); }
	.ip-dx-sec .ms-header__side { translate: 0 calc((var(--ip-sp, 0.5) - 0.5) * 3rem); }
}
.ip-dx-sec.is-armed:not(.is-in) .ip-dx__panel { opacity: 0; transform: translateY(2.5rem); }
.ip-dx-sec.is-in .ip-dx__panel { transition: opacity 0.9s ease 0.2s, transform 1.1s var(--ms-ease) 0.2s; }
.ip-dx-sec.is-armed:not(.is-in) .ip-q { opacity: 0; transform: translateX(-0.75rem); }
.ip-dx-sec.is-armed:not(.is-in) .ip-q::before { transform: scaleX(0); }
.ip-dx-sec.is-in .ip-q { transition: opacity 0.7s ease, transform 0.9s var(--ms-ease); transition-delay: calc(var(--row, 0) * 0.1s + 0.45s); }
.ip-dx-sec.is-in .ip-q::before { transition: transform 1s var(--ms-ease); transition-delay: calc(var(--row, 0) * 0.1s + 0.45s); }
.ip-dx__list li:nth-child(2) { --row: 1; }
.ip-dx__list li:nth-child(3) { --row: 2; }
.ip-dx__list li:nth-child(4) { --row: 3; }
.ip-dx-sec.is-settled .ip-q, .ip-dx-sec.is-settled .ip-q::before { transition-delay: 0s; }
.ip-dx__panel { --gx: 75%; --gy: 12%; }
.ip-dx__panel::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
	background: radial-gradient(24rem 18rem at var(--gx) var(--gy), color-mix(in srgb, var(--ms-brand-on-dark) 26%, transparent), transparent 70%);
}

/* S.02: mosaic rises; the order line draws; records resolve into patterns */
.ip-data.is-armed:not(.is-in) .ip-data__grid > [data-reveal-item] { transform: translateY(2.5rem); }
.ip-data.is-in .ip-data__grid > [data-reveal-item] { transition-duration: 0.9s, 1.2s; }
.ip-first { --gx: 75%; --gy: 12%; }
.ip-first::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
	background: radial-gradient(24rem 18rem at var(--gx) var(--gy), color-mix(in srgb, var(--ms-brand-on-dark) 30%, transparent), transparent 70%);
}
.ip-data.is-armed:not(.is-in) .ip-order::before { transform: scaleY(0); }
.ip-data.is-in .ip-order::before { transition: transform 1.3s var(--ms-ease) 0.6s; }
.ip-data.is-armed:not(.is-in) .ip-order li { opacity: 0; transform: translateY(0.5rem); }
.ip-data.is-in .ip-order li { transition: opacity 0.7s ease, transform 0.8s var(--ms-ease); }
.ip-data.is-in .ip-order li:nth-child(1) { transition-delay: 0.6s; }
.ip-data.is-in .ip-order li:nth-child(2) { transition-delay: 1.05s; }
.ip-bars__fill { transform: scaleX(calc(0.15 + var(--ip-sp, 1) * 0.85)); }
.ip-people i { opacity: calc(1 - var(--ip-sp, 1) * 0.55); transform: translateX(calc(var(--ip-sp, 1) * 0.3rem)); }
.ip-frame__dl > div:last-child dd::after { transform: scaleX(1); }
.ip-data.is-armed:not(.is-in) .ip-frame__dl > div { opacity: 0; transform: translateY(0.5rem); }
.ip-data.is-armed:not(.is-in) .ip-frame__dl > div:last-child dd::after { transform: scaleX(0); }
.ip-data.is-in .ip-frame__dl > div { transition: opacity 0.7s ease, transform 0.8s var(--ms-ease); }
.ip-data.is-in .ip-frame__dl > div:first-child { transition-delay: 0.8s; }
.ip-data.is-in .ip-frame__dl > div:last-child { transition-delay: 0.95s; }
.ip-data.is-in .ip-frame__dl > div:last-child dd::after { transition: transform 1s var(--ms-ease) 1.3s; }

/* S.03: every lane's dots land on the same ruler; client columns draw their rules */
.ip-shl-sec.is-armed:not(.is-in) .ip-ruler { transform: translateY(2.5rem); }
.ip-shl-sec.is-in .ip-ruler { transition-duration: 0.9s, 1.2s; }
.ip-shl-sec.is-armed:not(.is-in) .ip-lane__dot { opacity: 0; transform: translateY(-0.6rem); }
.ip-shl-sec.is-in:not(.is-settled) .ip-lane__dot { transition: opacity 0.4s ease, transform 0.7s var(--ms-ease-spring); transition-delay: calc(var(--d, 0) * 0.06s + 0.7s); }
.ip-shl-sec.is-armed:not(.is-in) .ip-clients__col::before { transform: scaleX(0); }
.ip-shl-sec.is-in .ip-clients__col::before { transition: transform 1.1s var(--ms-ease) calc(var(--i, 0) * 0.1s + 0.3s); }

/* S.04: questions arrive in sequence; answers fade in when opened */
.ip-faq.is-armed:not(.is-in) .ms-acc { opacity: 0; translate: 0 1rem; }
.ip-faq.is-in .ms-acc { transition: opacity 0.7s ease, translate 0.8s var(--ms-ease), background-color 0.5s ease; }
.ip-faq.is-in .ms-acc:nth-child(2) { transition-delay: 0.06s, 0.06s, 0s; }
.ip-faq.is-in .ms-acc:nth-child(3) { transition-delay: 0.12s, 0.12s, 0s; }
.ip-faq.is-in .ms-acc:nth-child(4) { transition-delay: 0.18s, 0.18s, 0s; }
.ip-faq.is-in .ms-acc:nth-child(5) { transition-delay: 0.24s, 0.24s, 0s; }
.ip-faq.is-in .ms-acc:nth-child(6) { transition-delay: 0.3s, 0.3s, 0s; }
.ip-faq.is-settled .ms-acc { transition-delay: 0s; }
.ms-acc__inner p { opacity: 0; transform: translateY(0.4rem); transition: opacity 0.3s ease, transform 0.45s var(--ms-ease); }
.ms-acc.is-open .ms-acc__inner p { opacity: 1; transform: none; transition-delay: 0.12s; }

/* S.05: headline masks, routes arrive one by one */
.ip-close__h .ms-line { display: block; }
.ip-close.is-armed:not(.is-in) .ip-route { opacity: 0; transform: translateY(0.75rem); }
.ip-close.is-in .ip-route { transition: opacity 0.7s ease, transform 0.8s var(--ms-ease), background-color 0.35s ease; }
.ip-close.is-in:not(.is-settled) .ip-routes li:nth-child(1) .ip-route { transition-delay: 0.75s, 0.75s, 0s; }
.ip-close.is-in:not(.is-settled) .ip-routes li:nth-child(2) .ip-route { transition-delay: 0.85s, 0.85s, 0s; }
.ip-close.is-in:not(.is-settled) .ip-routes li:nth-child(3) .ip-route { transition-delay: 0.95s, 0.95s, 0s; }
.ip-close.is-in:not(.is-settled) .ip-routes li:nth-child(4) .ip-route { transition-delay: 1.05s, 1.05s, 0s; }

@media (prefers-reduced-motion: reduce) {
	.ip-dx-sec .ms-header__main, .ip-dx-sec .ms-header__side { translate: none !important; }
	.ip-bars__fill { transform: none; }
	.ip-people i { opacity: 0.5; transform: none; }
}

/* V2: same hero structure as Home V2 and Select V2 — lede under the headline with a brand rule,
   aside keeps only the credential on the header's right edge, block clears the logo */
.ip-hero__lede--lead {
	max-width: 30rem;
	margin: clamp(1.25rem, 2.6vh, 1.75rem) 0 0;
	padding-inline-start: 1rem;
	border-inline-start: 2px solid var(--ms-brand-on-dark);
	font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.0625rem);
	line-height: 1.6;
	color: rgb(255 255 255 / 0.84);
	text-shadow: 0 1px 12px rgb(0 0 0 / 0.45);
	opacity: 0;
	animation: ip-fade 1s var(--ms-ease) 0.95s forwards;
}
.ip-hero__aside { width: max-content; padding-block-start: 0.9rem; }
.ip-hero__aside::after { display: none; }
@media (min-width: 64.01rem) {
	.ip-hero__aside { right: clamp(1.5rem, 2.6vw, 3rem); }
	.ip-hero__content {
		inset-block: clamp(9rem, 19vh, 12rem) clamp(2rem, 6vh, 4rem);
		translate: 0 calc(var(--ip-p) * -4rem);
		align-content: center;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ip-hero__lede--lead { animation: ip-fade-only 0.4s ease-out both !important; }
}

/* V2: the client columns get their own heading, so the section title can carry the idea.
   Ported from the tokens.css tail (T6): this is page CSS, not a token, and tokens.css
   is generated by build/build.mjs — it must stay generated-only.

   The single-class `margin: clamp(3rem, 6vw, 4.5rem) 0 1.25rem` the source declares on
   .ip-clients__label is still dropped. The source declares it in the tokens block, ahead
   of .ip-label, and both are one class, so .ip-label wins and it never renders: measured
   in the delivered 2026-10-03 file, the label's margin-bottom is 14.4px (0.9rem, from
   .ip-label), not the 20px that declaration asks for. Reordering it after .ip-label here
   would make it win and the section 77.6px taller than any approved page.

   .ip-shl-sec .ip-clients__label is a different matter and was missing (T8). It carries
   two classes, so it beats .ip-label whatever the order, and it does render in the
   delivered file: margin-top 80px at 1914 and 1440 (clamp caps at 5rem) and 56px at 390
   (the 3.5rem floor), against 0px here. Ported from the delivered bytes, with the
   delivered margin-bottom (14.4px) unchanged on both sides. */
.ip-clients__label + .ip-clients { margin-block-start: 0; }
.ip-shl-sec .ip-clients__label { margin-block-start: clamp(3.5rem, 6vw, 5rem); }

/* V2: the ruler dots keep breathing once they have arrived (quiet, no layout change) */
.ip-shl-sec.is-in .ip-lane__dot {
	animation: ip-dot-drift 7.5s ease-in-out 1.6s infinite alternate;
	animation-delay: calc(1.6s + var(--d, 0) * 0.18s);
}
.ip-shl-sec.is-in .ip-lane__dot--on {
	animation: ip-dot-pulse 4.5s ease-in-out 1.8s infinite;
	filter: drop-shadow(0 0 0 color-mix(in srgb, var(--mb-petrol-digital) 45%, transparent));
}
@keyframes ip-dot-drift { from { translate: -1px 0; } to { translate: 1px 0; } }
@keyframes ip-dot-pulse {
	0%, 100% { scale: 1; filter: drop-shadow(0 0 0 color-mix(in srgb, var(--mb-petrol-digital) 0%, transparent)); }
	50% { scale: 1.12; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mb-petrol-digital) 55%, transparent)); }
}
/* Hovering the card lines the highlighted readings up: the same scale, read three ways */
.ip-lane__dot { transition: fill 0.5s ease, scale 0.6s var(--ms-ease); }
.ip-ruler:hover .ip-lane__dot--on { scale: 1.25; }
.ip-ruler:hover .ip-lane__dot:not(.ip-lane__dot--on) { fill: rgb(51 51 51 / 0.2); }
@media (prefers-reduced-motion: reduce) {
	.ip-shl-sec.is-in .ip-lane__dot, .ip-shl-sec.is-in .ip-lane__dot--on { animation: none !important; filter: none; }
	.ip-ruler:hover .ip-lane__dot--on { scale: 1; }
}