/* ---------------------------------------------------------------------------
 * /work — the SEO practice.
 *
 * Strictly monochrome: the site's warm neutrals are swapped for true greys on
 * this page, and every photograph and logo is shown in black and white. The
 * structure is the micrographic system from the story covers: a rule over
 * each section, a bracketed index and name on the left, a note on the right.
 * ------------------------------------------------------------------------ */

.kc-work {
	--w-ink: #000;
	--w-soft: #4d4d4d;
	--w-faint: #8c8c8c;
	--w-rule: #cccccc; /* section and list rules, a step darker than the row hairlines */
	--w-hair: #d9d9d9;
	--w-text: clamp(.875rem, .82rem + .22vw, 1rem);

	padding-inline: calc(var(--gutter) + env(safe-area-inset-left)) calc(var(--gutter) + env(safe-area-inset-right));
	padding-bottom: 0;
	color: var(--w-ink);
}

.kc-work__section { padding-top: clamp(2.5rem, 5vw, 4.5rem); container-type: inline-size; }
.kc-work__section.kc-work__intro { padding-top: clamp(.5rem, 1.2vw, 1rem); } /* not :first-child: the reveal script comes first */
.kc-work__intro + .kc-work__section { padding-top: clamp(2.5rem, 5vw, 4.5rem); }

/* --- micrographics ----------------------------------------------------- */

.kc-work__micro {
	font-family: var(--font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--w-soft);
}

.kc-work__faint { color: var(--w-faint); }

.kc-work__label {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-2) var(--sp-5);
	position: relative;
	padding-top: .875rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
/* The section rule is drawn, not a border, so it can open from the centre. */
.kc-work__label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--w-rule);
	transform-origin: 50% 50%;
}

.kc-work__name,
.kc-work__note {
	margin: 0;
	font-family: var(--font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.5;
	text-transform: uppercase;
}
.kc-work__name { color: var(--w-ink); }
.kc-work__index { color: var(--w-faint); margin-right: .6em; }
.kc-work__note { color: var(--w-faint); }

.kc-work__subhead {
	margin: 0 0 var(--sp-3);
	color: var(--w-ink);
}

/* --- type ------------------------------------------------------------- */

.kc-work__statement,
.kc-work__lead {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: -.012em;
	text-wrap: pretty;
}

.kc-work__statement {
	font-size: clamp(2rem, 1.2rem + 3.3vw, 4.25rem);
	line-height: 1.04;
}
.kc-work__statement { color: var(--w-faint); }
/* The About lead: the intro's face, half its size, on four set lines. The
   longest ("and other enterprise-level…") is 23.911em of Clash, so the size
   never exceeds what fits that line in the section (100cqi / 24.2). On a phone
   the lines just wrap. */
.kc-work__lead.kc-work__lead--match {
	font-size: min(clamp(1.375rem, .9rem + 1.6vw, 2.25rem), 100cqi / 24.2);
	line-height: 1.15;
	max-width: none;
}
.kc-work__leadline { display: block; }
/* The services lead sits in a half-width column on desktop; its longest line
   ("stand out and stand for something.") is 14.305em, and the column is 48.3%
   of the section, so it is also capped at 3.3cqi there. */
@media (min-width: 1024px) {
	.kc-work__lead.kc-work__lead--services {
		font-size: min(clamp(1.375rem, .9rem + 1.6vw, 2.25rem), 100cqi / 24.2, 3.3cqi);
	}
}
@media (max-width: 699px) {
	.kc-work__lead.kc-work__lead--match { font-size: 1.375rem; }
	.kc-work__leadline { display: inline; }
}
.kc-work__statement strong { font-weight: 400; color: var(--w-ink); }

.kc-work__lead {
	font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	line-height: 1.1;
	max-width: 30em;
}

.kc-work__display {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(3rem, 1.5rem + 6vw, 7rem);
	line-height: .95;
	letter-spacing: -.02em;
}

.kc-work__prose p,
.kc-work__bodytext,
.kc-work__quote blockquote p {
	margin: 0;
	font-family: var(--font-text);
	font-size: var(--w-text);
	font-weight: 400;
	line-height: 1.5;
	color: var(--w-ink);
	max-width: 32em;
}
.kc-work__prose p + p { margin-top: 1em; }

/* --- intro ------------------------------------------------------------- */

.kc-work__introgrid {
	container-type: inline-size;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--sp-6) clamp(var(--sp-5), 3vw, var(--sp-7));
	align-items: start;
}

