/* Sketch Suite — Case Study Grid
   A pill eyebrow and two-line headline on the left, a dark "View All" pill
   opposite it, above an even grid of square case-study tiles. Every tile is the
   same shape, so the section reads as a wall of work rather than a layout.

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

.skcsg {
	box-sizing: border-box;
	padding: var(--skcsg-pad-top, 80px) 0 var(--skcsg-pad-bottom, 80px);
	background: var(--skcsg-bg, #ffffff);
	color: var(--skcsg-fg, #111111);
	font-family: var(--sk-font, "Saans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.skcsg *,
.skcsg *::before,
.skcsg *::after { box-sizing: border-box; }

/* --skcsg-max is the *content* width — what the grid itself measures across, not
   the width including gutters. Hence content-box here, against the border-box
   default set above: the gutters sit outside the number rather than eating into
   it, so 1220 really does give three 393.33px tiles with a 20px gap. Changing
   this back to border-box silently shrinks every tile by the gutter.

   The gutter ramp matches the Written Testimonials section that follows it on
   the home page, so stacked sections share one left edge. */
.skcsg .skcsg__inner {
	box-sizing: content-box;
	max-width: var(--skcsg-max, 1220px);
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
}

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

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

.skcsg__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 Logo Grid uses. */
.skcsg__eyebrow {
	margin: 0 0 clamp(18px, 2vw, 28px);
}

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

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

.skcsg__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;
}

/* ── View All button ──────────────────────────────────────── */

