/* Sketch Suite — Service Pages.

   The thirteen-section service template. Layout follows the Figma reference
   (Sketch Creative — Website, node 391:9772) section for section; the palette,
   type scale and shapes are the site's own:

     · ink / muted / eyebrow  — modules/services-hero-list (#101326, #4b5a6b,
       #98a2b3 at .14em), which is the /services hero this page follows from
     · accent + pills         — modules/services-stagger (#6552ff, 999px)
     · the wash               — modules/case-study, painted here from
       --sksp-wash so hero and project template stay in step
     · grid metrics           — modules/case-study-grid (1220px content, 20px
       gutter, so three columns land on 393.33px square tiles)

   Nothing here re-decides a colour that already exists elsewhere in the suite. */

.sksp {
	--sksp-ink: #101326;
	--sksp-muted: #4b5a6b;
	--sksp-eyebrow: #98a2b3;
	--sksp-accent: #6552ff;
	--sksp-line: rgba(16, 19, 38, 0.10);
	--sksp-tint: #f7f7fa;
	--sksp-wash: linear-gradient(340deg, #ffffff 0%, #dce9f7 100%);

	/* Dark bands. Base is the Services Overview indigo (Sketch → Services
	   Overview, sksv_ov_bg) so the dark sections here and there match. */
	--sksp-dark: #0b062b;
	--sksp-dark-card: #150f3f;
	--sksp-dark-card-hi: #1d1650;
	--sksp-dark-line: rgba(255, 255, 255, 0.09);
	--sksp-dark-fg: #ffffff;
	--sksp-dark-muted: rgba(255, 255, 255, 0.62);

	/* The accent edge on the dark cards: brand indigo running out to the lime. */
	--sksp-grad: linear-gradient(180deg, #b3a6ff 0%, #6552ff 55%, #c6f24e 100%);

	--sksp-max: 1220px;
	--sksp-narrow: 880px;
	--sksp-gutter: clamp(20px, 4vw, 48px);
	--sksp-gap: 20px;
	--sksp-radius: 16px;
	--sksp-sec-pad: clamp(72px, 9vw, 132px);

	font-family: var(--sk-font, "Saans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	color: var(--sksp-ink);
	background: #ffffff;
}

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

.sksp img { max-width: 100%; display: block; }

/* Betheme's `.content_wrapper img { max-width:100%; height:auto }` (be.css) is
   (0,1,1) and loads *after* this file, so it ties with — and therefore beats —
   any plain `.class img` rule here. Every image that is supposed to fill its
   box is declared once, `.sksp`-prefixed, to outrank it. Without this the
   letterboxing comes back as a pale band under each plate. */
.sksp .sksp-work__media img,
.sksp .sksp-overview__media img,
.sksp .sksp-cases__img,
.sksp .sksp-proof__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Betheme styles `blockquote` with a fixed px line-height, an italic face and a
   left rule. At the quote section's display size a fixed line-height collapses
   the lines into each other, so both quote blocks reset it explicitly rather
   than inheriting the theme's. */
.sksp blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-style: normal;
	font-size: inherit;
	line-height: inherit;
	quotes: none;
}

.sksp blockquote::before,
.sksp blockquote::after { content: none; }

/* ── Header integration ───────────────────────────────────────
   Float the global header over the light hero, exactly as
   modules/services-hero-list does on /services — the page it is reached from,
   so the header must not change behaviour between the two. The hero is light,
   so the header keeps its own ink; only the frosted pill dissolves while
   unscrolled (its own JS re-frosts it past 30px). */

body.sksp-on-page .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.sksp-on-page .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;
}

/* Betheme + WPBakery stack their own padding above the first row, which would
   push the hero down the page and cost it the fold. */
body.sksp-on-page #Content,
body.sksp-on-page .section_wrapper,
body.sksp-on-page .entry-content > .section:first-of-type {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   Shared primitives
   ───────────────────────────────────────────────────────────── */

.sksp-wrap {
	/* content-box so the page gutters sit outside the 1220 rather than eating
	   into it — the same rule modules/case-study-grid depends on to keep its
	   tiles square. */
	box-sizing: content-box;
	max-width: var(--sksp-max);
	margin-inline: auto;
	padding-inline: var(--sksp-gutter);
}

.sksp-wrap--narrow { max-width: var(--sksp-narrow); }

.sksp-sec {
	position: relative;
	padding-block: var(--sksp-sec-pad);
}

.sksp-sec--light { background: #ffffff; }
.sksp-sec--tint  { background: var(--sksp-tint); }
.sksp-sec--dark  { background: var(--sksp-dark); color: var(--sksp-dark-fg); }

/* Section headers ------------------------------------------------------- */

.sksp-head { margin-bottom: clamp(44px, 5.5vw, 78px); }

/* Section headers are left-aligned — the reference centres them, but on our
   type they read better ranged left against the grid the content below sits on.
   Measure is still capped so the sub-line does not run the full 1220. */
.sksp-head--lead {
	text-align: left;
	max-width: 900px;
	margin-inline: 0;
}

.sksp-head--lead .sksp-sub { margin-inline: 0; }

.sksp-head--split {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 64px);
}

.sksp-eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sksp-eyebrow);
	margin-bottom: 18px;
}

