/*!
 * Sarv Catalyst — Motion system
 *
 * One restrained motion layer for the whole site. Every effect here is a small,
 * single-purpose transform that plays once, in the direction the page is read,
 * and then stops. Nothing loops, nothing reacts to scroll position beyond
 * entering the viewport, and nothing takes the scroll away from the visitor.
 *
 * The contract, which every template and every effect shares:
 *
 *   1. Content is visible by default. The hidden state is written as
 *      `.sc-reveal-enabled [data-sc-reveal]`, and `sc-reveal-enabled` is added
 *      to the root element by the script and only when a reveal can actually
 *      complete. A browser with JavaScript off, a script that fails to load, a
 *      crawler that does not run scripts: all of them get a whole page.
 *   2. `prefers-reduced-motion: reduce` is honoured by never enabling the
 *      effect, not by animating it and then overriding it, so a visitor who has
 *      asked for less motion downloads the same CSS and gets no transition at
 *      all.
 *   3. Transforms and opacity only. Nothing here animates a geometric property
 *      that would force layout on every frame.
 *   4. Every duration comes from the token set, so the whole site slows down or
 *      speeds up by editing tokens.css.
 *
 * Effects, and what opts into each:
 *
 *   [data-sc-reveal]              section reveal — fade and lift
 *   [data-sc-reveal="scale"]      image scale-in — fade and settle from 1.03
 *   [data-sc-reveal-group]        staggered children, one step apart
 *   [data-sc-count]               number reveal, counts up to the printed value
 *   [data-sc-line]                line draw, for a rule or a connector
 *
 * @see assets/js/motion.js — the one observer that drives all of them.
 */

/* ---------------------------------------------------------------------------
 * 1. Section reveal
 * ------------------------------------------------------------------------- */

/*
 * The entrance is opt-in from the script: `sc-reveal-enabled` is added to the
 * root element only when a reveal can actually run. Without JavaScript, or with
 * reduced motion requested, the attribute is inert and every section is
 * immediately visible rather than blank.
 */

/*
 * The travel is 1.5rem over 520ms, against the 0.75rem the first build used.
 * The distance and the duration are the two dials for how visible an entrance
 * is, and at 12px the movement sat inside the noise of a page that also scrolls:
 * the section arrived, but a visitor could not say whether they had seen it
 * happen. 24px at half a second is unmistakably deliberate and is still short
 * enough that a section never animates under the pointer.
 */
.sc-reveal-enabled [data-sc-reveal] {
	opacity: 0;
	translate: 0 var(--sc-reveal-distance);
	transition:
		opacity var(--sc-transition-reveal),
		translate var(--sc-transition-reveal);
}

.sc-reveal-enabled [data-sc-reveal].is-visible {
	opacity: 1;
	translate: 0 0;
}

/* ---------------------------------------------------------------------------
 * 1a. Split reveal
 *
 * The same arrival, from the side. Used where a section is physically divided
 * into a picture and a body of text: the two halves of a split are read as one
 * composition, and a lateral entrance says that, where a second vertical lift
 * would just repeat the section around it.
 *
 * The travel is lateral only. There is no opacity ramp on the container, so the
 * two halves cannot be caught half-faded against their own background.
 * ------------------------------------------------------------------------- */

.sc-reveal-enabled [data-sc-reveal="split"] {
	opacity: 1;
	translate: -1.5rem 0;
	transition: translate var(--sc-transition-reveal);
}

.sc-reveal-enabled [data-sc-reveal="split"].is-visible {
	translate: 0 0;
}

/* In a right-to-left document the leading edge is the other side, so the half
   that leads arrives from the right or it arrives from the wrong end. */
[dir="rtl"] .sc-reveal-enabled [data-sc-reveal="split"] {
	translate: 1.5rem 0;
}

[dir="rtl"] .sc-reveal-enabled [data-sc-reveal="split"].is-visible {
	translate: 0 0;
}

