/* Sketch Suite — Services Hero (List)  ([sketch_services_hero_list]).

   The light /services hero: centred eyebrow, type-and-delete headline and
   supporting line over the project template's pale wash, then the whole
   service list as a two-column numbered index, closed by the shared logo
   carousel.

   Design system, borrowed rather than re-decided:
     · type scale + ink   — modules/about-hero (eyebrow #98a2b3 / .14em,
       heading clamp(38px,6.4vw,104px) w600 ls -.035em #101326, subtext #4b5a6b)
     · rows + accents     — modules/services-stagger, the section directly below
       this one on the page (ink #111111, indigo #6552ff, 999px pills, Saans)
     · the wash           — modules/case-study, linear-gradient(160deg,
       #ffffff, #dce9f7); painted here from --skshl-wash so the two stay in step
     · the pills          — modules/services-hero, same markup and drift        */

.skshl {
	--skshl-bg: #ffffff;
	--skshl-fg: #101326;
	--skshl-muted: #4b5a6b;
	--skshl-num: #98a2b3;
	--skshl-line: rgba(16, 19, 38, 0.10);
	--skshl-accent: #6552ff;
	--skshl-wash: linear-gradient(340deg, #ffffff 0%, #dce9f7 100%);
	--skshl-max: 1180px;
	--skshl-radius: 18px;
	--skshl-gutter: clamp(20px, 4vw, 48px);
	/* Reserved space for the floating header, so the copy never hides behind
	   it. The editable top padding is added on top of this. */
	--skshl-header-clear: 96px;
	--skshl-pad-top: 40px;
	--skshl-pad-bottom: 0px;

	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	/* Full-bleed breakout from the builder's centred content column. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: calc(var(--skshl-header-clear) + var(--skshl-pad-top)) 0 var(--skshl-pad-bottom);
	overflow: hidden;
	background: var(--skshl-bg);
	color: var(--skshl-fg);
	font-family: var(--sk-font, "Saans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

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

/* The wash. Faded out before the bottom of the section, so the logo row sits on
   the flat background colour rather than on tinted glass. The default angle is
   the project template's 160° turned through 180° — same two colours, but with
   the tint gathered at the top of the hero where the copy is, rather than down
   at the logo band. Flip it back on the settings page if you want it low. */
.skshl::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 86%;
	z-index: -1;
	background-image: var(--skshl-wash);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
	pointer-events: none;
}

/* ── Header integration ───────────────────────────────────────
   Float the global header over the hero so the wash runs to the very top of
   the viewport. Unlike the dark hero this one is light, so the header keeps
   its own ink colours — only the frosted pill is dissolved while unscrolled
   (its own JS re-frosts it past 30px). */

body.skshl-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.skshl-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.skshl-on-page #Content,
body.skshl-on-page .entry-content > .section:first-of-type,
body.skshl-on-page .entry-content > .section:first-of-type > .section_wrapper,
body.skshl-on-page .entry-content > .section:first-of-type .vc_row:first-child,
body.skshl-on-page .entry-content > .section:first-of-type .vc_row:first-child .vc_column-inner {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

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

.skshl__inner {
	position: relative;
	z-index: 2;
	max-width: var(--skshl-max);
	margin: 0 auto;
	padding: 0 var(--skshl-gutter);
	text-align: center;
}

/* Left-aligned variant. Everything above is written centred, so this just
   releases the auto margins and re-anchors the typewriter's centring. Used on
   listing pages where something sits beside the copy rather than under it. */
.skshl--left .skshl__inner { text-align: left; }

/* Left-aligned, the hero's edge has to meet the theme container that the
   section below it sits in (Betheme: a 1224px box, simply centred). The centred
   variant adds its gutter *inside* max-width, which would leave the copy inset
   from the content beneath it — so here --skshl-max is the content width
   itself, and the 20px is only a fallback for viewports too narrow to hold it. */
.skshl--left .skshl__inner {
	width: min(var(--skshl-max), 100% - 40px);
	max-width: none;
	padding-inline: 0;
}
.skshl--left .skshl__heading { margin-inline: 0; }
.skshl--left .skshl__subtext { margin-inline: 0; }
.skshl--left .skshl__live { justify-content: flex-start; }

/* ---------------------------------------------------------------------------
   Overlapping photos

   Two cards leaning opposite ways above the copy: a wider shot behind, a
   portrait in front. Laid out with the pair centred as a unit — the front card
   is pulled back over the one behind it by a negative margin, so the group
   stays centred whatever the two images measure.

   The tilt lives on the figure while Sketch Reveal animates it, and Reveal's
   finished state sets `transform: none` — so the rotation is applied to the
   inner image instead, which Reveal never touches.
--------------------------------------------------------------------------- */
.skshl__photos {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 clamp(28px, 3.4vw, 52px);
	/* Sketch Reveal's own knobs: a longer travel and an ease that overshoots
	   slightly, so the pair lands with a bit of weight instead of fading on. */
	--sk-distance: 52px;
	--sk-duration: 1.05s;
	--sk-ease: cubic-bezier(0.22, 0.9, 0.24, 1.32);
	--sk-blur: 26px;
}
.skshl__photo {
	position: relative;
	margin: 0;
	flex: 0 0 auto;
	line-height: 0;
}
.skshl__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: clamp(10px, 1vw, 16px);
	border: 4px solid #fff;
	box-shadow: 0 18px 40px rgba(16, 19, 38, 0.16);
}
/* The ghost. Blurred past the point of being readable, tilted against the
   portrait and peeking out from behind it — depth and a hint of the studio,
   not a second thing to look at. No frame: a white border round a blur reads
   as a mistake, and the blur's own soft edge is the shape. */
.skshl__photo--back {
	--skshl-ghost-w: clamp(214px, 21.5vw, 288px);
	--skshl-ghost-h: clamp(250px, 25vw, 330px);
	/* Taken out of the flow and hung behind the portrait: a card peeking from
	   one edge reads as a stray artefact, while one that breaks out on every
	   side reads as depth. Centred, then nudged up and left so the tilt has a
	   direction. Positioned with margins rather than a transform, because
	   Sketch Reveal clears the transform on whatever it animates. */
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: var(--skshl-ghost-w);
	height: var(--skshl-ghost-h);
	margin-left: calc(var(--skshl-ghost-w) / -2 - 12px);
	margin-top: calc(var(--skshl-ghost-h) / -2 - 8px);
}
.skshl__photo--back .skshl__photo-img {
	transform: rotate(-9deg);
	/* Enough blur that it is a shape, not a picture; the saturation lift keeps
	   it a colour wash rather than the grey any photo averages out to. */
	filter: blur(14px) saturate(1.45) brightness(1.04);
	opacity: 0.75;
	border: 0;
	box-shadow: none;
}

/* The portrait, over the corner of it. */
.skshl__photo--front {
	z-index: 2;
	width: clamp(150px, 15vw, 196px);
	height: clamp(186px, 18.6vw, 242px);
	margin-left: 0;
}
.skshl__photo--front .skshl__photo-img {
	transform: rotate(5deg);
}

/* One photo on its own is a portrait standing almost straight — no card to
   lean away from, so the steep tilt of the pair would just read as crooked.
   Wins on specificity over the two-card rules above, which stay for anywhere
   the slot is given a pair. */
.skshl__photo:only-child {
	width: clamp(150px, 15vw, 196px);
	height: clamp(186px, 18.6vw, 242px);
	margin-left: 0;
}
.skshl__photo:only-child .skshl__photo-img {
	transform: rotate(5deg);
}

.skshl__eyebrow {
	margin: 0 0 clamp(14px, 1.6vw, 22px);
	font-size: clamp(12px, .85vw, 14px);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--skshl-num);
}