.sksp-eyebrow--light { color: var(--sksp-dark-muted); }

.sksp-h2 {
	font-size: clamp(32px, 4.6vw, 60px);
	line-height: 1.04;
	font-weight: 600;
	letter-spacing: -0.032em;
	margin: 0;
	color: var(--sksp-ink);
}

.sksp-h2--light { color: var(--sksp-dark-fg); }
.sksp-h2--tight { max-width: 11ch; }

.sksp-sub {
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.55;
	font-weight: 500;
	color: var(--sksp-ink);
	margin: 22px auto 0;
	max-width: 62ch;
}

.sksp-sub--light { color: var(--sksp-dark-muted); }

/* Pill eyebrow — the badge form used on the split headers. */
.sksp-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(101, 82, 255, 0.16);
	color: #cfc7ff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 22px;
}

.sksp-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.sksp-pill--light {
	background: rgba(101, 82, 255, 0.10);
	color: var(--sksp-accent);
}

/* Buttons --------------------------------------------------------------- */

.sksp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.18s ease, color 0.18s ease, box-shadow 0.2s ease;
}

.sksp-btn:hover { transform: translateY(-1px); }

.sksp-btn--primary {
	padding: 15px 28px;
	border-radius: 12px;
	background: var(--sksp-ink);
	color: #ffffff;
}

.sksp-btn--primary:hover {
	background: var(--sksp-accent);
	box-shadow: 0 12px 28px -10px rgba(101, 82, 255, 0.6);
}

.sksp-btn--ghost {
	padding: 15px 26px;
	border-radius: 12px;
	background: rgba(16, 19, 38, 0.05);
	color: var(--sksp-ink);
}

.sksp-btn--ghost:hover { background: rgba(16, 19, 38, 0.10); }

/* The rounded "Book a Call" pill that sits opposite a split header. */
.sksp-btn--pill {
	flex: none;
	padding: 17px 30px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--sksp-ink);
}

.sksp-btn--pill svg { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sksp-btn--pill:hover svg { transform: translateX(3px); }

.sksp-btn--pill-dark {
	background: var(--sksp-ink);
	color: #ffffff;
}

.sksp-btn--pill-dark:hover { background: var(--sksp-accent); }

/* Underlined text link -------------------------------------------------- */

.sksp-link {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	color: var(--sksp-ink);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1.5px solid currentColor;
	transition: color 0.18s ease, opacity 0.18s ease;
}

.sksp-link:hover { color: var(--sksp-accent); }

.sksp-link--light { color: var(--sksp-dark-fg); }
.sksp-link--light:hover { color: var(--sksp-dark-fg); opacity: 0.7; }

/* ─────────────────────────────────────────────────────────────
   01 — Hero
   ───────────────────────────────────────────────────────────── */

/* The hero is sized so the "Trusted by" strip lands on the fold: it fills the
   viewport, the copy takes the space that is left and centres in it, and the
   logo row is pinned to the bottom with its lower border on the viewport edge.
   `min-height` rather than `height`, so a long headline or a narrow phone can
   still push it taller instead of clipping. `svh` keeps mobile honest when the
   browser chrome retracts. */
.sksp-hero {
	/* Mirrors --skbf-height in modules/bottom-fade. The frosted band is fixed to
	   the foot of the viewport, so the hero stops short of it and the logo strip
	   lands just above the blur rather than under it. Kept as a variable so a
	   change to the fade's height can be matched here in one place. */
	--sksp-fade: clamp(80px, 15vh, 240px);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--sksp-fade));
	min-height: calc(100svh - var(--sksp-fade));
	/* Just enough to clear the floating header (≈64px tall at a 10px offset) —
	   the copy is centred in whatever space is left, so extra padding here only
	   pushes the whole hero taller. */
	padding-top: 84px;
	padding-bottom: 0;
	text-align: center;
	background: #ffffff;
}

/* The wash, faded out before the logo strip so that strip sits on flat white. */
.sksp-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 88%;
	z-index: -1;
	background-image: var(--sksp-wash);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
	pointer-events: none;
}

.sksp-hero__inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	/* Wide enough that the second authored line of the headline stays on one
	   line at the top of the clamp — at 1000px it wrapped to three. */
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: var(--sksp-gutter);
	padding-block: clamp(20px, 3vw, 44px);
}

.sksp-hero__eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sksp-eyebrow);
	margin-bottom: clamp(20px, 2.6vw, 32px);
}

.sksp-hero__heading {
	font-size: clamp(40px, 6.2vw, 78px);
	line-height: 0.98;
	font-weight: 600;
	letter-spacing: -0.035em;
	color: var(--sksp-ink);
	margin: 0;
}

