/* Sketch Suite — Services Accordion  ([sketch_services_accordion]).

   A numbered index of services where each row opens in place: a tiled media
   panel one side, description / capability list / link on the other.

   Design system, borrowed rather than re-decided:
     · ink, muted, numbers, hairlines and indigo — modules/services-hero-list,
       the /services hero this section is the expanded form of (#101326 /
       #4b5a6b / #98a2b3 / rgba(16,19,38,.10) / #6552ff)
     · type                — Saans through var(--sk-font); never a literal family
     · scroll entrance     — the shared Sketch Reveal primitive on each row.
       The open/close choreography below is this module's own, since Reveal
       covers entrances rather than interaction.                              */

.sksac {
	--sksac-bg: #ffffff;
	--sksac-fg: #101326;
	--sksac-muted: #4b5a6b;
	--sksac-num: #98a2b3;
	--sksac-line: rgba(16, 19, 38, 0.10);
	--sksac-accent: #6552ff;
	/* The button's press state and shadow are derived from the accent, so
	   recolouring that one field carries both — same as .sksst's action vars. */
	--sksac-action-hover: color-mix(in srgb, var(--sksac-accent) 88%, #000000);
	--sksac-action-shadow: color-mix(in srgb, var(--sksac-accent) 60%, transparent);
	/* The heading sweep, defaulting to the "Who are we?" section's pair. */
	--sksac-sweep-a: #6d46ff;
	--sksac-sweep-b: #24b6ff;
	--sksac-max: 1180px;
	--sksac-gutter: clamp(20px, 4vw, 48px);
	--sksac-pad-top: 96px;
	--sksac-pad-bottom: 96px;

	position: relative;
	box-sizing: border-box;
	/* Full-bleed breakout from the builder's centred content column. The theme
	   already sets html { overflow-x: hidden }, so the 100vw is safe. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--sksac-pad-top) 0 var(--sksac-pad-bottom);
	background: var(--sksac-bg);
	color: var(--sksac-fg);
	font-family: var(--sk-font, "Saans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

.sksac *,
.sksac *::before,
.sksac *::after { box-sizing: border-box; }

.sksac__inner {
	max-width: var(--sksac-max);
	margin: 0 auto;
	padding: 0 var(--sksac-gutter);
}

/* ── Section header ───────────────────────────────────────── */

/* Centred stack — eyebrow, headline, supporting line — over the ruled index
   below it. The list itself stays left-aligned: centring the rows would cost
   the numbers their column. */
.sksac__head {
	margin: 0 auto clamp(38px, 5vw, 72px);
	text-align: center;
}

.sksac__eyebrow {
	margin: 0 0 clamp(12px, 1.4vw, 18px);
	font-size: clamp(12px, .85vw, 14px);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sksac-num);
}

.sksac__heading {
	margin: 0 auto;
	max-width: 18ch;
	font-size: clamp(32px, 4.4vw, 66px);
	line-height: 1.03;
	font-weight: 600;
	letter-spacing: -.035em;
	color: var(--sksac-fg);
	text-wrap: balance;
}

/* ── Heading colour sweep ─────────────────────────────────────
   The same effect the "Who are we?" section runs on its intro (modules/
   logo-grid, itself ported from the Fit Finder hero). A gradient passes through
   the heading one line at a time — each line goes text colour → gradient → text
   colour, 620ms behind the line above.

   Clipped on the LINE, not the word: per-word clipping restarts the gradient at
   every word boundary, which reads as words changing colour rather than one
   sweep travelling through the text. accordion.js measures the wrapped lines,
   wraps each in .sksac__line, and adds .is-lit once the words have landed.

   NOTE: the shared primitive now exists — modules/sweep (`data-sk-sweep`),
   extracted when the Blog Post hero became the fourth use. This copy is
   unchanged and still runs its own code; migrating it onto the module is a
   rename away (.sksac__line → .sk-sweep__line, --sksac-l → --sk-sweep-l, and
   the colours move to --sk-sweep-fg/-a/-b). Until then a change to the effect
   has to be made here as well. */
.sksac__line { display: block; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.sksac__heading.is-lit .sksac__word {
		/* Load-bearing, not tidying. A composited descendant's glyphs don't
		   contribute to an ancestor's background-clip: text, and Sketch Reveal
		   leaves `will-change: opacity, transform` on every word it handles — so
		   the line would clip to nothing and the heading would vanish. Dropping
		   the compositing hint (and settling what the transition was holding)
		   puts the glyphs back into the clip. */
		will-change: auto;
		transition: none;
		opacity: 1;
		transform: none;
		/* The blur-up entrance leaves a filter on each word, and a filter — like
		   a compositing hint — takes the glyphs out of the ancestor's clip. Same
		   failure as will-change: the heading would vanish the moment it lit. */
		filter: none;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}

	.sksac__heading.is-lit .sksac__line {
		background-image: linear-gradient(100deg,
			var(--sksac-fg) 0%, var(--sksac-fg) 38%,
			var(--sksac-sweep-a) 46%, var(--sksac-sweep-b) 54%,
			var(--sksac-fg) 62%, var(--sksac-fg) 100%);
		background-size: 300% 100%;
		background-repeat: no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		/* The clip only paints inside the line's box, and at line-height 1.03
		   the descenders (g, p, y) hang below it — they'd be cut off. Grow the
		   box downward and pull the next line back up so nothing moves. */
		padding-bottom: .2em;
		margin-bottom: -.2em;
		animation: sksac-sweep 6s linear infinite;
		animation-delay: calc(var(--sksac-l, 0) * 620ms);
	}
}

/* At 0% the visible slice of the 300%-wide layer is its first third and at 100%
   its last — both entirely inside the flat runs, so a line rests in the plain
   text colour rather than faintly tinted. The colour only crosses during the
   first 35% of the cycle (~2.1s); the rest is rest.

   Runs 100% → 0%, not 0% → 100%: raising background-position shifts an oversized
   layer *left*, so counting up would send the colour right to left. Counting
   down travels left to right, with the reading order and the word entrance. */
@keyframes sksac-sweep {
	0%   { background-position: 100% 0; }
	35%  { background-position: 0% 0; }
	100% { background-position: 0% 0; }
}

/* One word of the heading. Needs a box of its own for Reveal's transform. */
.sksac__word { display: inline-block; }

.sksac__subtext {
	margin: clamp(16px, 1.8vw, 26px) auto 0;
	max-width: 46ch;
	font-size: clamp(15px, 1.15vw, 19px);
	line-height: 1.5;
	font-weight: 500;
	color: var(--sksac-muted);
	text-wrap: balance;
}

/* ── The list ─────────────────────────────────────────────── */

/* Hairlines above every row and below the last, so the section reads as a
   ruled index rather than a stack of cards. */
.sksac__list { border-bottom: 1px solid var(--sksac-line); }

.sksac-row { border-top: 1px solid var(--sksac-line); }

/* Rows deal out one at a time off the list's single Sketch Reveal intersection
   (`.sk-in`), rather than each waiting to be scrolled into view on its own —
   the same arrangement the service cards use for their contents. Scoped to
   html.sk-reveal like Reveal's own rules, so with JS off nothing is hidden. */
html.sk-reveal .sksac__list .sksac-row {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--sksac-row-i, 0) * 110ms);
}