/* ---------------------------------------------------------------------------
 * 1b. Settle reveal
 *
 * A short, slow lift with no travel worth naming — used for blocks that sit
 * above the fold, where a full-height slide would be seen mid-flight on the
 * first frame. The photograph's own scale-in carries the movement; this only
 * stops the frame appearing fully formed before the picture inside it has
 * settled.
 * ------------------------------------------------------------------------- */

.sc-reveal-enabled [data-sc-reveal="settle"] {
	opacity: 0;
	translate: 0 0.75rem;
	transition:
		opacity var(--sc-transition-reveal),
		translate var(--sc-transition-reveal);
}

.sc-reveal-enabled [data-sc-reveal="settle"].is-visible {
	opacity: 1;
	translate: 0 0;
}

/* ---------------------------------------------------------------------------
 * 2. Image scale-in
 *
 * The frame is already reserved by the ratio box, so the image can settle from
 * a 3% crop without the section changing height. Scaled on the image, not on
 * the frame, which keeps the crop stable and the border undisturbed.
 * ------------------------------------------------------------------------- */

.sc-reveal-enabled [data-sc-reveal="scale"] {
	opacity: 0;
	translate: 0 0;
}

/*
 * The settle runs on the drift duration, not on the reveal duration: the frame
 * arrives with the copy beside it and the picture then keeps coming into focus
 * for a beat after the text has stopped. On the reveal duration the two would
 * finish on the same frame, which reads as one animation rather than as a
 * photograph resolving inside a section that has already arrived.
 *
 * The distance steps with the frame — 6% of a 900px picture is a real move and
 * 6% of a 360px one is a twitch — so `--sc-reveal-scale` is a token and the
 * narrow-format block further down brings it in.
 */
.sc-reveal-enabled [data-sc-reveal="scale"] img,
.sc-reveal-enabled [data-sc-reveal="scale"] .sc-media__image {
	scale: var(--sc-reveal-scale, 1.06);
	transition: scale var(--sc-transition-drift);
}

.sc-reveal-enabled [data-sc-reveal="scale"].is-visible {
	opacity: 1;
}

.sc-reveal-enabled [data-sc-reveal="scale"].is-visible img,
.sc-reveal-enabled [data-sc-reveal="scale"].is-visible .sc-media__image {
	scale: 1;
}

/* ---------------------------------------------------------------------------
 * 2a. Hero sequence
 *
 * The homepage hero is the one band every visitor sees, so it is the one place
 * the reveal is staged rather than single. The copy arranges itself — eyebrow,
 * headline, lead, actions, tagline, 140ms apart — while the photograph settles
 * inside its band on the longer drift curve.
 *
 * The steps are declared as a sequence of named delays rather than as a stagger
 * group, because the hero's children are not a row of equal cards: the tagline
 * belongs to the actions above it and has to arrive after them, and the lead is
 * wanted before the buttons rather than between them.
 *
 * The whole sequence is triggered by the hero's own reveal, so nothing runs
 * while the band is off screen, and it is complete in under a second.
 * ------------------------------------------------------------------------- */

/*
 * The container is taken out of the reveal so the sequence is the only fade
 * running on the copy. Left in, the copy would fade as a block while its
 * children faded individually inside it — two fades at different rates, which
 * reads as a section that cannot decide when it has arrived.
 */
.sc-reveal-enabled .sc-hero--editorial .sc-hero__copy[data-sc-reveal] {
	opacity: 1;
	translate: 0 0;
	transition: none;
}

.sc-reveal-enabled .sc-hero--editorial .sc-hero__copy > * {
	opacity: 0;
	translate: 0 1.5rem;
	transition:
		opacity var(--sc-transition-hero),
		translate var(--sc-transition-hero);
}

.sc-reveal-enabled .sc-hero--editorial .sc-hero__copy.is-visible > * {
	opacity: 1;
	translate: 0 0;
}

.sc-reveal-enabled .sc-hero--editorial .sc-hero__copy.is-visible > :nth-child(1) {
	transition-delay: 0ms;
}