.kc-work__portrait {
	grid-column: span 3;
	position: relative;
	overflow: hidden;
	margin: 0;
}
/* Hover swaps in the laughing portrait. It is scaled and offset so its glasses
   land exactly on the glasses in the main portrait (frame centre, top bar and
   width measured on both files), so the face stays put and only the
   expression changes. Numbers: main 768x867 shown 4:5 cover (693.6 wide
   visible), glasses centre 369.8,290 and 195 wide; laugh 1265x1771, glasses
   centre 690,765 and 184 wide. */
.kc-work__portrait .kc-work__portrait-alt {
	position: absolute;
	left: -52.11%;
	top: -60.06%;
	width: 193.29%;
	max-width: none;
	height: auto;
	aspect-ratio: auto;
	object-fit: fill;
	filter: grayscale(1) contrast(1.04);
	opacity: 0;
	transition: opacity 420ms var(--ease);
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
	.kc-work__portrait:hover .kc-work__portrait-alt { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
	.kc-work__portrait .kc-work__portrait-alt { display: none; }
}
.kc-work__portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: grayscale(1) contrast(1.04);
}

/* Straight after the portrait, one grid gap away, no empty column between. */
.kc-work__introtext { grid-column: 4 / -1; }

/* Statement starts at the portrait's top; the status line sits on its bottom
   edge, so the text block is exactly as tall as the photograph. */
@media (min-width: 700px) {
	.kc-work__introtext {
		align-self: stretch;
		display: flex;
		flex-direction: column;
	}
	.kc-work__introtext .kc-work__now { margin-top: auto; padding-top: var(--sp-5); }
}

/* Four set lines, sized off the grid's own width like the portrait, so they
   always fit inside the photograph's height. The longest line ("search
   experience & storytelling.") is 13.462em of Clash, so the size is capped
   where that line meets the column: 74.17% of the grid on desktop (5.51cqi
   max) and 56.95% on tablet (4.23cqi max). */
@media (min-width: 700px) {
	.kc-work__statement { font-size: var(--kc-intro-fs, 5.2cqi); }
}
@media (min-width: 700px) and (max-width: 1023px) {
	.kc-work__statement { --kc-intro-fs: 4.1cqi; }
}
.kc-work__line { display: block; }

/* A phone keeps the same four lines, sized so the longest one spans the
   gutters (13.462em, rounded up for safety). */
@media (max-width: 699px) {
	.kc-work__statement { font-size: calc((100vw - var(--gutter) * 2) / 13.7); line-height: 1.08; }
}

/* A status line under the intro, all in the label grey (#8c8c8c): a dot with
   a paler ring pulsing out of it, then the role and House of Psalm's mark. */
.kc-work__now {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
	color: var(--w-faint);
}