html.sk-reveal .sksac__list.sk-in .sksac-row {
	opacity: 1;
	transform: none;
}

/* ── Row header ───────────────────────────────────────────── */

.sksac-row__head { margin: 0; }

.sksac-row__btn {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 44px);
	width: 100%;
	margin: 0;
	padding: clamp(18px, 2.1vw, 30px) 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 240ms ease;
}

/* The number is set at the title's own scale — it's half of what makes this
   read as an index rather than a list of headings. The grey keeps the
   hierarchy the /services index established, so matching size doesn't mean
   competing for attention. */
.sksac-row__num {
	flex: 0 0 auto;
	min-width: 2ch;
	font-size: clamp(24px, 3.1vw, 46px);
	line-height: 1.05;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
	color: var(--sksac-num);
	transition: color 240ms ease;
}

.sksac-row__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: clamp(24px, 3.1vw, 46px);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -.03em;
	color: var(--sksac-fg);
}

/* The +/− toggle. Two strokes crossed; the vertical one rotates a quarter turn
   and fades as the row opens, so the plus resolves into a minus in one move
   rather than swapping one icon for another. */
.sksac-row__sign {
	position: relative;
	flex: 0 0 auto;
	width: clamp(24px, 2.2vw, 32px);
	height: clamp(24px, 2.2vw, 32px);
	color: var(--sksac-accent);
}