.sc-reveal-enabled .sc-hero--editorial .sc-hero__copy.is-visible > :nth-child(2) {
	transition-delay: 70ms;
}

.sc-reveal-enabled .sc-hero--editorial .sc-hero__copy.is-visible > :nth-child(3) {
	transition-delay: 210ms;
}

.sc-reveal-enabled .sc-hero--editorial .sc-hero__copy.is-visible > :nth-child(4) {
	transition-delay: 350ms;
}

.sc-reveal-enabled .sc-hero--editorial .sc-hero__copy.is-visible > :nth-child(n + 5) {
	transition-delay: 490ms;
}

/*
 * The photograph. Not a section reveal: the band is above the fold on every
 * load, so the frame is present from the first paint and only the picture inside
 * it moves. A hero that faded in would be a hero that is briefly missing.
 */
.sc-reveal-enabled .sc-hero--editorial .sc-hero__media .sc-media__image {
	scale: calc(var(--sc-reveal-scale, 1.06) + 0.02);
	transition: scale var(--sc-transition-drift);
}

.sc-reveal-enabled .sc-hero--editorial .sc-hero__media.is-visible .sc-media__image,
.sc-reveal-enabled
	.sc-hero--editorial
	.sc-hero__copy.is-visible
	~ .sc-hero__aside
	.sc-media__image {
	scale: 1;
}

/* ---------------------------------------------------------------------------
 * 3. Stagger
 *
 * A group animates its own children rather than wrapping each one in a second
 * reveal target: one attribute on the list, one observer entry, and the delay
 * is derived from the child's position so a list of eight and a list of three
 * both resolve in the same total time.
 * ------------------------------------------------------------------------- */

.sc-reveal-enabled [data-sc-reveal-group] > * {
	opacity: 0;
	translate: 0 var(--sc-reveal-distance);
	transition:
		opacity var(--sc-transition-reveal),
		translate var(--sc-transition-reveal);
}

.sc-reveal-enabled [data-sc-reveal-group].is-visible > * {
	opacity: 1;
	translate: 0 0;
}

/*
 * A 110ms step, held from the sixth child. A fixed step large enough to be seen
 * is also large enough to turn a long list into a loading sequence, so the
 * delay stops growing: the fifth item and the fifteenth both resolve a little
 * over half a second after the group arrives.
 */
.sc-reveal-enabled [data-sc-reveal-group].is-visible > :nth-child(1) {
	transition-delay: 0ms;
}

.sc-reveal-enabled [data-sc-reveal-group].is-visible > :nth-child(2) {
	transition-delay: var(--sc-reveal-step);
}

.sc-reveal-enabled [data-sc-reveal-group].is-visible > :nth-child(3) {
	transition-delay: calc(2 * var(--sc-reveal-step));
}

.sc-reveal-enabled [data-sc-reveal-group].is-visible > :nth-child(4) {
	transition-delay: calc(3 * var(--sc-reveal-step));
}

.sc-reveal-enabled [data-sc-reveal-group].is-visible > :nth-child(5) {
	transition-delay: calc(4 * var(--sc-reveal-step));
}

.sc-reveal-enabled [data-sc-reveal-group].is-visible > :nth-child(6) {
	transition-delay: calc(5 * var(--sc-reveal-step));
}

.sc-reveal-enabled [data-sc-reveal-group].is-visible > :nth-child(n + 7) {
	transition-delay: calc(5 * var(--sc-reveal-step));
}

/* ---------------------------------------------------------------------------
 * 3a. Evidence band rule draw
 *
 * The evidence band is a row of figures under a hairline. The hairline draws
 * from its leading edge as the band arrives, so the row is introduced rather
 * than simply appearing — the same "line draw" the rest of the system uses,
 * applied to the band's own rule so the two cannot disagree about timing.
 *
 * The grade bar each item carries is drawn by the same rule, one step later, so
 * the figure and the bar under it read as one gesture.
 *
 * The resting state — outside `sc-reveal-enabled`, and therefore for a visitor
 * without JavaScript and for a visitor who asked for less motion — is the drawn
 * state. Only the animation is opt-in: inside the enabled root the rules start
 * at zero width and are released when their container is revealed.
 * ------------------------------------------------------------------------- */