.sksp-hero__sub {
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.5;
	font-weight: 500;
	color: var(--sksp-ink);
	max-width: 46ch;
	margin: clamp(24px, 2.8vw, 34px) auto 0;
}

.sksp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: clamp(30px, 3.6vw, 44px);
}

/* Trusted-by strip — a full-bleed row of bordered cells, pinned to the bottom
   of the hero so its lower border meets the fold. */
.sksp-hero__proof {
	position: relative;
	flex: 0 0 auto;
	/* Breathing room between the CTAs and the strip. The copy block above is
	   `flex: 1 1 auto`, so this takes space from it rather than making the hero
	   taller — the strip stays on the fold. */
	margin-top: clamp(28px, 5vh, 72px);
}

.sksp-hero__proof-label {
	font-size: 15px;
	font-weight: 500;
	color: var(--sksp-eyebrow);
	margin: 0 0 clamp(16px, 2vw, 26px);
}

.sksp-hero__logos {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sksp-line);
	border-bottom: 1px solid var(--sksp-line);
}

.sksp-hero__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 26px 20px;
	border-right: 1px solid var(--sksp-line);
}

.sksp-hero__logo:first-child { border-left: 1px solid var(--sksp-line); }

.sksp-hero__logo img {
	max-height: 30px;
	width: auto;
	object-fit: contain;
	opacity: 0.85;
	/* Matches FADE in service.js — the swap holds the cell at zero for exactly
	   this long before changing the src, so the two must stay in step. */
	transition: opacity 0.3s ease;
}

.sksp-hero__logo:hover img { opacity: 1; }

/* Held at zero while the src is swapped, then released. */
.sksp-hero__logo img.is-swapping { opacity: 0; }

/* ─────────────────────────────────────────────────────────────
   02 — Work carousel
   ───────────────────────────────────────────────────────────── */

/* The carousel component brings its own vertical padding and full-bleed
   breakout, so the section wrapper only needs to not add a second helping of
   section padding on top of it. */
.sksp-carousel {
	padding-block: 0;
	overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   03 — Selected work
   ───────────────────────────────────────────────────────────── */

.sksp-work__rows {
	display: flex;
	flex-direction: column;
	gap: clamp(64px, 8vw, 112px);
}

.sksp-work__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.sksp-work__row--flip .sksp-work__copy  { order: 2; }
.sksp-work__row--flip .sksp-work__media { order: 1; }

.sksp-work__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 26px;
}

.sksp-work__client {
	font-size: 17px;
	font-weight: 600;
	color: var(--sksp-ink);
}

.sksp-work__stage {
	padding: 4px 11px;
	border-radius: 6px;
	background: rgba(101, 82, 255, 0.10);
	color: var(--sksp-accent);
	font-size: 14px;
	font-weight: 500;
}

.sksp-work__period {
	margin-left: auto;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sksp-eyebrow);
}

.sksp-work__title {
	font-size: clamp(22px, 2.1vw, 27px);
	line-height: 1.22;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
	color: var(--sksp-ink);
}

.sksp-work__desc {
	font-size: 16px;
	line-height: 1.6;
	color: var(--sksp-muted);
	margin: 0 0 26px;
}

.sksp-work__quote {
	margin: 34px 0 0;
	padding: 26px 28px;
	background: var(--sksp-tint);
	border-radius: 10px;
}

/* Specificity note: the `.sksp blockquote` reset above is (0,1,1), so the two
   blockquote rules that set size and leading are written with the section class
   as well to clear it. Without that the theme's reset wins and the lines
   collapse into each other. */
.sksp .sksp-work__quote blockquote {
	margin: 0;
	font-size: 15px;
	line-height: 1.62;
	font-style: normal;
	color: var(--sksp-ink);
}

.sksp-work__quote figcaption {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 22px;
}

.sksp-work__avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.sksp-work__attrib { display: flex; flex-direction: column; line-height: 1.35; }
.sksp-work__attrib strong { font-size: 15px; font-weight: 600; }
.sksp-work__attrib span   { font-size: 14px; color: var(--sksp-muted); }

.sksp-work__media {
	border-radius: var(--sksp-radius);
	overflow: hidden;
	background: var(--sksp-tint);
	aspect-ratio: 4 / 3;
}

.sksp-work__media img,
.sksp-work__media a {
	display: block;
	width: 100%;
	height: 100%;
}