.skshl__heading {
	/* Sketch Sweep rests at --sk-sweep-fg, so it has to be this heading's own
	   ink or the handoff from words to line shows as a colour jump. The two
	   gradient stops stay at the module's defaults — the sweep should read the
	   same here as on a blog post title. Inert unless data-sk-sweep is on. */
	--sk-sweep-fg: var(--skshl-fg);
	margin: 0 auto;
	max-width: 15em;
	font-size: clamp(38px, 5.6vw, 92px);
	line-height: .98;
	font-weight: 600;
	letter-spacing: -.035em;
	color: var(--skshl-fg);
	text-wrap: balance;
}

/* Lead on its own line, rotating ending on the next — the same two-line shape
   the dark hero had. */
.skshl__prefix,
.skshl__tail { display: block; }

/* One word of the headline. Needs a box of its own for the reveal's transform,
   and the blur bleeds past the glyphs, so nothing here clips it. */
.skshl__word {
	display: inline-block;
	will-change: filter, opacity, transform;
}

/* The ghost is the longest ending, rendered invisibly to hold the line's width;
   the live text is centred on top of it. Without this the centred heading
   would shuffle sideways on every keystroke. */
.skshl__tail {
	position: relative;
	white-space: nowrap;
}

.skshl__ghost { visibility: hidden; }