.sc-reveal-enabled [data-sc-reveal-group].sc-stat-band__list::before {
	transform: scaleX(0);
	transition: transform var(--sc-transition-reveal);
}

.sc-reveal-enabled [data-sc-reveal-group].sc-stat-band__list.is-visible::before {
	transform: scaleX(1);
}

.sc-reveal-enabled [data-sc-reveal-group] .sc-stat__grade {
	transform: scaleX(0);
	transition: transform var(--sc-transition-reveal);
}

/*
 * The ring's arc draws itself as the card arrives. The dash offset is animated
 * rather than the path, so the mark sweeps around its own circumference instead
 * of appearing. It is the same sweep on all three cards — the arc carries no
 * value — and it is the one piece of motion in the band that is not the counter.
 */
.sc-reveal-enabled [data-sc-reveal-group] .sc-stat__ring-arc {
	stroke-dashoffset: 327;
	transition: stroke-dashoffset var(--sc-transition-drift);
}

.sc-reveal-enabled [data-sc-reveal-group].is-visible .sc-stat__ring-arc {
	stroke-dashoffset: 0;
}

.sc-reveal-enabled [data-sc-reveal-group].is-visible .sc-stat__grade {
	transform: scaleX(1);
}

.sc-reveal-enabled [data-sc-reveal-group].is-visible > :nth-child(1) .sc-stat__grade {
	transition-delay: calc(2 * var(--sc-reveal-step));
}

.sc-reveal-enabled [data-sc-reveal-group].is-visible > :nth-child(2) .sc-stat__grade {
	transition-delay: calc(3 * var(--sc-reveal-step));
}

.sc-reveal-enabled [data-sc-reveal-group].is-visible > :nth-child(3) .sc-stat__grade {
	transition-delay: calc(4 * var(--sc-reveal-step));
}

.sc-reveal-enabled [data-sc-reveal-group].is-visible > :nth-child(n + 4) .sc-stat__grade {
	transition-delay: calc(4 * var(--sc-reveal-step));
}

/* ---------------------------------------------------------------------------
 * 4. Number reveal
 *
 * The printed number is the real number. The script reads it, counts up to it
 * and stops; the digits are in the markup from the first paint, so a crawler, a
 * screen reader and a visitor without JavaScript all read the final value and
 * none of them reads a counter.
 * ------------------------------------------------------------------------- */

.sc-reveal-enabled [data-sc-count] .sc-stat__value,
.sc-reveal-enabled [data-sc-count].sc-stat__value {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * 5. Line draw
 *
 * A rule that grows from the leading edge. Drawn with a transform rather than
 * with width so the element keeps its box and the layout does not move.
 * ------------------------------------------------------------------------- */

.sc-reveal-enabled [data-sc-line] {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--sc-transition-slow);
}

[dir="rtl"] .sc-reveal-enabled [data-sc-line] {
	transform-origin: right center;
}

.sc-reveal-enabled [data-sc-line].is-visible {
	transform: scaleX(1);
}

/* ---------------------------------------------------------------------------
 * 6. Micro-interactions
 *
 * The pointer-level motion, gathered here so the whole motion layer can be
 * read — and switched off — in one place. Every effect is a transform or an
 * opacity, so none of them costs a layout pass, and every one of them is
 * triggered by `:hover` *and* `:focus-visible`, so a keyboard user gets the same
 * answer the pointer does.
 *
 * Two rules hold throughout: the movement is under 4px, and the thing that
 * moves is the thing the pointer is on. A card that lifts, an image that comes
 * closer, an arrow that steps forward — each says "this one", and none of them
 * says anything the copy has not already said.
 * ------------------------------------------------------------------------- */