.kc-work__pulse {
	position: relative;
	flex: none;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--w-faint);
}
.kc-work__pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #c8c8c8;
	animation: kc-pulse 2s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes kc-pulse {
	0%   { transform: scale(1); opacity: .6; }
	80%, 100% { transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.kc-work__pulse::after { animation: none; opacity: 0; }
}

/* --- clients ----------------------------------------------------------- */

/* One row, running slowly right to left, clipped to the same width as the
   section rule above it, and draggable either way. site.js clones the set so the loop has no seam. The
   logos are white artwork; brightness(0) turns them solid black. */
.kc-work__marquee {
	/* Closer to its label than other sections' content is. */
	margin-top: calc(clamp(2rem, 4vw, 3.5rem) * -.55);
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}
.kc-work__marquee.is-dragging { cursor: grabbing; }

.kc-work__clients {
	display: flex;
	align-items: center;
	gap: clamp(2.5rem, 5vw, 5rem);
	width: max-content;
	list-style: none;
	margin: 0;
	padding: .5rem 0;
	will-change: transform;
}
.kc-work__clients li { flex: none; }
.kc-work__clients img {
	display: block;
	width: clamp(6.5rem, 10vw, 9.5rem);
	height: auto;
	filter: brightness(0);
	opacity: .45; /* black at 45% on white is #8c8c8c, the label grey */
	pointer-events: none;
}

/* Without JavaScript it is simply a strip you can scroll. */
.kc-work__marquee:not(.is-live) { overflow-x: auto; scrollbar-width: none; }
.kc-work__marquee:not(.is-live)::-webkit-scrollbar { display: none; }

/* --- about ------------------------------------------------------------- */

.kc-work__aboutgrid {
	--w-text: .875rem; /* 14px: the About columns and the experience list */
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--sp-7) clamp(var(--sp-5), 3vw, var(--sp-7));
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.kc-work__aboutgrid > .kc-work__prose { grid-column: span 4; }
.kc-work__experience { grid-column: span 4; }

/* Desktop: 25% text, 5% gap, 25% text, 15% gap, 30% experience. */
@media (min-width: 1024px) {
	.kc-work__aboutgrid {
		grid-template-columns: 25% 5% 25% 15% 30%;
		column-gap: 0;
	}
	.kc-work__aboutgrid > .kc-work__prose:nth-child(1) { grid-column: 1; }
	.kc-work__aboutgrid > .kc-work__prose:nth-child(2) { grid-column: 3; }
	.kc-work__experience { grid-column: 5; }
	.kc-work__aboutgrid .kc-work__prose p { max-width: none; }
}


/* --- about v2: spec sheet + ledger ------------------------------------ */

/* Four short paragraphs, each under its own micrographic label and rule, in
   four columns; the career below them as a full-width ledger that reads
   years, role, company. */
/* Desktop: the four facets two by two on the left (25% | 5% | 25%), the
   ledger on the right (30%) after a 15% gap, on the same tracks as v1. */
.kc-work__aboutsplit {
	display: grid;
	grid-template-columns: 55% 15% 30%;
	align-items: start;
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.kc-work__aboutsplit > .kc-work__facets { grid-column: 1; }
.kc-work__aboutsplit > .kc-work__ledger { grid-column: 3; }

.kc-work__facets {
	--w-text: .875rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2.5rem, 4vw, 3.5rem) 9.09%; /* 5 of the 55 */
}
.kc-work__facet .kc-work__subhead {
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--w-rule);
	margin-bottom: 1rem;
}
.kc-work__facet .kc-work__facettext {
	margin: 0;
	font-family: var(--font-text);
	font-size: var(--w-text);
	line-height: 1.5;
	color: var(--w-soft);
	text-wrap: pretty;
}
.kc-work__facettext + .kc-work__facettext { margin-top: 1em; }

.kc-work__ledger .kc-work__subhead { margin-bottom: .75rem; padding-bottom: 0; }
.kc-work__ledger { --w-text: .875rem; }
.kc-work__ledger .kc-work__row { color: var(--w-soft); }
.kc-work__ledger .kc-work__row .kc-work__micro { color: var(--w-faint); white-space: nowrap; }

@media (max-width: 1023px) {
	.kc-work__aboutsplit { grid-template-columns: minmax(0, 1fr); row-gap: clamp(3rem, 6vw, 4.5rem); }
	.kc-work__aboutsplit > .kc-work__facets,
	.kc-work__aboutsplit > .kc-work__ledger { grid-column: 1; }
	.kc-work__facets { column-gap: clamp(1.5rem, 4vw, 3rem); }
}
@media (max-width: 599px) {
	.kc-work__facets { grid-template-columns: minmax(0, 1fr); }
}

/* A ruled list: the rows are the one place hairlines separate things. */
.kc-work__rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--w-rule);
}
.kc-work__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: .7rem 0;
	border-bottom: 1px solid var(--w-hair);
	font-family: var(--font-text);
	font-size: var(--w-text);
	line-height: 1.35;
}
.kc-work__row .kc-work__micro { flex: none; }
/* The experience list reads in the darker grey, "at" included; only the dates
   drop to the label grey. */
.kc-work__experience .kc-work__row,
.kc-work__experience .kc-work__at { color: var(--w-soft); }
.kc-work__experience .kc-work__row .kc-work__micro { color: var(--w-faint); }
.kc-work__at { color: var(--w-faint); }

/* --- services ---------------------------------------------------------- */

.kc-work__servicesgrid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--sp-7) clamp(var(--sp-5), 3vw, var(--sp-7));
	align-items: start;
}
.kc-work__servicehead { grid-column: span 6; }
.kc-work__service { grid-column: span 3; }
.kc-work__service .kc-work__row { justify-content: flex-start; }
/* Same as the experience list: 14px in the darker grey, numbers in the label
   grey. */
.kc-work__service { --w-text: .875rem; }
.kc-work__service .kc-work__row { color: var(--w-soft); }
.kc-work__service .kc-work__num { color: var(--w-faint); }
.kc-work__num { width: 2.2em; color: var(--w-faint); }

/* Not a filled button: the site's own link at the lead's size, with the front
   page's hover. The arrow is hidden until the pointer arrives; then it slides
   in from the left and the words step right to make room, exactly as the
   hero titles and the menu links do. */