.skshl__live {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: baseline;
	justify-content: center;
	white-space: nowrap;
}

/* The caret keeps its own colour so it reads as a cursor rather than as a
   letter — brand indigo, the accent the section below uses. */
.skshl__caret {
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: baseline;
	width: .055em;
	height: .82em;
	margin-left: .07em;
	background: var(--skshl-accent);
	animation: skshl-blink 1.05s steps(1, end) infinite;
}

@keyframes skshl-blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

.skshl__subtext {
	margin: clamp(18px, 2.2vw, 30px) auto 0;
	max-width: 42ch;
	font-size: clamp(16px, 1.35vw, 21px);
	line-height: 1.5;
	color: var(--skshl-muted);
}

/* ── Google rating badge ──────────────────────────────────── */

/* The badge itself is modules/google-reviews' own component; this only places
   it. Centred it sits directly in the reading path after the subtext, which is
   where the proof does most work on a reviews page. */
.skshl__badge {
	display: flex;
	justify-content: center;
	margin-top: clamp(22px, 2.6vw, 34px);
}

.skshl--left .skshl__badge { justify-content: flex-start; }

/* ── The service index ────────────────────────────────────── */

/* Separate cards rather than a table: each service is its own rounded
   rectangle with air around it, dealt down two columns. Column-first flow, so
   the markup stays in 01…06 order and the grid puts the first half down the
   left column and the rest down the right — --skshl-rows is half the service
   count, set inline by the template.

   The container itself paints nothing. It used to carry the hairline colour as
   a background with 1px grid gaps letting it through, which is what left a
   grey slab sitting in the fold for the whole of the staggered entrance below:
   the rows are opacity 0 until each one reveals, and the slab was not.
   Transparent gaps have nothing to show early. */
.skshl__index {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--skshl-rows, 3), auto);
	grid-auto-columns: minmax(0, 1fr);
	gap: clamp(10px, 1vw, 16px);
	margin: clamp(40px, 5vw, 76px) auto 0;
	text-align: left;
}

/* Frosted glass over the wash: a mostly-transparent fill lifted by a backdrop
   blur, a light hairline and a soft shadow, so the gradient (and the team
   tiles, where those are on) still reads through each card rather than being
   blocked out by it. Roomier than the old directory rows — a card needs air
   around its label where a table line did not.

   Where backdrop-filter is unsupported the plain fill below is opaque enough
   to hold the label on its own; the @supports block only thins it out once
   there's a blur behind it to do the work. */