/* Images step closer inside their frame. The frame clips, so the crop moves
   rather than the box. */
.sc-industry-card__media img,
.sc-product-card__media img,
.sc-family-card__media img,
.sc-insights__featured img {
	transition: scale var(--sc-transition-slow);
}

.sc-industry-card__link:hover img,
.sc-industry-card__link:focus-visible img,
.sc-product-card__link:hover img,
.sc-product-card__link:focus-visible img,
.sc-family-card__link:hover img,
.sc-family-card__link:focus-visible img,
.sc-insights__featured-link:hover img,
.sc-insights__featured-link:focus-visible img {
	scale: 1.04;
}

/* Cards lift. A single pixel and a soft shadow is the whole of the movement:
   enough to answer the pointer, not enough to move the row. */
.sc-industry-card,
.sc-product-card,
.sc-family-card,
.sc-insights__item,
.sc-credibility__item,
.sc-lifecycle__stage {
	transition:
		translate var(--sc-transition-base),
		box-shadow var(--sc-transition-base),
		border-color var(--sc-transition-fast);
}

/*
 * Cards lift. The movement is 4px and the shadow deepens with it: at 2px the row
 * answered the pointer only if the visitor was already looking at the card they
 * were over, which is not the case when a grid is being scanned. The lift stays
 * under the 4px line the rest of the micro-interactions respect, so the row does
 * not move under the cursor.
 */
.sc-industry-card:hover,
.sc-product-card:hover,
.sc-family-card:hover,
.sc-insights__item:hover,
.sc-lifecycle__stage:hover,
.sc-stat:hover {
	translate: 0 -4px;
	box-shadow: var(--sc-shadow-md);
	border-color: var(--sc-color-border-strong);
}

/*
 * The evidence card is not a link, so its lift is the one hover in the system
 * that answers a pointer which cannot click. It is kept because the row reads as
 * a set of instruments, and an instrument that acknowledges the cursor is the
 * difference between a band and a table.
 */
.sc-stat {
	transition:
		translate var(--sc-transition-base),
		box-shadow var(--sc-transition-base),
		border-color var(--sc-transition-base);
}

/*
 * Buttons. The primary action lifts 2px and deepens its shadow, which is what
 * makes it read as a physical control rather than as a coloured rectangle; the
 * outline variant cannot use a shadow, so it fills instead. Both keep their
 * arrow step, and every rule here is on `:hover` *and* `:focus-visible`, so a
 * keyboard user gets the same answer the pointer does.
 */
.sc-button--primary {
	transition:
		background-color var(--sc-transition-fast),
		box-shadow var(--sc-transition-base),
		translate var(--sc-transition-base);
}

.sc-button--primary:hover,
.sc-button--primary:focus-visible {
	translate: 0 -2px;
	box-shadow: var(--sc-shadow-md);
}

.sc-button--secondary {
	transition:
		background-color var(--sc-transition-base),
		border-color var(--sc-transition-fast),
		color var(--sc-transition-fast);
}

.sc-button--secondary:hover,
.sc-button--secondary:focus-visible {
	background-color: var(--sc-color-surface-muted);
	border-color: var(--sc-color-brand);
}

/* The arrow steps forward in the direction the link goes. `translate` on the
   whole arrow rather than on a pseudo-element, so it cannot disturb the label
   beside it in either direction. */
.sc-button__arrow,
.sc-link-arrow::after,
.sc-industry-card__arrow,
.sc-product-card__action .sc-button__arrow {
	transition: translate var(--sc-transition-base);
}

.sc-button:hover .sc-button__arrow,
.sc-button:focus-visible .sc-button__arrow,
.sc-link-arrow:hover::after,
.sc-link-arrow:focus-visible::after,
.sc-industry-card__link:hover .sc-industry-card__arrow,
.sc-industry-card__link:focus-visible .sc-industry-card__arrow,
.sc-product-card__link:hover .sc-product-card__action .sc-button__arrow,
.sc-product-card__link:focus-visible .sc-product-card__action .sc-button__arrow {
	translate: 3px 0;
}