.sksac-row__sign-bar {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}

.sksac-row__sign-bar--v { transform: rotate(90deg); }

.sksac-row.is-open .sksac-row__sign-bar--v {
	transform: rotate(0deg);
	opacity: 0;
}

/* Hover / focus lifts the number and toggle to the accent — the same move the
   /services index makes on its rows. */
@media (hover: hover) {
	.sksac-row__btn:hover .sksac-row__num { color: var(--sksac-accent); }
	.sksac-row__btn:hover .sksac-row__sign { transform: scale(1.06); }
}

.sksac-row__btn:focus-visible {
	outline: 2px solid var(--sksac-accent);
	outline-offset: -4px;
}

.sksac-row__sign { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }

.sksac-row.is-open .sksac-row__num { color: var(--sksac-accent); }

/* ── The panel ────────────────────────────────────────────── */

/* Height is driven inline by the JS so the open and close both animate; the
   rule here is the resting state and the easing. `hidden` closes it outright
   for anyone without JS. */
.sksac-row__panel {
	overflow: hidden;
	max-height: 0;
	/* Ease-in-out rather than an ease-out: a curve that starts at full speed
	   reads as a lurch, most of all on the close. Same curve both ways so a
	   row closing below and one opening above move together. */
	transition: max-height 520ms cubic-bezier(0.65, 0, 0.35, 1);
}

.sksac-row.is-open .sksac-row__panel { max-height: none; }

.sksac-row__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 3.4vw, 56px);
	padding: 0 0 clamp(34px, 4vw, 56px);
}

/* ── Media panel ──────────────────────────────────────────── */

/* A fixed frame whatever is inside it, so a row with one image and a row with
   six are the same height and the list doesn't jump as it's opened. The
   aspect-ratio is what sets the height, so nothing within it may be auto-sized
   — every child is pinned to the frame instead. */
.sksac-media {
	position: relative;
	aspect-ratio: 5 / 4;
	border-radius: var(--sksac-media-radius, 18px);
	overflow: hidden;
	background: color-mix(in srgb, var(--sksac-fg) 6%, var(--sksac-bg));
}

/* Pinned to the frame rather than sized by width/height, and the selector is
   doubled up on purpose: the theme's own `img` rules (max-width / height:auto)
   otherwise win and the art stops filling its box. Same treatment the service
   cards give theirs — see .sksst-card .sksst-card__img. */
.sksac .sksac-media__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* The art settles out of a slight over-scale as the row opens, the same
	   drift the service cards give their panels. */
	transform: scale(1.06);
	transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sksac .sksac-row.is-open .sksac-media__img { transform: scale(1); }

/* Video layer (Vimeo). Sits over the image; its backdrop colour shows at once
   and the player fades in over it once it's actually playing. Sized like
   object-fit: cover for a 5:4 film — the panel goes 16:10 and 4:3 on smaller
   screens, so the iframe overfills whichever way the frame is shorter. */
.sksac .sksac-media__video {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	container-type: size;
	background: var(--sksac-video-bg, transparent);
	pointer-events: none;
}
.sksac .sksac-media__video[hidden] { display: none; }
.sksac .sksac-media__video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 125cqh);
	height: max(100cqh, 80cqw);
	max-width: none;
	border: 0;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 450ms ease;
}
.sksac .sksac-media__video.is-playing iframe { opacity: 1; }

/* No images chosen: the row's number, large and faint on the tint. */
.sksac-media__ghost {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(64px, 9vw, 132px);
	font-weight: 600;
	letter-spacing: -.05em;
	color: color-mix(in srgb, var(--sksac-fg) 12%, transparent);
}

/* ── Gallery (two or more images) ─────────────────────────── */

/* Part for part the Services Stagger gallery (.sksst-gallery__*) — same
   arrows, same expanding dot, same swipe threshold — so a row and a card
   behave identically where they meet on the home page. Change one and change
   the other. The two differences are deliberate: the frame here carries the
   radius, and there is no card to hover, so the arrows key off the frame. */