.sksp-work__media img {
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.sksp-work__media:hover img { transform: scale(1.03); }

/* ─────────────────────────────────────────────────────────────
   03 — Overview cards
   ───────────────────────────────────────────────────────────── */

.sksp-overview__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sksp-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sksp-overview__card {
	display: flex;
	flex-direction: column;
	padding: 26px 26px 34px;
	border-radius: var(--sksp-radius);
	background: var(--sksp-dark-card);
	text-align: center;
	transition: background-color 0.22s ease;
}

.sksp-overview__card:hover { background: var(--sksp-dark-card-hi); }

.sksp-overview__media {
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 30px;
	aspect-ratio: 4 / 3;
	background: rgba(255, 255, 255, 0.03);
}

.sksp-overview__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sksp-overview__title {
	font-size: 21px;
	line-height: 1.28;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 14px;
	color: var(--sksp-dark-fg);
}

.sksp-overview__desc {
	font-size: 15px;
	line-height: 1.6;
	color: var(--sksp-dark-muted);
	margin: 0;
	max-width: 34ch;
	margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────
   04 — Process
   ───────────────────────────────────────────────────────────── */

.sksp-process__box {
	border: 1px solid var(--sksp-line);
	border-radius: 4px;
	overflow: hidden;
	background: #ffffff;
}

.sksp-process__tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	background: var(--sksp-tint);
	border-bottom: 1px solid var(--sksp-line);
}

.sksp-process__tab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 26px 16px;
	border: 0;
	border-right: 1px solid var(--sksp-line);
	background: transparent;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: var(--sksp-ink);
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.sksp-process__tab:last-child { border-right: 0; }
.sksp-process__tab:hover { background: rgba(255, 255, 255, 0.55); }
.sksp-process__tab.is-active { background: #ffffff; }

.sksp-process__num {
	font-size: 15px;
	font-weight: 500;
	color: var(--sksp-eyebrow);
	font-variant-numeric: tabular-nums;
	flex: none;
}

.sksp-process__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.sksp-process__panel[hidden] { display: none; }

.sksp-process__detail {
	padding: clamp(32px, 4vw, 56px) clamp(28px, 3.5vw, 52px);
	border-right: 1px solid var(--sksp-line);
}

.sksp-process__detail .sksp-eyebrow { margin-bottom: 22px; }

.sksp-process__title {
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.14;
	font-weight: 600;
	letter-spacing: -0.025em;
	margin: 0 0 18px;
}

.sksp-process__desc {
	font-size: 16px;
	line-height: 1.62;
	color: var(--sksp-muted);
	margin: 0;
	max-width: 44ch;
}

.sksp-process__outputs { padding: clamp(32px, 4vw, 56px) clamp(28px, 3.5vw, 52px); }

.sksp-process__list {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}

.sksp-process__list li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--sksp-line);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.012em;
}

.sksp-process__list li:last-child { border-bottom: 0; }

/* ─────────────────────────────────────────────────────────────
   05 — What's included
   ───────────────────────────────────────────────────────────── */

.sksp-includes__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sksp-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sksp-includes__card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 22px;
	padding: 32px 34px 32px 44px;
	border-radius: 10px;
	background: var(--sksp-dark-card);
	overflow: hidden;
	transition: background-color 0.22s ease;
}

.sksp-includes__card:hover { background: var(--sksp-dark-card-hi); }

/* The brand gradient down the leading edge. */
.sksp-includes__card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: var(--sksp-grad);
}

.sksp-includes__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--sksp-dark-fg);
}

.sksp-includes__title {
	font-size: 19px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 10px;
	color: var(--sksp-dark-fg);
}

.sksp-includes__desc {
	font-size: 15px;
	line-height: 1.6;
	color: var(--sksp-dark-muted);
	margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   06 — Client quote
   ───────────────────────────────────────────────────────────── */

/* The quote band sits darker than the other dark sections — near-black rather
   than the indigo — so the page has a beat of contrast at its midpoint instead
   of one continuous field of #0b062b. */
.sksp-quote { background: var(--sksp-quote-bg, #101326); }

.sksp-quote__fig { margin: 0; text-align: center; }

.sksp-quote__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 34px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sksp-dark-fg);
}

.sksp-quote__brand img { max-height: 26px; width: auto; }

.sksp .sksp-quote__text {
	font-size: clamp(26px, 3.4vw, 44px);
	line-height: 1.16;
	font-weight: 600;
	font-style: normal;
	letter-spacing: -0.03em;
	color: var(--sksp-dark-fg);
	margin: 0;
}

.sksp-quote__by {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-top: 38px;
}

.sksp-quote__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 12px;
}

.sksp-quote__name { font-size: 16px; font-weight: 600; color: var(--sksp-dark-fg); }
.sksp-quote__role { font-size: 14px; color: var(--sksp-dark-muted); }

/* ─────────────────────────────────────────────────────────────
   07 — Typical engagements
   ───────────────────────────────────────────────────────────── */