[dir="rtl"] .sc-button:hover .sc-button__arrow,
[dir="rtl"] .sc-button:focus-visible .sc-button__arrow,
[dir="rtl"] .sc-link-arrow:hover::after,
[dir="rtl"] .sc-link-arrow:focus-visible::after,
[dir="rtl"] .sc-industry-card__link:hover .sc-industry-card__arrow,
[dir="rtl"] .sc-industry-card__link:focus-visible .sc-industry-card__arrow,
[dir="rtl"] .sc-product-card__link:hover .sc-product-card__action .sc-button__arrow,
[dir="rtl"] .sc-product-card__link:focus-visible .sc-product-card__action .sc-button__arrow {
	translate: -3px 0;
}

/*
 * Navigation. The underline draw is the header's own motion and lives in
 * components.css with the reference composition; what is added here is the
 * colour step, so a destination answers the pointer on the first frame rather
 * than after the underline has travelled. Both are on `:focus-visible` too.
 */
.sc-primary-nav__list a {
	transition:
		color var(--sc-transition-base),
		background-color var(--sc-transition-base);
}

/* Icons nudge, on the two bands whose whole point is the glyph beside the
   label. The glyph is decorative, so a 2px lift is pure emphasis. */
.sc-credibility__icon,
.sc-lifecycle__stage-icon {
	transition: translate var(--sc-transition-base);
}

.sc-credibility__item:hover .sc-credibility__icon,
.sc-lifecycle__stage:hover .sc-lifecycle__stage-icon {
	translate: 0 -2px;
}

.sc-button,
.sc-card,
.sc-panel,
.sc-family-nav__link {
	transition:
		background-color var(--sc-transition-fast),
		border-color var(--sc-transition-fast),
		color var(--sc-transition-fast),
		box-shadow var(--sc-transition-base),
		translate var(--sc-transition-base);
}