.sksac-gallery {
	position: absolute;
	inset: 0;
	overflow: hidden;
	touch-action: pan-y; /* let the page still scroll vertically over a swipe */
}

.sksac-gallery__track {
	display: flex;
	height: 100%;
	transition: transform 760ms cubic-bezier(0.16, 0.84, 0.28, 1);
	will-change: transform;
}

.sksac-gallery__slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	overflow: hidden;
}

/* Arrows sit on the art, low-contrast until the frame is hovered or one of
   them is focused — the dots carry the "there's more here" signal on their
   own. The Stagger keys this off the whole card; the accordion's equivalent
   target is the frame, since the copy beside it is a separate column. */
.sksac-gallery__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.86);
	color: #111111;
	cursor: pointer;
	box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 260ms ease, background-color 200ms ease;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.sksac-gallery__nav--prev { left: 14px; }
.sksac-gallery__nav--next { right: 14px; }

.sksac-media:hover .sksac-gallery__nav,
.sksac-gallery__nav:focus-visible { opacity: 1; }
.sksac-gallery__nav:hover { background: #ffffff; }
.sksac-gallery__nav:focus-visible { outline: 3px solid var(--sksac-accent); outline-offset: 2px; }

/* Touch has no hover, so the arrows stay put there. */
@media (hover: none) {
	.sksac-gallery__nav { opacity: 1; }
}

.sksac-gallery__dots {
	position: absolute;
	left: 50%;
	bottom: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	transform: translateX(-50%);
	border-radius: 999px;
	background: rgba(17, 17, 17, 0.42);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.sksac-gallery__dot {
	width: 7px;
	height: 7px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: background-color 240ms ease, width 240ms cubic-bezier(0.16, 0.84, 0.28, 1);
}
.sksac-gallery__dot.is-active {
	width: 20px;
	border-radius: 999px;
	background: #ffffff;
}
.sksac-gallery__dot:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Controls only earn their place once the JS is driving them. */
.sksac-gallery:not(.is-ready) .sksac-gallery__nav,
.sksac-gallery:not(.is-ready) .sksac-gallery__dots { display: none; }

/* ── Copy column ──────────────────────────────────────────── */

/* This column IS the Services Stagger card body — the icon, pills, description,
   solid button and trusted-by strip are that component's, transplanted so the
   two sections read as one system where they meet on the home page. Values are
   kept in step with .sksst-card__* in modules/services-stagger; change one and
   change the other. The card's title is the only part left out: the row's own
   heading is directly above this at the same scale. */

.sksac-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.sksac-copy__icon {
	display: inline-flex;
	margin: 0 0 clamp(18px, 2vw, 30px);
	color: var(--sksac-fg);
}

.sksac-copy__icon svg {
	width: 34px;
	height: 34px;
}

/* The service name a second time, heading this column. Sized well under the row
   heading it repeats — that one is clamp(24px, 3.1vw, 46px) — so it reads as
   the head of the panel rather than as a competing title. (The Stagger card
   sets its equivalent at clamp(30px, 3vw, 46px); there it's the only place the
   name appears, so it carries the full weight.) */
.sksac-copy__title {
	margin: 0 0 20px;
	font-size: clamp(20px, 2vw, 30px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--sksac-fg);
	text-wrap: balance;
}

/* Triple-scoped so it clears the theme's `ul { margin-left: 30px }`, which
   would otherwise indent the pill row out of line with the copy. */
.sksac .sksac-copy .sksac-copy__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

/* Scoped to .sksac-copy so it outranks the theme's `li { list-style: disc }`,
   which otherwise hangs a bullet off every pill, and its `display: inline`,
   which kills the pill's vertical padding. */
.sksac-copy .sksac-copy__tag {
	display: inline-flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 9px 17px;
	border: 1px solid rgba(0, 0, 0, 0.09);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.02);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.1;
	white-space: nowrap;
	color: var(--sksac-fg);
}

.sksac-copy__desc {
	margin: 0 0 26px;
	max-width: 46ch;
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.62;
	color: color-mix(in srgb, var(--sksac-fg) 66%, transparent);
}

/* Fallback for browsers without color-mix — plain grey rather than full ink. */
@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
	.sksac-copy__desc { color: #5b5f66; }
}

.sksac-copy__btn {
	display: inline-flex;
	align-items: center;
	padding: 16px 32px;
	border-radius: 999px;
	background: var(--sksac-accent);
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 16px 30px -18px var(--sksac-action-shadow);
	transition:
		background-color 260ms ease,
		transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 260ms ease;
}

.sksac-copy__btn:hover,
.sksac-copy__btn:focus-visible {
	background: var(--sksac-action-hover);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 22px 36px -18px var(--sksac-action-shadow);
}

.sksac-copy__btn:focus-visible {
	outline: 2px solid var(--sksac-fg);
	outline-offset: 3px;
}

/* ── Trusted-by strip ─────────────────────────────────────── */

.sksac-copy__trust {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 36px);
	width: 100%;
	margin-top: auto;
	padding-top: clamp(20px, 2.2vw, 30px);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* The strip needs air above it even when the copy is short and `margin-top:auto`
   has nothing left to push against. */
.sksac-copy__btn + .sksac-copy__trust { margin-top: clamp(26px, 3vw, 44px); }

.sksac-copy__trust-label {
	flex: 0 0 auto;
	font-size: 14px;
	color: color-mix(in srgb, var(--sksac-fg) 60%, transparent);
}

.sksac-copy__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 2vw, 30px);
	min-width: 0;
}