.sksp-eng__cols {
	display: grid;
	grid-template-columns: repeat(var(--sksp-eng-count, 3), minmax(0, 1fr));
	gap: var(--sksp-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sksp-eng__col {
	display: flex;
	flex-direction: column;
	border-radius: 4px;
	overflow: hidden;
	background: var(--sksp-dark-card);
}

.sksp-eng__cap {
	display: block;
	height: 8px;
	background: linear-gradient(90deg, #b3a6ff 0%, #6552ff 48%, #c6f24e 100%);
}

.sksp-eng__head {
	padding: 40px 32px 36px;
	text-align: center;
	border-bottom: 1px solid var(--sksp-dark-line);
}

.sksp-eng__marks {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-bottom: 30px;
}

/* Each column shows one more diamond than the last, and each fades a step
   further back, so the row reads as a scale of commitment. */
.sksp-eng__mark {
	width: 22px;
	height: 22px;
	background: var(--sksp-dark-fg);
	opacity: calc(1 - var(--sksp-mark-step, 0) * 0.32);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.sksp-eng__title {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 14px;
	color: var(--sksp-dark-fg);
}

.sksp-eng__desc {
	font-size: 15px;
	line-height: 1.6;
	color: var(--sksp-dark-muted);
	margin: 0;
}

.sksp-eng__list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.sksp-eng__list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 26px;
	border-bottom: 1px solid var(--sksp-dark-line);
	font-size: 15px;
	color: var(--sksp-dark-fg);
}

.sksp-eng__list li:last-child { border-bottom: 0; }
.sksp-eng__list svg { flex: none; color: #b3a6ff; }

/* Each column can close with its own CTA. `margin-top: auto` rather than
   relying on .sksp-eng__list's flex:1 to push it down, so a column with no
   list still sits its button on the card's floor and the three line up across
   the row however uneven the lists above them are. The top rule restores the
   divider rhythm, since the last list row drops its own border. */
.sksp-eng__cta {
	margin-top: auto;
	padding: 22px 26px 26px;
	border-top: 1px solid var(--sksp-dark-line);
}

.sksp-eng__btn {
	width: 100%;
	padding: 15px 24px;
	font-size: 15px;
}

/* ─────────────────────────────────────────────────────────────
   08 — Why Sketch
   ───────────────────────────────────────────────────────────── */

.sksp-why__table { margin: 0; }

.sksp-why__row {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: center;
	border-bottom: 1px solid var(--sksp-dark-line);
}

.sksp-why__row:last-child { border-bottom: 0; }

.sksp-why__term {
	position: relative;
	margin: 0;
	padding: 40px 34px 40px 42px;
	background: var(--sksp-dark-card);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--sksp-dark-fg);
	align-self: stretch;
	display: flex;
	align-items: center;
}

.sksp-why__term::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: var(--sksp-grad);
}

.sksp-why__def {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 40px 34px;
	font-size: 15px;
	line-height: 1.62;
	color: var(--sksp-dark-muted);
}

/* ─────────────────────────────────────────────────────────────
   09 — Case studies
   ───────────────────────────────────────────────────────────── */

.sksp-cases__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sksp-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sksp-cases__tile {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: var(--sksp-tint);
	aspect-ratio: 1 / 1;
}

.sksp-cases__tile > a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #ffffff;
}

.sksp-cases__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.sksp-cases__tile:hover .sksp-cases__img { transform: scale(1.04); }

.sksp-cases__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: linear-gradient(to top, rgba(6, 8, 20, 0.78) 0%, rgba(6, 8, 20, 0.35) 55%, transparent 100%);
}

.sksp-cases__label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.85;
}

.sksp-cases__headline {
	font-size: 19px;
	line-height: 1.28;
	font-weight: 600;
	letter-spacing: -0.015em;
}

/* ─────────────────────────────────────────────────────────────
   10 — Proof
   ───────────────────────────────────────────────────────────── */

.sksp-proof__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(150px, auto);
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sksp-proof__tile {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px;
	background: #ffffff;
	border-radius: 4px;
}

.sksp-proof__tile.is-tall { grid-row: span 2; }

.sksp-proof__tile--logo,
.sksp-proof__tile--image { padding: 0; justify-content: center; }

.sksp-proof__kicker {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sksp-eyebrow);
}

.sksp-proof__rating {
	display: flex;
	align-items: baseline;
	gap: 4px;
	flex-wrap: wrap;
}

.sksp-proof__value {
	font-size: clamp(38px, 4vw, 54px);
	line-height: 0.9;
	font-weight: 600;
	letter-spacing: -0.04em;
}

.sksp-proof__scale { font-size: 20px; font-weight: 500; color: var(--sksp-muted); }

.sksp-proof__rating-by {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-left: 12px;
	align-self: center;
}

.sksp-proof__rating-by img { max-height: 24px; width: auto; }
.sksp-proof__rating-by strong { font-size: 18px; font-weight: 600; }

.sksp-proof__stars { display: inline-flex; gap: 2px; color: #f5a623; }

.sksp-proof__title {
	font-size: 21px;
	line-height: 1.22;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0;
}

.sksp-proof__rule {
	display: block;
	height: 1px;
	background: var(--sksp-line);
}

.sksp-proof__desc {
	font-size: 15px;
	line-height: 1.55;
	color: var(--sksp-muted);
	margin: 0;
}

.sksp-proof__caption { font-size: 14px; color: var(--sksp-muted); margin: 0; }

.sksp-proof__logo,
.sksp-proof__image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 24px;
}