.skcsg__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 17px 26px 17px 32px;
	border-radius: 999px;
	background: var(--skcsg-btn-bg, #6552ff);
	color: var(--skcsg-btn-fg, #ffffff);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 14px 30px -18px rgba(101, 82, 255, 0.85);
	transition: background-color 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.skcsg__btn:hover,
.skcsg__btn:focus-visible {
	background: #5341e6;
	color: var(--skcsg-btn-fg, #ffffff);
	transform: translateY(-2px);
}

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

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

/* ── Category filter ──────────────────────────────────────── */

/* Two rows of category pills running against each other. Each row holds its set
   twice and the track translates by exactly half its width, so the loop has no
   seam. Ported from the Projects Grid when the Our Work page's grid was swapped
   for this one — only used where filters="marquee" is set. */
.skcsg-marquee {
	--skcsg-cat-idle: #b6b6bb;   /* resting grey */
	--skcsg-cat-hover: #4a4a55;
	--skcsg-cat-active: #14143a; /* selected near-black */
	--skcsg-marquee-speed: 46s;  /* one full loop */

	margin: 0 0 clamp(22px, 2.4vw, 34px);
	overflow: hidden;            /* clip the off-canvas duplicate group */
}

.skcsg-marquee__row {
	display: flex;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.skcsg-marquee__row + .skcsg-marquee__row {
	margin-top: clamp(4px, 0.6vw, 10px);
}

.skcsg-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
	animation: skcsg-marquee-ltr var(--skcsg-marquee-speed) linear infinite;
}

.skcsg-marquee__row--rtl .skcsg-marquee__track {
	animation-name: skcsg-marquee-rtl;
}

/* Pause the hovered row so its pills are easy to hit. */
.skcsg-marquee__row:hover .skcsg-marquee__track {
	animation-play-state: paused;
}

.skcsg-marquee__group {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
}

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

/* Reset the theme's button styling before dressing the pill. */
.skcsg-cat,
.skcsg-cat:hover,
.skcsg-cat:focus,
.skcsg-cat:focus-visible,
.skcsg-cat:active {
	background: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

.skcsg-cat {
	display: inline-flex;
	align-items: baseline;
	gap: 0.28em;
	margin: 0;
	padding: 0 clamp(18px, 1.8vw, 34px);
	color: var(--skcsg-cat-idle);
	font-family: inherit;
	font-size: clamp(30px, 3.6vw, 58px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.skcsg-cat:hover,
.skcsg-cat:focus-visible {
	color: var(--skcsg-cat-hover);
}

.skcsg-cat.is-active {
	color: var(--skcsg-cat-active);
	font-weight: 600;
}

.skcsg-cat__count {
	font-size: 0.36em;
	font-weight: 500;
	letter-spacing: 0;
	transform: translateY(-0.9em); /* superscript-style */
	opacity: 0.85;
}

/* Reduced motion — stop the scroll and let the rows wrap onto several lines so
   every category stays reachable. */
@media (prefers-reduced-motion: reduce) {
	.skcsg-marquee__row {
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.skcsg-marquee__track {
		animation: none;
		flex-wrap: wrap;
		width: 100%;
	}
	.skcsg-marquee__group:nth-child(2) {
		display: none; /* the duplicate exists only for the loop */
	}
}

/* ── Grid ─────────────────────────────────────────────────── */

.skcsg__grid {
	display: grid;
	grid-template-columns: repeat(var(--skcsg-cols, 3), minmax(0, 1fr));
	gap: var(--skcsg-gap, 20px);
}

/* Grid item. Carries the entrance reveal so the card is free to own the hover
   transform — see the hover rule below. The [hidden] rule has to be spelled out
   because `display: block` here would otherwise beat the UA default and a
   filtered-out tile would stay on screen. */
.skcsg-card-wrap { display: block; }
.skcsg-card-wrap[hidden] { display: none; }

.skcsg-card {
	position: relative;
	display: block;
	/* Kept as a plain decimal, not `1 / 1`, because the tile-video cover maths
	   divides by it — see .skcsg-card__embed iframe. */
	--skcsg-tile-ar: 1;
	aspect-ratio: var(--skcsg-tile-ar);
	overflow: hidden;
	border-radius: var(--skcsg-radius, 18px);
	background: #111111;
	color: #ffffff;
	isolation: isolate;
}

/* The hover and focus states have to be spelled out, not just the resting one:
   BeTheme ships `a:hover { text-decoration: underline }` in be.css, which at
   (0,1,1) outranks a bare `.skcsg-card` (0,1,0). Without this the whole tile —
   client, pill, year and intro — underlines on hover, because text-decoration
   inherits down from the anchor. */
.skcsg-card,
.skcsg-card:hover,
.skcsg-card:focus,
.skcsg-card:focus-visible {
	text-decoration: none;
}

.skcsg-card__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #1a1a1a;
}

/* Doubled-up selector on purpose — don't "simplify" it back to one class.
   BeTheme ships `.scale-with-grid, .content_wrapper img { height: auto }` in
   be.css, and `.content_wrapper img` (0,1,1) outranks a single class (0,1,0).
   The card then letterboxes: the image keeps its own aspect ratio and any tile
   whose art isn't square shows the tile's background below it. */
.skcsg-card .skcsg-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Tile video. An iframe can't be object-fit, so the player is grown to whichever
   size covers the tile at its own aspect ratio and centred — the overflow is
   clipped by the tile. The ratio is a real measurement, not an assumption: these
   clips are as often portrait as 16:9, and a wrong ratio letterboxes.

   It sits over the featured image and fades in only once the player is live, so
   the image is the placeholder in every state that isn't "playing": before the
   src is set, while it loads, under reduced motion, and if Vimeo never answers.
   Ordering matters — this comes after the <img> and before the gradient
   ::after, so the caption stays legible over the video too. */
.skcsg-card__embed {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	pointer-events: none; /* the tile, not the player, owns the click */
	opacity: 0;
	transition: opacity 600ms ease;
}

.skcsg-card__embed.is-ready {
	opacity: 1;
}

/* Cover maths, in percentages of the tile: a tile W wide and H tall needs the
   player to be max(W, H × videoAR) wide and max(H, W ÷ videoAR) tall. H is
   W ÷ tileAR, which is what --skcsg-tile-ar is for — both ratios are plain
   decimals so the divisions stay valid calc(). */
.skcsg-card__embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	width: max(100%, calc(100% * var(--skcsg-embed-ar, 1.7778) / var(--skcsg-tile-ar, 1)));
	height: max(100%, calc(100% * var(--skcsg-tile-ar, 1) / var(--skcsg-embed-ar, 1.7778)));
	/* Betheme ships a bare `iframe { max-width: 100% }`, which clamps whichever
	   axis the cover maths above is trying to overflow. Only the width is
	   affected — `max-height` is left alone — so a portrait clip covered fine
	   and a landscape one silently did not: it was capped back to the tile's own
	   shape and handed to Vimeo in the wrong ratio, which letterboxes it inside
	   the player. That reads as bands at the top and bottom of the tile. */
	max-width: none;
	max-height: none;
}

/* Keeps the caption legible over light images without dulling the whole tile. */
.skcsg-card__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 62%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.34) 42%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
	transition: opacity 400ms ease;
}

.skcsg-card__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(20px, 2.2vw, 30px);
	color: #ffffff;
}

.skcsg-card__label {
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	opacity: 0.9;
}

.skcsg-card__title {
	margin: 0;
	font-size: clamp(19px, 1.45vw, 24px);
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: inherit;
	text-wrap: balance;
}

/* Hover — the whole tile tilts a degree or so, rather than pushing into the
   image. The entrance reveal lives on .skcsg-card-wrap, not on the card, for
   exactly this reason: Sketch Reveal's `.sk-in { transform: none }` is (0,3,1)
   and would outrank the hover rule here, so a card that was both the reveal
   target and the hover target could never tilt. */
.skcsg-card {
	transition: transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.skcsg-card:hover,
.skcsg-card:focus-visible {
	transform: rotate(-1.2deg);
}

.skcsg-card:focus-visible {
	outline: 3px solid #6552ff;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.skcsg-card { transition: none; }
	.skcsg-card:hover,
	.skcsg-card:focus-visible { transform: none; }
}

/* ── Card tile style ──────────────────────────────────────── */

/* The alternative to the overlay tile: the image sits framed inside a bordered
   card, with the client, an industry pill and the year under it, then a short
   intro. Everything the overlay tile paints over the image lives below it here,
   so the card is auto-height and only the frame carries the aspect ratio. */
/* Cards stretch to the tallest in their row (the grid default) so the row reads
   as one band rather than a ragged edge — intros vary from one line to four. */

.skcsg-card--panel {
	--skcsg-tile-ar: 1.5;  /* the framed image, not the card */
	/* Two insets, deliberately different. The card's own padding is tight so the
	   image runs close to the edge and reads as the tile itself, with just a
	   hairline around it. The copy underneath then adds --skcsg-panel-inset on
	   top of that, so text keeps a comfortable margin and doesn't sit hard
	   against the border the way the image does. */
	--skcsg-panel-pad: 8px;
	--skcsg-panel-inset: 12px;

	display: flex;
	flex-direction: column;
	aspect-ratio: auto;
	height: 100%;
	overflow: visible;
	padding: var(--skcsg-panel-pad);
	border: 1px solid #e7e7ea;
	border-radius: var(--skcsg-radius, 18px);
	background: #ffffff;
	color: inherit;
	transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The frame is what the media fills, so it owns the ratio and the clipping. */
.skcsg-card--panel .skcsg-card__frame {
	position: relative;
	aspect-ratio: var(--skcsg-tile-ar);
	overflow: hidden;
	border-radius: calc(var(--skcsg-radius, 18px) - var(--skcsg-panel-pad) + 4px);
	background: #f6f7f9;
}

.skcsg-card--panel .skcsg-card__media {
	background: #f6f7f9;
}

/* No scrim in this style — nothing is set over the image. */
.skcsg-card--panel .skcsg-card__media::after {
	content: none;
}

/* Wraps rather than truncates: at 393px a long client name plus a pill plus the
   year doesn't fit on one line, and clipping the client — the thing the row is
   actually about — is the worst of the three outcomes. Only the client/pill
   group wraps; the year stays outside it so it can never end up orphaned on a
   line of its own. Short names still sit on one line, the common case. */
.skcsg-card__meta {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 18px var(--skcsg-panel-inset, 12px) 15px;
	border-bottom: 1px solid #ececef;
}

.skcsg-card__who {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	min-width: 0;
}

.skcsg-card__client {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #111111;
}

.skcsg-card__tag {
	flex: 0 0 auto;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--skcsg-pill-bg, #ece9ff);
	color: var(--skcsg-pill-fg, #6552ff);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

/* Pushed to the far right whatever else is or isn't there, and nudged onto the
   client's baseline since the group beside it may be two lines tall. */
.skcsg-card__period {
	flex: 0 0 auto;
	margin-left: auto;
	padding-top: 4px;
	padding-left: 8px;
	color: #8b8b95;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Set at the same weight and size as the client name above it, matching the
   reference — this line is a statement about the work, not body copy, so a
   normal 400 reads far too light against the rest of the card. */
.skcsg-card__intro {
	margin: 0;
	padding: 15px var(--skcsg-panel-inset, 12px) 12px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.012em;
	color: #111111;
}

/* A card is mostly text, so the overlay tile's tilt would read as a wobble.
   It lifts instead. */
.skcsg-card--panel:hover,
.skcsg-card--panel:focus-visible {
	transform: translateY(-3px);
	border-color: #d8d4ff;
	box-shadow: 0 18px 36px -26px rgba(17, 17, 17, 0.45);
}

.skcsg-card--panel:hover .skcsg-card__img,
.skcsg-card--panel:focus-visible .skcsg-card__img {
	transform: scale(1.03);
}

.skcsg-card--panel .skcsg-card__img {
	transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.skcsg-card--panel,
	.skcsg-card--panel .skcsg-card__img { transition: none; }
	.skcsg-card--panel:hover,
	.skcsg-card--panel:focus-visible { transform: none; }
	.skcsg-card--panel:hover .skcsg-card__img { transform: none; }
}

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

@media (max-width: 1080px) {
	.skcsg__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

@media (max-width: 620px) {
	.skcsg__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Overlay tiles only — a card's ratio belongs to its framed image, which
	   stays 3:2 at every width. */
	.skcsg-card:not(.skcsg-card--panel) {
		--skcsg-tile-ar: 1.3333; /* 4:3 */
	}
}