.skshl__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(10px, .85vw, 14px);
	padding: clamp(18px, 1.7vw, 26px) clamp(20px, 1.9vw, 28px);
	border: 1px solid color-mix(in srgb, var(--skshl-bg) 62%, transparent);
	border-radius: var(--skshl-radius);
	background: color-mix(in srgb, var(--skshl-bg) 62%, transparent);
	/* Clips the sheen below to the rounded rectangle. The glow is unaffected —
	   overflow clips children, not the element's own box-shadow. */
	overflow: hidden;
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--skshl-bg) 70%, transparent),
		0 1px 2px rgba(16, 19, 38, .04),
		0 12px 30px -14px rgba(16, 19, 38, .18);
	color: inherit;
	text-decoration: none;
	/* Two speeds on purpose. The lift and the label keep the quick, responsive
	   easing — a card should answer the cursor straight away. The indigo is the
	   slow one, taking ~900ms to bloom or die back, so it reads as light
	   gathering under the card rather than a state flicking on and off.

	   This is the fallback only. Every row also carries data-sk-reveal, and
	   Sketch Reveal's own transition outguns a bare class — see the rule below,
	   which is what actually runs on the page. */
	transition:
		background-color 420ms ease,
		border-color 900ms ease,
		color 240ms ease,
		transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 900ms cubic-bezier(0.33, 0, 0.2, 1);
}

/* ── Hover timing vs. the reveal ──────────────────────────────
   Each card is also a reveal target, and modules/reveal styles those with

       html.sk-reveal [data-sk-reveal] { transition: opacity…, transform…, filter…; }

   which is (0,2,1) against .skshl__row's (0,1,0) — it wins on specificity
   whatever the load order, and its shorthand resets the whole transition
   property list to those three. So the fill, the border and the glow had no
   transition at all and snapped on instantly, while reveal's companion
   `transition-delay: var(--sk-delay)` — left inline on every row by reveal.js
   to drive the entrance stagger — put a 260–610ms wait on whatever did animate.

   Restating the lot here at a weight that wins. The three reveal properties
   keep reveal's exact timings and its --sk-delay, so the entrance is untouched;
   the hover properties are appended with theirs. Delays ride inside each
   shorthand entry rather than in a positional transition-delay list, so nothing
   silently shifts if this list is ever reordered. */
.skshl .skshl__row[data-sk-reveal] {
	transition:
		opacity var(--sk-duration, 0.8s) var(--sk-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) var(--sk-delay, 0ms),
		transform var(--sk-duration, 0.8s) var(--sk-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) var(--sk-delay, 0ms),
		filter var(--sk-duration, 0.8s) var(--sk-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) var(--sk-delay, 0ms),
		background-color 420ms ease,
		border-color 900ms ease,
		color 240ms ease,
		box-shadow 900ms cubic-bezier(0.33, 0, 0.2, 1);
}

/* Entering hover. Transform is the one property both states want, so it is
   claimed here at the quick easing — the 2px lift answers the cursor — while
   the entrance keeps the slow one above for the rise and for dropping back.
   The two indigo properties carry the 250ms wait. */
.skshl a.skshl__row[data-sk-reveal]:hover,
.skshl a.skshl__row[data-sk-reveal]:focus-visible {
	transition:
		background-color 420ms ease,
		color 240ms ease,
		transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 900ms ease 250ms,
		box-shadow 900ms cubic-bezier(0.33, 0, 0.2, 1) 250ms;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.skshl__row {
		background: color-mix(in srgb, var(--skshl-bg) 40%, transparent);
		-webkit-backdrop-filter: blur(18px) saturate(1.6);
		backdrop-filter: blur(18px) saturate(1.6);
	}
}

/* ── The glint ────────────────────────────────────────────────
   A narrow band of light raked across the card on hover, the way a highlight
   travels over a sheet of glass when it tilts. Parked off the left edge and
   invisible at rest; the card's overflow keeps it inside the rounded corners.

   It sits above the label rather than behind it — a positioned pseudo-element
   paints after inline content — which is what makes it read as a reflection on
   the surface rather than something sliding about underneath. Kept to a 55%
   peak so it passes over the text without washing it out.

   An animation rather than a transition, because the band has to travel one
   way and fade at both ends; a transition can only interpolate to a resting
   state and back. It runs once per hover and resets when the cursor leaves. */