.kc-work__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-top: clamp(2rem, 3.5vw, 3rem);
	padding: 0 .8em 0 0;
	color: var(--w-ink);
	font-family: var(--font-display);
	font-size: min(clamp(1.375rem, .9rem + 1.6vw, 2.25rem), 3.3cqi);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -.012em;
	text-decoration: none;
}
.kc-work__ctago { display: none; }
.kc-work__ctalabel {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: var(--w-rule);
}
@media (hover: hover) and (pointer: fine) {
	.kc-work__ctalabel { transition: transform 380ms var(--ease), text-decoration-color 240ms var(--ease); }
	.kc-work__ctago {
		display: block;
		position: absolute;
		left: 0;
		top: 50%;
		width: .5em;
		height: auto;
		opacity: 0;
		transform: translate(-.2em, -50%);
		transition: opacity 240ms var(--ease), transform 380ms var(--ease);
		pointer-events: none;
	}
	.kc-work__cta:hover .kc-work__ctago,
	.kc-work__cta:focus-visible .kc-work__ctago { opacity: 1; transform: translate(0, -50%); }
	.kc-work__cta:hover .kc-work__ctalabel,
	.kc-work__cta:focus-visible .kc-work__ctalabel { transform: translateX(.72em); text-decoration-color: var(--w-ink); }
}
.kc-work__cta:focus-visible { outline: none; }
@media (max-width: 699px) {
	.kc-work__cta { font-size: 1.375rem; }
}

/* --- testimonials ------------------------------------------------------ */

/* The front page's pattern: names down the left like its trip titles, the
   chosen one black and the rest grey; the quote large on the right in the
   display face. Every panel sits in the same grid cell, so switching never
   moves the page: the cell is as tall as the longest quote. */
.kc-work__refs {
	display: grid;
	grid-template-columns: 25% minmax(0, 1fr);
	column-gap: 10%;
	align-items: start;
}

.kc-work__refnames {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kc-work__refname {
	display: flex;
	align-items: baseline;
	gap: .9rem;
	width: 100%;
	padding: .3rem 0;
	border: 0;
	background: none;
	color: var(--w-faint);
	text-align: left;
	cursor: pointer;
	transition: color 240ms var(--ease);
}
.kc-work__refname.is-current,
.kc-work__refname:hover { color: var(--w-ink); }
.kc-work__refname:focus-visible { outline: none; color: var(--w-ink); }
.kc-work__refname:focus-visible .kc-work__refwho { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.kc-work__refnum { color: inherit; opacity: .8; }
.kc-work__refwho {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, .9rem + 1.1vw, 1.875rem);
	line-height: 1.15;
	letter-spacing: -.01em;
}

.kc-work__refpanels { display: grid; }
.kc-work__ref {
	grid-area: 1 / 1;
	margin: 0;
}

.kc-work__refs.is-live .kc-work__ref {
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 320ms var(--ease), transform 420ms var(--ease), visibility 0s linear 420ms;
}
.kc-work__refs.is-live .kc-work__ref.is-current {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 420ms var(--ease), transform 520ms var(--ease), visibility 0s;
}

.kc-work__refquote { margin: 0; }
.kc-work__refquote .kc-work__refquotetext {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.125rem, .85rem + .9vw, 1.625rem);
	font-weight: 400;
	line-height: 1.28;
	letter-spacing: -.005em;
	color: var(--w-ink);
	text-wrap: pretty;
	max-width: 36em;
}
.kc-work__refquotetext::before { content: "\201C"; }
.kc-work__refquotetext::after { content: "\201D"; }