.sksp-proof__logo img { max-height: 32px; width: auto; }
.sksp-proof__logo--inline { height: auto; padding: 0; justify-content: flex-start; }
.sksp-proof__image { padding: 0; }
.sksp-proof__image img { width: 100%; height: 100%; object-fit: cover; }

.sksp-proof__people { display: flex; align-items: center; }

.sksp-proof__people img,
.sksp-proof__more {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #ffffff;
	margin-left: -10px;
}

.sksp-proof__people img:first-child { margin-left: 0; }

.sksp-proof__more {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sksp-ink);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   11 — Tools and workflow
   ───────────────────────────────────────────────────────────── */

.sksp-tools__groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 4vw, 56px) clamp(32px, 5vw, 72px);
}

.sksp-tools__group .sksp-eyebrow { margin-bottom: 20px; }

.sksp-tools__chips {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sksp-tools__chip {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	border-radius: 4px;
	background: var(--sksp-tint);
}

.sksp-tools__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: none;
}

.sksp-tools__icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

/* Wide lockups (logo + wordmark, 3:1 to 5:1) get a wider slot rather than being
   squashed into the square one, where they render as an illegible smudge.
   `contain` keeps them on the same optical height as the square marks. */
.sksp-tools__icon--wide {
	width: 74px;
	justify-content: flex-start;
}

.sksp-tools__icon--wide img {
	width: auto;
	max-width: 74px;
	height: 20px;
}

/* Fallback mark for a tool with no logo uploaded yet — a two-letter monogram in
   a tile the same size as a real logo, so a group with a mix of the two still
   sits on one baseline and one rhythm. Replaced the moment an image is set on
   the row. */
.sksp-tools__icon--mono {
	border-radius: 7px;
	background: var(--sksp-ink);
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
}

.sksp-tools__name {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.012em;
}

/* ─────────────────────────────────────────────────────────────
   12 — Related services
   ───────────────────────────────────────────────────────────── */

.sksp-related__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

.sksp-related__copy .sksp-h2 { margin-bottom: 26px; }

.sksp-related__desc {
	font-size: 17px;
	line-height: 1.55;
	font-weight: 500;
	color: var(--sksp-ink);
	margin: 0;
	max-width: 34ch;
}

.sksp-related__rule {
	display: block;
	height: 1px;
	background: var(--sksp-line);
	margin: 34px 0 26px;
}

.sksp-related__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sksp-related__card { background: #ffffff; border-radius: 4px; }

.sksp-related__card > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.sksp-related__card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 24px 26px;
	border-bottom: 1px solid var(--sksp-line);
}

.sksp-related__icon { width: 22px; height: 22px; object-fit: contain; flex: none; }

.sksp-related__title {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.sksp-related__arrow {
	margin-left: auto;
	flex: none;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sksp-related__card:hover .sksp-related__arrow { transform: translateX(4px); }

.sksp-related__card-desc {
	display: block;
	padding: 22px 26px 28px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--sksp-muted);
}

/* ─────────────────────────────────────────────────────────────
   13 — FAQs
   ───────────────────────────────────────────────────────────── */

.sksp-faqs__list { display: flex; flex-direction: column; gap: 12px; }

.sksp-faqs__item {
	background: var(--sksp-dark-card);
	border-radius: 4px;
	overflow: hidden;
}

.sksp-faqs__q {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 24px 30px;
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: var(--sksp-dark-fg);
}

.sksp-faqs__q::-webkit-details-marker { display: none; }

.sksp-faqs__mark {
	display: flex;
	flex: none;
	color: #c6f24e;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sksp-faqs__item[open] .sksp-faqs__mark { transform: rotate(45deg); }

.sksp-faqs__a { padding: 0 30px 26px 74px; }

.sksp-faqs__a p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--sksp-dark-muted);
}

.sksp-faqs__card {
	margin-top: 44px;
	padding: 34px 36px 38px;
	border-radius: 4px;
	background: var(--sksp-dark-card);
}

.sksp-faqs__card-title {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 14px;
	color: var(--sksp-dark-fg);
}

.sksp-faqs__card-text {
	font-size: 15px;
	line-height: 1.62;
	color: var(--sksp-dark-muted);
	margin: 0 0 24px;
	max-width: 62ch;
}

/* ─────────────────────────────────────────────────────────────
   FAQs index — [sketch_faqs_index], the /faqs page
   ───────────────────────────────────────────────────────────── */

/* The same accordion as section 14, on white. Rather than restate every rule,
   the band re-points the dark-band variables at their light equivalents, so the
   shared .sksp-faqs__* rules flip wholesale and a change to the section keeps
   carrying through here. Only the lime plus is a literal upstream, so it is the
   one thing overridden by hand. */