.skshl__row::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: 0;
	width: 55%;
	pointer-events: none;
	/* A white core with faintly indigo flanks. On a card that is already close
	   to white, white alone has nothing to be brighter than — the cool edges
	   are what give the band a shape to read against the fill. */
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in srgb, var(--skshl-accent) 9%, transparent) 26%,
		color-mix(in srgb, var(--skshl-bg) 95%, transparent) 50%,
		color-mix(in srgb, var(--skshl-accent) 9%, transparent) 74%,
		transparent 100%
	);
	/* Travel is sized to the band: 55% of the card wide, so -110% of its own
	   width parks it exactly off the left edge and 240% exactly off the right.
	   The earlier -160% → 320% spent a quarter of the timeline out of sight at
	   each end, which is why the glint looked like it barely appeared. */
	transform: translateX(-110%) skewX(-14deg);
	opacity: 0;
}

/* Near-even travel on purpose. An ease-out put most of the distance in the
   first third, so the band crossed the card almost before the eye caught it and
   then sat off-screen for the rest of the run. */
a.skshl__row:hover::after,
a.skshl__row:focus-visible::after {
	animation: skshl-sheen 1100ms cubic-bezier(0.42, 0.08, 0.42, 0.96);
}

@keyframes skshl-sheen {
	0%   { transform: translateX(-110%) skewX(-14deg); opacity: 0; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { transform: translateX(240%) skewX(-14deg); opacity: 0; }
}

.skshl__num {
	flex: 0 0 auto;
	min-width: 1.7em;
	font-size: clamp(12px, .85vw, 14px);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	color: var(--skshl-num);
	transition: color 240ms ease;
}

.skshl__label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: clamp(16px, 1.2vw, 19px);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.25;
}

.skshl__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--skshl-fg);
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms ease;
}

/* A row with no URL is still part of the index — it just doesn't invite a
   click, so its arrow sits back rather than disappearing and breaking the
   column's rhythm. */
.skshl__row--static { cursor: default; }
.skshl__row--static .skshl__arrow { opacity: .35; }

/* Hover clears the glass rather than tinting it: the fill firms up, the card
   lifts a couple of pixels and the shadow picks up the indigo.

   The two halves are deliberately out of step. Fill and lift land straight
   away, so the card still answers the cursor. The indigo — the glow and the
   edge that carries it — is held back a quarter-second and only then fades up
   over 900ms, so a cursor passing across the index never lights anything: the
   glow is the reward for actually stopping on a card.

   The timings themselves live in the pair of rules further up, which have to
   outweigh Sketch Reveal; this rule only says what the hover state looks like. */
a.skshl__row:hover,
a.skshl__row:focus-visible {
	background: color-mix(in srgb, var(--skshl-bg) 82%, transparent);
	border-color: color-mix(in srgb, var(--skshl-accent) 30%, transparent);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--skshl-bg) 80%, transparent),
		0 2px 4px rgba(16, 19, 38, .05),
		0 20px 44px -18px color-mix(in srgb, var(--skshl-accent) 55%, transparent);
	transform: translateY(-2px);
	color: var(--skshl-fg);
	/* Betheme's be.css carries a blanket `a:hover { text-decoration: underline }`
	   at (0,1,1), which outweighs the row's own `text-decoration: none` at
	   (0,1,0) and underlines the label on hover. This rule is (0,2,1), so
	   restating it here settles it whatever the load order. */
	text-decoration: none;
}

a.skshl__row:hover .skshl__num,
a.skshl__row:focus-visible .skshl__num { color: var(--skshl-accent); }

a.skshl__row:hover .skshl__arrow,
a.skshl__row:focus-visible .skshl__arrow {
	color: var(--skshl-accent);
	transform: translateX(5px);
}

a.skshl__row:focus-visible {
	outline: 2px solid var(--skshl-accent);
	outline-offset: -3px;
}

/* ── Logo row ─────────────────────────────────────────────── */

/* The shared carousel, seated on a hairline so it reads as the foot of the
   hero rather than as a floating band. It brings its own padding and
   background from Sketch → Logo Carousel. */
.skshl__logos {
	position: relative;
	z-index: 2;
	margin-top: clamp(56px, 7vw, 104px);
	border-top: 1px solid var(--skshl-line);
}

/* The carousel's own heading ("you're in good hands") is wanted elsewhere but
   not here — the hero already has a headline, and the logos carry themselves.
   Hidden rather than blanked, so the text stays intact for every other page
   that renders the same shared carousel. */
