/**
 * Case Study module — front-end styles.
 * Colours are driven by per-section CSS custom properties set inline from ACF:
 *   --skcs-hero-bg / --skcs-hero-fg   (hero)
 *   --skcs-bg / --skcs-fg / --skcs-accent (text / pair / scroll blocks)
 */

.skcs {
	font-family: var(--sk-font, "Saans", system-ui, -apple-system, "Segoe UI", sans-serif);
	--skcs-pad-x: clamp(20px, 5vw, 80px);
	--skcs-pad-y: clamp(48px, 8vw, 120px);
	--skcs-maxw: 1400px;
}

.skcs * {
	box-sizing: border-box;
}

/* ============================================================ *
 *  HERO
 * ============================================================ */

.skcs-hero {
	position: relative;
	background: var(--skcs-hero-bg, #000);
	color: var(--skcs-hero-fg, #fff);
	padding-top: var(--skcs-pad-y);
	/* Own stacking context, so the negative z-index layers below sit behind the
	   hero's content but never slip behind the hero itself. */
	isolation: isolate;
}

/* Background layers — gradient, image or video — painted as pseudo-elements at
   negative z-index. That puts them above the hero's base colour and below
   everything in the flow, so no child needs a z-index of its own. A video is
   the exception: an iframe cannot be a pseudo-element, so it gets real markup
   at the same depth. */
.skcs-hero--gradient::before,
.skcs-hero--image::before,
.skcs-hero--image::after,
.skcs-hero--video::before,
.skcs-hero--video::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.skcs-hero--gradient::before {
	z-index: -2;
	background-image: var(--skcs-hero-gradient);
}

/* The image, and the video's poster — which doubles as the frame shown while
   the player loads and as the reduced-motion fallback. */
.skcs-hero--image::before,
.skcs-hero--video::before {
	z-index: -2;
	background-image: var(--skcs-hero-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.skcs-hero--image::after,
.skcs-hero--video::after {
	z-index: -1;
	background: var(--skcs-hero-tint, transparent);
	opacity: var(--skcs-hero-tint-opacity, 0);
}

/* Vimeo background player. min-width/min-height at the video's true aspect
   ratio grows the iframe until it covers the hero, so a portrait clip fills a
   wide hero instead of letterboxing inside it. */
.skcs-hero__bgvideo {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	pointer-events: none;
}

.skcs-hero__bgvideo iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	aspect-ratio: var(--skcs-hero-video-ratio, 1.7778);
	border: 0;
}

/* No autoplaying background video for anyone who has asked for less motion —
   the poster underneath is already in place. */
@media (prefers-reduced-motion: reduce) {
	.skcs-hero__bgvideo { display: none; }
}

.skcs-hero__inner {
	max-width: var(--skcs-maxw);
	margin: 0 auto;
	padding: 0 var(--skcs-pad-x) clamp(32px, 5vw, 64px);
}

/* The title runs the full width of the component. Everything else pairs up
   beneath it: intro + Services / Industry on the left, the testimonial card on
   the right, so the two columns balance. */
.skcs-hero__head {
	margin-bottom: clamp(28px, 4vw, 56px);
}

.skcs-hero__col {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3.5vw, 48px);
}

.skcs-hero__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
}

/* Small label above the title — same treatment as the About page eyebrow
   (.skah__eyebrow), so the two pages read as one system. */
.skcs-hero__eyebrow {
	margin: 0 0 clamp(14px, 1.6vw, 22px);
	font-size: clamp(12px, 0.85vw, 14px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--skcs-hero-fg, #fff);
	opacity: 0.55;
}

.skcs-hero__title {
	margin: 0 0 0.35em;
	font-size: clamp(2.75rem, 7vw, 5.5rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	font-weight: 600;
	/* Explicit (not inherited) so a theme's direct heading-colour rule can't win
	   on specificity. */
	color: var(--skcs-hero-fg, #fff);
}

.skcs-hero__intro {
	font-size: clamp(1.05rem, 1.4vw, 1.3rem);
	line-height: 1.5;
	max-width: 52ch;
	color: var(--skcs-hero-fg, #fff);
	opacity: 0.86;
}

.skcs-hero__intro p { margin: 0; color: inherit; }

.skcs-hero__meta {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2.5vw, 40px);
}

.skcs-hero__meta-col dt {
	font-size: 0.9rem;
	opacity: 0.55;
	margin-bottom: 0.7em;
	font-weight: 500;
	color: var(--skcs-hero-fg, #fff);
}

.skcs-hero__meta-col dd {
	margin: 0 0 0.25em;
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	font-weight: 500;
	line-height: 1.35;
	color: var(--skcs-hero-fg, #fff);
}

/* ---- Testimonial card ---------------------------------------- *
 * A white card regardless of the hero behind it, so the quote reads the same
 * over a pale gradient, a photo or a video. Its own colours are fixed rather
 * than inherited from --skcs-hero-fg for that reason.
 * -------------------------------------------------------------- */

.skcs-hero__quote {
	background: #ffffff;
	border-radius: clamp(14px, 1.2vw, 20px);
	padding: clamp(24px, 2.6vw, 40px);
	box-shadow: 0 1px 2px rgba(17, 19, 24, 0.05), 0 18px 44px rgba(17, 19, 24, 0.08);
	color: #14161d;
}

/* No quote — the card would be an empty box, so only the actions remain and
   they sit directly on the hero. */
.skcs-hero__quote--bare {
	background: none;
	box-shadow: none;
	padding: 0;
}

.skcs-hero__quote-logo {
	margin-bottom: clamp(18px, 2vw, 28px);
}

.skcs-hero__quote-logo img {
	width: auto;
	max-width: 140px;
	max-height: 34px;
	object-fit: contain;
}

.skcs-hero__quote-text {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: clamp(1rem, 1.15vw, 1.2rem);
	line-height: 1.55;
	font-weight: 500;
	color: inherit;
	quotes: none;
}

/* Betheme italicises every blockquote from a higher-specificity selector, and
   the reference is upright — so this has to out-rank it rather than just set
   the property. Same reason the video/image rules below carry !important. */
.skcs .skcs-hero__quote-text,
.skcs .skcs-hero__quote-text p {
	font-style: normal !important;
}

.skcs-hero__quote-text::before,
.skcs-hero__quote-text::after { content: none; }

.skcs-hero__quote-text p { margin: 0 0 0.8em; color: inherit; }
.skcs-hero__quote-text p:last-child { margin-bottom: 0; }

.skcs-hero__quote-by {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: clamp(20px, 2.4vw, 34px);
}

.skcs-hero__quote-avatar {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 8px;
	overflow: hidden;
	background: #eceff3;
}

.skcs-hero__quote-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.skcs-hero__quote-who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.skcs-hero__quote-name {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
}

.skcs-hero__quote-role {
	font-size: 0.92rem;
	line-height: 1.3;
	color: #6b7280;
}

/* Both hero actions now live inside the card. */
.skcs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: clamp(20px, 2.4vw, 32px);
}

.skcs-hero__quote--bare .skcs-hero__actions { margin-top: 0; }

/* "Play testimonial" — a quiet outline button beside the primary CTA, rather
   than the video thumbnail it replaced. */
.skcs-hero__playbtn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 20px 11px 14px;
	border: 0;
	border-radius: var(--skgh-radius-cta, 13px);
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(20, 22, 29, 0.18);
	color: #14161d;
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: box-shadow 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Outside the white card the button sits straight on the hero, which may be
   pale or dark — so the outline is mixed from the hero's own text colour
   rather than hard-coded white. */
.skcs-hero__quote--bare .skcs-hero__playbtn {
	color: var(--skcs-hero-fg, #fff);
	box-shadow: inset 0 0 0 1.5px rgba(128, 128, 128, 0.45);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 38%, transparent);
}

.skcs-hero__quote--bare .skcs-hero__playbtn:hover {
	box-shadow: inset 0 0 0 1.5px rgba(128, 128, 128, 0.7);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 65%, transparent);
}

.skcs-hero__playbtn:hover {
	transform: translateY(-1px);
	box-shadow: inset 0 0 0 1.5px rgba(20, 22, 29, 0.42);
}

.skcs-hero__playbtn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--skcs-accent, #c7f94b);
	color: #14161d;
}

.skcs-hero__playbtn-icon svg { margin-left: 1px; }

@media (max-width: 860px) {
	.skcs-hero__cols { grid-template-columns: 1fr; }
}

/* "Visit Client Website" button — matches the global header "Get In Touch"
   primary CTA. Reuses the header's :root colour vars so it stays in sync with
   the header settings, with a fallback to the current indigo. */
.skcs-hero__cta {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--skgh-radius-cta, 13px);
	background: var(--skgh-cta, #6647ff);
	color: var(--skgh-cta-text, #fff);
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.005em;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.18s ease, opacity 0.18s ease;
}

.skcs-hero__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.skcs-hero__cta-arrow {
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.skcs-hero__cta:hover .skcs-hero__cta-arrow {
	transform: translate(2px, -2px);
}

/* ---- Continuous-scroll media strip -------------------------- */

/* Inside the hero, edge to edge, on the same gradient (or image + tint) as the
   copy above it — the two read as one component. The gap above comes from
   .skcs-hero__inner's own bottom padding; the padding below is the run-off of
   background beneath the cards, which is what stops the strip looking cropped
   by the next section. */
.skcs-hero__strip {
	margin-top: var(--skcs-hero-strip-gap, 0);
	padding-bottom: var(--skcs-hero-strip-pb, clamp(40px, 6vw, 88px));
}

.skcs-scroller {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: none;
}

.skcs-scroller__track {
	display: flex;
	width: max-content;
	animation: skcs-marquee var(--skcs-scroll-speed, 40s) linear infinite;
	will-change: transform;
}

.skcs-scroller:hover .skcs-scroller__track {
	animation-play-state: paused;
}

/* …except in the hero, where the strip never stops: it is part of the first
   impression rather than something to browse, and a mouse resting anywhere over
   a full-bleed band would freeze it. */
.skcs-hero__strip .skcs-scroller:hover .skcs-scroller__track {
	animation-play-state: running;
}

.skcs-scroller__card {
	flex: 0 0 auto;
	position: relative;
	/* Spacing via margin (not flex gap) so each card+margin is one exact
	   repeating unit — the -50% marquee travel then tiles seamlessly. */
	margin: 0 clamp(16px, 2vw, 32px) 0 0;
	width: clamp(280px, 42vw, 720px);
	aspect-ratio: 4 / 3.4;
	border-radius: clamp(16px, 1.6vw, 28px);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
}

/* Fill the card fully — height first — regardless of the theme's img rules
   (which force height:auto and leave a gap at the bottom otherwise). */
.skcs-scroller__media,
.skcs-media__el {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: cover;
}

@keyframes skcs-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.skcs-scroller__track { animation: none; }
	.skcs-scroller { overflow-x: auto; }
}

/* ============================================================ *
 *  INTRO STATEMENT
 *  A per-project copy of the home page's "Who are we?" band (the Logo Grid's
 *  head, modules/logo-grid): pill, big centred statement, supporting line,
 *  tags. Values are kept in step with .sklg__pill / __bubble / __intro / __sub
 *  on purpose — the two are meant to read as the same component.
 * ============================================================ */

.skcs-intro {
	background: var(--skcs-bg, #fff);
	color: var(--skcs-fg, #0b0b0b);
	padding-top: var(--skcs-intro-pt, clamp(64px, 9vw, 130px));
	padding-bottom: var(--skcs-intro-pb, clamp(48px, 7vw, 100px));
	text-align: center;
}

.skcs-intro__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 var(--skcs-pad-x);
}

/* Two elements, not one: Reveal transitions the transform of the element it is
   on, so the wobble needs a box of its own to animate. */
.skcs-intro__pill {
	margin: 0 0 clamp(22px, 2.6vw, 34px);
}

.skcs-intro__bubble {
	position: relative;
	display: inline-block;
	padding: 9px 18px 10px;
	border-radius: 10px;
	background: var(--skcs-pill-bg, #8b6cff);
	color: var(--skcs-pill-fg, #fff);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.005em;
	/* Pivot on the tail, so the wobble reads as a sign swinging on its pin. */
	transform-origin: 50% 100%;
}

/* Speech-bubble tail, pointing down at the statement. */
.skcs-intro__bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 9px solid var(--skcs-pill-bg, #8b6cff);
}

/* The shake occupies only the first fifth of the keyframes; the rest is rest,
   which is what puts the pause between shakes without a second animation. */
.skcs-intro__pill--wobble.sk-in .skcs-intro__bubble {
	animation: skcs-wobble 4s ease-in-out 0.45s infinite;
}

@keyframes skcs-wobble {
	0%   { transform: rotate(0deg); }
	2%   { transform: rotate(-4.5deg); }
	5%   { transform: rotate(3.6deg); }
	8%   { transform: rotate(-2.6deg); }
	11%  { transform: rotate(1.7deg); }
	14%  { transform: rotate(-1deg); }
	17%  { transform: rotate(0.5deg); }
	20%  { transform: rotate(0deg); }
	100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	.skcs-intro__pill--wobble.sk-in .skcs-intro__bubble { animation: none; }
}

.skcs-intro__statement {
	max-width: 1120px;
	margin: 0 auto;
	font-size: clamp(20px, 2.1vw, 30px);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--skcs-fg, #0b0b0b);
	text-wrap: balance;
}

/* Each word is its own reveal target, so the line resolves into focus rather
   than fading as one block. inline-block gives the blur a box to work on. */
.skcs-intro__word {
	display: inline-block;
	will-change: filter, opacity, transform;
}

/* A shorter measure than the statement — the narrower column is what makes it
   read as support rather than as a second headline. */
.skcs-intro__support {
	max-width: 720px;
	margin: clamp(18px, 2vw, 26px) auto 0;
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.6;
	letter-spacing: -0.005em;
	color: color-mix(in srgb, var(--skcs-fg, #0b0b0b) 66%, transparent);
	text-wrap: pretty;
}

.skcs-intro__tags {
	list-style: none;
	margin: clamp(26px, 3vw, 40px) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 12px;
}

.skcs-intro__tag {
	/* Also on the item, not just the list: the theme sets a marker on `li`
	   directly, which a list-style on the <ul> alone does not beat. */
	list-style: none;
	padding: 8px 16px 9px;
	border-radius: 999px;
	font-size: clamp(13px, 1vw, 14px);
	font-weight: 500;
	line-height: 1.2;
	color: color-mix(in srgb, var(--skcs-fg, #0b0b0b) 78%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skcs-fg, #0b0b0b) 16%, transparent);
}

/* ============================================================ *
 *  CONTENT ROW  (text / image / video — the flexible block)
 * ============================================================ */

.skcs-row {
	background: var(--skcs-bg, #f4f5f7);
	color: var(--skcs-fg, #0b0b0b);
	padding-top: var(--skcs-row-pt, 0);
	padding-bottom: var(--skcs-row-pb, 0);
}

.skcs-row__inner {
	display: grid;
	grid-template-columns: var(--skcs-row-cols, repeat(2, minmax(0, 1fr)));
	gap: clamp(16px, 2.4vw, 40px);
	align-items: start;
}

.skcs-row--middle .skcs-row__inner { align-items: center; }

/* Inset is the padded panel the media sits inside — the pale band the case
   study is mostly built from. Bleed drops the padding so the slots run the
   full width of the viewport, which is the edge-to-edge treatment. */
.skcs-row--inset .skcs-row__inner {
	max-width: var(--skcs-maxw);
	margin: 0 auto;
	padding: var(--skcs-row-pt, clamp(24px, 4vw, 64px)) var(--skcs-pad-x) var(--skcs-row-pb, clamp(24px, 4vw, 64px));
}

/* The padding lives on the inner element, so the section itself must not add
   it again — otherwise an override would apply twice. */
.skcs-row--inset { padding-top: 0; padding-bottom: 0; }

.skcs-row__slot {
	margin: 0;
	min-width: 0;
}

.skcs-row__slot--media {
	position: relative;
	overflow: hidden;
	line-height: 0; /* no descender gap under the image */
}

.skcs-row--rounded .skcs-row__slot--media { border-radius: clamp(12px, 1.4vw, 22px); }
.skcs-row--shadow .skcs-row__slot--media  { box-shadow: 0 18px 44px -18px rgba(17, 19, 24, 0.35); }

/* Natural is the default: each image keeps its own shape, which is what
   screenshots need. A crop turns the slot into a fixed box and fills it. */
.skcs-row__slot--media img,
.skcs-row__slot--media video {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.skcs-row--cropped .skcs-row__slot--media {
	aspect-ratio: var(--skcs-row-ratio, 4 / 3);
}

/* height is !important for the same reason as .skcs-media__el above: the theme
   forces height:auto on every image, which leaves a gap at the bottom of the
   crop box. */
.skcs-row--cropped .skcs-row__slot--media img,
.skcs-row--cropped .skcs-row__slot--media video,
.skcs-row--cropped .skcs-row__slot--media .skcs-vimeo {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}

.skcs-row__slot--text {
	line-height: initial;
	max-width: 60ch;
}

/* A small label above a text slot's heading. Left unconfigured it mixes itself
   from the row's own text colour, so it sits correctly on a white row, a pale
   row or a dark one without anyone choosing a colour. */
.skcs-row__pill {
	display: inline-block;
	margin: 0 0 clamp(14px, 1.4vw, 20px);
	padding: 7px 15px;
	border-radius: 999px;
	background: var(--skcs-slot-pill-bg, color-mix(in srgb, var(--skcs-fg, #0b0b0b) 9%, transparent));
	color: var(--skcs-slot-pill-fg, color-mix(in srgb, var(--skcs-fg, #0b0b0b) 82%, transparent));
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
}

.skcs-row__heading {
	margin: 0 0 0.7em;
	font-size: clamp(1.35rem, 2vw, 1.9rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-weight: 600;
	color: var(--skcs-fg, #0b0b0b); /* explicit — beat theme heading colours */
	text-wrap: balance;
}

.skcs-row__body {
	font-size: clamp(0.98rem, 1.05vw, 1.05rem);
	line-height: 1.65;
	color: color-mix(in srgb, var(--skcs-fg, #0b0b0b) 72%, transparent);
}

.skcs-row__body :first-child { margin-top: 0; }
.skcs-row__body :last-child  { margin-bottom: 0; }
.skcs-row__body p { margin: 0 0 1.1em; color: inherit; }
.skcs-row__body a { color: inherit; text-decoration: underline; }

/* One column of text on its own is a measure in the middle of the page, not a
   column hugging the left edge. */
.skcs-row__inner:has(> .skcs-row__slot--text:only-child) .skcs-row__slot--text {
	margin: 0 auto;
}

@media (max-width: 860px) {
	.skcs-row__inner { grid-template-columns: 1fr; }
	.skcs-row__slot--text { max-width: none; }
}

/* ---- Vimeo slot --------------------------------------------
 * A player has no intrinsic size, so the wrapper carries the clip's real
 * aspect ratio (resolved through Vimeo's oEmbed by SKCSG_Plugin) and the
 * iframe fills it. The poster, when there is one, sits behind as the frame
 * shown while the player loads. */

.skcs-vimeo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--skcs-vimeo-ratio, 1.7778);
	background-color: rgba(17, 19, 24, 0.06);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.skcs-vimeo iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Cropped to a shape that isn't the clip's own: grow the player until it covers
   the box rather than letterboxing inside it. Only the silent loop is treated
   this way — cropping a player would put its controls out of reach.

   The sizing is the `max()` pair, the same formula the Case Study Grid uses on
   its tile embeds. It has to be arithmetic rather than `min-width: 100%` +
   `aspect-ratio`: with both minimums at 100% the element resolves to exactly
   the box on both axes, the aspect-ratio is dropped as unsatisfiable, and the
   clip is handed to Vimeo in the wrong shape — which letterboxes it inside the
   iframe. That looks like bands at the top and bottom of a video that was
   supposed to fill its slot. Whichever axis is short grows; the other stays at
   100%; the overflow is centred and clipped by the wrapper. */
.skcs-row--cropped .skcs-vimeo--background iframe {
	/* `inset` is shorthand for all four offsets, so it must come *before* the
	   top/left that centre the player — after them it resets both to auto and
	   the clip sits in the corner instead. */
	inset: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width:  max(100%, calc(100% * var(--skcs-vimeo-ratio, 1.7778) / var(--skcs-row-ar, 1.7778)));
	height: max(100%, calc(100% * var(--skcs-row-ar, 1.7778) / var(--skcs-vimeo-ratio, 1.7778)));
	aspect-ratio: auto;
	/* Betheme ships a bare `iframe { max-width: 100% }`, which silently clamps
	   the axis that is supposed to overflow — the cover computes correctly and
	   is then capped back to the box. Without this reset the fix above does
	   nothing at all. */
	max-width: none;
	max-height: none;
}

/* ---- Unmute button on a sound-enabled silent loop ------------------ */

.skcs-vimeo--sound { position: relative; }

.skcs-vimeo__sound {
	position: absolute;
	right: clamp(14px, 1.6vw, 26px);
	bottom: clamp(14px, 1.6vw, 26px);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px 12px 16px;
	border: 0;
	border-radius: 999px;
	background: rgba(12, 14, 18, 0.55);
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	backdrop-filter: blur(14px) saturate(1.1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.skcs-vimeo__sound:hover { background: rgba(12, 14, 18, 0.75); transform: translateY(-1px); }
.skcs-vimeo__sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.skcs-vimeo__sound:disabled { opacity: 0.6; cursor: default; transform: none; }

.skcs-vimeo__sound-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--skcs-accent, #c8f169);
	color: #14161d;
	flex: none;
}

.skcs-vimeo__sound-icon svg { width: 15px; height: 15px; }

/* One icon at a time: crossed-out speaker while muted, waves once it is on. */
.skcs-vimeo__sound .skcs-vimeo__sound-on { display: none; }
.skcs-vimeo__sound.is-on .skcs-vimeo__sound-off { display: none; }
.skcs-vimeo__sound.is-on .skcs-vimeo__sound-on { display: block; }

@media (max-width: 640px) {
	.skcs-vimeo__sound { padding: 10px 16px 10px 12px; font-size: 14px; gap: 8px; }
	.skcs-vimeo__sound-icon { width: 22px; height: 22px; }
}

/* ============================================================ *
 *  TEXT BLOCK  (Overview / Challenge)
 * ============================================================ */

.skcs-text {
	background: var(--skcs-bg, #0d1117);
	color: var(--skcs-fg, #fff);
	padding: var(--skcs-pad-y) 0;
}

.skcs-text__inner {
	max-width: var(--skcs-maxw);
	margin: 0 auto;
	padding: 0 var(--skcs-pad-x);
	display: grid;
	grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 80px);
	align-items: start;
}

.skcs-text__eyebrow {
	margin: 0.6em 0 0;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--skcs-accent);
	opacity: 0.85;
}

.skcs-text__main { max-width: 60ch; }

.skcs-text__heading {
	margin: 0 0 0.7em;
	font-size: clamp(1.9rem, 3.6vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	font-weight: 600;
	color: var(--skcs-fg, #fff); /* explicit — beat theme heading colours */
}

.skcs-text__body {
	font-size: clamp(1.05rem, 1.35vw, 1.3rem);
	line-height: 1.6;
	color: var(--skcs-fg, #fff);
	opacity: 0.72;
}

.skcs-text__body :first-child { margin-top: 0; }
.skcs-text__body :last-child  { margin-bottom: 0; }
.skcs-text__body p { margin: 0 0 1.1em; color: inherit; }
.skcs-text__feature-text { color: var(--skcs-fg, #fff); }
.skcs-text__body a { color: inherit; text-decoration: underline; }

/* Betheme's `.column_column ul` (0,1,1) beats a bare class (0,1,0) and
   forces list-style:disc + margin:0 0 15px 30px. Prefixing with the
   section class takes this to (0,2,0) so the module rule wins. */
.skcs-text .skcs-text__features {
	list-style: none;
	margin: clamp(40px, 5vw, 72px) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(20px, 2.4vw, 32px);
}

.skcs-text .skcs-text__feature {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 24px);
}

.skcs-text__feature-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--skcs-accent);
}

.skcs-text__feature-icon img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.skcs-text__feature-text {
	font-size: clamp(1.05rem, 1.4vw, 1.35rem);
	font-weight: 500;
	line-height: 1.35;
}

/* ---- Vimeo inside a fixed box (strip card / pair slot) -------------
 * The scroller card and the pair slot are boxes of a set shape that the media
 * fills — unlike a Content Row, where the media can decide its own height. So
 * the wrapper is stretched to the box and the clip is covered into it with the
 * same max() pair used above, against the box's ratio rather than the row's.
 * --skcs-slot-ar is that ratio as a decimal, kept in step with the
 * aspect-ratio each box already declares. */

.skcs-scroller__card { --skcs-slot-ar: 1.1765; }  /* 4 / 3.4 */
.skcs-pair__slot     { --skcs-slot-ar: 1.3333; }  /* 4 / 3   */

.skcs-scroller__card > .skcs-vimeo,
.skcs-pair__slot > .skcs-vimeo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* The box decides the shape here, not the clip — otherwise the wrapper
	   takes the clip's ratio and the card stops being the size it was set. */
	aspect-ratio: auto;
}

.skcs-scroller__card > .skcs-vimeo iframe,
.skcs-pair__slot > .skcs-vimeo iframe {
	position: absolute;
	inset: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width:  max(100%, calc(100% * var(--skcs-vimeo-ratio, 1.7778) / var(--skcs-slot-ar, 1.7778)));
	height: max(100%, calc(100% * var(--skcs-slot-ar, 1.7778) / var(--skcs-vimeo-ratio, 1.7778)));
	/* Betheme's bare `iframe { max-width: 100% }` clamps the overflowing axis —
	   see the Content Row rule above for the full story. */
	max-width: none;
	max-height: none;
	border: 0;
}

/* ============================================================ *
 *  TESTIMONIAL  (quote + who said it)
 *
 *  The hero card is the project's one headline quote; this is the band for
 *  the others. Deliberately quieter than the hero card — no panel, no
 *  shadow — so a quote mid-page reads as a pause in the story rather than a
 *  second hero. Colours come from the section's own --skcs-bg / -fg /
 *  -accent, like the Text Block.
 * ============================================================ */

.skcs-tm {
	background: var(--skcs-bg, #fff);
	color: var(--skcs-fg, #0b0b0b);
	padding-top: var(--skcs-tm-pt, clamp(64px, 9vw, 128px));
	padding-bottom: var(--skcs-tm-pb, clamp(64px, 9vw, 128px));
}

.skcs-tm__inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 var(--skcs-pad-x);
	display: flex;
	flex-direction: column;
}

.skcs-tm--center .skcs-tm__inner { align-items: center; text-align: center; }

/* Left-aligned, the band is part of the page's column rather than a centred
   measure, so it takes the same max-width and padding as every other section
   and its left edge lines up with them. The quote keeps a measure of its own,
   or a short line would stretch the full 1240px. */
.skcs-tm--left .skcs-tm__inner {
	align-items: flex-start;
	text-align: left;
	max-width: var(--skcs-maxw);
}

.skcs-tm--left .skcs-tm__quote { max-width: 24ch; }
.skcs-tm--left .skcs-tm__body  { max-width: 58ch; }

/* ---- Eyebrow ---- */
.skcs-tm__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 clamp(20px, 2.4vw, 32px);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--skcs-accent, #6552ff);
}

.skcs-tm__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* ---- Client logo ---- */
.skcs-tm__logo {
	margin: 0 0 clamp(22px, 2.6vw, 36px);
	line-height: 0;
}

.skcs-tm__logo img {
	width: auto;
	max-width: 160px;
	max-height: 40px;
	object-fit: contain;
}

/* ---- The quote ---- */
.skcs-tm__quote {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: clamp(1.35rem, 2.5vw, 2.15rem);
	letter-spacing: -0.018em;
	font-weight: 500;
	color: inherit;
	quotes: none;
	text-wrap: balance;
}

/* Betheme italicises every blockquote from a higher-specificity selector, adds
   its own quote marks, and sets a tight line-height — all three have to be
   out-ranked, not merely set. Same reason as .skcs-hero__quote-text above.
   The leading is deliberately generous: at this size a display line-height
   that works for body copy reads as two lines jammed together. */
.skcs .skcs-tm__quote,
.skcs .skcs-tm__quote p {
	font-style: normal !important;
	line-height: 1.45;
}

.skcs-tm__quote::before,
.skcs-tm__quote::after { content: none; }

.skcs-tm__quote p { margin: 0 0 0.6em; color: inherit; }
.skcs-tm__quote p:last-child { margin-bottom: 0; }

/* The accent-tinted phrase inside a pull quote (*asterisks* in the field). */
.skcs-tm__hi { color: var(--skcs-accent, #6552ff); }

/* Supporting copy under a pull quote. Body size, not display size — the whole
   point of the pull quote is that one line is bigger than the rest. */
.skcs-tm__body {
	margin-top: clamp(20px, 2.4vw, 32px);
	max-width: 62ch;
	font-size: clamp(1rem, 1.15vw, 1.13rem);
	line-height: 1.65;
	color: color-mix(in srgb, var(--skcs-fg, #0b0b0b) 82%, transparent);
}

.skcs-tm__body p { margin: 0 0 1.1em; color: inherit; }
.skcs-tm__body p:last-child { margin-bottom: 0; }

/* Centred alignment centres the measure too, or the block reads as left-aligned
   text that happens to sit in the middle. */
.skcs-tm--center .skcs-tm__body { margin-left: auto; margin-right: auto; }

/* ---- Who said it ---- */
.skcs-tm__by {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: clamp(28px, 3.4vw, 44px);
	text-align: left; /* the pair always reads left-to-right, even when centred */
}

.skcs-tm__avatar {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: color-mix(in srgb, var(--skcs-fg, #0b0b0b) 10%, transparent);
}

.skcs-tm__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.skcs-tm__who {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.skcs-tm__name {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--skcs-fg, #0b0b0b);
}

.skcs-tm__company {
	font-size: 0.92rem;
	line-height: 1.3;
	color: color-mix(in srgb, var(--skcs-fg, #0b0b0b) 62%, transparent);
}

@media (max-width: 640px) {
	.skcs-tm__avatar { width: 44px; height: 44px; }
	.skcs-tm__quote { text-wrap: initial; }
}

/* ============================================================ *
 *  IMAGE / VIDEO PAIR
 * ============================================================ */

.skcs-pair {
	background: var(--skcs-bg, #0d1117);
	padding: clamp(24px, 4vw, 56px) 0;
}

.skcs-pair__inner {
	max-width: var(--skcs-maxw);
	margin: 0 auto;
	padding: 0 var(--skcs-pad-x);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 40px);
}

.skcs-pair__slot {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: rgba(255, 255, 255, 0.04);
}

.skcs-pair--rounded .skcs-pair__slot {
	border-radius: clamp(16px, 1.6vw, 28px);
}

.skcs-pair__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================ *
 *  STANDALONE SCROLL
 * ============================================================ */

.skcs-scroll {
	background: var(--skcs-bg, #0d1117);
	padding: clamp(32px, 5vw, 72px) 0;
}

/* ============================================================ *
 *  RESPONSIVE
 * ============================================================ */

@media (max-width: 900px) {
	.skcs-hero__inner,
	.skcs-text__inner {
		grid-template-columns: 1fr;
	}
	.skcs-hero__meta { padding-top: 0.5em; }
	.skcs-scroller__card { width: 78vw; }
	.skcs-hero__cta {
		align-self: flex-start;
		margin-top: 4px;
	}
	.skcs-hero__aside-bottom {
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.skcs-hero__video {
		width: min(360px, 100%);
		margin: 0;
	}
}

@media (max-width: 640px) {
	.skcs-pair__inner { grid-template-columns: 1fr; }
	.skcs-hero__meta { grid-template-columns: 1fr 1fr; }
}

/* ============================================================ *
 *  FULL-BLEED + HEADER OVERLAP
 *  When a case study renders on a single project (body.skcs-on-page),
 *  break the content out of the theme's centered post container so every
 *  section spans the full viewport width, pull it up to the very top, and
 *  let the global header float transparently over the hero.
 *  Mirrors the page-hero overlap mechanism (keyed to the body classes added
 *  by SKCS_Plugin::maybe_register_body_class()).
 * ============================================================ */

body.skcs-on-page { overflow-x: hidden; }

/* Kill the theme's spacing above / around the post content so the hero
   starts at the very top and the sections can go edge-to-edge. */
body.skcs-on-page main,
body.skcs-on-page #Content,
body.skcs-on-page .mfn-page-wrapper,
body.skcs-on-page .post-wrapper-content,
body.skcs-on-page .mfn-builder-content,
body.skcs-on-page .the_content.mcb-section,
body.skcs-on-page .the_content > .section_wrapper,
body.skcs-on-page .the_content_wrapper {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

/* Hide the theme's project title / featured image / post navigation that
   would otherwise sit above the hero. */
body.skcs-on-page .post-header,
body.skcs-on-page .single-photo-wrapper,
body.skcs-on-page .post-nav {
	display: none !important;
}

/* Full-bleed the whole case study, regardless of the parent's width. */
body.skcs-on-page .skcs {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* A touch of breathing room between the last section and the testimonials. */
.skcs-testimonials { margin-top: 0; }

/* ============================================================ *
 *  "MORE WORK LIKE THIS" — styled related-projects section
 *  Wraps the [sketch_projects] carousel in a proper light band: contained to
 *  the content width, generous vertical padding, an eyebrow, and refined arrows
 *  — so it reads as a deliberate "keep exploring" section, not an edge-to-edge
 *  strip. Scoped to .skcs-related so the carousel is unchanged elsewhere.
 * ============================================================ */

.skcs-related {
	background: #f2f3f5;
	padding: var(--skcs-pad-y) 0;
}

.skcs-related__inner {
	/* Content is aligned to the case-study max-width on the LEFT, but the card
	   rail bleeds to the right screen edge so the next card peeks all the way
	   out. The gutter is the distance from the viewport edge to that content
	   column; we pad the left by it and restore it on the header (below) so the
	   title + arrows stay aligned while the rail runs edge-to-edge. */
	--skcs-related-gutter: max(var(--skcs-pad-x), calc((100vw - var(--skcs-maxw)) / 2 + var(--skcs-pad-x)));
	padding: 0 0 0 var(--skcs-related-gutter);
}

/* Grid variant — the Case Study Grid component builds its own band, header,
   padding and content width (it is the same component as the Work page), so
   everything the carousel needed from this wrapper has to stand down. The
   left-only gutter above would otherwise shunt the whole grid off-centre. */
.skcs-related--grid,
.skcs-related--grid .skcs-related__inner {
	background: none;
	padding: 0;
}

/* Eyebrow — lime dot + label, matching the Written Testimonials component. */
.skcs-related__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 15px;
	color: #8a8f98;
}
.skcs-related__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #c8f169;
	flex: none;
}

/* Contain the carousel to the section (it's otherwise full-bleed) and give the
   header + tiles the section's padding. */
.skcs-related .skprj-carousel {
	max-width: none;
	padding: 0;
}

/* Bigger, tighter title to anchor the section. */
.skcs-related .skprj-carousel__title {
	font-size: clamp(34px, 4.4vw, 64px);
}

/* Arrows — match the Written Testimonials component: rounded squares, white
   "prev" + lime "next", with chevron icons. */
.skcs-related .skprj-carousel__nav {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	box-shadow: none;
	color: #0a0a0a;
}
.skcs-related .skprj-carousel__nav--prev { background: #ffffff; }
.skcs-related .skprj-carousel__nav--next { background: #c8f169; }
.skcs-related .skprj-carousel__nav:hover:not(:disabled),
.skcs-related .skprj-carousel__nav:focus-visible:not(:disabled) {
	transform: translateY(-2px);
}

/* Swap the carousel's long-arrow glyph for a chevron to match the testimonials. */
.skcs-related .skprj-carousel__nav svg { display: none; }
.skcs-related .skprj-carousel__nav::before {
	content: "";
	width: 10px;
	height: 10px;
	border-top: 2.5px solid currentColor;
	border-right: 2.5px solid currentColor;
}
.skcs-related .skprj-carousel__nav--next::before {
	transform: translateX(-2px) rotate(45deg);   /* points right */
}
.skcs-related .skprj-carousel__nav--prev::before {
	transform: translateX(2px) rotate(-135deg);  /* points left */
}

/* A little more room between the header and the tiles. Restore the right gutter
   here so the title + arrows stay within the content column while the rail below
   bleeds to the screen edge. */
.skcs-related .skprj-carousel__header {
	margin-bottom: clamp(24px, 3vw, 40px);
	padding-right: var(--skcs-related-gutter);
}

@media (min-width: 769px) {
	/* Header floats transparently over the hero (until scrolled). Keyed on
	   .skcs-overlap, which every case study gets — the positioning and the
	   see-through pill are wanted whatever colour the hero is. The *colour*
	   rules below stay on .skcs-overlap-header, which is only added when the
	   hero is actually dark. */
	body.skcs-overlap .skgh {
		position: fixed !important;
		top: var(--skgh-sticky-offset, 10px) !important;
		left: var(--skgh-side-gap, 10px) !important;
		right: var(--skgh-side-gap, 10px) !important;
		margin: 0 !important;
	}
	body.skcs-overlap .skgh:not(.skgh--scrolled) .skgh__pill {
		background: transparent !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		border-color: transparent !important;
		box-shadow: none !important;
	}
	body.skcs-overlap-header .skgh:not(.skgh--scrolled),
	body.skcs-overlap-header .skgh:not(.skgh--scrolled) .skgh__nav-link,
	body.skcs-overlap-header .skgh:not(.skgh--scrolled) .skgh__logo,
	body.skcs-overlap-header .skgh:not(.skgh--scrolled) .skgh__logo-text,
	body.skcs-overlap-header .skgh:not(.skgh--scrolled) .skgh__nav-plus,
	body.skcs-overlap-header .skgh:not(.skgh--scrolled) .skgh__toggle-bars span {
		color: #ffffff !important;
		background: transparent;
	}
	body.skcs-overlap-header .skgh:not(.skgh--scrolled) .skgh__toggle-bars span {
		background: #ffffff !important;
	}
	body.skcs-overlap-header .skgh:not(.skgh--scrolled) .skgh__cta-btn--secondary {
		color: #ffffff !important;
		box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7) !important;
	}
	body.skcs-overlap-header .skgh:not(.skgh--scrolled) .skgh__cta-btn--secondary:hover {
		background: #ffffff !important;
		color: var(--skgh-text, #111) !important;
	}
	body.skcs-overlap-header .skgh:not(.skgh--scrolled) .skgh__logo--has-alt .skgh__logo-img--default { display: none; }
	body.skcs-overlap-header .skgh:not(.skgh--scrolled) .skgh__logo--has-alt .skgh__logo-img--alt { display: block; }

	/* Give the hero enough top padding to clear the floating header. */
	body.skcs-overlap .skcs-hero {
		padding-top: clamp(120px, 11vw, 190px);
	}
}

/* ============================================================ *
 *  VIDEO TESTIMONIAL LIGHTBOX
 * ============================================================ */

.skcs-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.skcs-modal.is-open { opacity: 1; }

.skcs-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 7, 10, 0.82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.skcs-modal__dialog {
	position: relative;
	width: min(1040px, 100%);
	transform: scale(0.98);
	transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.skcs-modal.is-open .skcs-modal__dialog { transform: scale(1); }

.skcs-modal__media {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: clamp(12px, 1.4vw, 20px);
	overflow: hidden;
	background: #000;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.skcs-modal__media iframe,
.skcs-modal__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
	background: #000;
}

.skcs-modal__close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #14161d;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease;
}
.skcs-modal__close:hover { transform: scale(1.06); }

@media (max-width: 600px) {
	.skcs-modal__close { top: -6px; right: -6px; width: 38px; height: 38px; font-size: 24px; }
}

/* ============================================================ *
 *  TESTIMONIALS — full-width inside a case study
 *  The [sketch_perf_testimonials] component is a centered, rounded dark card
 *  elsewhere; within a case study we want it edge-to-edge with square corners.
 *  Scoped to .skcs-testimonials so the component is unchanged on other pages.
 * ============================================================ */

.skcs-testimonials .skpt {
	padding-left: 0;
	padding-right: 0;
}

.skcs-testimonials .skpt-card {
	max-width: none;
	border-radius: 0;
}

/* Headline words, split by skcs_split_words() so Sketch Reveal can stagger them
   into focus. inline-block gives the blur filter a box to work on; the natural
   whitespace between spans is what still lets the line wrap. */
.skcs-hero__word {
	display: inline-block;
	/* The blur bleeds past the glyphs, so let it show rather than clipping. */
	will-change: filter, opacity, transform;
}