.sksp.sksp-faqs-index {
	--sksp-dark-card: var(--sksp-tint);
	--sksp-dark-fg: var(--sksp-ink);
	--sksp-dark-muted: var(--sksp-muted);

	/* Asymmetric: this band always follows the /faqs hero, which brings its own
	   bottom padding, so a full section pad on top stacks into a dead gap
	   before the first question. The bottom keeps the standard rhythm. */
	padding-top: clamp(16px, 2vw, 32px);
	padding-bottom: var(--sksp-sec-pad);
	background: #ffffff;
}

.sksp-faqs-index .sksp-faqs__mark { color: var(--sksp-accent); }

/* A hairline keeps the rows legible now the panel is only a shade off white.
   The corners are rounder than section 14's 4px: on the dark band that sharp
   radius matches every other card on the service page, but here the rows sit
   beside a 20px rail panel and a 14px call card, so they round up to suit. */
.sksp-faqs-index .sksp-faqs__item {
	border-radius: 18px;
	box-shadow: inset 0 0 0 1px var(--sksp-line);
}

/* Layout: sticky rail + questions ---------------------------------------
   The two-column arrangement the blog post uses (modules/blog-post), so the
   two long-read pages on the site behave the same way: the rail pins, the
   content scrolls past it, and the rail's current item follows along. */

/* A sticky element sticks inside its nearest *scrolling* ancestor, and WPBakery
   gives every stretched row `overflow: hidden`
   (`.vc_row[data-vc-full-width]` in js_composer.min.css). Dropped into one of
   those, that row — which never scrolls — becomes the rail's scrollport and the
   rail simply stops moving, with nothing in this file to explain why. The FAQs
   page uses a plain row for exactly this reason; this rule is the belt to that
   pair of braces, so the component survives being moved into a stretched one.
   `body` only to out-specify WPBakery's own selector. */
body .vc_row:has(.sksp-faqs-index) { overflow: visible; }

/* No `align-items: start` here, deliberately. Stretched, the rail's grid track
   is as tall as the questions beside it, which is the room the sticky child
   needs to travel; shrink-wrapped to its own content it would unstick the
   moment the panel's own box scrolled past — a few hundred pixels in. Same
   trap, same fix, as .skbp-body__inner in modules/blog-post. */
.sksp-faqs-index__layout {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
}

.sksp-faqs-index--no-rail .sksp-faqs-index__layout { grid-template-columns: minmax(0, 1fr); }

.sksp-faqs-index__aside { min-width: 0; }

/* The list and the call card pin as one block, so they keep their spacing
   while the questions scroll past. */
.sksp-faqs-index__sticky {
	position: sticky;
	top: clamp(96px, 12vh, 132px);
	max-height: calc(100vh - clamp(112px, 14vh, 152px));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.sksp-faqs-index__sticky::-webkit-scrollbar { width: 6px; }
.sksp-faqs-index__sticky::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background: rgba(16, 19, 38, 0.14);
}

/* One tinted panel holds both, so they read as a single rail rather than two
   stacked widgets — as on the blog post. */
.sksp-faqs-index__panel {
	padding: 12px;
	border-radius: 20px;
	background: var(--sksp-tint);
}

.sksp-faqs-index__main { min-width: 0; }

/* The service list ------------------------------------------------------- */

.sksp-faqs-index__nav { padding: 12px 2px 6px; }

.sksp-faqs-index__label {
	margin: 0 0 10px;
	padding-left: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sksp-eyebrow);
}

.sksp-faqs-index__links {
	display: flex;
	flex-direction: column;
}

.sksp-faqs-index__link {
	display: block;
	padding: 10px 8px 10px 12px;
	border-radius: 8px;
	color: var(--sksp-muted);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: color 0.2s ease, background 0.2s ease;
}

.sksp-faqs-index__link:hover { color: var(--sksp-ink); background: rgba(255, 255, 255, 0.7); }

.sksp-faqs-index__link.is-active {
	color: var(--sksp-ink);
	font-weight: 600;
	background: #ffffff;
}

/* The "arrange a call" card ---------------------------------------------- */

.sksp-faqs-index__promo {
	margin-top: 12px;
	padding: 22px 20px 20px;
	border: 1px solid #ececef;
	border-radius: 14px;
	background: #ffffff;
	text-align: center;
}

.sksp-faqs-index__avatar {
	width: 72px;
	height: 72px;
	margin: 0 auto 14px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
}

.sksp-faqs-index__promo-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.018em;
	color: var(--sksp-ink);
}

.sksp-faqs-index__promo-text {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sksp-muted);
}

.sksp-faqs-index__promo-cta {
	display: block;
	padding: 13px 20px;
	border-radius: 10px;
	background: var(--sksp-ink);
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: background 0.18s ease;
}