.kc-work__person {
	display: flex;
	align-items: center;
	gap: .875rem;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.kc-work__person img {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
	filter: grayscale(1);
}
.kc-work__person > span { display: grid; gap: .1rem; }
.kc-work__who {
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1.2;
}

/* Without JavaScript, or on a phone: every reference in turn, no index. */
.kc-work__refs:not(.is-live) .kc-work__refnames { display: none; }
.kc-work__refs:not(.is-live) { grid-template-columns: minmax(0, 1fr); }
.kc-work__refs:not(.is-live) .kc-work__refpanels { gap: clamp(3rem, 6vw, 4.5rem); }
.kc-work__refs:not(.is-live) .kc-work__ref { grid-area: auto; }

@media (max-width: 1023px) {
	.kc-work__refs { grid-template-columns: 35% minmax(0, 1fr); column-gap: 6%; }
}
@media (max-width: 699px) {
	.kc-work__refs,
	.kc-work__refs.is-live { grid-template-columns: minmax(0, 1fr); }
	.kc-work__refs .kc-work__refnames { display: none; }
	.kc-work__refs .kc-work__refpanels { gap: 3rem; }
	.kc-work__refs.is-live .kc-work__ref { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
}

/* --- book -------------------------------------------------------------- */

.kc-work__calendar { width: 100%; }

/* Google's scheduler, in black and white like everything else here. */
.kc-work__calendar iframe {
	display: block;
	width: 100%;
	/* Google's scheduler is ~655px tall laid out wide and ~1100px stacked on a
	   phone (measured); the frame is cut just past that so no blank space
	   sits between it and the footer. */
	height: 680px;
	border: 0;
	filter: grayscale(1);
}

/* --- smaller screens --------------------------------------------------- */

@media (max-width: 1023px) {
	.kc-work__portrait { grid-column: span 5; }
	.kc-work__introtext { grid-column: span 7; }
	.kc-work__aboutgrid > .kc-work__prose { grid-column: span 6; }
	.kc-work__experience { grid-column: 1 / -1; }
	.kc-work__servicehead { grid-column: 1 / -1; }
	.kc-work__service { grid-column: span 6; }
}

@media (max-width: 699px) {
	.kc-work__portrait { grid-column: 1 / -1; max-width: 16rem; }
	.kc-work__introtext { grid-column: 1 / -1; }
	.kc-work__aboutgrid > .kc-work__prose,
	.kc-work__service { grid-column: 1 / -1; }
	.kc-work__calendar iframe { height: 1120px; }
}

/* The calendar is the last thing on the page and meets the footer directly. */
.page-template-page-work .kc-footer,
.kc-main:has(.kc-work) + .kc-footer { margin-top: 0; }

/* --- headings -----------------------------------------------------------

   The page's outline uses real headings for its statements, labels, names
   and quotes, but each one keeps the look it had as a paragraph: the base
   heading margin and wrapping are reset per element here, never with a blanket
   rule, which would outrank the classes that size them (it did). */
.kc-work h2.kc-work__lead { letter-spacing: -.012em; text-wrap: pretty; }
.kc-work h2.kc-work__subhead { margin: 0 0 var(--sp-3); letter-spacing: .08em; }
.kc-work .kc-work__facet h2.kc-work__subhead { margin-bottom: 1rem; }
.kc-work h2.kc-work__now { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; letter-spacing: .08em; text-wrap: wrap; }
.kc-work h3.kc-work__facettext { margin: 0; font-weight: 400; letter-spacing: normal; font-family: var(--font-text); font-size: var(--w-text); line-height: 1.5; text-wrap: pretty; }
.kc-work h3.kc-work__who { margin: 0; text-wrap: wrap; font-family: var(--font-display); font-size: 1rem; line-height: 1.2; }
.kc-work h4.kc-work__refquotetext { margin: 0; font-family: var(--font-display); font-size: clamp(1.125rem, .85rem + .9vw, 1.625rem); line-height: 1.28; letter-spacing: -.005em; text-wrap: pretty; }
/* Name comes before the quote in the source; show it after. */
.kc-work__ref { display: flex; flex-direction: column; }
.kc-work__ref .kc-work__person { order: 2; }
.kc-work__ref .kc-work__refquote { order: 1; }

/* --- scroll reveal ------------------------------------------------------ */

/* As a section scrolls in, its rule draws outward from the centre, then the
   label and note fade up, then the content settles. Once per section. Armed
   by an inline script (class is-reveal) so it never flashes; switched off for
   reduced motion. */
.kc-work.is-reveal .kc-work__label::before {
	transform: scaleX(0);
	transition: transform 1100ms cubic-bezier(.65, 0, .35, 1);
}
.kc-work.is-reveal .kc-work__label > * {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 500ms var(--ease) 650ms, transform 600ms var(--ease) 650ms;
}
.kc-work.is-reveal .kc-work__section > :not(.kc-work__label) {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 800ms var(--ease) 850ms, transform 1000ms cubic-bezier(.2, .7, .2, 1) 850ms;
}
.kc-work.is-reveal .kc-work__section.is-in .kc-work__label::before { transform: scaleX(1); }
.kc-work.is-reveal .kc-work__section.is-in .kc-work__label > *,
.kc-work.is-reveal .kc-work__section.is-in > :not(.kc-work__label) {
	opacity: 1;
	transform: none;
}