/* Doubled-up selector for the same theme reason as the media images. */
.sksac .sksac-copy__logo {
	width: auto;
	max-width: 140px;
	height: 28px;
	max-height: 28px;
	object-fit: contain;
	display: block;
	filter: grayscale(1);
	opacity: 0.75;
}

/* ── Open choreography ────────────────────────────────────── */

/* One class change unfolds the panel's contents in order, instead of the whole
   block appearing at once. Scoped to html.sk-reveal exactly like Sketch
   Reveal's own rules, so with JS off nothing is left hidden. */
html.sk-reveal .sksac-row__panel [data-sksac-anim] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--sksac-i, 0) * 70ms + 110ms);
}

html.sk-reveal .sksac-row.is-open .sksac-row__panel [data-sksac-anim] {
	opacity: 1;
	transform: none;
}

/* ── Breakpoints ──────────────────────────────────────────── */

@media (max-width: 900px) {
	.sksac__heading { max-width: none; }
	.sksac__subtext { max-width: 44ch; }

	/* Media above the copy, and a shallower frame — a 5:4 panel at full width
	   would push the description most of a screen down. */
	.sksac-row__grid { grid-template-columns: minmax(0, 1fr); }

	.sksac-media { aspect-ratio: 16 / 10; }

	.sksac-row__btn { gap: 14px; }
}

@media (max-width: 560px) {
	.sksac-row__title,
	.sksac-row__num { font-size: clamp(21px, 6.4vw, 30px); }
	.sksac-media { aspect-ratio: 4 / 3; }
}

/* The settle, the drift and the unfold are all motion for its own sake; the
   height transition is what makes the toggle legible, so it goes too — the row
   just snaps open. */
@media (prefers-reduced-motion: reduce) {
	.sksac-row__panel,
	.sksac-row__sign-bar,
	.sksac-media__img,
	.sksac-gallery__track,
	.sksac-gallery__nav,
	.sksac-gallery__dot,
	.sksac-copy__btn,
	.sksac-row__btn,
	html.sk-reveal .sksac__list .sksac-row,
	html.sk-reveal .sksac-row__panel [data-sksac-anim] {
		transition: none !important;
	}

	html.sk-reveal .sksac__list .sksac-row {
		opacity: 1;
		transform: none;
	}

	/* Drop the clip too, not just the animation — a frozen sweep would park a
	   band of colour mid-line. */
	.sksac__heading.is-lit .sksac__word {
		-webkit-text-fill-color: var(--sksac-fg);
		color: var(--sksac-fg);
	}
	.sksac__heading.is-lit .sksac__line {
		background-image: none;
		animation: none;
	}

	.sksac-media__img { transform: none; }

	html.sk-reveal .sksac-row__panel [data-sksac-anim] {
		opacity: 1;
		transform: none;
	}
}