.sksp-faqs-index__promo-cta:hover,
.sksp-faqs-index__promo-cta:focus-visible { background: var(--sksp-accent); color: #ffffff; }

/* The availability line, matching the header's own (modules/global-header):
   phone glyph, then the status over the number, with the pulsing green dot.
   Restated rather than borrowed because the header hides its copy below 981px
   and tints it against the header's own background — neither applies in here. */

.sksp-faqs-index__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
	padding: 8px 12px;
	border-radius: 10px;
	color: var(--sksp-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.18s ease;
}

.sksp-faqs-index__phone:hover { background: var(--sksp-tint); color: var(--sksp-ink); }

.sksp-faqs-index__phone-icon { display: inline-flex; flex-shrink: 0; }

.sksp-faqs-index__phone-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.2;
}

.sksp-faqs-index__phone-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 500;
	color: var(--sksp-eyebrow);
}

/* Same live dot as the header and the floating CTA. */
.sksp-faqs-index__phone-status::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #25d366;
	box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
	animation: sksp-phone-pulse 1.8s ease-in-out infinite;
}

@keyframes sksp-phone-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
	50%      { box-shadow: 0 0 0 5px rgba(37, 211, 102, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.sksp-faqs-index__phone-status::before { animation: none; }
}

.sksp-faqs-index__phone-number {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.005em;
}

/* One service's block --------------------------------------------------- */

.sksp-faqs-index__group + .sksp-faqs-index__group { margin-top: clamp(56px, 6.5vw, 92px); }

/* `scroll-margin` so a jump link does not land the heading under the fixed
   global header. */
.sksp-faqs-index__group { scroll-margin-top: 110px; }

.sksp-faqs-index__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 26px;
}

.sksp-faqs-index__head .sksp-eyebrow {
	flex: 1 0 100%;
	margin-bottom: 12px;
}

.sksp-faqs-index__title {
	font-size: clamp(26px, 2.8vw, 34px);
	line-height: 1.12;
	font-weight: 600;
	letter-spacing: -0.028em;
	color: var(--sksp-ink);
	margin: 0;
}

.sksp-faqs-index__more { font-size: 14px; }

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

@media (max-width: 1024px) {
	.sksp-overview__grid,
	.sksp-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.sksp-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.sksp-eng__cols { grid-template-columns: minmax(0, 1fr); }

	.sksp-related__inner { grid-template-columns: minmax(0, 1fr); }

	.sksp-h2--tight { max-width: none; }

	/* Below the tab strip's comfortable width the steps stack, so every panel
	   is shown at once and the tabs become plain headings. */
	.sksp-process__tabs { grid-auto-flow: row; }
	.sksp-process__tab {
		justify-content: flex-start;
		border-right: 0;
		border-bottom: 1px solid var(--sksp-line);
	}
	.sksp-process__panel { grid-template-columns: minmax(0, 1fr); }
	.sksp-process__detail { border-right: 0; border-bottom: 1px solid var(--sksp-line); }

	/* Below the rail's comfortable width the FAQs index stacks: the panel sits
	   above the questions, unpinned, and the service list turns back into a
	   wrapped pill row — there is no column left for it to track alongside. */
	.sksp-faqs-index__layout { grid-template-columns: minmax(0, 1fr); }

	.sksp-faqs-index__sticky {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.sksp-faqs-index__panel { margin-bottom: clamp(40px, 5vw, 64px); }

	.sksp-faqs-index__links {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}

	.sksp-faqs-index__link {
		padding: 9px 16px;
		border-radius: 999px;
		background: #ffffff;
	}

	.sksp-faqs-index__promo {
		max-width: 420px;
		margin-inline: auto;
	}
}

@media (max-width: 860px) {
	.sksp-head--split { flex-direction: column; align-items: stretch; }
	.sksp-btn--pill { align-self: flex-start; }

	.sksp-work__row { grid-template-columns: minmax(0, 1fr); }
	.sksp-work__row--flip .sksp-work__copy  { order: 0; }
	.sksp-work__row--flip .sksp-work__media { order: 0; }

	.sksp-includes__grid,
	.sksp-tools__groups,
	.sksp-tools__chips,
	.sksp-related__grid { grid-template-columns: minmax(0, 1fr); }

	.sksp-why__row { grid-template-columns: minmax(0, 1fr); }
	.sksp-why__def { padding-top: 0; padding-left: 42px; background: var(--sksp-dark-card); }
	.sksp-why__term { padding-bottom: 18px; }

	/* The bordered logo strip does not survive five columns on a phone. */
	.sksp-hero__logos {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sksp-hero__logo:nth-child(odd) { border-left: 1px solid var(--sksp-line); }
	.sksp-hero__logo { border-bottom: 1px solid var(--sksp-line); }
}

@media (max-width: 640px) {
	.sksp-overview__grid,
	.sksp-cases__grid,
	.sksp-proof__grid { grid-template-columns: minmax(0, 1fr); }

	.sksp-proof__tile.is-tall { grid-row: span 1; }

	.sksp-hero__actions .sksp-btn { flex: 1 1 100%; }

	.sksp-faqs__a { padding-left: 30px; }
}