/* ---------------------------------------------------------------------------
 * 7. Reduced motion
 *
 * Every rule above is neutralised, not merely shortened. The intent of the
 * preference is no movement, and a 1ms transition is still a transition that
 * a vestibular-sensitive visitor asked not to receive.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sc-reveal-enabled [data-sc-reveal],
	.sc-reveal-enabled [data-sc-reveal="scale"],
	.sc-reveal-enabled [data-sc-reveal="split"],
	.sc-reveal-enabled [data-sc-reveal="settle"],
	.sc-reveal-enabled [data-sc-reveal-group] > *,
	.sc-reveal-enabled [data-sc-line],
	.sc-reveal-enabled .sc-hero--editorial .sc-hero__copy > * {
		opacity: 1;
		translate: 0 0;
		transform: none;
		transition: none;
	}

	.sc-reveal-enabled [data-sc-reveal-group] .sc-stat__ring-arc,
	.sc-reveal-enabled [data-sc-reveal-group].is-visible .sc-stat__ring-arc {
		stroke-dashoffset: 0;
		transition: none;
	}

	.sc-reveal-enabled .sc-hero--editorial .sc-hero__copy.is-visible > * {
		transition-delay: 0ms;
	}

	.sc-reveal-enabled [data-sc-reveal="scale"] img,
	.sc-reveal-enabled [data-sc-reveal="scale"] .sc-media__image {
		scale: 1;
		transition: none;
	}

	.sc-reveal-enabled [data-sc-reveal-group].is-visible > * {
		transition-delay: 0ms;
	}

	.sc-reveal-enabled [data-sc-reveal-group].sc-stat-band__list::before,
	.sc-reveal-enabled [data-sc-reveal-group].is-visible.sc-stat-band__list::before {
		transform: scaleX(1);
		transition: none;
	}

	.sc-reveal-enabled [data-sc-reveal-group] .sc-stat__grade,
	.sc-reveal-enabled [data-sc-reveal-group].is-visible .sc-stat__grade {
		transform: scaleX(1);
		transition: none;
	}

	.sc-reveal-enabled [data-sc-reveal-group].is-visible > * .sc-stat__grade {
		transition-delay: 0ms;
	}

	.sc-industry-card__media img,
	.sc-product-card__media img,
	.sc-family-card__media img,
	.sc-insights__featured img,
	.sc-industry-card__arrow,
	.sc-button__arrow,
	.sc-link-arrow::after,
	.sc-arrow,
	.sc-credibility__icon,
	.sc-lifecycle__stage-icon,
	.sc-industry-card,
	.sc-product-card,
	.sc-family-card,
	.sc-insights__item,
	.sc-credibility__item,
	.sc-lifecycle__stage {
		transition: none;
	}

	.sc-industry-card__link:hover img,
	.sc-industry-card__link:focus-visible img,
	.sc-product-card__link:hover img,
	.sc-product-card__link:focus-visible img,
	.sc-family-card__link:hover img,
	.sc-family-card__link:focus-visible img,
	.sc-insights__featured-link:hover img,
	.sc-insights__featured-link:focus-visible img {
		scale: 1;
	}

	.sc-industry-card:hover,
	.sc-product-card:hover,
	.sc-family-card:hover,
	.sc-insights__item:hover,
	.sc-lifecycle__stage:hover,
	.sc-stat:hover,
	.sc-button--primary:hover,
	.sc-button--primary:focus-visible {
		translate: 0 0;
	}

	.sc-button:hover .sc-button__arrow,
	.sc-button:focus-visible .sc-button__arrow,
	[dir="rtl"] .sc-button:hover .sc-button__arrow,
	[dir="rtl"] .sc-button:focus-visible .sc-button__arrow {
		translate: 0 0;
	}

	.sc-credibility__item:hover .sc-credibility__icon,
	.sc-lifecycle__stage:hover .sc-lifecycle__stage-icon {
		translate: 0 0;
	}
}

/* ---------------------------------------------------------------------------
 * 8. Print
 *
 * A printed page has no viewport to enter, so nothing may be waiting off-screen
 * when the printer takes the snapshot.
 * ------------------------------------------------------------------------- */

@media print {
	.sc-reveal-enabled [data-sc-reveal],
	.sc-reveal-enabled [data-sc-reveal="scale"],
	.sc-reveal-enabled [data-sc-reveal="split"],
	.sc-reveal-enabled [data-sc-reveal="settle"],
	.sc-reveal-enabled [data-sc-reveal-group] > *,
	.sc-reveal-enabled [data-sc-line],
	.sc-reveal-enabled .sc-hero--editorial .sc-hero__copy > * {
		opacity: 1;
		translate: 0 0;
		transform: none;
	}

	.sc-reveal-enabled [data-sc-reveal-group] .sc-stat__grade {
		transform: scaleX(1);
	}

	.sc-reveal-enabled [data-sc-reveal-group] .sc-stat__ring-arc {
		stroke-dashoffset: 0;
	}
}

/* ---------------------------------------------------------------------------
 * 9. Short viewports and narrow formats
 *
 * The travel is authored against a desktop band, where a 34px lift is a small
 * part of the section's own height. On a phone the same 34px is a fifth of the
 * visible area and the section appears to fly in, so the distance comes in
 * while the duration stays where it is: the movement is smaller, not faster,
 * which is what keeps it reading as the same gesture rather than as a flick.
 *
 * The photograph's crop follows the same reasoning — 3% of a 360px-wide frame
 * is eleven pixels, which is noise, and 2% is a settle.
 * ------------------------------------------------------------------------- */

@media (width < 48rem) {
	:root {
		--sc-reveal-distance: 1.5rem;
		--sc-reveal-scale: 1.03;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--sc-reveal-distance: 0rem;
		--sc-reveal-scale: 1;
	}
}