.skshl__logos--bare .sklc-heading { display: none; }

/* ── Floating pills ───────────────────────────────────────── */

/* The layer starts below the floating header, not at the top of the section.
   Anchors are percentages, so on a short hero (no index — see the /work
   placement) the top ones would otherwise land behind the header. */
.skshl-pills {
	position: absolute;
	inset: var(--skshl-header-clear) 0 0;
	z-index: 1;
	pointer-events: none;
}

.skshl-pill {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px 9px 13px;
	border-radius: 999px;
	background: var(--skshl-pill-color, #c6f24e);
	color: #101326;
	font-size: clamp(13px, 1vw, 15px);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transform: translate(-50%, -50%);
	/* On white the pills need a shadow to lift off the page — on the old dark
	   hero the colour alone did that work. */
	box-shadow: 0 12px 30px -14px rgba(16, 19, 38, .45);
	will-change: transform;
}

.skshl-pill__icon { flex: 0 0 auto; }

/* Perk variant — a white chip with an indigo tick. Benefits are a list of
   things you get, so they should read as one set rather than as four
   differently-coloured labels the way the team tags do. */
.skshl-pills--perk .skshl-pill {
	gap: 9px;
	padding: 10px 17px 10px 14px;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--skshl-line);
	color: var(--skshl-fg);
	font-weight: 500;
	box-shadow: 0 14px 34px -18px rgba(16, 19, 38, .34);
}

.skshl-pills--perk .skshl-pill__icon { color: var(--skshl-accent); }

/* Row placement — in the flow under the subtext instead of out in the gutters.
   Nothing is absolutely positioned here, so unlike the gutter layer it survives
   every screen size; it just wraps onto more lines. */
.skshl-pills--row {
	position: static;
	inset: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 12px;
	margin-top: clamp(24px, 2.8vw, 36px);
}

.skshl--left .skshl-pills--row { justify-content: flex-start; }

/* In the row the pill sits where the flexbox put it, so it must not carry the
   gutter layer's -50%/-50% centring — hero.js drives a plain offset instead. */
.skshl-pills--row .skshl-pill {
	position: static;
	transform: none;
}

/* Below 1200px the centred copy takes the full width and there is no gutter
   left for the *floating* pills to sit in without colliding with it. The row
   is unaffected — it is in the flow. */
@media (max-width: 1199px) {
	.skshl-pills:not(.skshl-pills--row) { display: none; }
}

/* ── Floating review snippets ─────────────────────────────── */

/* Same idea as the pills and the same drift, but carrying a real review. Used
   where the reviews are the subject of the page rather than decoration. */
.skshl-snips {
	position: absolute;
	inset: var(--skshl-header-clear) 0 0;
	z-index: 1;
	pointer-events: none;
}

.skshl-snip {
	position: absolute;
	width: clamp(186px, 15.5vw, 252px);
	margin: 0;
	padding: 14px 16px 15px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 18px 44px -20px rgba(16, 19, 38, .38);
	text-align: left;
	transform: translate(-50%, -50%);
	will-change: transform;
}

.skshl-snip__stars {
	display: flex;
	gap: 2px;
	margin-bottom: 8px;
	/* Google's own star gold, so the card reads as a review at a glance. */
	color: #fbbc04;
}

/* Scoped through .skshl on purpose. Betheme styles bare blockquotes —
   `blockquote { font-size:17px; line-height:31px; margin:0 0 35px 25px;
   position:relative; top:15px }` plus `.style-simple blockquote { line-height:25px;
   font-style:italic }` — and that second selector outranks a single class, so
   the card's own leading and spacing never landed. Two classes take it back,
   and the theme's offset and indent are undone explicitly. */
.skshl .skshl-snip__quote {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	position: static;
	top: auto;
	/* Tight leading holds the clamped lines together as one block, so the margin
	   below reads as a real gap rather than as another line space. */
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	line-height: 1.32;
	font-style: normal;
	font-weight: 500;
	color: var(--skshl-fg);
	quotes: none;
}

