/* Sketch Suite — Services Stagger
   A pill eyebrow, two-line headline and a dark CTA above a stack of big rounded
   service cards. Every card is a two-column split — tinted media panel one side,
   copy the other — and the split alternates side on every other card, so the
   stack zig-zags down the page.

   Brand: indigo #6552ff · ink #111111 · type Saans throughout (set site-wide
   by modules/typography, consumed here via --sk-font / --sk-font-heading).
*/

.sksst {
	box-sizing: border-box;
	/* Full-bleed background. The section sits inside a padded WPBakery column, so
	   it breaks out to the viewport edges itself rather than depending on the row
	   being set to "stretch with no spaces" — the tint then runs edge to edge
	   while the content keeps its own max-width below. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--sksst-pad-top, 80px) 0 var(--sksst-pad-bottom, 80px);
	/* Flat colour, with the Services Hero (List) wash painted over it (Sketch →
	   Services Stagger → Style → "Hero wash"). The gradient is the hero's own —
	   same two colours, mirrored angle — so the hero and this section read as one
	   continuous surface rather than a tinted hero above a separate block. With
	   the wash off, --sksst-wash resolves to `none` and the colour shows alone. */
	background-color: var(--sksst-bg, #ffffff);
	background-image: var(--sksst-wash, none);
	color: var(--sksst-fg, #111111);
	font-family: var(--sk-font, "Saans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	/* Entrance timing, shared by every animated part of the section. */
	--sksst-ease: cubic-bezier(0.16, 0.84, 0.28, 1);
	--sksst-step: 95ms;
	/* Buttons: a darker press state and a shadow tinted by the button colour
	   itself, so brand indigo doesn't sit on a grey drop shadow. Both derive
	   from --sksst-action-bg, so changing that one setting carries them. */
	--sksst-action-hover: color-mix(in srgb, var(--sksst-action-bg, #6552ff) 88%, #000000);
	--sksst-action-shadow: color-mix(in srgb, var(--sksst-action-bg, #6552ff) 60%, transparent);
}

@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
	.sksst {
		--sksst-action-hover: #5341e6;
		--sksst-action-shadow: rgba(101, 82, 255, 0.6);
	}
}
.sksst *,
.sksst *::before,
.sksst *::after { box-sizing: border-box; }

/* Same width + gutter ramp as the Case Study Grid below it, so stacked sections
   share one left edge. */
.sksst__inner {
	max-width: var(--sksst-max, 1440px);
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
}

/* ── Header ───────────────────────────────────────────────── */

.sksst__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 64px);
	margin: 0 0 clamp(28px, 3.4vw, 48px);
}

.sksst__intro { min-width: 0; }

/* The pill is an inner span so the outer <p> is free to carry the reveal
   transform — the same split the Case Study Grid uses. */
.sksst__eyebrow { margin: 0 0 clamp(18px, 2vw, 28px); }

.sksst__pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 18px 9px 15px;
	border-radius: 999px;
	background: var(--sksst-pill-bg, #ece9ff);
	color: var(--sksst-pill-fg, #6552ff);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sksst__dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.sksst__heading {
	margin: 0;
	font-size: clamp(30px, 3.4vw, 52px);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: inherit;
	text-wrap: balance;
}

/* ── Header button ────────────────────────────────────────── */

.sksst__btn,
.sksst__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 17px 26px 17px 32px;
	border-radius: 999px;
	background: var(--sksst-action-bg, #6552ff);
	color: var(--sksst-action-fg, #ffffff);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 16px 34px -20px var(--sksst-action-shadow);
	transition:
		background-color 260ms ease,
		transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 260ms ease;
}

.sksst__btn:hover,
.sksst__btn:focus-visible {
	background: var(--sksst-action-hover);
	color: var(--sksst-action-fg, #ffffff);
	transform: translateY(-2px);
	box-shadow: 0 22px 40px -20px var(--sksst-action-shadow);
}

/* ── Footer CTA — the secondary of the pair ───────────────── */

/* Same treatment as the home hero's secondary CTA, transposed to a light
   background: outlined rather than filled, and hover swipes a solid fill in
   from the left with the colours inverted. The outline is an inset shadow, not
   a border, so it stays exactly the same height as the primary button above. */
.sksst__cta {
	position: relative;
	overflow: hidden;
	background: transparent;
	color: var(--sksst-fg, #111111);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
	transition:
		transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 260ms ease,
		color 260ms ease;
}

@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
	.sksst__cta { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.26); }
}

/* The swipe itself, clipped to the pill by the button's overflow: hidden. */
.sksst__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sksst-action-bg, #6552ff);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1);
	pointer-events: none;
}

/* Lift the label and arrow above the fill. */
.sksst__cta > * { position: relative; }

.sksst__cta:hover,
.sksst__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow:
		inset 0 0 0 1px transparent,
		0 18px 34px -20px rgba(0, 0, 0, 0.75);
}

/* Guarded so a tap on a touch device can't latch the filled state. */
@media (hover: hover) {
	.sksst__cta:hover,
	.sksst__cta:focus-visible {
		color: var(--sksst-action-fg, #ffffff);
	}
	.sksst__cta:hover::before,
	.sksst__cta:focus-visible::before {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sksst__cta::before { transition: none; }
}

.sksst__btn-arrow {
	flex: 0 0 auto;
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sksst__btn:hover .sksst__btn-arrow,
.sksst__btn:focus-visible .sksst__btn-arrow,
.sksst__cta:hover .sksst__btn-arrow,
.sksst__cta:focus-visible .sksst__btn-arrow {
	transform: translateX(4px);
}

/* ── The stack ────────────────────────────────────────────── */

.sksst__stack {
	display: flex;
	flex-direction: column;
	gap: var(--sksst-gap, 24px);
}

.sksst-card {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	align-items: stretch;
	gap: clamp(20px, 2.4vw, 34px);
	padding: clamp(16px, 1.4vw, 20px);
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: var(--sksst-radius, 28px);
	background: var(--sksst-card-bg, #ffffff);
}

/* Every other card puts the media on the right. Only the visual order moves —
   the copy stays first in the DOM after the media, so reading order is stable. */
.sksst-card--flip .sksst-card__media { order: 2; }
.sksst-card--flip .sksst-card__body { order: 1; }

/* ── Gradient ring (the home hero's "AI team" treatment) ──── */

/* Same conic gradient and masking trick as .skhh-pill--glow in the home hero,
   scaled up to a card: a gradient-filled pseudo-element masked down to just its
   border, which is the only way to get a gradient outline on a rounded box.
   Keep the two in step if the hero's palette ever changes. */
.sksst-card--glow {
	position: relative;
	border-color: transparent;
	box-shadow:
		0 20px 50px -34px rgba(102, 71, 255, 0.55),
		0 0 30px -14px rgba(185, 166, 255, 0.5);
}

.sksst-card--glow::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 1;
	padding: 2px;
	border-radius: inherit;
	background: conic-gradient(
		from 210deg,
		#b9a6ff,
		#6647ff,
		#3fd0ff,
		#ff8ad4,
		#ffd36e,
		#b9a6ff
	);
	/* Punch out the middle so only the 2px ring is painted. */
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* The ring draws itself on as the card lands, so it reads as part of the
   entrance rather than a border that was always there. */
html.sk-reveal .sksst .sksst-card--glow::before {
	opacity: 0;
	transition: opacity 1.4s var(--sksst-ease);
	transition-delay: 420ms;
}
html.sk-reveal .sksst .sksst-card--glow.sk-in::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	html.sk-reveal .sksst .sksst-card--glow::before {
		opacity: 1;
		transition: none;
	}
}

/* ── Media side ───────────────────────────────────────────── */

.sksst-card__media { min-width: 0; }

.sksst-card__frame {
	position: relative;
	height: 100%;
	min-height: clamp(280px, 30vw, 440px);
	overflow: hidden;
	border-radius: calc(var(--sksst-radius, 28px) - 10px);
	background: var(--sksst-media-bg, #f1f1ec);
}

/* Doubled-up selector on purpose — don't "simplify" it to one class. BeTheme
   ships `.content_wrapper img { height: auto }` in be.css, which outranks a
   single class and would letterbox the art inside the panel. */
.sksst-card .sksst-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sksst-card:hover .sksst-card__img { transform: scale(1.035); }

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

.sksst-gallery {
	position: absolute;
	inset: 0;
	overflow: hidden;
	touch-action: pan-y; /* let the page still scroll vertically over a swipe */
}

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

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

/* The slide is the positioning context here, not the frame. */
.sksst-card .sksst-gallery__slide .sksst-card__img { position: absolute; }

/* Arrows sit on the art, low-contrast until the card is hovered or one of them
   is focused — the dots carry the "there's more here" signal on their own. */
.sksst-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, transform 260ms ease;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.sksst-gallery__nav--prev { left: 14px; }
.sksst-gallery__nav--next { right: 14px; }

.sksst-card:hover .sksst-gallery__nav,
.sksst-gallery__nav:focus-visible { opacity: 1; }
.sksst-gallery__nav:hover { background: #ffffff; }
.sksst-gallery__nav:focus-visible { outline: 3px solid #6552ff; outline-offset: 2px; }

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

.sksst-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);
}

.sksst-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);
}
.sksst-gallery__dot.is-active {
	width: 20px;
	border-radius: 999px;
	background: #ffffff;
}
.sksst-gallery__dot:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

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

/* ── Video (takes the panel over from the gallery) ────────── */

.sksst-card .sksst-card__video,
.sksst-card .sksst-card__embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
	object-fit: cover;
	display: block;
}

/* Vimeo layer: backdrop colour at once, player fades in once it's playing.
   Sized like object-fit: cover for a 5:4 film, since the panel's shape follows
   the copy beside it. */
.sksst-card .sksst-card__vimeo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	container-type: size;
	background: var(--sksst-video-bg, transparent);
	pointer-events: none;
}
.sksst-card .sksst-card__vimeo[hidden] { display: none; }
.sksst-card .sksst-card__vimeo 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;
}
.sksst-card .sksst-card__vimeo.is-playing iframe { opacity: 1; }

/* No image chosen — the service icon, blown up and faint on the panel tint. */
.sksst-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sksst-fg, #111111);
	opacity: 0.12;
}
.sksst-card__placeholder svg {
	width: clamp(72px, 9vw, 128px);
	height: auto;
	stroke-width: 1;
}

/* ── Copy side ────────────────────────────────────────────── */

.sksst-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: clamp(22px, 2.6vw, 44px) clamp(18px, 2.4vw, 40px) clamp(18px, 2vw, 30px);
}

.sksst-card__icon-wrap {
	display: inline-flex;
	margin: 0 0 clamp(18px, 2vw, 30px);
	color: var(--sksst-fg, #111111);
}
.sksst-card__icon-wrap .sksst-card__icon {
	width: 34px;
	height: 34px;
}

.sksst-card__title {
	margin: 0 0 20px;
	/* Sits just under the section headline (clamp(30px, 3.4vw, 52px)) so the
	   hierarchy still reads top-down. */
	font-size: clamp(30px, 3vw, 46px);
	/* Heavier than the section headline above it, so each card's name carries
	   its own weight in the stack. Saans covers 300..900. */
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: inherit;
	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 title above it. */
.sksst .sksst-card .sksst-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

/* Scoped to .sksst-card 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. */
.sksst-card .sksst-card__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;
}

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

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

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

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

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

.sksst-card__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. */
.sksst-card__btn + .sksst-card__trust { margin-top: clamp(26px, 3vw, 44px); }

.sksst-card__trust-label {
	flex: 0 0 auto;
	font-size: 14px;
	color: color-mix(in srgb, currentColor 60%, transparent);
}

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

/* Doubled-up selector for the same BeTheme reason as the card image. */
.sksst-card .sksst-card__logo {
	width: auto;
	max-width: 140px;
	height: 28px;
	max-height: 28px;
	object-fit: contain;
	display: block;
	filter: grayscale(1);
	opacity: 0.75;
}

/* ── Entrance choreography ────────────────────────────────── */

/* The card carries the shared Sketch Reveal trigger; these rules turn that one
   intersection into a staggered sequence inside it. Every animated part is
   marked `data-sksst-anim` and carries a `--sksst-i` step index (fractional
   steps are fine — the tag pills use them to run tighter than the block parts).
   Scoped to html.sk-reveal exactly like Reveal's own rules, so with JS off
   nothing is ever left hidden. */
html.sk-reveal .sksst [data-sksst-anim] {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 1s var(--sksst-ease),
		transform 1.15s var(--sksst-ease);
	transition-delay: calc(var(--sksst-i, 0) * var(--sksst-step, 95ms) + 120ms);
	will-change: opacity, transform;
}

html.sk-reveal .sksst .sksst-card.sk-in [data-sksst-anim] {
	opacity: 1;
	transform: none;
}

/* The media panel arrives as a soft settle rather than a slide — it's the
   heaviest thing on the card, so it moves least and takes longest. */
html.sk-reveal .sksst .sksst-card__media[data-sksst-anim] {
	transform: translateY(20px) scale(0.985);
	transition:
		opacity 1.2s var(--sksst-ease),
		transform 1.4s var(--sksst-ease);
}

/* …and the art inside it drifts down from a slight over-scale as it lands.
   Only the media itself, never the gallery wrapper — scaling that would drag
   the arrows and dots with it. */
html.sk-reveal .sksst .sksst-card__img,
html.sk-reveal .sksst .sksst-card__video,
html.sk-reveal .sksst .sksst-card__embed,
html.sk-reveal .sksst .sksst-card__placeholder {
	transform: scale(1.08);
	transition: transform 1.8s var(--sksst-ease);
	transition-delay: 120ms;
}
html.sk-reveal .sksst .sksst-card.sk-in .sksst-card__img,
html.sk-reveal .sksst .sksst-card.sk-in .sksst-card__video,
html.sk-reveal .sksst .sksst-card.sk-in .sksst-card__embed,
html.sk-reveal .sksst .sksst-card.sk-in .sksst-card__placeholder {
	transform: scale(1);
}

/* Slower, longer-travelled entrances than the Reveal defaults — the section is
   meant to unfold, not pop. */
html.sk-reveal .sksst .sksst-card,
html.sk-reveal .sksst .sksst__eyebrow,
html.sk-reveal .sksst .sksst__heading,
html.sk-reveal .sksst .sksst__btn,
html.sk-reveal .sksst .sksst__cta {
	--sk-duration: 1.15s;
	--sk-distance: 42px;
	--sk-ease: var(--sksst-ease);
}

/* Once the card has landed, hover and the gallery own the transform again —
   otherwise the settle transition would fight the slide track and the hover
   push, both of which are transforms on the same elements. */
html.sk-reveal .sksst .sksst-card.sk-in .sksst-gallery__track { transition: transform 760ms cubic-bezier(0.16, 0.84, 0.28, 1); }
html.sk-reveal .sksst .sksst-card.sk-in:hover .sksst-card__img { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
	html.sk-reveal .sksst [data-sksst-anim],
	html.sk-reveal .sksst .sksst-card__img,
	html.sk-reveal .sksst .sksst-card__video,
	html.sk-reveal .sksst .sksst-card__embed,
	html.sk-reveal .sksst .sksst-card__placeholder {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ── Footer CTA ───────────────────────────────────────────── */

.sksst__foot {
	display: flex;
	justify-content: center;
	margin-top: clamp(28px, 3.4vw, 48px);
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1080px) {
	.sksst-card__frame { min-height: clamp(240px, 34vw, 340px); }
}

@media (max-width: 900px) {
	/* Stacked: the media always leads, whichever side it takes on desktop. */
	.sksst-card {
		grid-template-columns: minmax(0, 1fr);
	}
	.sksst-card--flip .sksst-card__media { order: 0; }
	.sksst-card--flip .sksst-card__body { order: 0; }
	.sksst-card__frame { min-height: 260px; }
	.sksst-card__body { padding: clamp(18px, 4vw, 28px) clamp(10px, 2vw, 20px) clamp(6px, 2vw, 14px); }
}

@media (max-width: 860px) {
	.sksst__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 26px;
	}
}

@media (max-width: 560px) {
	.sksst-card__trust {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sksst-card .sksst-card__img,
	.sksst__btn,
	.sksst__cta,
	.sksst-card__btn { transition: none; }
	.sksst-card:hover .sksst-card__img { transform: none; }
}

/* Anchor landing offset. The global header is `position: fixed`, 68px tall, so
   without this an in-page link drops the section's heading underneath it. */
.sksst[id] { scroll-margin-top: 96px; }