.skshl-snip__by {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.skshl-snip__avatar {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
}

.skshl-snip__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.skshl-snip__name,
.skshl-snip__role {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.skshl-snip__name {
	font-size: 12px;
	font-weight: 600;
	color: var(--skshl-fg);
}

.skshl-snip__role {
	font-size: 11px;
	color: var(--skshl-num);
}

/* The cards step out at the same width as the pills. The gutter to clear is the
   headline's *text*, not the content column — the column is capped at
   --skshl-max but the centred line inside it is far narrower — so a 186px card
   pinned near the edge still clears it at 1200. Below that the headline wraps
   wide enough to reach them. A 1440px screen has a ~1425px viewport once the
   scrollbar is counted, which is why this used to hide them on a laptop. */
@media (max-width: 1199px) {
	.skshl-snips { display: none; }
}

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

@media (max-width: 860px) {
	.skshl {
		--skshl-header-clear: 84px;
		--skshl-radius: 18px;
	}

	.skshl__heading {
		font-size: clamp(34px, 8.4vw, 54px);
		letter-spacing: -.03em;
		max-width: none;
	}

	/* A phone is narrower than the longest ending, so reserving its width would
	   push the heading off the side. Let the tail wrap instead and take the
	   small reflow — there is no gutter here for the line to shuffle into. */
	.skshl__tail { white-space: normal; }
	.skshl__ghost { display: none; }

	.skshl__live {
		position: static;
		display: inline;
		white-space: normal;
	}

	/* One column — back to source order, which is already 01, 02, 03… */
	.skshl__index {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-template-columns: minmax(0, 1fr);
	}

	.skshl__subtext { max-width: 34ch; }
}

/* ── Team photo tiles ─────────────────────────────────────────
   The Logo Grid's flanking tiles, dropped in as an absolutely positioned layer
   by SKLG_Plugin::render_tiles() — the same photos, entrance and hover fan as
   the home page's "Who are we?" section. That module styles the layer entirely;
   all this does is get the copy out of its way.

   The copy column sits at z-index 2 directly over the layer, and its *empty*
   margins reach across the tiles on any screen narrower than about 1450px —
   wide enough to swallow every hover aimed at one, which is what leaves the
   tiles looking dead. So the column passes pointer events through and the
   inline content takes them back, the same fix the Logo Grid makes for its own
   (wider) container. :has() keeps it off a hero with no tiles; without :has()
   support nothing here applies and the hover is simply the poorer for it. */
.skshl:has(.sklg-tiles) .skshl__inner,
.skshl:has(.sklg-tiles) .skshl__eyebrow,
.skshl:has(.sklg-tiles) .skshl__heading,
.skshl:has(.sklg-tiles) .skshl__index,
.skshl:has(.sklg-tiles) .skshl-pills--row {
	pointer-events: none;
}

/* Inline boxes, so each takes events over its own glyphs rather than over the
   full width of the column — and the text stays selectable. */
.skshl:has(.sklg-tiles) .skshl__word,
.skshl:has(.sklg-tiles) .skshl__live,
.skshl:has(.sklg-tiles) .skshl__subtext,
.skshl:has(.sklg-tiles) .skshl__badge,
.skshl:has(.sklg-tiles) .skshl-pill,
.skshl:has(.sklg-tiles) .skshl__row {
	pointer-events: auto;
}

/* The caret blink and the pill drift are both motion for its own sake. */
@media (prefers-reduced-motion: reduce) {
	.skshl__caret { animation: none; }

	/* Matching the weight of the two hover-timing rules above, which have to
	   outweigh Sketch Reveal and would otherwise outweigh this as well. */
	.skshl .skshl__row[data-sk-reveal],
	.skshl a.skshl__row[data-sk-reveal]:hover,
	.skshl a.skshl__row[data-sk-reveal]:focus-visible,
	.skshl__row,
	.skshl__arrow { transition: none; }

	a.skshl__row:hover::after,
	a.skshl__row:focus-visible::after { animation: none; }

	a.skshl__row:hover,
	a.skshl__row:focus-visible { transform: none; }
}