/* ==========================================================================
   Kunye — white / minimal design system
   Light paper base, oversized light-weight headings, hairline cards,
   and scroll-reveal motion doing the heavy lifting.
   ========================================================================== */

:root {
	/* ----------------------------------------------------------------------
	   Brand palette — values taken verbatim from the Kunye Cloud brand
	   guideline. Do not eyeball these; they are the source of truth.
	   ---------------------------------------------------------------------- */
	--k-navy: #0d1d41;
	--k-navy-deep: #0b1c41;
	--k-navy-hover: #16294f;
	--k-navy-800: #09132b;
	--k-navy-300: #6e778d;
	--k-navy-wash: #e9ecf3;
	--k-indigo: #2a2978;
	--k-slate: #2e3a4c;
	--k-blue: #466891;
	--k-blue-300: #93aac4;
	--k-blue-hover: #375373;
	--k-blue-pale: #e2f3f9;
	--k-blue-wash: #eff6fb;

	/* Primary action */
	--k-accent: #d95f36;
	--k-accent-hover: #c25026;
	--k-accent-press: #ac461f;
	--k-accent-300: #e89f86;
	--k-accent-tint: #fbe9e1;
	--k-accent-50: #fcf2ef;

	/* Bright orange — links, orange surfaces */
	--k-red: #e95324;
	--k-red-hover: #d4471b;
	--k-amber: #f58a1f;
	--k-amber-soft: #f9ab55;
	--k-amber-wash: #fdefdf;

	/* Secondary accent */
	--k-magenta: #ae489b;
	--k-magenta-hover: #9a3d89;
	--k-magenta-deep: #883382;
	--k-magenta-wash: #f5eaf3;

	/* SLA scale, sampled from the application's Queue Status bars rather
	   than invented. Two of the four are exact brand values. */
	--k-sla-ok: #008156;
	--k-sla-warn: #f58b1f;
	--k-sla-late: #ea5423;
	--k-sla-breach: #7b007d;
	/* The same scale at text weight — the fills fail AA as type. */
	--k-sla-ok-text: #00734c;
	--k-sla-warn-text: #9c5305;
	--k-sla-late-text: #ac461f;
	--k-sla-breach-text: #6b006d;
	--k-sla-ok-wash: #e2f2ec;

	/* Neutrals */
	--k-white: #ffffff;
	--k-ink: #0d1d41;
	--k-ink-2: #1b2027;
	/* Darkened from the guideline's #6E7784, which measures 4.19:1 on this
	   paper and fails WCAG AA for body text. #5f6875 clears AA on paper
	   (5.22), on white (5.64) and over the hero wash (4.61). */
	--k-ink-muted: #5f6875;
	--k-line: #e3e6eb;
	--k-line-strong: #c9cfd8;
	--k-mist: #f1f3f6;

	/* Warm paper — carried over from the approved mockups. */
	--k-paper: #f7f6f2;
	--k-paper-cool: var(--k-blue-wash);

	/* Deep near-black navy for the CTA band, footer, security band and the
	   calculator panel. Deliberately deeper than the brand navy (#0D1D41),
	   which reads too blue full-bleed — and matched to the aurora band's own
	   base so the two do not step against each other where they meet. */
	--k-ink-surface: #080d1a;

	--k-on-dark: #f7f6f2;
	--k-on-dark-muted: rgba(247, 246, 242, 0.62);
	--k-line-dark: rgba(247, 246, 242, 0.14);

	/* Gradients */
	--k-gradient-blue: linear-gradient(135deg, #0b1c41 0%, #141f52 42%, #2a2978 100%);
	--k-gradient-orange: linear-gradient(135deg, #ee6733 0%, #e95324 60%, #e24e20 100%);

	/* ----------------------------------------------------------------------
	   Type — Plus Jakarta Sans, per the guideline. Large display sizes run
	   light (the guideline sanctions extralight 200 for display voice); the
	   guideline's semibold 600 is used from h3 down.
	   ---------------------------------------------------------------------- */
	--k-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Flat 12px: uppercase at 0.14-0.19em tracking needs it, and this only
	   ever ranged 10.88px to 12px, so nothing above phone size moves. */
	--k-t-label: 0.75rem;
	--k-t-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--k-t-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
	--k-t-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--k-t-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
	--k-t-h2: clamp(2rem, 1.35rem + 2.7vw, 3.6rem);
	--k-t-h1: clamp(2.3rem, 1.35rem + 3.1vw, 4rem);
	--k-t-display: clamp(2.2rem, 1.2rem + 3vw, 3.4rem);

	--k-ls-display: -0.03em;
	--k-ls-heading: -0.015em;
	--k-ls-eyebrow: 0.12em;

	/* Space */
	--k-gutter: clamp(1.25rem, 4vw, 3.25rem);
	--k-section: clamp(4.5rem, 9vw, 9rem);
	--k-max: 80rem;
	--k-max-narrow: 62rem;
	--k-max-prose: 42rem;

	/* Shape — guideline radius scale */
	--k-radius-xs: 4px;
	--k-radius-sm: 8px;
	--k-radius-md: 10px;
	--k-radius: 16px;
	--k-radius-lg: 24px;
	--k-radius-xl: 32px;
	--k-radius-pill: 999px;

	/* Elevation — guideline shadow scale */
	--k-shadow-1: 0 1px 2px rgba(13, 29, 65, 0.06), 0 1px 1px rgba(13, 29, 65, 0.04);
	--k-shadow-2: 0 2px 8px rgba(13, 29, 65, 0.08), 0 1px 2px rgba(13, 29, 65, 0.05);
	--k-shadow-3: 0 8px 24px rgba(13, 29, 65, 0.10), 0 2px 6px rgba(13, 29, 65, 0.06);
	--k-shadow-4: 0 20px 48px rgba(13, 29, 65, 0.16), 0 6px 12px rgba(13, 29, 65, 0.08);

	--k-shadow-hover: var(--k-shadow-3);
	--k-shadow-card: var(--k-shadow-4);
	--k-shadow-float: var(--k-shadow-4);

/* Motion */
	--k-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--k-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
	--k-ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--k-ease-io: cubic-bezier(0.7, 0, 0.3, 1);
	--k-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--k-dur-fast: 140ms;
	--k-dur: 220ms;
	--k-dur-slow: 360ms;
	--k-reveal: 1150ms;
	--k-reveal-slow: 1400ms;
	--k-header-pad: clamp(0.6rem, 1.4vw, 1.1rem);
	--k-header-h: 74px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

[id] {
	scroll-margin-top: calc(var(--k-header-h) + 1.5rem);
}

body {
	margin: 0;
	background: var(--k-white);
	color: var(--k-ink-2);
	font-family: var(--k-font);
	font-size: var(--k-t-body);
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5 {
	margin: 0 0 0.5em;
	color: var(--k-ink);
	text-wrap: balance;
}

/* Oversized headings run light and tightly tracked; small ones stay solid. */
h1 {
	font-size: var(--k-t-h1);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: var(--k-ls-display);
}

h2 {
	font-size: var(--k-t-h2);
	font-weight: 300;
	line-height: 1.06;
	letter-spacing: var(--k-ls-display);
}

h3 {
	font-size: var(--k-t-h3);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

h4 {
	font-size: var(--k-t-h4);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.014em;
}

p {
	margin: 0 0 1.15em;
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button {
	font: inherit;
	color: inherit;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

:focus-visible {
	outline: 2px solid var(--k-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.k-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.k-skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--k-ink);
	color: var(--k-on-dark);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--k-radius-sm) var(--k-radius-sm);
}

.k-skip-link:focus {
	top: 0;
}

/* ==========================================================================
   Motion primitives
   --------------------------------------------------------------------------
   .k-anim  — fade + rise + settle, staggered via inline --delay
   .k-mask  — heading line wipes up from a clipped box
   Both get the .is-in class from an IntersectionObserver in main.js.
   ========================================================================== */

/* Reveal: rise, settle out of a slight scale, and resolve from a soft blur.
   The blur is what makes the entrance read at a glance rather than being
   something you only notice if you are looking for it. */
.k-anim {
	opacity: 0;
	transform: translateY(64px) scale(0.955);
	filter: blur(7px);
	transition:
		opacity var(--k-reveal) var(--k-ease-expo),
		transform var(--k-reveal) var(--k-ease-expo),
		filter var(--k-reveal) var(--k-ease-expo);
	transition-delay: var(--delay, 0ms);
	will-change: opacity, transform, filter;
}

.k-anim.is-in {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Once it has landed, drop the compositing hint so hover effects stay cheap. */
.k-anim.is-done {
	will-change: auto;
}

/* Directional variants — used on split layouts so the two halves arrive
   from opposite sides. */
.k-anim--left {
	transform: translate(-72px, 28px) scale(0.96);
}

.k-anim--right {
	transform: translate(72px, 28px) scale(0.96);
}

/* For media: come up out of a deeper scale so the frame itself grows. */
.k-anim--zoom {
	transform: translateY(56px) scale(0.9);
	transition-duration: var(--k-reveal-slow);
}

/* Long single elements (forms, panels) rise without the scale so their
   edges do not visibly stretch. */
.k-anim--rise {
	transform: translateY(72px);
	filter: blur(5px);
}

/* On narrow screens a 72px sideways travel is a large fraction of the
   viewport and reads as a jolt, so the directional variants go vertical. */
@media (max-width: 48rem) {
	.k-anim--left,
	.k-anim--right {
		transform: translateY(48px) scale(0.97);
	}
}

/* The heading itself carries .k-mask, so match both it and any ancestor. */
:is(h1, h2).k-mask,
:is(h1, h2):has(.k-mask) {
	text-wrap: normal;
}

.k-mask {
	display: block;
	overflow: hidden;
	/* Enough room that descenders are never clipped by the mask. */
	padding-bottom: 0.16em;
}

.k-mask > span {
	display: block;
	transform: translateY(112%);
	transition: transform var(--k-reveal-slow) var(--k-ease-expo);
	transition-delay: var(--delay, 0ms);
}

.k-mask.is-in > span {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.k-anim,
	.k-mask > span {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}

/* ==========================================================================
   Layout
   ========================================================================== */

.k-shell {
	width: 100%;
	max-width: var(--k-max);
	margin-inline: auto;
	padding-inline: var(--k-gutter);
}

.k-shell--narrow {
	max-width: var(--k-max-narrow);
}

.k-section {
	padding-block: var(--k-section);
}

.k-section--paper { background: var(--k-paper); }
.k-section--cool { background: var(--k-paper-cool); }
.k-section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

.k-section--dark {
	background: var(--k-ink-surface);
	color: var(--k-on-dark-muted);
}

.k-section--dark h2,
.k-section--dark h3,
.k-section--dark h4 {
	color: var(--k-on-dark);
}

/* Eyebrow — uppercase micro-label with a leading rule */
.k-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.4rem;
	font-size: var(--k-t-label);
	font-weight: 500;
	letter-spacing: var(--k-ls-eyebrow);
	text-transform: uppercase;
	/* --k-accent (#d95f36) measures only 3.44:1 on this paper; the press step
	   is the closest brand value that clears the 4.5:1 AA minimum (5.32:1). */
	color: var(--k-accent-press);
}



.k-section--dark .k-eyebrow {
	color: var(--k-on-dark-muted);
}

.k-head {
	max-width: 44rem;
	margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

.k-head--wide {
	max-width: 52rem;
}

.k-head--center {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}

.k-head--center .k-eyebrow {
	justify-content: center;
}

/* Two-column head: heading left, supporting copy right */
.k-head--split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: none;
	align-items: end;
}

/* Grid aligns margin boxes, so the heading's own bottom margin would push
   the supporting copy visibly lower than the last line of the heading. */
.k-head--split > h2,
.k-head--split > :first-child > h2:last-child {
	margin-bottom: 0;
}

.k-head--split > .k-lede,
.k-head--split > p {
	margin-bottom: 0;
}

/* The action link in a split head sits against the right edge. Scoped to
   this modifier because the other split heads put a lede in that column,
   which reads wrong ragged-left. */
.k-head--split > .k-head__action {
	justify-self: end;
	text-align: right;
}

@media (max-width: 44rem) {
	.k-head--split > .k-head__action {
		justify-self: start;
		text-align: left;
	}
}

@media (min-width: 62rem) {
	.k-head--split {
		grid-template-columns: 1.15fr 1fr;
		gap: 4rem;
	}
	.k-head--split > :first-child {
		max-width: 34rem;
	}

	.k-head--split.k-head--roomy > :first-child {
		max-width: 42rem;
	}
}

/* A heading meant to hold one line. The split head caps its first column at
   34rem, which wraps this one into three lines for no reason; here the head
   takes the full shell and the size is capped to whatever keeps it unbroken.
   Narrow screens fall back to wrapping — nowrap there would just overflow. */
.k-head--line {
	max-width: none;
}

@media (min-width: 58rem) {
	.k-head--line h2 {
		white-space: nowrap;
		font-size: min(var(--k-t-h2), 4.6vw);
	}
}

.k-lede {
	max-width: var(--k-max-prose);
	margin: 0;
	font-size: var(--k-t-lead);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--k-ink-muted);
}

.k-section--dark .k-lede {
	color: var(--k-on-dark-muted);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.k-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 50px;
	padding: 0.75rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--k-radius-pill);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color 200ms var(--k-ease-out),
		border-color 200ms var(--k-ease-out),
		color 200ms var(--k-ease-out),
		transform 200ms var(--k-ease-out);
}

.k-btn--primary {
	background: var(--k-accent);
	border-color: var(--k-accent);
	color: #fff;
}

.k-btn--primary:hover {
	background: var(--k-accent-hover);
	border-color: var(--k-accent-hover);
	transform: translateY(-2px);
}

.k-btn--magenta {
	background: var(--k-magenta);
	border-color: var(--k-magenta);
	color: #fff;
}

.k-btn--magenta:hover {
	background: var(--k-magenta-deep);
	border-color: var(--k-magenta-deep);
	transform: translateY(-2px);
}

.k-btn--ink {
	background: var(--k-ink);
	border-color: var(--k-ink);
	color: var(--k-on-dark);
}

.k-btn--ink:hover {
	background: #000;
	border-color: #000;
	transform: translateY(-2px);
}

/* Solid white, not transparent: it sits over the hero aurora, and a see
   through fill let the wash read straight through the button. */
.k-btn--outline {
	background: var(--k-white);
	/* Navy, not the hairline grey: beside the filled orange button a pale
	   border read as disabled rather than as the secondary action. */
	border-color: var(--k-navy);
	color: var(--k-ink);
}

.k-btn--outline:hover {
	border-color: var(--k-accent);
	color: var(--k-accent);
	transform: translateY(-2px);
}

/* The fill is white in every context, so on dark surfaces the label must be
   ink, not the on-dark white it used to inherit. */
.k-section--dark .k-btn--outline,
.k-calc__result .k-btn--outline,
.k-cta .k-btn--outline,
.k-footer .k-btn--outline {
	background: var(--k-white);
	border-color: var(--k-white);
	color: var(--k-ink);
}

.k-section--dark .k-btn--outline:hover,
.k-calc__result .k-btn--outline:hover,
.k-cta .k-btn--outline:hover,
.k-footer .k-btn--outline:hover {
	background: var(--k-white);
	border-color: var(--k-accent);
	color: var(--k-accent);
}

.k-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.25rem;
}

/* Text link with a sliding arrow */
.k-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 600;
	color: var(--k-ink);
	text-decoration: none;
}

.k-link::after {
	content: "→";
	transition: transform 200ms var(--k-ease-out);
}

.k-link:hover::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.k-btn:hover,
	.k-link:hover::after {
		transform: none;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Floating pill nav: detached from the top edge, rounded, hairline border
   over a blurred ground. The bar itself is the sticky element; the pill is
   the inner shell, so the blur never spans the full viewport width. */
.k-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-top: var(--k-header-pad);
	padding-bottom: 0.5rem;
	background: transparent;
	pointer-events: none;
}

/* Full height the sticky bar occupies in flow. */
:root {
	--k-header-total: calc(var(--k-header-h) + var(--k-header-pad) + 0.5rem);
}

.k-header__inner {
	/* Containing block for the mega panels: centred on the trigger, a 72rem
	   panel under "Product" runs off the left of the screen. Centring on the
	   pill instead keeps every panel symmetrical and on-screen. */
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--k-header-h);
	padding-inline: clamp(0.9rem, 2vw, 1.5rem);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(13, 29, 65, 0.08);
	border-radius: var(--k-radius-pill);
	backdrop-filter: saturate(180%) blur(16px);
	box-shadow: 0 1px 2px rgba(13, 29, 65, 0.04);
	pointer-events: auto;
	transition:
		background-color 260ms var(--k-ease-out),
		border-color 260ms var(--k-ease-out),
		box-shadow 260ms var(--k-ease-out);
}

/* Lifts once the page moves under it. */
.k-header.is-stuck .k-header__inner {
	background: rgba(255, 255, 255, 0.88);
	border-color: rgba(13, 29, 65, 0.1);
	box-shadow: 0 10px 30px -12px rgba(13, 29, 65, 0.18);
}

.k-header__brand {
	flex: none;
	display: block;
	line-height: 0;
}

.k-header__brand img {
	width: auto;
	height: 30px;
}

.k-header__nav {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin-left: auto;
}

.k-nav {
	display: flex;
	align-items: center;
	gap: 1.9rem;
}

/* No underline on menu items — hover is carried by the pill background on
   .k-nav__link, and the current page by colour alone. */
.k-nav a {
	position: relative;
	font-size: 0.925rem;
	font-weight: 500;
	color: var(--k-ink-2);
	text-decoration: none;
	transition: color 180ms var(--k-ease-out);
}

.k-nav a:hover,
.k-nav .current-menu-item > a,
.k-nav [aria-current="page"] {
	color: var(--k-ink);
}

.k-header__toggle {
	display: none;
	flex: none;
	order: 3;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	background: none;
	/* No box around the bars — the header pill already frames them. Focus
	   still gets a visible ring from the global :focus-visible rule. */
	border: 0;
	cursor: pointer;
}

.k-header__toggle-bars,
.k-header__toggle-bars::before,
.k-header__toggle-bars::after {
	display: block;
	width: 18px;
	height: 1.5px;
	margin-inline: auto;
	background: var(--k-ink);
	transition: transform 240ms var(--k-ease-out), opacity 160ms linear;
}

.k-header__toggle-bars::before,
.k-header__toggle-bars::after {
	content: "";
	position: relative;
}

.k-header__toggle-bars::before { top: -6px; }
.k-header__toggle-bars::after { top: 4.5px; }

[aria-expanded="true"] .k-header__toggle-bars {
	transform: rotate(45deg);
}

[aria-expanded="true"] .k-header__toggle-bars::before {
	opacity: 0;
}

[aria-expanded="true"] .k-header__toggle-bars::after {
	top: -1.5px;
	transform: rotate(-90deg);
}

@media (max-width: 61.999rem) {
	.k-header__toggle {
		display: block;
	}

	.k-header__nav {
		position: fixed;
		inset: var(--k-header-h) 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: var(--k-gutter);
		background: var(--k-white);
		border-bottom: 1px solid var(--k-line);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 220ms var(--k-ease-out), transform 220ms var(--k-ease-out), visibility 220ms;
	}

	.k-header__nav.is-open {
		transform: none;
		opacity: 1;
		visibility: visible;
	}

	.k-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.k-nav li + li {
		border-top: 1px solid var(--k-line);
	}

	.k-nav a {
		display: block;
		padding: 1rem 0;
		font-size: 1.05rem;
	}

	.k-header__cta {
		margin-top: 1.25rem;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */

.k-hero {
	position: relative;
	padding-bottom: clamp(4rem, 8vw, 8rem);
	/* Slides up under the floating bar, so the wash runs behind the nav
	   instead of the pill sitting on a white strip. */
	margin-top: calc(var(--k-header-total) * -1);
	padding-top: calc(var(--k-header-total) + clamp(2rem, 5vw, 5rem));
	min-height: 100svh;
	display: grid;
	/* Explicit minmax(0, 1fr): an implicit `auto` track sizes to max-content,
	   so the shell's 1280px max-width became the track width and overflowed
	   every viewport narrower than that. */
	grid-template-columns: minmax(0, 1fr);
	align-content: center;
	/* `clip` rather than `hidden`: hidden would make this a scroll container
	   and the aurora's view() timeline would never advance. */
	overflow: clip;
}

/* Soft brand wash instead of a hard navy block */
.k-hero__inner {
	position: relative;
	display: grid;
	/* Explicit minmax(0, 1fr): with no template the implicit track sizes to
	   max-content, and the app illustration's 355px min-content then pushed
	   the hero copy and buttons off the right of a 320px screen. */
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4rem);
}

.k-hero h1 {
	max-width: 24ch;
	margin-bottom: 1.5rem;
	font-size: var(--k-t-display);
}

/* The line breaks are authored in the content, so stop a long line wrapping
   into a fourth. Only above the breakpoint — narrow screens must still wrap. */
@media (min-width: 62rem) {
	.k-hero h1 .k-mask > span {
		white-space: nowrap;
	}
}

.k-hero .k-lede {
	max-width: 46ch;
	font-size: 1.125rem;
}

/* Stage is deliberately not clipped — the chips break the frame's edges. */
.k-hero__stage {
	position: relative;
	isolation: isolate;
}

.k-hero__frame {
	position: relative;
	/* Lower radius: the app screenshot runs close to its own edges, so a
	   large corner visibly clips the UI inside. */
	border-radius: var(--k-radius-md);
	overflow: hidden;
	background: var(--k-paper);
	box-shadow:
		0 2px 4px rgba(13, 29, 65, 0.06),
		0 18px 40px -12px rgba(13, 29, 65, 0.22),
		0 48px 90px -30px rgba(13, 29, 65, 0.28);
}

.k-hero__frame img {
	width: 100%;
}

/* --- floating chips ---------------------------------------------------- */

.k-chip {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.6rem 0.85rem;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: var(--k-radius);
	backdrop-filter: blur(10px) saturate(150%);
	box-shadow:
		0 1px 2px rgba(13, 29, 65, 0.08),
		0 14px 30px -10px rgba(13, 29, 65, 0.28);
	white-space: nowrap;
}

.k-chip figcaption {
	display: grid;
	gap: 0.05rem;
	line-height: 1.3;
}

.k-chip b {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: var(--k-ls-heading);
	color: var(--k-ink);
}

.k-chip figcaption > span {
	font-size: 0.68rem;
	color: var(--k-ink-muted);
}

/* Each chip bobs on its own clock, so the group never moves as one. */
@media (prefers-reduced-motion: no-preference) {
	.k-chip.is-in {
		animation: k-chip-bob var(--bob-dur, 9s) var(--bob-delay, 0s) ease-in-out infinite alternate;
	}
}

@keyframes k-chip-bob {
	from { transform: translate3d(0, -7px, 0) rotate(-0.6deg); }
	to { transform: translate3d(3px, 8px, 0) rotate(0.7deg); }
}

.k-chip--ref {
	top: 8%;
	left: -8%;
}

.k-chip--speed {
	bottom: 8%;
	left: -9%;
}

/* Kept well inside the stage: the frame itself bleeds past the viewport,
   so a negative offset here would push the chip off-screen. */
.k-chip--live {
	top: 32%;
	right: 17%;
}

/* Magenta — the reference owner. */
.k-chip__avatar {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: linear-gradient(145deg, var(--k-magenta), var(--k-magenta-deep));
	border-radius: 50%;
	font-size: 0.78rem;
	font-weight: 700;
	color: #fff;
}

/* Teal — the improvement. */
.k-chip__spark {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	background: var(--k-sla-ok-wash);
	border-radius: 8px;
}

.k-chip__spark::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid var(--k-sla-ok);
	border-bottom: 2px solid var(--k-sla-ok);
	transform: rotate(45deg) translate(-1px, -1px);
}

/* Magenta — the live signal. */
.k-chip__pulse {
	position: relative;
	flex: none;
	width: 10px;
	height: 10px;
	background: var(--k-magenta);
	border-radius: 50%;
}

.k-chip__pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(174, 72, 155, 0.55);
}

@media (prefers-reduced-motion: no-preference) {
	.k-chip__pulse::after {
		animation: k-pulse 2.4s ease-out infinite;
	}
}

@keyframes k-pulse {
	0% { box-shadow: 0 0 0 0 rgba(174, 72, 155, 0.55); }
	70% { box-shadow: 0 0 0 12px rgba(174, 72, 155, 0); }
	100% { box-shadow: 0 0 0 0 rgba(174, 72, 155, 0); }
}

/* Chips crowd the frame on small screens; drop them below the tablet break. */
@media (max-width: 56rem) {
	.k-chip {
		display: none;
	}
}

@media (min-width: 64rem) {
	/*
	 * One centred column, with the app frame running the full width of the
	 * shell beneath the copy.
	 *
	 * It used to share the row with the copy, which left the frame about
	 * 508px wide. Five columns in that space meant the reference clipped to
	 * "MMB-58-9…" and the subject had no room at all, so the shot could not
	 * show what the product is actually for. Full width roughly doubles it.
	 */
	.k-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
	}

	.k-hero__copy {
		/* Centred text needs a shorter measure than ragged-right. */
		max-width: 44rem;
	}

	.k-hero__inner .k-btn-row {
		justify-content: center;
	}

	.k-hero__stage {
		width: 100%;
	}
}

/* ==========================================================================
   Logo marquee
   ========================================================================== */

/* Sits inside the hero, under the copy and illustration — not its own band.
   Marks are flattened to a single soft grey so six mixed-colour sources read
   as one quiet set rather than competing with the headline. */
.k-logos {
	position: relative;
	z-index: 1;
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
	padding-block: 0;
}

.k-logos__inner {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.k-logos__label {
	flex: none;
	max-width: 13rem;
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--k-ls-heading);
	text-transform: none;
	/* Full-strength muted ink, not matched to the marks: at 0.62 opacity this
	   measured 2.49:1 on the paper, well under the 4.5:1 AA minimum. */
	color: var(--k-ink-muted);
}

.k-marquee {
	position: relative;
	overflow: hidden;
	/* Fade the ends so logos slide out of view rather than clipping */
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.k-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: k-marquee var(--k-marquee-duration, 46s) linear infinite;
}

.k-marquee:hover .k-marquee__track,
.k-marquee:focus-within .k-marquee__track {
	animation-play-state: paused;
}

@keyframes k-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* Continuous carousel. Each mark sits in an identical box and is scaled
   optically via --logo-scale, so no single logo dominates the row. */
.k-logos__item {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	margin-inline: clamp(1.5rem, 3.5vw, 3rem);
}

/* One fixed height for every mark, width follows. Trimming the sources
   changed nothing — they are already tight — so the unevenness was purely
   differing aspect ratios, and a common height is what evens them out. */
.k-logos__item img {
	height: 30px;
	width: auto;
	max-width: none;
	object-fit: contain;
	/* Flattened to one grey, then lightened — grayscale alone leaves the
	   darker marks far heavier than the pale ones. */
	filter: grayscale(1) brightness(1.35) contrast(0.6);
	opacity: 0.55;
	transition: opacity 240ms var(--k-ease-io), filter 240ms var(--k-ease-io);
}

.k-logos__item:hover img {
	filter: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.k-marquee__track {
		animation: none;
	}
	.k-marquee {
		overflow-x: auto;
	}
}

/* ==========================================================================
   Stats
   ========================================================================== */

.k-stats {
	display: grid;
	gap: 1px;
	background: var(--k-line);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	overflow: hidden;
}

@media (min-width: 48rem) {
	.k-stats {
		grid-template-columns: repeat(3, 1fr);
	}
}

.k-stat {
	padding: clamp(2rem, 4vw, 3rem);
	background: var(--k-white);
}

.k-stat {
	overflow: hidden;
}

.k-stat__value {
	display: block;
	font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.25rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--k-ink);
	font-variant-numeric: tabular-nums;
}

.k-stat__label {
	margin: 0.9rem 0 0;
	font-size: var(--k-t-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-ink-muted);
}

/* ==========================================================================
   Alternating feature rows
   --------------------------------------------------------------------------
   Copy one side, a gradient media panel the other, flipping each row.
   ========================================================================== */

.k-rows {
	display: grid;
	gap: clamp(3.5rem, 8vw, 7rem);
}

.k-row {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

@media (min-width: 56rem) {
	.k-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	}

	/* Flip by reordering, so the DOM keeps copy before media for readers. */
	.k-row--flip .k-row__copy {
		order: 2;
	}

	.k-row--flip .k-row__media {
		order: 1;
	}
}

.k-row__label {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.1rem;
	font-size: var(--k-t-label);
	font-weight: 600;
	letter-spacing: var(--k-ls-eyebrow);
	text-transform: uppercase;
	/* Same accessible orange as the eyebrows. */
	color: var(--k-accent-press);
}

.k-row__copy h3 {
	margin-bottom: 0.85rem;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: var(--k-ls-heading);
	text-wrap: balance;
}

/* Excludes the label, which is also a <p> here: `.k-row__copy > p` outranks
   `.k-row__label` on specificity and was overriding its orange. */
.k-row__copy > p:not(.k-row__label) {
	max-width: 46ch;
	margin-bottom: 1.75rem;
	color: var(--k-ink-muted);
}

/* Media panel: brand gradient with the screenshot floating inside it. */
.k-row__media {
	position: relative;
	display: grid;
	place-items: center;
	/* Sized to hug the screenshot rather than a fixed 4/3 box. At 4/3 with
	   3rem of padding the image covered 48% of the frame, and the app copy
	   inside it was too small to read. */
	padding: clamp(1rem, 2.5vw, 1.75rem);
	aspect-ratio: 16 / 9;
	background: var(--k-gradient-blue);
	border-radius: var(--k-radius-lg);
	/* `clip`, not `hidden`: hidden makes this a scroll container, and the
	   circles' view() timeline would then measure against this box — which
	   never moves — instead of the page. */
	overflow: clip;
}

/* Concentric arcs, echoing the reference panels. */
.k-row__media::before,
.k-row__media::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	pointer-events: none;
}

.k-row__media::before {
	inset: -30% -10% auto auto;
	width: 78%;
	aspect-ratio: 1;
}

.k-row__media::after {
	inset: auto auto -34% -18%;
	width: 62%;
	aspect-ratio: 1;
	background: rgba(217, 95, 54, 0.16);
}

/* The two circles drift and swell on their own clocks. Safe to scale these
   fractionally, unlike the screenshot: they are pure colour, so there is no
   bitmap for the browser to resample. */
@media (prefers-reduced-motion: no-preference) {
	.k-row__media::before {
		animation: k-orb-a 12s ease-in-out infinite alternate;
	}

	.k-row__media::after {
		animation: k-orb-b 15s ease-in-out infinite alternate;
	}

	/* Flipped on alternate rows, so neighbouring panels never move in step. */
	.k-row:nth-child(even) .k-row__media::before {
		animation-name: k-orb-b;
		animation-duration: 14s;
	}

	.k-row:nth-child(even) .k-row__media::after {
		animation-name: k-orb-a;
		animation-duration: 11s;
	}
}

/* Scroll-driven: the circles track the panel's progress across the viewport.
   Declared after the `animation` shorthand, which resets these two. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.k-row__media::before {
			animation: k-orb-a 1s linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}

		.k-row__media::after {
			animation: k-orb-b 1s linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}

		.k-row:nth-child(even) .k-row__media::before {
			animation: k-orb-b 1s linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}

		.k-row:nth-child(even) .k-row__media::after {
			animation: k-orb-a 1s linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

@keyframes k-orb-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(-24%, 20%, 0) scale(1.32); }
}

@keyframes k-orb-b {
	from { transform: translate3d(0, 0, 0) scale(1.24); }
	to { transform: translate3d(27%, -19%, 0) scale(0.88); }
}

.k-row__media img {
	position: relative;
	width: 100%;
	border-radius: var(--k-radius);
	box-shadow: 0 28px 60px -18px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Feature / value grid
   ========================================================================== */

.k-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.k-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.k-tile {
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	transition: transform 300ms var(--k-ease-out), box-shadow 300ms var(--k-ease-out), border-color 300ms var(--k-ease-out);
}

.k-tile:hover {
	border-color: transparent;
	box-shadow: var(--k-shadow-hover);
}

.k-tile h3,
.k-tile h4 {
	margin-bottom: 0.5rem;
}

.k-tile p {
	color: var(--k-ink-muted);
	font-size: 0.98rem;
}

.k-tile__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 1.25rem;
	background: var(--k-accent-tint);
	border-radius: 11px;
	color: var(--k-accent);
}

.k-tile__icon svg {
	width: 20px;
	height: 20px;
}

.k-section--dark .k-tile {
	background: rgba(247, 246, 242, 0.04);
	border-color: var(--k-line-dark);
}

.k-section--dark .k-tile:hover {
	background: rgba(247, 246, 242, 0.07);
	border-color: var(--k-line-dark);
	box-shadow: none;
}

.k-section--dark .k-tile p {
	color: var(--k-on-dark-muted);
}

.k-section--dark .k-tile__icon {
	background: rgba(217, 95, 54, 0.16);
	color: var(--k-amber);
}



/* ==========================================================================
   Testimonials
   ========================================================================== */

.k-quote {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: min(24rem, 82vw);
	margin-right: 1.25rem;
	padding: clamp(1.75rem, 3vw, 2.25rem);
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
}

.k-quote blockquote {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.55;
	letter-spacing: -0.012em;
	color: var(--k-ink);
}

.k-quote figcaption {
	margin-top: auto;
	padding-top: 1.25rem;
	border-top: 1px solid var(--k-line);
	font-size: 0.9rem;
	color: var(--k-ink-muted);
}

.k-quote figcaption b {
	display: block;
	font-weight: 600;
	color: var(--k-ink);
}

.k-marquee--rtl .k-marquee__track {
	animation-direction: reverse;
}

.k-marquee--logos {
	flex: 1;
	min-width: 0;
	/* Vertical breathing room so a scaled mark can never clip. */
	padding-block: 0.5rem;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ==========================================================================
   Calculator
   ========================================================================== */

.k-calc {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 62rem) {
	.k-calc {
		grid-template-columns: 1fr 24rem;
		align-items: start;
	}
}

.k-calc__inputs {
	padding: clamp(1.75rem, 3vw, 2.75rem);
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
}

.k-calc__row + .k-calc__row {
	margin-top: 2rem;
}

.k-calc__row label {
	display: block;
	margin-bottom: 0.85rem;
	font-weight: 500;
	color: var(--k-ink);
}

.k-calc__slider {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.k-calc__out {
	flex: none;
	min-width: 4.5rem;
	padding: 0.4rem 0.7rem;
	background: var(--k-paper);
	border-radius: var(--k-radius-sm);
	font-weight: 600;
	color: var(--k-ink);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

input[type="range"] {
	flex: 1;
	height: 6px;
	appearance: none;
	background: linear-gradient(
		to right,
		var(--k-accent) 0 var(--range-progress, 0%),
		var(--k-line) var(--range-progress, 0%) 100%
	);
	border-radius: var(--k-radius-pill);
	cursor: grab;
}

input[type="range"]:active {
	cursor: grabbing;
}

input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 20px;
	height: 20px;
	background: var(--k-accent);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(20, 25, 43, 0.22);
}

input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: var(--k-accent);
	border: 3px solid #fff;
	border-radius: 50%;
}

input[type="range"]::-moz-range-progress {
	height: 6px;
	background: var(--k-accent);
	border-radius: var(--k-radius-pill);
}

.k-calc__breakdown {
	display: grid;
	gap: 1.5rem;
	margin-top: 2.25rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--k-line);
}

@media (min-width: 34rem) {
	.k-calc__breakdown {
		grid-template-columns: 1fr 1fr;
	}
}

.k-calc__metric span {
	display: block;
	font-size: 0.9rem;
	color: var(--k-ink-muted);
}

.k-calc__metric b {
	display: block;
	margin-top: 0.35rem;
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--k-ink);
	font-variant-numeric: tabular-nums;
}

.k-calc__note {
	margin-top: 1.75rem;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--k-ink-muted);
}

.k-calc__result {
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 3vw, 2.75rem);
	background: var(--k-ink-surface);
	border-radius: var(--k-radius-lg);
	color: var(--k-on-dark);
}

.k-calc__result .k-eyebrow {
	color: var(--k-amber);
}

/* On the dark result panel the amber is the legible choice, and the eyebrow
   there is on near-black rather than paper. */
.k-calc__result .k-eyebrow {
	color: var(--k-amber);
}

.k-calc__total {
	font-size: clamp(2.75rem, 2rem + 2.4vw, 3.75rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.045em;
	font-variant-numeric: tabular-nums;
}

.k-calc__hours {
	margin: 1.25rem 0 0;
	font-size: 0.95rem;
	color: var(--k-on-dark-muted);
}

.k-calc__result .k-btn-row {
	flex-direction: column;
	margin-top: auto;
	padding-top: 2rem;
}

.k-calc__result .k-btn {
	width: 100%;
}

/* ==========================================================================
   FAQ — tabs + accordion
   ========================================================================== */

.k-faq {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 62rem) {
	.k-faq {
		grid-template-columns: 0.8fr 1.2fr;
	}
}

.k-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.k-tabs button {
	padding: 0.5rem 1.05rem;
	background: transparent;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-pill);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--k-ink-muted);
	cursor: pointer;
	transition: background-color 200ms var(--k-ease-out), border-color 200ms var(--k-ease-out), color 200ms var(--k-ease-out);
}

.k-tabs button:hover {
	border-color: var(--k-ink-muted);
	color: var(--k-ink);
}

.k-tabs button[aria-selected="true"] {
	background: var(--k-ink);
	border-color: var(--k-ink);
	color: var(--k-on-dark);
}

.k-panel[hidden] {
	display: none;
}

.k-acc__item {
	border-top: 1px solid var(--k-line);
}

.k-acc__item:last-child {
	border-bottom: 1px solid var(--k-line);
}

.k-acc__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: 1.35rem 0;
	background: none;
	border: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.014em;
	color: var(--k-ink);
	text-align: left;
	cursor: pointer;
}

.k-acc__icon {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
}

.k-acc__icon::before,
.k-acc__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1.5px;
	background: var(--k-ink);
	transition: transform 280ms var(--k-ease-spring);
}

.k-acc__icon::after {
	transform: rotate(90deg);
}

[aria-expanded="true"] .k-acc__icon::after {
	transform: rotate(0deg);
}

.k-acc__body {
	overflow: hidden;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 320ms var(--k-ease-out);
}

.k-acc__body[data-open="true"] {
	grid-template-rows: 1fr;
}

.k-acc__body > div {
	overflow: hidden;
	min-height: 0;
}

.k-acc__body p {
	max-width: 58ch;
	padding-bottom: 1.5rem;
	color: var(--k-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
	.k-acc__body {
		transition: none;
	}
}

/* ==========================================================================
   Feature list (features page)
   ========================================================================== */

.k-featgroup + .k-featgroup,
.k-featgroup + .k-featpair,
.k-featpair + .k-featgroup {
	margin-top: clamp(3rem, 6vw, 5rem);
}

.k-featgroup__head {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

/* The heading keeps its own full-width rule above the group. Beneath it the
   features sit on one side and the illustration on the other, alternating.
   An earlier pass put the illustration beside the *heading*, which left the
   heading floating mid-page and a long way from the features it introduces. */
@media (min-width: 58rem) {
	.k-featgroup.has-art .k-featgroup__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: clamp(2rem, 4.5vw, 3.5rem);
		align-items: start;
	}

	/* Beside an illustration the features read as a single column. */
	.k-featgroup.has-art .k-featlist {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.6rem;
	}

	.k-featgroup--flip .k-featlist { order: 2; }
	.k-featgroup--flip .k-featgroup__art { order: 1; }

	/* Tall groups keep the illustration in view as the list scrolls past. */
	.k-featgroup.has-art .k-featgroup__art {
		position: sticky;
		top: calc(var(--k-header-total) + 5rem);
	}
}

.k-featgroup__art {
	display: flex;
	justify-content: center;
}

.k-featgroup__art .k-art--light {
	/* Fills its column rather than sitting small inside it. */
	max-width: 100%;
	font-size: 0.8rem;
	box-shadow:
		0 2px 4px rgba(13, 29, 65, 0.06),
		0 16px 34px -12px rgba(13, 29, 65, 0.2);
}

/* Narrow screens: the illustration follows the list. */
@media (max-width: 57.999rem) {
	.k-featgroup__art {
		margin-top: 1.75rem;
	}
}


.k-featgroup__head h2 {
	margin: 0;
	font-size: var(--k-t-h3);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.k-featlist {
	display: grid;
	gap: 1.25rem 2.5rem;
}

@media (min-width: 48rem) {
	.k-featlist {
		grid-template-columns: 1fr 1fr;
	}
}

.k-featlist h3 {
	margin-bottom: 0.35rem;
	font-size: 1.0625rem;
}

.k-featlist p {
	max-width: 56ch;
	color: var(--k-ink-muted);
	font-size: 0.98rem;
	text-wrap: balance;
}

/* Sticky anchor pills */
/* A second floating pill beneath the nav, rather than a full-width bar that
   tucked under it. It stuck at --k-header-h, but the floating nav occupies
   --k-header-total, which is why the two collided. */
.k-anchorbar {
	position: sticky;
	top: var(--k-header-total);
	z-index: 50;
	padding-block: 0.55rem;
	background: transparent;
	pointer-events: none;
}

.k-anchorbar__inner {
	display: flex;
	gap: 0.35rem;
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
	padding: 0.35rem;
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(13, 29, 65, 0.08);
	border-radius: var(--k-radius-pill);
	backdrop-filter: saturate(180%) blur(16px);
	box-shadow: 0 8px 24px -14px rgba(13, 29, 65, 0.22);
	overflow-x: auto;
	scrollbar-width: none;
	pointer-events: auto;
}

.k-anchorbar__inner::-webkit-scrollbar {
	display: none;
}

.k-anchorbar__inner::-webkit-scrollbar {
	display: none;
}

.k-anchorbar a {
	flex: none;
	padding: 0.4rem 0.95rem;
	border: 0;
	border-radius: var(--k-radius-pill);
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--k-ink-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 200ms var(--k-ease-out), border-color 200ms var(--k-ease-out), color 200ms var(--k-ease-out);
}

.k-anchorbar a:hover {
	background: var(--k-mist);
	color: var(--k-ink);
}

.k-anchorbar a.is-active {
	background: var(--k-ink);
	color: var(--k-on-dark);
}

/* ==========================================================================
   Post cards
   ========================================================================== */

.k-card-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.k-card {
	display: flex;
	flex-direction: column;
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	overflow: hidden;
	transition: transform 300ms var(--k-ease-out), box-shadow 300ms var(--k-ease-out);
}

.k-card:hover {
	box-shadow: var(--k-shadow-hover);
}

.k-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--k-paper);
	overflow: hidden;
}

.k-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1100ms var(--k-ease-out);
}

.k-card:hover .k-card__media img {
	transform: scale(1.04);
}

.k-card__body {
	padding: 1.5rem;
}

.k-card__meta {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--k-ink-muted);
}

.k-card__title {
	margin: 0 0 0.6rem;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.016em;
}

.k-card__title a {
	text-decoration: none;
}

.k-card__excerpt {
	margin: 0;
	font-size: 0.95rem;
	color: var(--k-ink-muted);
}

/* -------------------------------------------------------------------------
   Article cards

   Editorial rather than boxed: no border, no shadow, no thumbnail. The
   cards are separated by full-height rules in the gutters, so the strip
   reads as columns of a page instead of a row of tiles.
   ---------------------------------------------------------------------- */

.k-card-grid:has(.k-card--post) {
	/* Explicit counts, not auto-fit: the dividers below have to know which
	   card starts a row, and auto-fit will not tell you. */
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

@media (min-width: 44rem) {
	.k-card-grid:has(.k-card--post) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 68rem) {
	.k-card-grid:has(.k-card--post) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.k-card--post {
	display: flex;
	flex-direction: column;
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
	transition: none;
	padding: 0 0 2.25rem;
}

.k-card--post:hover {
	box-shadow: none;
}

/* The divider sits in the gutter and runs the full height of the tallest
   card in the row, which a border on the card itself cannot do. */
.k-card--post + .k-card--post {
	border-left: 1px solid var(--k-line);
	padding-left: clamp(1.5rem, 3vw, 2.75rem);
	margin-left: clamp(1.5rem, 3vw, 2.75rem);
}

/* A card that starts a row has no rule to its left. */
@media (min-width: 44rem) and (max-width: 67.999rem) {
	.k-card--post:nth-child(2n + 1) {
		border-left: 0;
		padding-left: 0;
		margin-left: 0;
	}

	.k-card--post:nth-child(n + 3) {
		padding-top: 2.25rem;
	}
}

@media (min-width: 68rem) {
	.k-card--post:nth-child(3n + 1) {
		border-left: 0;
		padding-left: 0;
		margin-left: 0;
	}

	.k-card--post:nth-child(n + 4) {
		padding-top: 2.25rem;
	}
}

/* Below the two-column breakpoint the cards stack, so the rule goes
   horizontal rather than disappearing. */
@media (max-width: 43.999rem) {
	.k-card--post + .k-card--post {
		border-left: 0;
		padding-left: 0;
		margin-left: 0;
		border-top: 1px solid var(--k-line);
		padding-top: 2.25rem;
	}
}

.k-card--post .k-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.4rem;
	font-size: 0.82rem;
	letter-spacing: 0;
}

.k-card__source {
	font-weight: 600;
	color: var(--k-ink);
}

.k-card__date {
	color: var(--k-ink-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.k-card--post .k-card__title {
	margin: 0 0 1.1rem;
	font-size: clamp(1.25rem, 1.7vw, 1.5rem);
	/* Heavier than the site's light display headings: at 300 these read as
	   washed out against the body copy beneath them. */
	font-weight: 400;
	line-height: 1.32;
	letter-spacing: -0.02em;
}

.k-card--post .k-card__title a {
	color: inherit;
	text-decoration: none;
	/* Stretch the link over the whole card so the entire column is the
	   target, while the accessible name stays just the headline. */
	position: static;
}

.k-card--post .k-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.k-card--post {
	position: relative;
}

.k-card--post .k-card__excerpt {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.62;
	color: var(--k-ink-muted);
	/* Four lines, then ellipsis: keeps the read-more on a common baseline
	   across cards whose excerpts differ in length. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.k-card__more {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	/* Pushed to the foot so every card's read-more lines up. */
	margin: auto 0 0;
	padding-top: 2rem;
	font-size: 0.92rem;
	color: var(--k-ink);
}

.k-card__more span:last-child {
	text-decoration: underline;
	text-underline-offset: 0.28em;
	text-decoration-thickness: 1px;
}

.k-card__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--k-accent);
	flex: none;
	transition: transform 260ms var(--k-ease-out);
}

.k-card--post:hover .k-card__dot {
	transform: scale(1.45);
}

.k-card--post:hover .k-card__title {
	color: var(--k-accent);
}

.k-card--post .k-card__title,
.k-card__dot {
	transition: color 260ms var(--k-ease-out), transform 260ms var(--k-ease-out);
}

@media (prefers-reduced-motion: reduce) {
	.k-card:hover .k-card__media img {
		transform: none;
	}
}

/* ==========================================================================
   Contact
   ========================================================================== */

.k-contact {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 62rem) {
	.k-contact {
		grid-template-columns: 1fr 1.15fr;
	}
}

.k-contact__details {
	display: grid;
	gap: 0.75rem;
	margin-top: 2rem;
}

.k-contact__details a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--k-ink);
	text-decoration: none;
}

.k-contact__details a:hover {
	color: var(--k-accent);
}

.k-form {
	display: grid;
	gap: 1rem;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
}

@media (min-width: 34rem) {
	.k-form {
		grid-template-columns: 1fr 1fr;
	}
	.k-form__field--full,
	.k-form__foot {
		grid-column: 1 / -1;
	}
}

.k-form__field label {
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--k-ink);
}

.k-form__field :is(input, textarea) {
	width: 100%;
	padding: 0.85rem 1rem;
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-sm);
	font: inherit;
	/* 16px exactly: iOS Safari zooms the viewport when a focused field is
	   any smaller, and the page never zooms back out. */
	font-size: 1rem;
	color: var(--k-ink);
	transition: border-color 200ms var(--k-ease-out), box-shadow 200ms var(--k-ease-out);
}

.k-form__field :is(input, textarea):focus {
	outline: none;
	border-color: var(--k-accent);
	box-shadow: 0 0 0 3px rgba(217, 95, 54, 0.14);
}

.k-form__field textarea {
	min-height: 8rem;
	resize: vertical;
}

.k-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.k-form__note {
	margin: 0;
	font-size: 0.85rem;
	color: var(--k-ink-muted);
}

/* Honeypot — off-screen rather than display:none so bots still see it */
.k-form__trap {
	position: absolute;
	left: -9999px;
}

.k-notice {
	grid-column: 1 / -1;
	padding: 0.9rem 1.1rem;
	border-radius: var(--k-radius-sm);
	font-size: 0.95rem;
}

.k-notice--ok {
	background: #ecf7f1;
	color: #17604a;
}

.k-notice--bad {
	background: var(--k-accent-tint);
	color: #98371a;
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.k-cta {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	background: var(--k-ink-surface);
	color: var(--k-on-dark-muted);
	text-align: center;
}

.k-cta h2 {
	max-width: 26ch;
	margin-inline: auto;
	color: var(--k-on-dark);
}

.k-cta .k-lede {
	margin-inline: auto;
	color: var(--k-on-dark-muted);
}

.k-cta .k-btn-row {
	justify-content: center;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.k-footer {
	padding-block: clamp(3rem, 6vw, 5rem) 2rem;
	background: var(--k-ink-surface);
	color: var(--k-on-dark-muted);
}

.k-footer__top {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--k-line-dark);
}

@media (min-width: 48rem) {
	.k-footer__top {
		grid-template-columns: 1.4fr 1fr;
	}
}

.k-footer__brand img {
	width: auto;
	height: 30px;
	margin-bottom: 1.5rem;
}

.k-footer__brand p {
	max-width: 34ch;
	font-size: 0.95rem;
}

.k-footer__cols {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.k-footer__col h2 {
	margin-bottom: 1rem;
	font-size: var(--k-t-label);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--k-on-dark);
}

.k-footer__list {
	display: grid;
	gap: 0.65rem;
	font-size: 0.95rem;
}

.k-footer__list a {
	color: var(--k-on-dark-muted);
	text-decoration: none;
	transition: color 180ms var(--k-ease-out);
}

.k-footer__list a:hover {
	color: var(--k-on-dark);
}

.k-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 2rem;
	font-size: 0.85rem;
}

.k-footer__base p {
	margin: 0;
}

.k-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.k-footer__legal a {
	color: var(--k-on-dark-muted);
	text-decoration: none;
}

.k-footer__legal a:hover {
	color: var(--k-on-dark);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
	margin-top: 3rem;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	min-height: 42px;
	padding-inline: 0.75rem;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-pill);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--k-ink-2);
}

.page-numbers.current {
	background: var(--k-ink);
	border-color: var(--k-ink);
	color: var(--k-on-dark);
}


/* ==========================================================================
   Scroll-driven motion
   --------------------------------------------------------------------------
   Progressive enhancement. Where view timelines are unsupported these rules
   simply never apply, and the IntersectionObserver reveals still carry the
   page.
   ========================================================================== */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		/* The row screenshots lift slightly as their panel crosses the view. */
		.k-row__media img {
			animation: k-row-lift linear both;
			animation-timeline: view();
			animation-range: entry 25% exit 85%;
		}

		/* Translate only, no scale: a fractional scale makes the browser
		   resample the screenshot and visibly softens its UI text. */
		@keyframes k-row-lift {
			from { transform: translateY(20px); }
			to { transform: translateY(-20px); }
		}
	}
}

/* ==========================================================================
   Contact page
   ========================================================================== */

/* A hero with no accompanying media needs less height than the homepage one. */
.k-hero--short {
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.k-hero--short h1 {
	max-width: 20ch;
}

.k-hero--short .k-lede {
	max-width: 52ch;
}

/* Route cards: heading sits at h2 here, so restate the card scale. */
.k-tile--route {
	display: flex;
	flex-direction: column;
}

.k-tile--route h2 {
	margin-bottom: 0.5rem;
	font-size: var(--k-t-h4);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.014em;
}

.k-tile--route p {
	margin-bottom: 1.5rem;
}

/* Push the link to the bottom so cards of unequal copy still line up. */
.k-tile--route .k-link {
	margin-top: auto;
	font-size: 0.95rem;
}

.k-tile--route .k-link:hover {
	color: var(--k-accent);
}

.k-office {
	display: flex;
	gap: 0.9rem;
	margin-top: 2.25rem;
	padding-top: 2rem;
	border-top: 1px solid var(--k-line);
}

.k-office__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var(--k-accent-tint);
	border-radius: 9px;
	color: var(--k-accent);
}

.k-office__icon svg {
	width: 17px;
	height: 17px;
}

.k-office address {
	display: grid;
	gap: 0.15rem;
	font-size: 0.95rem;
	font-style: normal;
	line-height: 1.5;
	color: var(--k-ink-muted);
}

.k-office address b {
	font-weight: 600;
	color: var(--k-ink);
}

/* ==========================================================================
   Consent checkboxes
   ========================================================================== */

.k-form__consent {
	display: grid;
	gap: 0.85rem;
	grid-column: 1 / -1;
	margin-top: 0.25rem;
}

.k-check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--k-ink-muted);
	cursor: pointer;
}

.k-check input[type="checkbox"] {
	appearance: none;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0.1rem 0 0;
	background: var(--k-white);
	border: 1px solid var(--k-line-strong);
	border-radius: 6px;
	cursor: pointer;
	transition:
		background-color 180ms var(--k-ease-io),
		border-color 180ms var(--k-ease-io);
}

.k-check input[type="checkbox"]:hover {
	border-color: var(--k-ink-muted);
}

.k-check input[type="checkbox"]:checked {
	background: var(--k-accent);
	border-color: var(--k-accent);
	/* Tick drawn as a background image so it scales with the box. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.k-check a {
	color: var(--k-ink);
	text-decoration: underline;
}

.k-check a:hover {
	color: var(--k-accent);
}

.k-check b {
	color: var(--k-accent);
	font-weight: 600;
}

/* ==========================================================================
   Audience tabs — pills on a track, with a card below
   ========================================================================== */

.k-aud__track {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: clamp(0.5rem, 2vw, 1.5rem);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* The rule sits on the shared bottom edge of the tabs, so the dots — which
   are positioned against that same edge — land exactly on it. */
.k-aud__track::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--k-line-strong);
}

.k-aud__tab {
	position: relative;
	/* Padding lives on the tab, not the track: it is what puts the tab's
	   bottom edge down on the rule. */
	padding: 0 0 2.25rem;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: center;
}

.k-aud__tab span {
	display: block;
	padding: 0.6rem 1rem;
	background: var(--k-white);
	border: 1px solid var(--k-accent);
	border-radius: var(--k-radius-pill);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--k-accent);
	transition:
		background-color var(--k-dur) var(--k-ease-io),
		color var(--k-dur) var(--k-ease-io),
		transform var(--k-dur) var(--k-ease-io);
}

/* Solid orange dot, centred on the rule via a half-height translate. */
.k-aud__tab::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 13px;
	height: 13px;
	translate: -50% 50%;
	background: var(--k-accent-300);
	border-radius: 50%;
	z-index: 1;
	transition:
		background-color var(--k-dur) var(--k-ease-io),
		scale var(--k-dur) var(--k-ease-io);
}

.k-aud__tab:hover span {
	background: var(--k-accent-50);
	transform: translateY(-2px);
}

.k-aud__tab[aria-selected="true"] span {
	background: var(--k-accent);
	color: var(--k-white);
}

.k-aud__tab:hover::after {
	background: var(--k-accent);
}

.k-aud__tab[aria-selected="true"]::after {
	background: var(--k-accent);
	scale: 1.3;
}

.k-aud__card {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	padding: clamp(1.75rem, 4vw, 3.25rem);
	background: var(--k-white);
	border-radius: var(--k-radius-xl);
	box-shadow: var(--k-shadow-2);
}

@media (min-width: 56rem) {
	.k-aud__card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		align-items: center;
	}
}

.k-aud__copy h3 {
	margin-bottom: 0.85rem;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	font-weight: 700;
	letter-spacing: var(--k-ls-heading);
}

.k-aud__copy p {
	color: var(--k-ink-muted);
}

.k-aud__stat {
	display: grid;
	gap: 0.15rem;
	margin: 1.75rem 0 2rem;
	padding-left: 1.1rem;
	border-left: 3px solid var(--k-accent);
}

.k-aud__stat b {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: var(--k-ls-heading);
	color: var(--k-ink);
}

.k-aud__stat span {
	font-size: 0.9rem;
	color: var(--k-ink-muted);
}

.k-aud__media {
	display: grid;
	place-items: center;
	padding: clamp(1.25rem, 3vw, 2rem);
	aspect-ratio: 4 / 3;
	background: var(--k-blue-wash);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
}

/* Panels fade in rather than snapping when a tab changes. */
.k-aud__panel:not([hidden]) {
	animation: k-fade-up 420ms var(--k-ease-out) both;
}

@keyframes k-fade-up {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 40rem) {
	.k-aud__track {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: 0.5rem;
	}

	.k-aud__tab {
		padding-bottom: 0;
	}
	.k-aud__track::after {
		display: none;
	}
	.k-aud__tab::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.k-aud__panel:not([hidden]) {
		animation: none;
	}
	.k-aud__tab:hover span {
		transform: none;
	}
}

/* ==========================================================================
   Workflow — sticky visual beside a stepped accordion
   ========================================================================== */

.k-flow {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

.k-flow__media {
	position: relative;
}

/* Declared after the base rule, or `position: relative` above would win. */
@media (min-width: 56rem) {
	.k-flow {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.k-flow__media {
		position: sticky;
		top: calc(var(--k-header-h) + 3rem);
	}
}

/* --- photo with a live status pill ------------------------------------- */

.k-photo {
	position: relative;
	margin: 0;
	border-radius: var(--k-radius-lg);
	overflow: hidden;
	background: var(--k-mist);
	box-shadow: var(--k-shadow-3);
}

.k-photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Scrim, so the pill stays legible over any part of the photo. */
.k-photo::after {
	content: "";
	position: absolute;
	inset: 45% 0 0;
	background: linear-gradient(to bottom, transparent, rgba(13, 29, 65, 0.32));
	pointer-events: none;
}

.k-photo__pill {
	position: absolute;
	z-index: 1;
	left: clamp(0.75rem, 3%, 1.5rem);
	right: clamp(0.75rem, 3%, 1.5rem);
	bottom: clamp(0.75rem, 4%, 1.5rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.7rem 0.85rem;
	background: rgba(255, 255, 255, 0.94);
	border-radius: var(--k-radius);
	backdrop-filter: blur(12px) saturate(160%);
	box-shadow: 0 12px 30px -12px rgba(13, 29, 65, 0.4);
}

.k-photo__owner {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	font-size: 0.9rem;
}

.k-photo__owner b {
	font-weight: 700;
	letter-spacing: var(--k-ls-heading);
	color: var(--k-ink);
}

.k-photo__owner em {
	font-style: normal;
	font-size: 0.78rem;
	color: var(--k-ink-muted);
}

.k-photo__owner em::before {
	content: "\00B7\00A0";
}

.k-photo__avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: linear-gradient(145deg, var(--k-magenta), var(--k-magenta-deep));
	border-radius: 50%;
	font-size: 0.8rem;
	font-weight: 700;
	color: #fff;
}

/* Only the active status occupies space. */
.k-photo__states {
	display: grid;
	min-width: 0;
}

.k-photo__state {
	display: none;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.75rem;
	border-radius: var(--k-radius-pill);
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
}

.k-photo__state.is-active {
	display: inline-flex;
	animation: k-state-in 380ms var(--k-ease-out) both;
}

@keyframes k-state-in {
	from { opacity: 0; transform: translateY(6px) scale(0.97); }
	to { opacity: 1; transform: none; }
}

.k-photo__state i {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: currentColor;
}

/* Same tones as the hero queue, so the two illustrations agree on what a
   status looks like. Colours are the SLA scale sampled from the product. */
.k-photo__state--new { background: var(--k-navy-wash); color: var(--k-navy); }
.k-photo__state--own { background: var(--k-amber-wash); color: var(--k-sla-late); }
.k-photo__state--refer { background: var(--k-magenta-wash); color: var(--k-sla-breach); }
.k-photo__state--done { background: var(--k-sla-ok-wash); color: var(--k-sla-ok); }

@media (prefers-reduced-motion: reduce) {
	.k-photo__state.is-active {
		animation: none;
	}
}

.k-flow__item {
	border-top: 1px solid var(--k-line);
}

.k-flow__item:last-child {
	border-bottom: 1px solid var(--k-line);
}

/* Active step gets the brand rule along its top edge. */
.k-flow__item.is-open {
	border-top-color: var(--k-accent);
	box-shadow: inset 0 2px 0 0 var(--k-accent);
}

.k-flow__item h3 {
	margin: 0;
}

.k-flow__trigger {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1.4rem 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	transition: padding-left 220ms var(--k-ease-io);
}

.k-flow__trigger:hover {
	padding-left: 0.4rem;
}

.k-flow__label {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: var(--k-ls-heading);
	color: var(--k-ink);
}

/* Chevron, rotating on open. */
.k-flow__chev {
	position: relative;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--k-ink-muted);
	border-bottom: 2px solid var(--k-ink-muted);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 300ms var(--k-ease-spring), border-color 220ms var(--k-ease-io);
}

.k-flow__item.is-open .k-flow__chev {
	border-color: var(--k-accent);
	transform: rotate(225deg) translateY(-2px);
}

.k-flow__list .k-acc__body p {
	padding-bottom: 1.5rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--k-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
	.k-flow__trigger:hover {
		padding-left: 0;
	}
}

/* ==========================================================================
   Product pillars — illustrated top, light body below
   ========================================================================== */

.k-pillars {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 56rem) {
	.k-pillars {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.k-pillar {
	display: flex;
	flex-direction: column;
	background: var(--k-paper);
	border-radius: var(--k-radius-lg);
	overflow: hidden;
	box-shadow: var(--k-shadow-1);
	transition: box-shadow 320ms var(--k-ease-io);
}

.k-pillar:hover {
	box-shadow: var(--k-shadow-3);
}

/* The illustration sits on the brand blue gradient with a soft glow. */
.k-pillar__art {
	position: relative;
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	aspect-ratio: 16 / 11;
	background: var(--k-gradient-blue);
	overflow: hidden;
}

.k-pillar__art::before {
	content: "";
	position: absolute;
	top: -30%;
	left: 50%;
	width: 90%;
	height: 90%;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(217, 95, 54, 0.28), transparent 62%);
	pointer-events: none;
}

.k-pillar__body {
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.k-pillar__body h3 {
	margin-bottom: 0.6rem;
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
	font-weight: 700;
	letter-spacing: var(--k-ls-heading);
}

.k-pillar__body p {
	margin-bottom: 1.75rem;
	color: var(--k-ink-muted);
}

.k-pillar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: auto;
}

.k-pillar__actions .k-btn {
	min-height: 44px;
	padding-inline: 1.25rem;
	font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
	.k-pillar,
	.k-pillar:hover {
		transition: none;
	}
}

/* ==========================================================================
   Illustrations
   ========================================================================== */

.k-art {
	position: relative;
	width: 100%;
	max-width: min(30rem, 100%);
	padding: 0.9rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--k-radius);
	backdrop-filter: blur(6px);
	box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.55);
	font-size: 0.72rem;
	color: var(--k-on-dark);
}

.k-art__bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.k-art__dot {
	width: 7px;
	height: 7px;
	background: var(--k-amber);
	border-radius: 50%;
}

.k-art__crumb {
	font-weight: 600;
	letter-spacing: -0.01em;
}

.k-art__pill {
	margin-left: auto;
	padding: 0.15rem 0.5rem;
	background: rgba(217, 95, 54, 0.9);
	border-radius: var(--k-radius-pill);
	font-size: 0.62rem;
	font-weight: 600;
}

.k-art__pill--amber {
	background: rgba(245, 138, 31, 0.9);
	color: #2b1a06;
}

/* --- queue ------------------------------------------------------------- */

.k-art__rows {
	display: grid;
	gap: 0.35rem;
}

.k-art__row {
	display: grid;
	grid-template-columns: 3.9rem 1fr auto auto;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.6rem;
	background: rgba(255, 255, 255, 0.94);
	border-radius: var(--k-radius-sm);
	color: var(--k-ink);
}

/* The row being worked gets the accent edge. */
.k-art__row.is-live {
	box-shadow: inset 3px 0 0 0 var(--k-accent);
}

.k-art__ref {
	font-weight: 700;
	font-size: 0.64rem;
	color: var(--k-accent);
	font-variant-numeric: tabular-nums;
}

.k-art__sub {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--k-ink-2);
}

.k-art__who {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.64rem;
	color: var(--k-ink-muted);
}

.k-art__avatar {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	background: var(--k-magenta);
	border-radius: 50%;
	font-size: 0.55rem;
	font-style: normal;
	font-weight: 700;
	color: #fff;
}

.k-art__age {
	font-size: 0.62rem;
	color: var(--k-ink-muted);
	font-variant-numeric: tabular-nums;
}

.k-art__toast {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 0.7rem;
	padding: 0.6rem 0.7rem;
	background: var(--k-navy-hover);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--k-radius-sm);
	line-height: 1.35;
}

.k-art__toast b {
	display: block;
	font-size: 0.7rem;
}

.k-art__toast span {
	color: var(--k-on-dark-muted);
	font-size: 0.64rem;
}

.k-art__tick {
	flex: none;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	background: var(--k-sla-ok);
	border-radius: 50%;
}

.k-art__tick::after {
	content: "";
	width: 4px;
	height: 8px;
	margin-top: -2px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

/* --- SLA --------------------------------------------------------------- */

.k-art__gauge {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.7rem;
	background: rgba(255, 255, 255, 0.94);
	border-radius: var(--k-radius-sm);
	color: var(--k-ink);
}

/* Conic gradient reads the --pct custom property. */
.k-art__ring {
	flex: none;
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background:
		conic-gradient(var(--k-sla-ok) calc(var(--pct) * 1%), var(--k-line) 0);
}

.k-art__ring span {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background: #fff;
	border-radius: 50%;
	font-size: 0.6rem;
	color: var(--k-ink-muted);
}

.k-art__ring b {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--k-ink);
}

.k-art__gaugecopy b {
	display: block;
	font-size: 0.78rem;
	letter-spacing: var(--k-ls-heading);
}

.k-art__gaugecopy span {
	font-size: 0.64rem;
	color: var(--k-ink-muted);
}

.k-art__bars {
	display: grid;
	gap: 0.4rem;
	margin-top: 0.7rem;
}

.k-art__barrow {
	display: grid;
	grid-template-columns: 4.6rem 1fr 2.1rem;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.6rem;
	background: rgba(255, 255, 255, 0.94);
	border-radius: var(--k-radius-sm);
	color: var(--k-ink-2);
	font-size: 0.64rem;
}

.k-art__barrow i {
	display: block;
	height: 6px;
	background: var(--k-line);
	border-radius: var(--k-radius-pill);
	overflow: hidden;
}

.k-art__barrow b {
	display: block;
	width: var(--w, 0%);
	height: 100%;
	background: var(--k-sla-ok);
	border-radius: inherit;
}

.k-art__barrow em {
	font-style: normal;
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* A mailbox under target is called out, not just shorter. */
.k-art__barrow.is-breach b {
	background: var(--k-red);
}

.k-art__barrow.is-breach em {
	color: var(--k-red);
}

/* ==========================================================================
   Orange demo band
   ========================================================================== */

/* ==========================================================================
   Demo band — aurora over near-black
   ========================================================================== */

.k-band {
	position: relative;
	padding-block: clamp(4.5rem, 9vw, 8rem);
	background: #080d1a;
	color: #fff;
	text-align: center;
	/* `clip`, not `hidden`: overflow:hidden makes this a scroll container, so
	   a view() timeline on a descendant measures against this box instead of
	   the page and never advances. `clip` clips without that side effect. */
	overflow: clip;
	isolation: isolate;
}

.k-band__aurora {
	position: absolute;
	/* Overhangs the band: the layer rotates, and flush edges would sweep
	   empty corners through the frame. */
	inset: -25%;
	z-index: 0;
	pointer-events: none;
	/* Screen blending makes the blobs read as light rather than paint. */
	mix-blend-mode: screen;
	filter: saturate(1.25);
}

.k-band__blob {
	position: absolute;
	border-radius: 50%;
	/* Less blur than a typical mesh gradient: at 58px the regions merged into
	   a flat wash and any movement was invisible. */
	filter: blur(40px);
	will-change: transform, opacity;
}

/* Orange — the brand's primary, kept as the dominant light source. */
.k-band__blob--1 {
	top: -34%;
	left: -8%;
	width: 42%;
	aspect-ratio: 1.6;
	background: radial-gradient(circle, rgba(233, 83, 36, 1), rgba(233, 83, 36, 0) 68%);
}

/* Magenta */
.k-band__blob--2 {
	bottom: -44%;
	left: 20%;
	width: 40%;
	aspect-ratio: 1.4;
	background: radial-gradient(circle, rgba(174, 72, 155, 0.98), rgba(174, 72, 155, 0) 68%);
}

/* Blue, for the cool counterweight */
.k-band__blob--3 {
	top: -24%;
	right: 0%;
	width: 38%;
	aspect-ratio: 1.5;
	background: radial-gradient(circle, rgba(86, 132, 190, 1), rgba(70, 104, 145, 0) 70%);
}

/* Amber highlight, small and bright */
.k-band__blob--4 {
	bottom: -28%;
	right: 20%;
	width: 22%;
	aspect-ratio: 1.2;
	background: radial-gradient(circle, rgba(249, 171, 85, 0.85), rgba(249, 171, 85, 0) 66%);
}

@media (prefers-reduced-motion: no-preference) {
	/* The whole field swirls slowly, so the blobs never trace the same path
	   twice even though each one loops. */
	.k-band__aurora {
		animation: k-aurora-swirl 24s linear infinite;
	}

	.k-band__blob--1 { animation: k-aurora-a 6.5s ease-in-out -1.5s infinite alternate; }
	.k-band__blob--2 { animation: k-aurora-b 8s ease-in-out -6s infinite alternate; }
	.k-band__blob--3 { animation: k-aurora-c 7s ease-in-out -9s infinite alternate; }
	.k-band__blob--4 { animation: k-aurora-d 5.5s ease-in-out -3.5s infinite alternate; }
}

@keyframes k-aurora-swirl {
	from { transform: rotate(0deg) scale(1.15); }
	to { transform: rotate(360deg) scale(1.15); }
}

/* Travel is deliberately large and the cycles short: these are soft blurred
   blobs, so a small or slow translate simply is not perceptible. Opacity
   swings make the light pulse as well as move. */
@keyframes k-aurora-a {
	from { transform: translate3d(-26%, -20%, 0) scale(0.8); opacity: 0.72; }
	to { transform: translate3d(44%, 36%, 0) scale(1.5); opacity: 1; }
}

@keyframes k-aurora-b {
	from { transform: translate3d(30%, 26%, 0) scale(1.45); opacity: 1; }
	to { transform: translate3d(-40%, -42%, 0) scale(0.75); opacity: 0.72; }
}

@keyframes k-aurora-c {
	from { transform: translate3d(24%, -28%, 0) scale(0.78); opacity: 0.75; }
	to { transform: translate3d(-44%, 42%, 0) scale(1.5); opacity: 1; }
}

@keyframes k-aurora-d {
	from { transform: translate3d(-34%, 22%, 0) scale(1.4); opacity: 1; }
	to { transform: translate3d(40%, -42%, 0) scale(0.7); opacity: 0.7; }
}

/* --- scroll-driven churn ------------------------------------------------
   The ambient drift above animates `transform`; these animate the separate
   `translate` and `scale` properties, so the two compose instead of one
   cancelling the other. Driven by view() so the field moves as the band
   crosses the viewport, not on a clock.
   ---------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* animation-timeline and animation-range MUST come after the
		   `animation` shorthand: the shorthand resets them to their initial
		   values, which silently killed the scroll timeline. */
		.k-band__aurora {
			animation:
				k-aurora-swirl 24s linear infinite,
				k-aurora-zoom 1s linear both;
			animation-timeline: auto, view();
			animation-range: normal, cover 0% cover 100%;
		}

		.k-band__blob--1 {
			animation:
				k-aurora-a 6.5s ease-in-out -1.5s infinite alternate,
				k-scroll-1 1s linear both;
			animation-timeline: auto, view();
			animation-range: normal, cover 0% cover 100%;
		}

		.k-band__blob--2 {
			animation:
				k-aurora-b 8s ease-in-out -6s infinite alternate,
				k-scroll-2 1s linear both;
			animation-timeline: auto, view();
			animation-range: normal, cover 0% cover 100%;
		}

		.k-band__blob--3 {
			animation:
				k-aurora-c 7s ease-in-out -9s infinite alternate,
				k-scroll-3 1s linear both;
			animation-timeline: auto, view();
			animation-range: normal, cover 0% cover 100%;
		}

		.k-band__blob--4 {
			animation:
				k-aurora-d 5.5s ease-in-out -3.5s infinite alternate,
				k-scroll-4 1s linear both;
			animation-timeline: auto, view();
			animation-range: normal, cover 0% cover 100%;
		}
	}
}

@keyframes k-aurora-zoom {
	from { scale: 1; }
	to { scale: 1.28; }
}

@keyframes k-scroll-1 {
	from { translate: -18% -14%; }
	to { translate: 17% 16%; }
}

@keyframes k-scroll-2 {
	from { translate: 20% 16%; }
	to { translate: -16% -18%; }
}

@keyframes k-scroll-3 {
	from { translate: 16% -16%; }
	to { translate: -19% 14%; }
}

@keyframes k-scroll-4 {
	from { translate: -16% 18%; }
	to { translate: 18% -15%; }
}

/* A whisper of grain, so the large blurs do not band on wide screens. */
.k-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.05;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.k-band > .k-shell {
	position: relative;
	z-index: 1;
}

.k-band h2 {
	max-width: 30ch;
	margin-inline: auto;
	margin-bottom: 0.75rem;
	color: #fff;
}

.k-band > .k-shell > p {
	max-width: 48ch;
	margin: 0 auto 2rem;
	font-size: var(--k-t-lead);
	color: rgba(255, 255, 255, 0.88);
}

.k-btn--band {
	background: #fff;
	border-color: #fff;
	color: var(--k-accent-press);
}

.k-btn--band:hover {
	background: var(--k-accent);
	border-color: var(--k-accent);
	color: #fff;
	transform: translateY(-2px);
}

/* ==========================================================================
   Mega menu
   ========================================================================== */

.k-nav__item {
	position: relative;
}

.k-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.7rem;
	background: none;
	border: 0;
	border-radius: var(--k-radius-sm);
	font-size: 0.925rem;
	font-weight: 500;
	color: var(--k-ink-2);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--k-dur) var(--k-ease-io), color var(--k-dur) var(--k-ease-io);
}

.k-nav__link:hover,
.k-nav__item--has-panel [aria-expanded="true"] {
	background: var(--k-mist);
	color: var(--k-ink);
}

.k-nav__chev {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform var(--k-dur) var(--k-ease-spring);
}

[aria-expanded="true"] .k-nav__chev {
	transform: rotate(225deg) translateY(-1px);
}

/* The panel is full-bleed under the header, not anchored to the item. */
.k-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 99;
	/* Sized by its columns rather than pinned at 72rem — Resources carries two
	   columns and no featured rail, and at a fixed width was mostly empty. */
	width: max-content;
	max-width: min(72rem, calc(100vw - 2rem));
	margin-top: 0.75rem;
	transform: translateX(-50%);
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	box-shadow: var(--k-shadow-4);
	overflow: hidden;
}

.k-mega[hidden] {
	display: none;
}

/* Fade-and-drop when it opens. */
.k-mega:not([hidden]) {
	animation: k-mega-in 260ms var(--k-ease-out) both;
}

@keyframes k-mega-in {
	from { opacity: 0; transform: translate(-50%, -8px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

.k-mega__inner {
	display: grid;
	gap: 0;
}

.k-mega__cols {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

@media (min-width: 62rem) {
	/* The trigger stops being the panel's anchor at desktop widths. */
	.k-nav__item--has-panel {
		position: static;
	}

	.k-mega__cols {
		grid-template-columns: repeat(var(--mega-cols, 3), minmax(11rem, 15rem));
	}
}

.k-mega__collabel {
	margin: 0 0 1rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: var(--k-ls-eyebrow);
	text-transform: uppercase;
	color: var(--k-ink-muted);
}

.k-mega__col ul {
	display: grid;
	gap: 0.9rem;
}

.k-mega__col a {
	display: grid;
	gap: 0.15rem;
	text-decoration: none;
}

.k-mega__title {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.975rem;
	font-weight: 600;
	letter-spacing: var(--k-ls-heading);
	color: var(--k-ink);
	transition: color var(--k-dur) var(--k-ease-io);
}

.k-mega__title i {
	padding: 0.1rem 0.4rem;
	background: var(--k-accent-tint);
	border-radius: var(--k-radius-xs);
	/* 9.92px was unreadable, and on mobile this panel is inline copy. */
	font-size: 0.7rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--k-accent-press);
}

.k-mega__desc {
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--k-ink-muted);
}

.k-mega__col a:hover .k-mega__title {
	color: var(--k-accent);
}

/* Featured rail, divided off from the columns. */
.k-mega__featured {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--k-paper);
	border-top: 1px solid var(--k-line);
}

.k-mega__featured h3 {
	margin-bottom: 0.5rem;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: var(--k-ls-heading);
}

.k-mega__featured p {
	margin-bottom: 1rem;
	font-size: 0.875rem;
	color: var(--k-ink-muted);
}

.k-mega__featured .k-link {
	font-size: 0.9rem;
	color: var(--k-accent);
}

@media (min-width: 62rem) {
	.k-mega__inner {
		grid-template-columns: 1fr;
	}

	/* Where there is a featured card, give it its own right-hand rail. */
	.k-mega__inner:has(.k-mega__featured) {
		grid-template-columns: 1fr 17rem;
	}

	.k-mega__inner:has(.k-mega__featured) .k-mega__featured {
		border-top: 0;
		border-left: 1px solid var(--k-line);
	}
}

/* --- mobile: panels become inline disclosure ---------------------------- */

@media (max-width: 61.999rem) {
	.k-nav__item {
		border-top: 1px solid var(--k-line);
	}

	.k-nav__link {
		width: 100%;
		justify-content: space-between;
		padding: 1rem 0;
		border-radius: 0;
		font-size: 1.05rem;
	}

	.k-nav__link:hover,
	.k-nav__item--has-panel [aria-expanded="true"] {
		background: none;
	}

	.k-mega {
		position: static;
		width: auto;
		margin: 0 0 1rem;
		transform: none;
		border-radius: var(--k-radius);
		box-shadow: none;
		background: var(--k-paper);
	}

	.k-mega:not([hidden]) {
		animation: none;
	}

	.k-mega__cols {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding: 1.25rem;
	}

	.k-mega__featured {
		padding: 1.25rem;
		background: transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.k-mega:not([hidden]) {
		animation: none;
	}
	.k-nav__chev {
		transition: none;
	}
}

/* ==========================================================================
   Floating brand petals
   --------------------------------------------------------------------------
   Ornamental only. Each instance carries its own size, offset, drift
   amplitude, duration and a negative delay so no two are ever in phase.
   ========================================================================== */

.k-section,
.k-hero,
.k-band,
.k-cta,
.k-footer {
	position: relative;
}

/* Content must sit above the petals: both are positioned, so z-index decides. */
.k-section > .k-shell,
.k-hero > .k-shell,
.k-band > .k-shell,
.k-cta > .k-shell,
.k-footer > .k-shell {
	position: relative;
	z-index: 1;
}

.k-float {
	position: absolute;
	z-index: 0;
	width: var(--k-float-size, 220px);
	aspect-ratio: 873 / 828;
	opacity: var(--k-float-opacity, 0.5);
	pointer-events: none;
	user-select: none;
}

/* Sit partly off the edge, so the shape reads as cropped by the page. */
.k-float--left {
	left: calc(var(--k-float-size, 220px) * var(--k-float-offset, -0.28));
}

.k-float--right {
	right: calc(var(--k-float-size, 220px) * var(--k-float-offset, -0.28));
}

.k-float img {
	width: 100%;
	height: auto;
	transform: rotate(var(--k-float-rotate, 0deg));
}

@media (prefers-reduced-motion: no-preference) {
	.k-float {
		animation: k-float-drift var(--k-float-dur, 18s) var(--k-float-delay, 0s) ease-in-out infinite alternate;
	}

	.k-float img {
		animation: k-float-turn calc(var(--k-float-dur, 18s) * 1.8) var(--k-float-delay, 0s) ease-in-out infinite alternate;
	}
}

@keyframes k-float-drift {
	from {
		transform: translate3d(0, calc(var(--k-float-drift, 14px) * -1), 0);
	}
	to {
		transform: translate3d(calc(var(--k-float-drift, 14px) * 0.4), var(--k-float-drift, 14px), 0);
	}
}

@keyframes k-float-turn {
	from {
		transform: rotate(var(--k-float-rotate, 0deg));
	}
	to {
		transform: rotate(calc(var(--k-float-rotate, 0deg) + 8deg));
	}
}

/* Hide the ornament on small screens — it competes with the content and
   there is no edge to bleed into. */
@media (max-width: 48rem) {
	.k-float {
		display: none;
	}
}

/* A gentle parallax on top of the drift, where supported. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
		.k-float {
			animation:
				k-float-drift var(--k-float-dur, 18s) var(--k-float-delay, 0s) ease-in-out infinite alternate,
				k-float-parallax linear both;
			animation-timeline: auto, view();
			animation-range: normal, entry 0% exit 100%;
		}

		@keyframes k-float-parallax {
			from { translate: 0 60px; }
			to { translate: 0 -60px; }
		}
	}
}

/* ==========================================================================
   Light illustrations (audience cards)
   ========================================================================== */

.k-art--light {
	max-width: min(26rem, 100%);
	padding: 1rem;
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	backdrop-filter: none;
	box-shadow: var(--k-shadow-2);
	color: var(--k-ink-2);
	font-size: 0.74rem;
}

.k-art__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.7rem;
	margin-bottom: 0.8rem;
	border-bottom: 1px solid var(--k-line);
}

.k-art__headsub {
	font-weight: 600;
	letter-spacing: var(--k-ls-heading);
	color: var(--k-ink);
}

.k-art__chip {
	margin-left: auto;
	padding: 0.15rem 0.5rem;
	background: var(--k-navy-wash);
	border-radius: var(--k-radius-pill);
	font-size: 0.62rem;
	font-weight: 600;
	color: var(--k-navy);
	white-space: nowrap;
}

.k-art__chip--ok {
	background: var(--k-sla-ok-wash);
	color: var(--k-sla-ok);
}

.k-art__chip--amber {
	background: var(--k-amber-wash);
	color: #8a4e08;
}

.k-art__caption {
	margin: 0 0 0.5rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: var(--k-ls-eyebrow);
	text-transform: uppercase;
	color: var(--k-ink-muted);
}

/* --- insurance: audit trail -------------------------------------------- */

.k-art__trail {
	display: grid;
	gap: 0.4rem;
}

.k-art__trail li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.55rem;
	background: var(--k-blue-wash);
	border-radius: var(--k-radius-sm);
}

.k-art__trail b {
	font-weight: 600;
	color: var(--k-ink);
}

.k-art__trail em {
	font-style: normal;
	font-size: 0.64rem;
	color: var(--k-ink-muted);
	font-variant-numeric: tabular-nums;
}

.k-art--light .k-art__avatar {
	background: var(--k-navy);
}

/* --- finance: template picker ------------------------------------------ */

.k-art__picks {
	display: grid;
	gap: 0.35rem;
}

.k-art__picks li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-sm);
	transition: border-color var(--k-dur) var(--k-ease-io);
}

.k-art__picks li.is-on {
	border-color: var(--k-accent);
	background: var(--k-accent-50);
}

.k-art__radio {
	width: 13px;
	height: 13px;
	border: 2px solid var(--k-line-strong);
	border-radius: 50%;
}

.k-art__picks li.is-on .k-art__radio {
	border-color: var(--k-accent);
	background:
		radial-gradient(circle, var(--k-accent) 0 45%, transparent 46%);
}

.k-art__picks em {
	font-style: normal;
	font-size: 0.64rem;
	color: var(--k-ink-muted);
	font-variant-numeric: tabular-nums;
}

.k-art__note {
	margin-top: 0.8rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--k-line);
	font-size: 0.68rem;
	color: var(--k-ink-muted);
}

/* --- call centre: pop + collision -------------------------------------- */

.k-art__pop,
.k-art__warn {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.65rem;
	border-radius: var(--k-radius-sm);
	line-height: 1.35;
}

.k-art__pop {
	background: var(--k-blue-wash);
	border: 1px solid var(--k-line);
}

.k-art__pop b,
.k-art__warn b {
	display: block;
	font-size: 0.72rem;
	color: var(--k-ink);
}

.k-art__pop span:last-child,
.k-art__warn span:last-child {
	font-size: 0.66rem;
	color: var(--k-ink-muted);
}

.k-art__popbtn {
	flex: none;
	padding: 0.35rem 0.8rem;
	background: var(--k-accent);
	border-radius: var(--k-radius-pill);
	font-size: 0.68rem;
	font-weight: 700;
	color: #fff;
}

.k-art__warn {
	margin-top: 0.5rem;
	background: var(--k-amber-wash);
	border: 1px solid #f3d3a6;
}

.k-art__warnicon {
	flex: none;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	background: var(--k-amber);
	border-radius: 50%;
	font-size: 0.66rem;
	font-weight: 800;
	color: #fff;
}

/* --- enterprise: settings + rollout ------------------------------------ */

.k-art__rows2 {
	display: grid;
	gap: 0.35rem;
}

.k-art__rows2 li {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.6rem;
	background: var(--k-blue-wash);
	border-radius: var(--k-radius-sm);
}

.k-art__rows2 b {
	font-weight: 600;
	color: var(--k-ink);
}

.k-art--light .k-art__tick {
	width: 15px;
	height: 15px;
	background: var(--k-sla-ok);
}

.k-art__rollout {
	margin-top: 0.85rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--k-line);
}

.k-art__rollout i {
	display: block;
	height: 6px;
	margin-bottom: 0.4rem;
	background: var(--k-line);
	border-radius: var(--k-radius-pill);
	overflow: hidden;
}

.k-art__rollout b {
	display: block;
	width: var(--w, 0%);
	height: 100%;
	background: var(--k-accent);
	border-radius: inherit;
}

.k-art__rollout em {
	font-style: normal;
	font-size: 0.66rem;
	color: var(--k-ink-muted);
}

/* ==========================================================================
   Illustration shrink guards
   --------------------------------------------------------------------------
   Grid and flex children default to a min-content floor, so long labels
   inside the illustrations pushed the whole card wider than the viewport.
   These let every text cell shrink and wrap instead.
   ========================================================================== */

.k-art,
.k-art--light,
.k-aud__media,
.k-pillar__art,
.k-aud__copy,
.k-row__copy {
	min-width: 0;
}

.k-art__trail li,
.k-art__picks li,
.k-art__rows2 li,
.k-art__row,
.k-art__barrow {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.k-art__row {
	grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.k-art__rows2 li {
	grid-template-columns: minmax(0, 1fr) auto auto;
}

.k-art__barrow {
	grid-template-columns: minmax(3.4rem, auto) minmax(0, 1fr) auto;
}

.k-art__head,
.k-art__pop,
.k-art__warn,
.k-art__gauge,
.k-art__trail li > span,
.k-art__pop > span,
.k-art__warn > span,
.k-art__gaugecopy {
	min-width: 0;
}

.k-art__headsub,
.k-art__sub,
.k-art__trail li > span,
.k-art__picks li > span:not(.k-art__radio) {
	min-width: 0;
	overflow-wrap: break-word;
}

/* The chip may shrink its padding but must not wrap mid-word. */
.k-art__chip,
.k-art__pill {
	flex: 0 1 auto;
	min-width: 0;
}

/* ==========================================================================
   Magenta — the secondary brand accent
   --------------------------------------------------------------------------
   Used sparingly alongside the orange so the palette reads as a family
   rather than a single spot colour.
   ========================================================================== */

.k-eyebrow--alt {
	/* magenta-hover, at 5.71:1 — the base #AE489B is a marginal 4.62:1. */
	color: var(--k-magenta-hover);
}

/* Stat cards each carry a different brand hairline. */
.k-stat {
	box-shadow: inset 0 3px 0 0 var(--k-accent);
}

.k-stat:nth-child(2) {
	box-shadow: inset 0 3px 0 0 var(--k-magenta);
}

.k-stat:nth-child(3) {
	box-shadow: inset 0 3px 0 0 var(--k-blue);
}

/* Second pillar glows magenta rather than orange. */
.k-pillar:nth-child(2) .k-pillar__art::before {
	background: radial-gradient(circle, rgba(174, 72, 155, 0.32), transparent 62%);
}

/* Alternate row indices between the two accents. */
.k-row:nth-child(even) .k-row__media::after {
	background: rgba(174, 72, 155, 0.2);
}

.k-row:nth-child(even) .k-btn--primary {
	background: var(--k-magenta);
	border-color: var(--k-magenta);
}

.k-row:nth-child(even) .k-btn--primary:hover {
	background: var(--k-magenta-deep);
	border-color: var(--k-magenta-deep);
}

/* The second pillar's glow is magenta; its action follows. */
.k-pillar:nth-child(2) .k-btn--primary {
	background: var(--k-magenta);
	border-color: var(--k-magenta);
}

.k-pillar:nth-child(2) .k-btn--primary:hover {
	background: var(--k-magenta-deep);
	border-color: var(--k-magenta-deep);
}

/* A quote glyph, in magenta, behind each testimonial. */
.k-quote {
	position: relative;
	overflow: hidden;
}

.k-quote::before {
	content: "\201C";
	position: absolute;
	/* Sits fully inside — the card clips its own overflow. */
	top: 0.5rem;
	right: 1rem;
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 0.9;
	/* One colour across every card. These alternated magenta and orange,
	   which read as an inconsistency rather than as rhythm once the cards
	   scroll past each other in the marquee. */
	color: var(--k-magenta);
	opacity: 0.15;
	pointer-events: none;
}

/* Vary the security tile icons across the palette. */
.k-section--dark .k-tile:nth-child(2) .k-tile__icon {
	background: rgba(174, 72, 155, 0.2);
	color: #d98cc8;
}

.k-section--dark .k-tile:nth-child(3) .k-tile__icon {
	background: rgba(70, 104, 145, 0.26);
	color: var(--k-blue-pale);
}

/* The workflow's open step reads magenta, matching its eyebrow. */
.k-flow__item.is-open {
	border-top-color: var(--k-magenta);
	box-shadow: inset 0 1px 0 0 var(--k-magenta);
}

.k-flow__item.is-open .k-flow__chev {
	border-color: var(--k-magenta);
}

/* Calculator slider progress picks up the magenta eyebrow. */
#calculator input[type="range"] {
	background: linear-gradient(
		to right,
		var(--k-magenta) 0 var(--range-progress, 0%),
		var(--k-line) var(--range-progress, 0%) 100%
	);
}

#calculator input[type="range"]::-webkit-slider-thumb {
	background: var(--k-magenta);
}

#calculator input[type="range"]::-moz-range-thumb {
	background: var(--k-magenta);
}

#calculator input[type="range"]::-moz-range-progress {
	background: var(--k-magenta);
}


/* ==========================================================================
   Audience tabs — blue accent
   --------------------------------------------------------------------------
   Scoped to the section, so the orange stays the site's primary action
   colour everywhere else.
   ========================================================================== */

#audiences .k-aud__tab span {
	border-color: var(--k-blue);
	color: var(--k-blue);
}

#audiences .k-aud__tab:hover span {
	background: var(--k-blue-wash);
}

#audiences .k-aud__tab[aria-selected="true"] span {
	background: var(--k-blue);
	border-color: var(--k-blue);
	color: #fff;
}

#audiences .k-aud__tab::after {
	background: var(--k-blue-300);
}

#audiences .k-aud__tab:hover::after,
#audiences .k-aud__tab[aria-selected="true"]::after {
	background: var(--k-blue);
}

#audiences .k-aud__stat {
	border-left-color: var(--k-blue);
}

#audiences .k-btn--primary {
	background: var(--k-blue);
	border-color: var(--k-blue);
}

#audiences .k-btn--primary:hover {
	background: var(--k-blue-hover);
	border-color: var(--k-blue-hover);
}

/* Keep the illustration in step — an orange reference would be the only
   warm element left in the section. */
#audiences .k-art__ref {
	color: var(--k-blue);
}

#audiences .k-art__picks li.is-on {
	border-color: var(--k-blue);
	background: var(--k-blue-wash);
}

#audiences .k-art__picks li.is-on .k-art__radio {
	border-color: var(--k-blue);
	background: radial-gradient(circle, var(--k-blue) 0 45%, transparent 46%);
}

#audiences .k-art__popbtn {
	background: var(--k-blue);
}

#audiences .k-art__rollout b {
	background: var(--k-blue);
}

/* ==========================================================================
   Hero app — a living enquiry queue
   --------------------------------------------------------------------------
   Modelled on the real EMS: the columns, the Queue Status rail, the magenta
   reference numbers and the wizard's action names all come from the product.
   The top row plays the lifecycle on a loop.
   ========================================================================== */

.k-app {
	--cycle: 13s;
	width: 100%;
	background: var(--k-white);
	border-radius: var(--k-radius-md);
	overflow: hidden;
	font-size: 0.72rem;
	line-height: 1.4;
	color: var(--k-ink-2);
}

.k-app__bar {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.6rem 0.85rem;
	background: var(--k-navy);
	color: #fff;
}

.k-app__brand {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	/* Room to the right so the logo is not crowded by the New button. */
	margin-right: 0.9rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.k-app__brand img {
	height: 15px;
	width: auto;
	display: block;
}

.k-app__tab {
	opacity: 0.85;
}

/* The Pop button pulses — it is the queue's call to action in the product. */
.k-app__tab--pop {
	padding: 0.15rem 0.55rem;
	background: rgba(255, 255, 255, 0.14);
	border-radius: var(--k-radius-pill);
	opacity: 1;
}

.k-app__search {
	flex: 1;
	min-width: 0;
	padding: 0.22rem 0.6rem;
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--k-radius-sm);
	opacity: 0.75;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.k-app__user {
	opacity: 0.85;
	white-space: nowrap;
}

.k-app__body {
	display: grid;
	grid-template-columns: 10.25rem minmax(0, 1fr);
	/* Definite height, so the list viewport has something to clip against. */
	height: 21rem;
	min-height: 0;
}

.k-app__rail {
	overflow: hidden;
}

.k-app__rail {
	padding: 0.7rem;
	background: var(--k-mist);
	border-right: 1px solid var(--k-line);
}

.k-app__railhead {
	margin: 0 0 0.5rem;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: var(--k-ls-eyebrow);
	text-transform: uppercase;
	color: var(--k-ink-muted);
}

/* Queue Status — a per-mailbox table, as in the product. */
.k-app__qbox {
	margin-bottom: 0.6rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--k-line);
}

.k-app__qname {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.3rem;
	margin: 0 0 0.25rem;
	font-size: 0.56rem;
	font-weight: 700;
	color: var(--k-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.k-app__qname span {
	color: var(--k-ink-muted);
}

.k-app__qtable {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 0.02rem 0.3rem;
	font-size: 0.5rem;
	line-height: 1.5;
	color: var(--k-ink-muted);
	font-variant-numeric: tabular-nums;
}

.k-app__qtable > span:nth-child(3n + 2),
.k-app__qtable > span:nth-child(3n) {
	text-align: right;
}

.k-app__qtable > span:nth-child(3n + 1) {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.k-app__qhead {
	font-weight: 700;
	color: var(--k-ink);
	border-bottom: 1px solid var(--k-line);
}

.k-app__qtotal {
	margin-top: 0.1rem;
	padding-top: 0.1rem;
	border-top: 1px solid var(--k-line);
	font-weight: 700;
	color: var(--k-ink);
}

/* The segmented bar under each mailbox. */
.k-app__qbar {
	display: flex;
	height: 4px;
	margin-top: 0.3rem;
	border-radius: var(--k-radius-pill);
	overflow: hidden;
}

.k-app__qbar i {
	width: var(--w, 0%);
	height: 100%;
}

.k-app__qbar .is-ok { background: var(--k-sla-ok); }
.k-app__qbar .is-warn { background: var(--k-sla-warn); }
.k-app__qbar .is-late { background: var(--k-sla-late); }
.k-app__qbar .is-breach { background: var(--k-sla-breach); }

.k-app__main {
	min-width: 0;
	padding: 0.35rem 0.5rem 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* The list itself scrolls, header stays put. Masked at the bottom so rows
   fade out rather than being chopped. */
.k-app__viewport {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	mask-image: linear-gradient(to bottom, #000 82%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
	.k-app__scroll {
		animation: k-app-scroll 26s ease-in-out infinite;
	}
}

/* Pauses between moves, so it reads as a person reading rather than a
   conveyor belt. */
@keyframes k-app-scroll {
	0%, 9% { transform: translateY(0); }
	17%, 26% { transform: translateY(-16%); }
	34%, 43% { transform: translateY(-33%); }
	51%, 60% { transform: translateY(-49%); }
	68%, 77% { transform: translateY(-25%); }
	86%, 100% { transform: translateY(0); }
}

.k-app__head,
.k-app__row {
	display: grid;
	/* Fixed tracks for the last two: the head and each row are independent
	   grids, so `auto` columns size to their own content and the headings
	   drift out of line with the cells. */
	/* Reference is a fixed track: it is a fixed-length code, and a
	   fractional track clipped it to "MMB-58-9…" once the subject column
	   arrived. The subject takes the slack and ellipsises, as an inbox does. */
	grid-template-columns: 6.9rem minmax(0, 1fr) minmax(0, 0.62fr) 4.4rem 5.6rem;
	align-items: center;
	gap: 0.5rem;
	padding: 0.42rem 0.4rem;
}

.k-app__states {
	justify-items: start;
}

.k-app__head {
	font-size: 0.56rem;
	font-weight: 700;
	letter-spacing: var(--k-ls-eyebrow);
	text-transform: uppercase;
	color: var(--k-ink-muted);
	border-bottom: 1px solid var(--k-line);
}

.k-app__row {
	border-bottom: 1px solid var(--k-line);
	/* Rows deal themselves in on load. */
	opacity: 0;
	animation: k-app-deal 620ms var(--k-ease-out) forwards;
	animation-delay: calc(700ms + var(--row) * 130ms);
}

@keyframes k-app-deal {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* The row being worked carries the accent edge and a slow highlight. */
.k-app__row.is-active {
	background: var(--k-mist);
}

.k-app__row--accent { --tone: var(--k-sla-late); }
.k-app__row--magenta { --tone: var(--k-sla-breach); }
.k-app__row--blue { --tone: var(--k-sla-ok); }
.k-app__row--amber { --tone: var(--k-sla-warn); }

.k-app__row {
	box-shadow: inset 2px 0 0 0 var(--tone);
}

.k-app__ref {
	font-weight: 700;
	color: var(--tone);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.k-app__who {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.k-app__ownercell {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--k-ink-muted);
}

.k-app__exp,
.k-app__state {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.k-app__exp {
	font-size: 0.64rem;
	color: var(--k-ink-muted);
}

/* Statuses stack in one cell; each takes a quarter of the cycle. */
.k-app__states {
	position: relative;
	display: grid;
	min-width: 5.6rem;
	justify-items: end;
}

.k-app__states .k-app__state {
	grid-area: 1 / 1;
	opacity: 0;
	animation: k-app-state var(--cycle) ease-in-out infinite;
	animation-delay: calc(var(--n) * (var(--cycle) / 4));
}

@keyframes k-app-state {
	0%, 1% { opacity: 0; transform: translateY(5px); }
	3%, 23% { opacity: 1; transform: none; }
	25%, 100% { opacity: 0; transform: translateY(-5px); }
}

.k-app__state {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* One box for every status, so the column does not jitter as the active
	   row cycles between short and long labels. */
	min-width: 6.4rem;
	padding: 0.18rem 0.5rem;
	border-radius: var(--k-radius-pill);
	font-size: 0.6rem;
	font-weight: 700;
	text-align: center;
}

.k-app__state--warn { background: var(--k-amber-wash); color: var(--k-sla-warn); }
.k-app__state--new { background: var(--k-navy-wash); color: var(--k-navy); }
.k-app__state--own { background: var(--k-amber-wash); color: var(--k-sla-late); }
.k-app__state--refer { background: var(--k-magenta-wash); color: var(--k-sla-breach); }
.k-app__state--done { background: var(--k-sla-ok-wash); color: var(--k-sla-ok); }

/* Mid widths: the frame narrows but the Status track does not, so the
   reference numbers truncate. They are the product's signature, so Expiry and
   Owner give way first and Reference keeps its full width. */
/*
 * Column order is Reference, Enquiry, Owner, Expiry, Status. These rules
 * drop columns by that order as the frame narrows -- the nth-child indexes
 * below are the table headings, so they have to move whenever the columns do.
 */
@media (max-width: 76rem) {
	.k-app__head,
	.k-app__row {
		/* Reference, Enquiry, Status. Owner and Expiry give way first: the
		   subject line is what tells a stranger what the product is for. */
		grid-template-columns: 6.2rem minmax(0, 1fr) 5.6rem;
	}

	.k-app__ownercell,
	.k-app__exp,
	.k-app__head span:nth-child(3),
	.k-app__head span:nth-child(4) {
		display: none;
	}

	.k-app__ref {
		font-size: 0.62rem;
	}
}

@media (max-width: 46rem) {
	.k-app__rail { display: none; }
	.k-app__body { grid-template-columns: minmax(0, 1fr); }

	/* Two columns, two rows: the reference sits above the subject and the
	   status pill spans both on the right. Laying the row out rather than
	   hiding the subject keeps the shot meaningful on a phone. */
	.k-app__row {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 0.1rem;
	}

	.k-app__ref { grid-area: 1 / 1; }
	.k-app__enq { grid-area: 2 / 1; }

	.k-app__row .k-app__state,
	.k-app__row .k-app__states {
		grid-area: 1 / 2 / span 2 / span 1;
		align-self: center;
	}

	.k-app__ownercell,
	.k-app__exp { display: none; }

	/* The heading row cannot describe a two-row layout, so it carries the
	   two labels that still apply. */
	.k-app__head { grid-template-columns: minmax(0, 1fr) 5.6rem; }
	.k-app__head span:nth-child(2),
	.k-app__head span:nth-child(3),
	.k-app__head span:nth-child(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.k-app__row { opacity: 1; animation: none; }
	.k-app__states .k-app__state { animation: none; opacity: 0; }
	/* Show the resolved state only, so the still frame still tells the story. */
	.k-app__states .k-app__state--done { opacity: 1; }
}


@media (max-width: 52rem) {
	.k-logos__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.k-logos__label {
		max-width: none;
	}

	.k-marquee--logos {
		width: 100%;
	}
}


/* The hero stage bleeds past the shell only on wide screens. Below this the
   bleed cost the illustration its Status column and truncated the reference
   numbers, which is the opposite of the point. */
@media (min-width: 82rem) {
	.k-hero__stage {
		margin-right: calc(var(--k-gutter) * -1 - 3vw);
	}
}

/* ==========================================================================
   Hero wash
   --------------------------------------------------------------------------
   Warm pools drifting behind the copy. Nothing is ruled or hard-edged: the
   colour does all the work, and the gradients fade out on their own so no
   mask is needed.
   ========================================================================== */

.k-hero__aurora {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.k-hero__wash {
	position: absolute;
	/* Overhangs, so the pools can drift without their edges entering frame. */
	inset: -22%;
	background:
		radial-gradient(30% 34% at 64% 28%, rgba(233, 83, 36, 0.34), transparent 62%),
		radial-gradient(26% 30% at 88% 62%, rgba(174, 72, 155, 0.3), transparent 62%),
		radial-gradient(22% 26% at 44% 76%, rgba(245, 138, 31, 0.22), transparent 64%);
	filter: blur(34px);
}

@media (prefers-reduced-motion: no-preference) {
	.k-hero__wash {
		animation: k-wash-drift 17s ease-in-out infinite alternate;
	}
}

@keyframes k-wash-drift {
	from { transform: translate3d(-7%, -5%, 0) scale(1); }
	to { transform: translate3d(9%, 7%, 0) scale(1.12); }
}


/* --- workflow head and photo pill -------------------------------------- */

/* Heading and lede stack rather than sitting in two columns. */
.k-head--stack {
	display: block;
}

.k-head--stack .k-lede {
	max-width: 52ch;
	margin-top: 1rem;
}

/* A touch smaller than the other section headings. */
#workflow .k-head h2 {
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
}

/* The pill now carries the reference above the owner. */
.k-photo__who {
	display: grid;
	gap: 0.05rem;
	min-width: 0;
}

.k-photo__ref {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: var(--k-ls-heading);
	color: var(--k-magenta-hover);
	font-variant-numeric: tabular-nums;
}

.k-photo__who em {
	font-style: normal;
	font-size: 0.74rem;
	color: var(--k-ink-muted);
}

/* The separator belonged to the old single-line layout. */
.k-photo__who em::before {
	content: none;
}


/* --- problems section head and panel circles ---------------------------- */

/* Smaller intro under the two-line heading. */
#problems .k-head .k-lede {
	font-size: 1rem;
	max-width: 46ch;
}

/* The centred head was too narrow for the authored lines, so each was
   wrapping and the two-line heading rendered as four. */
#problems .k-head {
	max-width: 58rem;
}

@media (min-width: 62rem) {
	#problems .k-head h2 .k-mask > span {
		white-space: nowrap;
	}
}

/* The lower circle sat high enough that the scroll-driven rise carried it
   over the screenshot's paragraph. Pushed down and out. */
.k-row__media::after {
	inset: auto auto -54% -24%;
}

/* ==========================================================================
   Compact hero (features, contact)
   --------------------------------------------------------------------------
   Only the homepage hero fills the viewport. The inner pages were inheriting
   its min-height and 9rem padding, which left them mostly empty space.
   ========================================================================== */

.k-hero--compact,
.k-hero--short {
	min-height: 0;
	padding-top: calc(var(--k-header-total) + clamp(1.5rem, 3vw, 3rem));
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/*
 * The anchor bar is pulled up into the hero so the wash carries behind the
 * category pills, the same trick the hero uses to slide under the header
 * pill. The hero's padding grows by the same amount, so nothing below moves.
 *
 * Done with a negative margin rather than by wrapping the two: the bar is
 * sticky, and a wrapper becomes its containing block — it would then stop
 * sticking as soon as the wrapper scrolled past, instead of holding for the
 * whole feature list.
 */
.k-hero--compact:has(+ .k-anchorbar) {
	--k-bar-lift: 4.15rem;
	padding-bottom: calc(clamp(2rem, 4vw, 3.5rem) + var(--k-bar-lift));
}

.k-hero--compact + .k-anchorbar {
	margin-top: -4.15rem;
}

/* The pills already sit a long way below the heading; the section beneath
   does not need its full leading on top of that. */
.k-hero--compact + .k-anchorbar + .k-section {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* No panel behind the illustration — the card sits on the hero's own wash and
   carries the whole treatment on its shadow. */
.k-hero__panel {
	display: grid;
	place-items: center;
}

/* The card lifts off that ground on its own shadow. */
.k-hero__panel .k-art--light {
	max-width: min(24rem, 100%);
	box-shadow:
		0 2px 4px rgba(13, 29, 65, 0.06),
		0 16px 34px -12px rgba(13, 29, 65, 0.22);
}

/* --- animating the SLA dashboard --------------------------------------- */

/* Registered so the conic sweep can be animated at all — a plain custom
   property would jump rather than interpolate. */
@property --pct {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

@media (prefers-reduced-motion: no-preference) {
	/* The ring fills once the panel has revealed. */
	.k-hero__panel .k-art__ring {
		animation: k-ring-fill 1.4s var(--k-ease-out) 700ms both;
	}

	.k-hero__panel .k-art__barrow b {
		transform-origin: left center;
		animation: k-bar-grow 900ms var(--k-ease-out) both;
	}

	.k-hero__panel .k-art__barrow:nth-of-type(1) b { animation-delay: 950ms; }
	.k-hero__panel .k-art__barrow:nth-of-type(2) b { animation-delay: 1090ms; }
	.k-hero__panel .k-art__barrow:nth-of-type(3) b { animation-delay: 1230ms; }
}

@keyframes k-ring-fill {
	from { --pct: 0; }
	to { --pct: 89; }
}

@keyframes k-bar-grow {
	from { scale: 0 1; }
	to { scale: 1 1; }
}

@media (max-width: 62rem) {
	.k-hero--compact .k-hero__inner {
		gap: clamp(1.75rem, 4vw, 2.5rem);
	}
}

/* Copy only, so one column. The shared hero rule splits the row for a panel
   that is no longer there, which would squeeze the copy into a 0.98fr track
   — and the widest authored heading line needs 679px with the lines set
   nowrap, so it would overflow into the empty half. */
@media (min-width: 62rem) {
	.k-hero--compact .k-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* The shared .k-art__bar spacing leaves a lot of white between this panel's
   header rule and its gauge; scoped here so the other panels keep theirs. */
.k-art--sla .k-art__bar {
	padding-bottom: 0.5rem;
	margin-bottom: 0.4rem;
}

.k-art--sla .k-art__gauge {
	padding: 0.5rem 0.7rem;
}

/* Both panels should finish level with the copy beside them, which pulls in
   opposite directions: the SLA panel ran 80px taller than its two features,
   the queue graph 65px shorter than its three. So the art stretches to the
   row, and each panel distributes the height internally. */
@media (min-width: 58rem) {
	.k-featgroup.has-art:has(.k-art--sla, .k-art--qpie) .k-featgroup__body {
		align-items: stretch;
	}

	.k-featgroup__art:has(.k-art--sla, .k-art--qpie) {
		position: static;
	}

	.k-featgroup__art .k-art--sla,
	.k-featgroup__art .k-art--qpie {
		height: 100%;
	}

	/* Stacked, the gauge and the bars could not come down to the height of
	   two features without cramping both. Side by side they fit under it,
	   and the panel then stretches to meet it. */
	.k-featgroup__art .k-art--sla {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		grid-template-rows: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 1rem;
	}

	.k-featgroup__art .k-art--sla .k-art__bar {
		grid-column: 1 / -1;
	}

	.k-featgroup__art .k-art--sla .k-art__bars {
		margin-top: 0;
		align-content: center;
	}
}

/* Rows spread so the graph fills whatever height the copy sets. */
.k-art--qpie .k-qpie__graph {
	align-content: space-between;
}

/* --- SLA illustration: the product's own scale ------------------------- */

.k-art__barrow.is-ok b { background: var(--k-sla-ok); }
.k-art__barrow.is-warn b { background: var(--k-sla-warn); }
.k-art__barrow.is-late b { background: var(--k-sla-late); }
.k-art__barrow.is-breach b { background: var(--k-sla-breach); }

.k-art__barrow.is-ok em { color: var(--k-sla-ok); }
.k-art__barrow.is-warn em { color: var(--k-sla-warn); }
.k-art__barrow.is-late em { color: var(--k-sla-late); }
.k-art__barrow.is-breach em { color: var(--k-sla-breach); }

/* The tick and the queue toast are "within target" signals too. */
.k-art__tick,
.k-art--light .k-art__tick {
	background: var(--k-sla-ok);
}

.k-art__chip--ok {
	background: var(--k-sla-ok-wash);
	color: var(--k-sla-ok);
}


/* Anchor targets clear both floating pills, not just the nav. */
.k-featgroup,
[id^="ownership"],
[id^="communication"],
[id^="sla-"],
[id^="reporting"] {
	scroll-margin-top: calc(var(--k-header-total) + 4.5rem);
}


/* The features intro runs long, so it sets smaller than the homepage lede. */
.k-hero--compact .k-lede {
	font-size: 0.95rem;
	max-width: 48ch;
}

/* Supporting copy that should not compete with the heading beside it. */
.k-lede--sm {
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 48ch;
}

/* Every anchored group clears both floating pills. */
.k-featgroup {
	scroll-margin-top: calc(var(--k-header-total) + 4.5rem);
}

/* ==========================================================================
   Orphan control
   --------------------------------------------------------------------------
   `text-wrap: pretty` asks the browser to avoid leaving a single word alone
   on the last line, which the short descriptions in the mega menu and the
   feature lists were doing constantly ("mailbox", "thread", "year").
   ========================================================================== */

.k-mega__desc,
.k-mega__featured p,
.k-tile p,
.k-art__note,
.k-pillar__body p,
.k-row__copy > p:not(.k-row__label) {
	text-wrap: pretty;
}

/* ==========================================================================
   Enterprise case study
   --------------------------------------------------------------------------
   Narrative one side, the estate mapped the other. The meters are the whole
   argument — four audiences and three operating layers, one platform — so
   they get the panel and the copy stays out of their way.
   ========================================================================== */

.k-case {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(1.75rem, 3.6vw, 3.25rem);
	background: var(--k-paper);
	border-radius: var(--k-radius-xl);
	display: grid;
	gap: clamp(2rem, 4vw, 3.25rem);
	align-items: start;
}

/* Copy across the top, the panel full width beneath it — the two breakdowns
   then sit side by side instead of stacking into a tall narrow column. */
@media (min-width: 62rem) {
	.k-case__copy {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: clamp(2rem, 4vw, 3.5rem);
		align-items: start;
	}

	.k-case__copy > .k-eyebrow,
	.k-case__copy > .k-case__title,
	.k-case__copy > .k-case__lede {
		grid-column: 1;
	}

	.k-case__quote {
		grid-column: 2;
		grid-row: 1 / span 3;
		margin-top: 0;
		align-self: center;
	}
}

.k-case__copy > * + * {
	margin-top: 1.15rem;
}

.k-case__title {
	margin: 0.9rem 0 0;
	font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.35rem);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: var(--k-ink);
	text-wrap: balance;
}

.k-case__lede {
	margin: 1.4rem 0 0;
	max-width: 46ch;
	font-size: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
	line-height: 1.65;
	color: var(--k-ink-muted);
	text-wrap: pretty;
}

/* The three numbers that say "enterprise" before any chart is read. */
.k-case__scale {
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid var(--k-line);
}

.k-case__scale dt {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--k-ink);
	font-variant-numeric: tabular-nums;
}

.k-case__scale dd {
	margin: 0.55rem 0 0;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--k-ink-muted);
	text-wrap: pretty;
}

/* Three narrow columns leave every label wrapping to a different depth, so
   below tablet the figures stack and each label sits on its own baseline. */
@media (max-width: 34rem) {
	.k-case__scale {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.9rem;
	}

	.k-case__scale > div {
		display: flex;
		align-items: baseline;
		gap: 0.85rem;
	}

	.k-case__scale dt {
		flex: 0 0 4.5rem;
		font-size: 1.75rem;
	}

	.k-case__scale dd {
		margin: 0;
	}
}

.k-case__quote {
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
	padding-left: 1.1rem;
	border-left: 2px solid var(--k-accent);
}

.k-case__quote p {
	margin: 0;
	font-size: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
	line-height: 1.6;
	color: var(--k-ink);
	text-wrap: pretty;
}

.k-case__quote footer {
	margin-top: 0.7rem;
	font-size: var(--k-t-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-ink-muted);
}

/* ---- the panel ---- */

.k-case__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	background: var(--k-white);
	border-radius: var(--k-radius-lg);
	box-shadow: var(--k-shadow-3);
	overflow: clip;
}

@media (min-width: 48rem) {
	.k-case__panel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.k-case__headline {
		grid-column: 1 / -1;
	}
}

.k-case__chart {
	padding: clamp(1.35rem, 2.6vw, 1.9rem);
}

.k-case__chart + .k-case__chart {
	border-top: 1px solid var(--k-line);
}

@media (min-width: 48rem) {
	.k-case__chart + .k-case__chart {
		border-top: 0;
		border-left: 1px solid var(--k-line);
	}
}

/* Side by side the charts should end level, so the caption sits at the foot. */
.k-case__chart {
	display: flex;
	flex-direction: column;
}

/* Columns read with their key beside them, not stacked under. */
.k-case__chart:has(.k-cols) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	gap: 0.7rem 1.1rem;
	align-items: center;
}

@media (min-width: 34rem) {
	.k-case__chart:has(.k-cols) {
		/* The key takes exactly the width its longest label needs and the
		   columns take the rest. A fractional track here wrapped "Middle
		   office — risk & control" onto two lines; max-content cannot. */
		grid-template-columns: minmax(6rem, 1fr) minmax(0, max-content);
	}

	.k-case__chart:has(.k-cols) > .k-case__chart-title,
	.k-case__chart:has(.k-cols) > .k-case__note {
		grid-column: 1 / -1;
	}

	.k-case__chart:has(.k-cols) > .k-case__legend {
		margin-top: 0;
	}
}

.k-case__note {
	padding-top: 1.1rem;
}

.k-case__chart-title {
	margin: 0 0 1rem;
	font-size: var(--k-t-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-ink-muted);
}

.k-case__meter {
	display: flex;
	gap: 3px;
	height: 12px;
	border-radius: var(--k-radius-pill);
	overflow: clip;
}

.k-case__seg {
	/* Proportional grow, not a percentage width — the 3px gaps then come out
	   of the available space instead of pushing the last segment off the end. */
	flex: var(--pct) 1 0;
	min-width: 0;
	border-radius: 2px;
	transform-origin: left center;
	scale: 0 1;
	transition: scale 900ms var(--k-ease-expo) var(--seg-delay, 0ms);
}

.k-case__chart:nth-child(2) .k-case__seg { --seg-delay: 120ms; }

.is-in .k-case__seg,
.k-anim.is-done .k-case__seg {
	scale: 1 1;
}

.k-case__seg--a, .k-case__dot--a { background: var(--k-accent); }
.k-case__seg--b, .k-case__dot--b { background: var(--k-magenta); }
.k-case__seg--c, .k-case__dot--c { background: var(--k-blue); }
.k-case__seg--d, .k-case__dot--d { background: var(--k-navy-300); }
.k-case__seg--e, .k-case__dot--e { background: var(--k-line-strong); }

.k-case__legend {
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.55rem;
}

.k-case__legend li {
	display: grid;
	grid-template-columns: 9px minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.7rem;
	font-size: 0.86rem;
	line-height: 1.4;
}

.k-case__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	transform: translateY(-1px);
}

.k-case__legend-label {
	color: var(--k-ink-muted);
	white-space: nowrap;
}

.k-case__legend-pct {
	font-weight: 500;
	color: var(--k-ink);
	font-variant-numeric: tabular-nums;
}

.k-case__note {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--k-ink-muted);
	text-wrap: pretty;
}

/* Dark strip, so the two figures that matter most close the panel. */
.k-case__headline {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	padding: clamp(1.35rem, 2.6vw, 1.9rem);
	background: var(--k-ink-surface);
	color: var(--k-white);
}

.k-case__headline b {
	display: block;
	font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
}

.k-case__headline span {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	/* Lifted from 0.72 opacity — bold at that weight on this ground came out
	   muddy, and it needs to hold AA as the emphasised line. */
	color: rgba(247, 246, 242, 0.88);
	text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
	.k-case__seg {
		transition: none;
		scale: 1 1;
	}
}

/* ==========================================================================
   3D pie
   --------------------------------------------------------------------------
   A real extrusion, not a drawn-on shadow: the face is one conic-gradient,
   and the depth is copies of it pushed back along Z inside a preserve-3d
   parent. That means the tilt and the scroll-driven spin both stay correct
   without anything being redrawn.
   ========================================================================== */

/* ==========================================================================
   Email Composer illustration
   --------------------------------------------------------------------------
   The Enquiry Wizard's "Correspond with Enquirer Email" step. Every colour
   here is sampled from the recording frame at 15s rather than chosen: the
   header bar, the cyan active tab, the pale-blue focus ring on the editor,
   the green size budget and the signature banner are the application's own,
   so the illustration matches what a visitor will actually see.
   ========================================================================== */

.k-art--composer {
	--comp-bar: #3e4d66;
	--comp-next: #728bb0;
	--comp-cancel: #d4e1f2;
	--comp-tab: #3ec8e7;
	--comp-tab-line: #cffcff;
	--comp-line: #ececec;
	--comp-focus: #b7daff;
	--comp-band: #009676;
	--comp-size: #5bb25c;
	--comp-size-bg: #e6f4e6;
	--comp-send: #6b7c91;

	container-type: inline-size;
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: clip;
	font-size: var(--comp-scale, 0.72rem);
	line-height: 1.45;
}

.k-art--composer i,
.k-art--composer b,
.k-art--composer em {
	font-style: normal;
}

/* ---- the wizard's step bar ---- */

.k-comp__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.39em;
	padding: 0.833em 1.04em;
	background: var(--comp-bar);
	color: var(--k-white);
}

.k-comp__title {
	font-weight: 600;
	letter-spacing: -0.005em;
}

.k-comp__btns {
	display: flex;
	flex: none;
	gap: 0.417em;
}

.k-comp__btns i {
	padding: 0.278em 0.764em;
	border-radius: 3px;
	font-size: 0.917em;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
}

.k-comp__btns .is-next {
	background: var(--comp-next);
	color: var(--k-white);
}

.k-comp__btns .is-cancel {
	background: var(--comp-cancel);
	color: var(--comp-bar);
}

/* ---- tabs, and the email-size budget ---- */

.k-comp__tabs {
	display: flex;
	align-items: center;
	gap: 1.39em;
	padding: 0.694em 1.04em 0;
	background: var(--comp-bar);
}

.k-comp__tabs > span {
	padding-bottom: 0.556em;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
}

.k-comp__tabs > span.is-on {
	color: var(--comp-tab);
	box-shadow: inset 0 -2px 0 0 var(--comp-tab-line);
}

.k-comp__size {
	margin-left: auto;
	margin-bottom: 0.556em;
	padding: 0.208em 0.625em;
	background: var(--comp-size-bg);
	border-radius: 3px;
	font-size: 0.861em;
	font-weight: 600;
	color: var(--comp-size);
	white-space: nowrap;
}

/* ---- To / Subject ---- */

.k-comp__fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.556em;
	padding: 0.972em 1.04em;
	background: var(--k-white);
}

.k-comp__row {
	display: flex;
	align-items: center;
	gap: 0.694em;
}

.k-comp__row > b {
	flex: none;
	width: 4.72em;
	font-weight: 500;
	color: var(--k-ink-muted);
}

.k-comp__field {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	padding: 0.389em 0.625em;
	border: 1px solid var(--comp-line);
	border-radius: 3px;
}

.k-comp__field--text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--k-ink);
}

.k-comp__chip {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 0.0694em 0.486em;
	background: var(--k-navy-wash);
	border-radius: 2px;
	font-size: 0.917em;
	color: var(--k-ink);
}

.k-comp__row > em {
	flex: none;
	color: var(--k-ink-muted);
}

/* ---- formatting toolbar ---- */

.k-comp__tools {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 0.486em;
	gap: 0.417em;
	padding: 0.556em 1.04em;
	border-top: 1px solid var(--comp-line);
	border-bottom: 1px solid var(--comp-line);
	background: var(--k-white);
}

.k-comp__ico {
	display: grid;
	place-items: center;
	width: 1.53em;
	height: 1.53em;
	border-radius: 2px;
	font-size: 0.944em;
	color: var(--k-ink-muted);
}

.k-comp__ico--b { font-weight: 700; color: var(--k-ink); }
.k-comp__ico--i { font-style: italic; }
.k-comp__ico--u { text-decoration: underline; }
.k-comp__ico--a { color: var(--k-ink); }

.k-comp__sel {
	padding: 0.25em 0.556em;
	border: 1px solid var(--comp-line);
	border-radius: 3px;
	font-size: 0.889em;
	color: var(--k-ink);
	white-space: nowrap;
}

.k-comp__sel--sm {
	font-variant-numeric: tabular-nums;
}

/* Under about 36.1em of panel the toolbar cannot hold everything on one row
   even wrapped, so the font pickers go first — the formatting buttons are
   the part that says "rich text editor". */
@container (max-width: 36.1em) {
	.k-comp__sel:not(.k-comp__sel--sm) {
		display: none;
	}

	.k-comp__row > b {
		width: 3.61em;
	}

	/* The size budget will not wrap and the clip is decoration; both go
	   before the tabs themselves, which name the screen. */
	.k-comp__size,
	.k-comp__clip {
		display: none;
	}
}

/* ---- the editor, and the signature under it ---- */

.k-comp__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.833em;
	padding: 1.04em;
	background: var(--k-white);
}

.k-comp__editor {
	padding: 0.833em;
	border: 1px solid var(--comp-focus);
	border-radius: 2px;
	box-shadow: 0 0 0 2px rgba(183, 218, 255, 0.35);
}

.k-comp__editor p {
	margin: 0 0 0.833em;
	color: var(--k-ink);
}

.k-comp__editor p:last-child {
	margin-bottom: 0;
}

/* The demo signs off with a client's logo; a neutral mark stands in here. */
.k-comp__sig {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.694em;
	padding-left: 0.833em;
}

.k-comp__siglogo {
	width: 4.44em;
	height: 2.08em;
	background:
		radial-gradient(circle at 22% 50%, var(--comp-band) 0 0.472em, transparent 0.486em),
		linear-gradient(var(--k-line-strong) 0 0) 44% 38% / 2.08em 0.417em no-repeat,
		linear-gradient(var(--k-line) 0 0) 44% 74% / 1.39em 0.333em no-repeat;
}

.k-comp__sigrule {
	height: 1px;
	background: var(--comp-line);
}

.k-comp__sigband {
	height: 1.18em;
	margin-right: 0.278em;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--comp-band), #0aa87f);
}

/* ---- embed footer ---- */

.k-comp__foot {
	display: flex;
	align-items: center;
	gap: 0.694em;
	padding: 0.833em 1.04em;
	border-top: 1px solid var(--comp-line);
	background: var(--k-white);
}

.k-comp__foot > b {
	flex: none;
	font-weight: 500;
	color: var(--k-ink-muted);
}

.k-comp__send {
	flex: none;
	width: 1.6em;
	height: 1.6em;
	border-radius: 3px;
	background: var(--comp-send);
}


/* ---- composer: sized to the list, and typing on reveal ------------------ */

@media (min-width: 58rem) {
	/* Every dimension inside the panel is in em, so this one declaration
	   scales it down to finish level with the four-item list beside it.
	   Nothing left for sticky to do once the heights match. */
	.k-featgroup__art:has(.k-art--composer) {
		position: static;
	}

	.k-featgroup__art .k-art--composer {
		--comp-scale: 0.605rem;
		font-size: var(--comp-scale);
	}
}

/* The editor absorbs whatever height is left after the fixed chrome. */
.k-comp__body {
	min-height: 0;
	overflow: clip;
}

.k-comp__editor {
	position: relative;
}

/* Attachment control beside the size budget. */
.k-comp__clip {
	position: relative;
	flex: none;
	width: 0.5rem;
	height: 0.72rem;
	margin-bottom: 0.5rem;
	border: 1.5px solid rgba(255, 255, 255, 0.75);
	border-radius: 0.3rem;
}

.k-comp__ico--h {
	background: linear-gradient(var(--k-amber-wash) 0 0) 0 78% / 100% 2.5px no-repeat;
	color: var(--k-ink);
}

/* The reply wipes in line by line — the closest a static panel gets to
   showing someone composing, without a caret that has to be positioned. */
.k-comp__editor p {
	clip-path: inset(0 100% 0 0);
}

.is-in .k-comp__editor p {
	animation: k-comp-type 520ms var(--k-ease-io) both;
	animation-delay: calc(var(--i) * 420ms + 260ms);
}

@keyframes k-comp-type {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 -2px 0 0); }
}

/* Caret parks after the last line and blinks once the typing has finished. */
.k-comp__caret {
	display: block;
	width: 1.5px;
	height: 0.85em;
	background: var(--k-ink);
	opacity: 0;
}

.is-in .k-comp__caret {
	animation: k-comp-caret 900ms steps(1, end) 1520ms infinite;
}

@keyframes k-comp-caret {
	0%, 50% { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.k-comp__editor p {
		clip-path: none;
	}

	.is-in .k-comp__editor p,
	.is-in .k-comp__caret {
		animation: none;
	}

	.k-comp__caret {
		opacity: 1;
	}
}

/* ==========================================================================
   Reports illustration
   --------------------------------------------------------------------------
   The Reports screen: filter rail, the Summary of Wizard Entry Status chart
   with its four-state legend, and the productivity table. Colours sampled
   from the recording — button navy #4368a0, report band #344053, table
   banding #e5e7e8, and the legend's own four swatches.
   ========================================================================== */

.k-art--reports {
	--rep-navy: #4368a0;
	--rep-band: #344053;
	--rep-line: #e5e7e8;
	--rep-done: #a4e3cc;
	--rep-new: #fcd0b2;
	--rep-recv: #f5b7cb;
	--rep-pend: #cdae84;

	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 0.85em;
	padding: 1.1em;
	font-size: 0.66rem;
	line-height: 1.4;
}

.k-art--reports b,
.k-art--reports i,
.k-art--reports em {
	font-style: normal;
}

.k-rep__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding-bottom: 0.7em;
	border-bottom: 1px solid var(--rep-line);
}

.k-rep__crumb {
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-ink-muted);
}

.k-rep__btn {
	flex: none;
	padding: 0.28em 0.6em;
	background: var(--rep-navy);
	border-radius: 3px;
	font-size: 0.94em;
	font-weight: 600;
	color: var(--k-white);
}

.k-rep__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.85em;
}

@container (min-width: 24rem) {
	.k-rep__grid {
		grid-template-columns: minmax(0, 8em) minmax(0, 1fr);
	}
}

/* ---- filter rail ---- */

.k-rep__rail {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: 0.45em;
}

.k-rep__filter {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.1em;
	min-width: 0;
}

.k-rep__filter b {
	font-size: 0.9em;
	font-weight: 500;
	color: var(--k-ink-muted);
}

.k-rep__filter i {
	overflow: hidden;
	padding: 0.2em 0.35em;
	border: 1px solid var(--rep-line);
	border-radius: 3px;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--k-ink);
}

.k-rep__go {
	justify-self: start;
	margin-top: 0.25em;
	padding: 0.3em 0.6em;
	background: var(--rep-navy);
	border-radius: 3px;
	font-weight: 600;
	color: var(--k-white);
}

/* ---- chart ---- */

.k-rep__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.7em;
	min-width: 0;
}

.k-rep__charttitle {
	margin: 0;
	font-size: 0.94em;
	font-weight: 600;
	text-align: center;
	color: var(--k-ink);
}

.k-rep__chart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.7em;
	align-items: end;
}

.k-rep__plot {
	display: flex;
	align-items: flex-end;
	gap: 0.3em;
	height: 5.2em;
	padding-bottom: 0.2em;
	border-bottom: 1px solid var(--rep-line);
	border-left: 1px solid var(--rep-line);
}

.k-rep__col {
	flex: 1;
	display: flex;
	flex-direction: column-reverse;
	gap: 1px;
	min-width: 0;
	transform-origin: bottom center;
	scale: 1 0;
	transition: scale 620ms var(--k-ease-expo) calc(var(--i) * 55ms + 180ms);
}

.is-in .k-rep__col,
.k-anim.is-done .k-rep__col {
	scale: 1 1;
}

.k-rep__seg {
	height: var(--h);
	border-radius: 1px;
}

.k-rep__seg--done, .k-rep__sw--done { background: var(--rep-done); }
.k-rep__seg--new, .k-rep__sw--new { background: var(--rep-new); }
.k-rep__seg--recv, .k-rep__sw--recv { background: var(--rep-recv); }
.k-rep__seg--pend, .k-rep__sw--pend { background: var(--rep-pend); }

.k-rep__legend {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.2em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-rep__legend li {
	display: flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.88em;
	color: var(--k-ink-muted);
	white-space: nowrap;
}

.k-rep__sw {
	flex: none;
	width: 0.6em;
	height: 0.6em;
	border-radius: 1px;
}

/* ---- productivity table ---- */

.k-rep__band {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.7em;
	padding: 0.32em 0.5em;
	background: var(--rep-band);
	color: var(--k-white);
}

.k-rep__band b {
	font-size: 0.94em;
	font-weight: 600;
}

.k-rep__band span {
	flex: none;
	font-size: 0.85em;
	color: rgba(255, 255, 255, 0.72);
}

.k-rep__table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.k-rep__table th,
.k-rep__table td {
	padding: 0.22em 0.45em;
	text-align: right;
	font-size: 0.9em;
	font-weight: 400;
	color: var(--k-ink);
	white-space: nowrap;
}

.k-rep__table th:first-child,
.k-rep__table td:first-child {
	width: 100%;
	text-align: left;
}

.k-rep__table thead th {
	background: var(--rep-line);
	font-weight: 600;
	color: var(--k-ink-muted);
}

.k-rep__groups th:not(:first-child) {
	text-align: center;
	border-left: 1px solid rgba(255, 255, 255, 0.7);
}

.k-rep__table tbody tr:nth-child(even) {
	background: var(--rep-line);
}

@media (prefers-reduced-motion: reduce) {
	.k-rep__col {
		transition: none;
		scale: 1 1;
	}
}

/* ==========================================================================
   Queue pie illustration
   --------------------------------------------------------------------------
   The Claims Processing queue split by the application's own statuses. Flat
   rather than extruded: at this size the depth swallowed the one- and
   two-count wedges, and the counts are the point.
   ========================================================================== */

.k-art--qpie {
	display: flex;
	flex-direction: column;
	gap: 0.9em;
	padding: 1.15em;
	font-size: 0.72rem;
	line-height: 1.45;
}

.k-qpie__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25em 0.6em;
	padding-bottom: 0.7em;
	border-bottom: 1px solid var(--k-line);
}

.k-qpie__label {
	font-size: 0.92em;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-ink-muted);
}

.k-qpie__box {
	font-weight: 600;
	color: var(--k-ink);
}

/* One row per status: label, bar, count. Bars are scaled to the largest
   count rather than the total, so the small states stay visible. */
.k-qpie__graph {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-qpie__graph li {
	display: grid;
	grid-template-columns: 6.2em minmax(0, 1fr) 1.6em;
	align-items: center;
	gap: 0.6em;
}

.k-qpie__name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--k-ink-muted);
}

.k-qpie__track {
	height: 12px;
	background: var(--k-line);
	border-radius: var(--k-radius-pill);
	overflow: clip;
}

.k-qpie__fill {
	display: block;
	width: var(--w);
	height: 100%;
	border-radius: var(--k-radius-pill);
	transform-origin: left center;
	scale: 0 1;
	transition: scale 620ms var(--k-ease-expo) calc(var(--i) * 70ms + 180ms);
}

.is-in .k-qpie__fill,
.k-anim.is-done .k-qpie__fill {
	scale: 1 1;
}

.k-qpie__fill--a { background: var(--k-accent); }
.k-qpie__fill--b { background: var(--k-magenta); }
.k-qpie__fill--c { background: var(--k-blue); }
.k-qpie__fill--d { background: var(--k-navy-300); }
.k-qpie__fill--f { background: #7e0080; }
.k-qpie__fill--g { background: var(--k-amber); }

.k-qpie__cnt {
	justify-self: end;
	font-weight: 600;
	color: var(--k-ink);
	font-variant-numeric: tabular-nums;
}

.k-qpie__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6em;
	margin: 0;
	padding-top: 0.7em;
	border-top: 1px solid var(--k-line);
}

.k-qpie__total span {
	color: var(--k-ink-muted);
}

.k-qpie__total b {
	font-weight: 600;
	color: var(--k-ink);
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.k-qpie__fill {
		transition: none;
		scale: 1 1;
	}
}

/* ==========================================================================
   Assignment illustration
   --------------------------------------------------------------------------
   The mailbox list, square, with a column saying how each enquiry got its
   owner. Colours sampled from the recording: header band #e5e7e8, references
   #8d158e, the purple left stripe #7e0080, selected row #ddd5eb, row rules
   #f4f4f4.
   ========================================================================== */

.k-art--assign {
	--asg-head: #e5e7e8;
	--asg-ref: #8d158e;
	--asg-stripe: #7e0080;
	--asg-rule: #f4f4f4;

	display: flex;
	flex-direction: column;
	aspect-ratio: 1;
	padding: 0;
	overflow: clip;
	font-size: 0.72rem;
	line-height: 1.4;
}

.k-art--assign b,
.k-art--assign i,
.k-art--assign span {
	font-style: normal;
}

.k-asg__bar {
	display: flex;
	align-items: center;
	gap: 0.7em;
	padding: 0.75em 0.9em;
	border-bottom: 1px solid var(--k-line);
}

.k-asg__box {
	font-weight: 600;
	color: var(--k-ink);
}

.k-asg__count {
	margin-left: auto;
	padding: 0.15em 0.55em;
	background: var(--k-amber-wash);
	border-radius: var(--k-radius-pill);
	font-size: 0.86em;
	font-weight: 600;
	color: var(--k-sla-warn-text);
}

/* One track set for the header and every row, so the columns line up. */
/* The header and the rows are separate grids, so their shared geometry has
   to resolve identically in both. It cannot be in em: the header sits at
   0.88em, which made the fixed track, the gap and the padding all smaller
   there and dragged every fr column out of line with the cells below. */
.k-asg__cols,
.k-asg__row {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.8fr) 5.9rem;
	align-items: center;
	gap: 0.44rem;
	padding: 0.3rem 0.65rem;
}

.k-asg__cols {
	background: var(--asg-head);
	font-size: 0.88em;
	font-weight: 600;
	color: var(--k-ink-muted);
}

/* Rows sit at their natural height and pack from the top, the way the
   application's list does. Spreading five rows over the square put a band of
   empty white between each one. */
.k-asg__rows {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-asg__row {
	position: relative;
	/* The square leaves ~21px spare below the last row. Sharing it across the
	   rows adds 1.5px to each, which is invisible, instead of pooling it into
	   a visible gap above the collision strip. */
	flex: 1 1 auto;
	border-bottom: 1px solid var(--asg-rule);
}

/* The strip below brings its own top border. */
.k-asg__row:last-child {
	border-bottom: 0;
}

/* The app stripes each row down its left edge with the enquiry's SLA state,
   so the stripe runs the whole scale rather than one colour. */
.k-asg__row::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--asg-stripe);
}

.k-asg__row--ok::before { background: var(--k-sla-ok); }
.k-asg__row--warn::before { background: var(--k-sla-warn); }
.k-asg__row--late::before { background: var(--k-sla-late); }
.k-asg__row--breach::before { background: var(--k-sla-breach); }

.k-asg__row.is-live {
	background: var(--k-accent-tint);
}

/* The Popped pill is that same tint, so on the highlighted row it lifts to
   white or it disappears into the background behind it. */
.k-asg__row.is-live .k-asg__how {
	background: var(--k-white);
}

.k-asg__ref {
	font-weight: 600;
	color: var(--asg-ref);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The reference carries the same SLA state as the stripe beside it. */
.k-asg__row--ok .k-asg__ref { color: var(--k-sla-ok-text); }
.k-asg__row--warn .k-asg__ref { color: var(--k-sla-warn-text); }
.k-asg__row--late .k-asg__ref { color: var(--k-sla-late-text); }
.k-asg__row--breach .k-asg__ref { color: var(--k-sla-breach-text); }

.k-asg__who,
.k-asg__owner {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--k-ink);
}

.k-asg__owner {
	color: var(--k-ink-muted);
}

.k-asg__how {
	justify-self: start;
	padding: 0.15em 0.5em;
	border-radius: var(--k-radius-pill);
	font-size: 0.82em;
	font-weight: 600;
	white-space: nowrap;
}

.k-asg__how--auto { background: var(--k-blue-wash); color: var(--k-blue-hover); }
.k-asg__how--pop { background: var(--k-accent-tint); color: var(--k-accent-press); }
.k-asg__how--pull { background: var(--k-sla-ok-wash); color: var(--k-sla-ok); }
.k-asg__how--manual { background: var(--k-magenta-wash); color: var(--k-magenta-hover); }
.k-asg__how--default { background: var(--k-navy-wash); color: var(--k-navy-300); }

.k-asg__warn {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.75em 0.9em;
	/* White, so the amber marker carries the warning on its own rather than
	   the whole strip competing with the highlighted row above it. */
	background: var(--k-white);
	border-top: 1px solid var(--k-line);
}

.k-asg__warn i {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.3em;
	height: 1.3em;
	background: var(--k-amber);
	border-radius: 50%;
	font-size: 0.82em;
	font-weight: 700;
	color: var(--k-white);
}

.k-asg__warn b {
	display: block;
	font-weight: 600;
	color: var(--k-ink);
}

.k-asg__warn span {
	color: var(--k-ink-muted);
}

/* The compact hero is about a third the height of the homepage one, so the
   full-strength wash reads as a solid orange block in it. Same pools and the
   same drift, pulled back and pushed toward the empty right-hand side now
   that the copy has the row to itself. */
.k-hero--compact .k-hero__wash {
	background:
		radial-gradient(34% 46% at 82% 26%, rgba(233, 83, 36, 0.2), transparent 64%),
		radial-gradient(28% 40% at 96% 74%, rgba(174, 72, 155, 0.18), transparent 64%),
		radial-gradient(24% 34% at 62% 88%, rgba(245, 138, 31, 0.14), transparent 66%);
}

/* ==========================================================================
   Take-ownership illustration
   --------------------------------------------------------------------------
   The mailbox list with the application's context menu open over it, which
   is where Take Ownership and Change Enquiry Ownership actually live. Same
   sampled colours as the assignment panel; the confirmation strip below sits
   on the page's own paper rather than the navy it used to be.
   ========================================================================== */

.k-art--own {
	--own-head: #e5e7e8;
	--own-ref: #8d158e;
	--own-sel: #ddd5eb;
	--own-rule: #f4f4f4;

	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: clip;
	font-size: 0.72rem;
	line-height: 1.4;
}

.k-art--own b,
.k-art--own i,
.k-art--own span {
	font-style: normal;
}

.k-own__bar {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.7rem 0.8rem;
	border-bottom: 1px solid var(--k-line);
}

.k-own__box {
	font-weight: 600;
	color: var(--k-ink);
}

.k-own__count {
	color: var(--k-ink-muted);
	font-variant-numeric: tabular-nums;
}

/* The menu is positioned against this and overhangs the rows, so the stage
   reserves the height the nine items need — the panel clips, and at 3.4rem
   the last two items were cut off. */
.k-own__stage {
	position: relative;
	padding-bottom: 7.7rem;
}

/* Shared geometry in rem: the header sits at a smaller font size, and in em
   the tracks would resolve narrower there than in the rows beneath. */
.k-own__cols,
.k-own__row {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.72fr) minmax(0, 1fr);
	align-items: center;
	gap: 0.44rem;
	padding: 0.34rem 0.8rem;
}

.k-own__cols {
	background: var(--own-head);
	font-size: 0.88em;
	font-weight: 600;
	color: var(--k-ink-muted);
}

.k-own__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-own__row {
	position: relative;
	border-bottom: 1px solid var(--own-rule);
}

.k-own__row::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--k-sla-ok);
}

.k-own__row--warn::before { background: var(--k-sla-warn); }
.k-own__row--late::before { background: var(--k-sla-late); }

.k-own__row.is-live {
	background: var(--own-sel);
}

.k-own__ref {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Reference takes the row's SLA state, at text weight — the raw fills fail
   AA as type (warn 2.44:1, late 3.63:1). */
.k-own__row--ok .k-own__ref { color: var(--k-sla-ok-text); }
.k-own__row--warn .k-own__ref { color: var(--k-sla-warn-text); }
.k-own__row--late .k-own__ref { color: var(--k-sla-late-text); }
.k-own__row--breach .k-own__ref { color: var(--k-sla-breach-text); }

.k-own__owner,
.k-own__who {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--k-ink);
}

.k-own__owner {
	color: var(--k-ink-muted);
}

/* ---- the context menu ---- */

.k-own__menu {
	position: absolute;
	left: 50%;
	translate: -50% 0;
	top: 2.4rem;
	z-index: 2;
	margin: 0;
	padding: 0.3rem 0;
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-sm);
	box-shadow: var(--k-shadow-4);
	list-style: none;
}

.k-own__menu li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.26rem 0.85rem 0.26rem 0.6rem;
	white-space: nowrap;
	color: var(--k-ink-2);
	cursor: pointer;
	/* Same pair and the same easing the primary nav uses. */
	transition: color var(--k-dur) var(--k-ease-io);
}

.k-own__menu li:not(.is-off):hover {
	color: var(--k-ink);
}

.k-own__menu li:not(.is-off):hover .k-own__ico {
	opacity: 1;
}

.k-own__menu li.is-off {
	color: var(--k-line-strong);
}

/* One highlight the pointer drags between items, resting on Take Ownership
   — the item the copy beside this is about. It carries the app's own
   selection tint, the same one the selected row above uses. */
.k-own__hl {
	position: absolute;
	left: 0.25rem;
	right: 0.25rem;
	top: 0;
	height: var(--hl-h, 0px);
	translate: 0 var(--hl-y, 0px);
	background: var(--own-sel);
	border-radius: 3px;
	pointer-events: none;
	opacity: 0;
	scale: 1 var(--hl-stretch, 1);
	will-change: translate, scale;
	transition:
		translate 200ms var(--k-ease-io),
		height 200ms var(--k-ease-io),
		scale 200ms var(--k-ease-io),
		opacity 160ms linear;
}

/* Only shown once it has been measured. */
.k-own__hl.is-set {
	opacity: 1;
}

/* Items sit above it. */
.k-own__menu li {
	position: relative;
	z-index: 1;
}

/* Line icons matching the application's set; see kunye_menu_icon(). */
.k-own__ico {
	flex: none;
	width: 0.95rem;
	height: 0.95rem;
	color: var(--k-ink);
	opacity: 0.72;
	transition: opacity var(--k-dur) var(--k-ease-io);
}

.k-own__menu li.is-off .k-own__ico {
	color: var(--k-line-strong);
}

/* A real menu does not highlight a disabled item, and nor does this. */
.k-own__menu li.is-off {
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.k-own__hl {
		scale: 1;
		transition: opacity 160ms linear;
	}
}

/* The month's SLA spread, above the confirmation strip. */
.k-own__spread {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: auto;
	padding: 0.6rem 0.8rem;
	border-top: 1px solid var(--k-line);
}

.k-own__spreadlabel {
	flex: none;
	font-size: 0.88em;
	color: var(--k-ink-muted);
	white-space: nowrap;
}

.k-own__meter {
	flex: 1;
	display: flex;
	gap: 2px;
	min-width: 0;
	height: 7px;
}

.k-own__seg {
	/* Proportional grow rather than a percentage width, so the 2px gaps come
	   out of the available space instead of overflowing the track. */
	flex: var(--pct) 1 0;
	min-width: 0;
	border-radius: var(--k-radius-pill);
	transform-origin: left center;
	scale: 0 1;
	transition: scale 620ms var(--k-ease-expo) calc(var(--i) * 110ms + 220ms);
}

.is-in .k-own__seg,
.k-anim.is-done .k-own__seg {
	scale: 1 1;
}

.k-own__seg--ok { background: var(--k-sla-ok); }
.k-own__seg--warn { background: var(--k-sla-warn); }
.k-own__seg--late { background: var(--k-sla-late); }
.k-own__seg--breach { background: var(--k-sla-breach); }

.k-own__total {
	flex: none;
	padding: 0.12rem 0.5rem;
	background: var(--k-accent-tint);
	border-radius: var(--k-radius-pill);
	font-size: 0.86em;
	font-weight: 600;
	color: var(--k-accent-press);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.k-own__seg {
		transition: none;
		scale: 1 1;
	}
}

/* A category that reads as two runs. The label is a rung inside the list, not
   a heading — the anchor bar still lists one entry for the group. */
/* Scoped to .k-featlist: the label is a <p>, and `.k-featlist p` carries a
   type selector, so a lone class loses to it on specificity — the colour and
   size were silently falling through to the body-copy rule. */
.k-featlist .k-featlist__sub {
	margin: 0;
	font-size: var(--k-t-label);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-accent-press);
	max-width: none;
}

.k-featlist--split .k-featlist__sub {
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--k-line);
}

/* The second run onwards needs air above it; the first sits under the h2. */
.k-featlist--split .k-featlist__sub:not(:first-child) {
	margin-top: 1.1rem;
}

/* Full-width in the two-column variant so a run never starts mid-row. */
.k-featlist--split .k-featlist__sub {
	grid-column: 1 / -1;
}

/* A group split into runs: each run is its own copy-and-illustration row,
   sides alternating, all still under one category heading. */
.k-featgroup__runs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4rem);
}

.k-featrun {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.25rem);
	align-items: center;
}

@media (min-width: 58rem) {
	.k-featrun.has-art {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(2rem, 4.5vw, 3.5rem);
	}

	.k-featrun--flip .k-featlist {
		order: 2;
	}

	.k-featrun--flip .k-featgroup__art {
		order: 1;
	}
}

/* The runs carry their own illustrations, so the group-level art rules that
   make it sticky and full-column height do not apply here. */
.k-featgroup__runs .k-featgroup__art {
	position: static;
	align-self: center;
}

/* ==========================================================================
   Column chart
   --------------------------------------------------------------------------
   Vertical bars for the case study's office-type split. Scaled to the
   largest value rather than to 100, so the 2.1% category still has a column
   you can see.
   ========================================================================== */

.k-cols {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
}

.k-cols__plot {
	display: flex;
	align-items: flex-end;
	gap: clamp(0.3rem, 1.2vw, 0.6rem);
	height: 8.5rem;
}

.k-cols__col {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.35rem;
	min-width: 0;
	height: 100%;
}

.k-cols__val {
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	color: var(--k-ink);
	font-variant-numeric: tabular-nums;
	opacity: 0;
	transition: opacity 300ms var(--k-ease-out) calc(var(--i) * 80ms + 620ms);
}

.k-cols__bar {
	display: block;
	height: var(--h);
	border-radius: 3px 3px 0 0;
	background: var(--fill);
	transform-origin: bottom center;
	scale: 1 0;
	transition: scale 640ms var(--k-ease-expo) calc(var(--i) * 80ms + 200ms);
}

.is-in .k-cols__val {
	opacity: 1;
}

.is-in .k-cols__bar {
	scale: 1 1;
}

.k-cols__axis {
	height: 1px;
	background: var(--k-line-strong);
}

@media (prefers-reduced-motion: reduce) {
	.k-cols__val,
	.k-cols__bar {
		transition: none;
		opacity: 1;
		scale: 1 1;
	}
}

/* Two short groups closing the page as columns rather than as two more full
   rows. They carry no illustration, so there is nothing to alternate. */
.k-featpair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 58rem) {
	.k-featpair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(3rem, 6vw, 5rem);
		align-items: start;
	}

	/* The shared group rhythm is vertical; inside a pair the columns supply
	   the separation themselves. */
	.k-featpair > .k-featgroup + .k-featgroup {
		margin-top: 0;
	}

	/* The list's own two columns would make four text columns across the
	   pair, at about 270px each. One column per group. */
	.k-featpair .k-featlist {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Separates the postal address from the street address inside the one
   <address> block, without needing a second icon and card. */
.k-office__label {
	margin-top: 0.7rem;
	font-size: var(--k-t-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-ink-muted);
}

/* ==========================================================================
   Long-form prose
   --------------------------------------------------------------------------
   For WordPress page content — the privacy notice is nineteen sections of
   legal text, and it was rendering with no treatment at all. Sized for
   reading rather than scanning: a 68-character measure, generous leading,
   and headings that separate the sections without shouting.
   ========================================================================== */

.k-prose {
	max-width: 68ch;
	color: var(--k-ink-muted);
	font-size: 1rem;
	line-height: 1.7;
}

.k-prose > :first-child {
	margin-top: 0;
}

.k-prose > :last-child {
	margin-bottom: 0;
}

.k-prose p {
	margin: 0 0 1.1em;
	text-wrap: pretty;
}

.k-prose h2 {
	margin: 2.4em 0 0.7em;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--k-ls-heading);
	color: var(--k-ink);
	text-wrap: balance;
}

.k-prose h3 {
	margin: 1.8em 0 0.6em;
	font-size: 1rem;
	color: var(--k-ink);
}

/* A legal notice does not need the display h1 the marketing pages use — at
   63px it dwarfed the nineteen section headings under it. */
.k-section:has(.k-prose) h1 {
	font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
}

.k-prose ul,
.k-prose ol {
	margin: 0 0 1.1em;
	padding-left: 1.2em;
}

.k-prose li {
	margin-bottom: 0.6em;
	text-wrap: pretty;
}

.k-prose li::marker {
	color: var(--k-line-strong);
}

/* The source uses bold runs as lead-ins on list items and contact lines. */
.k-prose strong {
	font-weight: 600;
	color: var(--k-ink);
}

.k-prose a {
	color: var(--k-accent-press);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--k-dur) var(--k-ease-io);
}

.k-prose a:hover {
	color: var(--k-accent);
}

/* ==========================================================================
   Use cases
   --------------------------------------------------------------------------
   Transcribed from the client's one-pagers: an SLA target callout, the
   enquiry timeline over the application's four-colour scale, the challenge
   and solution matrix, then the problem / solution / conclusion prose.
   ========================================================================== */

.k-case2 + .k-case2 {
	margin-top: clamp(3.5rem, 7vw, 6rem);
	padding-top: clamp(3.5rem, 7vw, 6rem);
	border-top: 1px solid var(--k-line);
}

.k-case2__head h2 {
	margin: 0.4rem 0 0;
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.k-case2__intro {
	max-width: 62ch;
	margin: 1.1rem 0 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--k-ink-muted);
	text-wrap: pretty;
}

/* ---- prose and the matrix, side by side ---- */

.k-case2__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
	margin-top: clamp(2rem, 4vw, 3rem);
	align-items: start;
}

@media (min-width: 62rem) {
	.k-case2__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	}
}

/*
 * h2 for document structure — these sit under the page's h1, so they must
 * not inherit the marketing display size. They take --k-t-h3 at 600, the
 * same token and weight as the features page's group headings, which is the
 * site's tier for "a section inside a page".
 */
.k-case2__prose h2 {
	margin: 1.9em 0 0.6em;
	font-size: var(--k-t-h3);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--k-ink);
	text-wrap: balance;
}

.k-case2__prose h3 {
	margin: 1.6em 0 0.5em;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--k-ls-heading);
	color: var(--k-ink);
}

.k-case2__prose > :first-child {
	margin-top: 0;
}

.k-case2__prose p {
	margin: 0 0 0.9em;
	font-size: 0.98rem;
	line-height: 1.65;
	color: var(--k-ink-muted);
	text-wrap: pretty;
}

.k-case2__prose b {
	font-weight: 600;
	color: var(--k-ink);
}

.k-case2__prose ul {
	margin: 0 0 0.9em;
	padding-left: 1.1em;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--k-ink-muted);
}

.k-case2__prose li {
	margin-bottom: 0.3em;
}

.k-case2__prose li::marker {
	color: var(--k-line-strong);
}

.k-matrix {
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	overflow: clip;
}

.k-matrix__title {
	margin: 0;
	padding: 0.9rem 1.1rem;
	border-bottom: 1px solid var(--k-line);
	font-size: var(--k-t-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-ink-muted);
}

.k-matrix table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.k-matrix thead th {
	padding: 0.55rem 1.1rem;
	background: var(--k-paper);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k-ink-muted);
}

.k-matrix tbody th,
.k-matrix tbody td {
	padding: 0.7rem 1.1rem;
	border-top: 1px solid var(--k-line);
	font-size: 0.875rem;
	line-height: 1.5;
	vertical-align: top;
	text-wrap: pretty;
}

.k-matrix tbody th {
	width: 44%;
	font-weight: 600;
	color: var(--k-ink);
}

.k-matrix tbody td {
	font-weight: 400;
	color: var(--k-ink-muted);
}

/* ---- closing line ---- */

.k-case2__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid var(--k-line);
}

.k-case2__cta > span {
	font-size: 1.05rem;
	color: var(--k-ink);
	text-wrap: pretty;
}

/* ---- use case index cards --------------------------------------------- */

.k-uclist {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 52rem) {
	.k-uclist {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.k-uccard {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(1.4rem, 2.8vw, 2rem);
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	text-decoration: none;
	transition:
		border-color var(--k-dur) var(--k-ease-io),
		box-shadow var(--k-dur) var(--k-ease-io),
		transform var(--k-dur) var(--k-ease-io);
}

.k-uccard:hover,
.k-uccard:focus-visible {
	border-color: var(--k-line-strong);
	box-shadow: var(--k-shadow-3);
	transform: translateY(-3px);
}

.k-uccard__eyebrow {
	font-size: var(--k-t-label);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-magenta-hover);
}

.k-uccard__title {
	margin-top: 0.7rem;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: var(--k-ls-heading);
	color: var(--k-ink);
	text-wrap: balance;
}

.k-uccard__body {
	margin-top: 0.6rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--k-ink-muted);
	text-wrap: pretty;
}

.k-uccard__target {
	align-self: start;
	margin-top: 1rem;
	padding: 0.15rem 0.55rem;
	background: var(--k-accent-tint);
	border-radius: var(--k-radius-pill);
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--k-accent-press);
}

/* Pinned to the foot so the prompt lines up across cards of unequal copy. */
.k-uccard__go {
	margin-top: auto;
	padding-top: 1.2rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--k-accent);
}

.k-uccard__go::after {
	content: ' →';
	transition: translate var(--k-dur) var(--k-ease-io);
}

.k-uccard:hover .k-uccard__go::after {
	translate: 3px 0;
}

/* ---- single use case: the analysis shape ------------------------------ */

.k-case2__prose--wide {
	max-width: 72ch;
}

.k-break {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.k-break__head h2 {
	margin: 0;
	font-size: var(--k-t-h3);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--k-ink);
	text-wrap: balance;
}

.k-break__head p {
	max-width: 62ch;
	margin: 0.6rem 0 0;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--k-ink-muted);
	text-wrap: pretty;
}

.k-break__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.25rem);
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	align-items: start;
}

@media (min-width: 62rem) {
	.k-break__body {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
}

.k-break__note {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.65;
	color: var(--k-ink-muted);
	text-wrap: pretty;
}

/* A figures table needs its numbers right-aligned and its labels roomy. */
.k-matrix--figures tbody th {
	width: auto;
	font-weight: 400;
	color: var(--k-ink);
}

.k-matrix__num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.k-matrix--figures tbody td {
	width: 6rem;
	font-weight: 600;
	color: var(--k-ink);
}

/* ---- sibling links --------------------------------------------------- */

.k-more {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--k-line);
}

.k-more__label {
	margin: 0 0 1.25rem;
	font-size: var(--k-t-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-ink-muted);
}

.k-more ul {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(0.75rem, 1.6vw, 1.15rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 46rem) {
	.k-more ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.k-more a {
	display: grid;
	gap: 0.35rem;
	height: 100%;
	padding: 1.1rem 1.25rem;
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	text-decoration: none;
	transition:
		border-color var(--k-dur) var(--k-ease-io),
		box-shadow var(--k-dur) var(--k-ease-io);
}

.k-more a:hover,
.k-more a:focus-visible {
	border-color: var(--k-line-strong);
	box-shadow: var(--k-shadow-2);
}

.k-more b {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: var(--k-ls-heading);
	color: var(--k-ink);
}

.k-more span {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--k-ink-muted);
	text-wrap: pretty;
}

/* ==========================================================================
   Use case: the enquiry journey
   --------------------------------------------------------------------------
   The clock is the page. A rail runs down the left in the application's SLA
   colours and fills as the visitor scrolls, so reading the page runs the
   clock out. The old version put this in a small figure under the copy,
   which buried the one thing a use case is actually about.
   ========================================================================== */

/* ---- the journey ---- */

.k-jy {
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.k-jy__head h2 {
	margin: 0;
	font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.8rem);
	font-weight: 600;
	letter-spacing: var(--k-ls-heading);
	color: var(--k-ink);
	text-wrap: balance;
}

.k-jy__head p {
	max-width: 58ch;
	margin: 0.6rem 0 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--k-ink-muted);
	text-wrap: pretty;
}

.k-jy__grid {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---- the rail ---- */

.k-jy__rail {
	position: relative;
	width: 6px;
	justify-self: center;
	border-radius: var(--k-radius-pill);
}

.k-jy__track {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--k-line);
}

/* Runs the SLA scale top to bottom, revealed by a height that grows. */
.k-jy__fill {
	position: absolute;
	inset: 0 0 auto;
	height: 0;
	border-radius: inherit;
	background: linear-gradient(
		var(--k-sla-ok) 0 32%,
		var(--k-sla-warn) 32% 55%,
		var(--k-sla-late) 55% 76%,
		var(--k-sla-breach) 76% 100%
	);
	background-size: 100% var(--k-jy-h, 100%);
	background-repeat: no-repeat;
	transition: height 700ms var(--k-ease-out);
}

.is-in .k-jy__fill {
	height: 100%;
}

/* Scroll drives it where the browser supports a view timeline: the rail
   then tracks the reader rather than filling once on reveal. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.k-jy__fill {
			height: 100%;
			transition: none;
			clip-path: inset(0 0 100% 0);
			animation: k-jy-run linear both;
			animation-timeline: view();
			animation-range: entry 24% exit 62%;
		}
	}
}

@keyframes k-jy-run {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0 0 0 0); }
}

/* ---- the steps ---- */

.k-jy__steps {
	display: grid;
	gap: clamp(0.6rem, 1.4vw, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.k-jy__step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: clamp(0.7rem, 1.6vw, 1.1rem);
}

.k-jy__num {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--k-white);
	border: 1px solid var(--k-line);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--k-ink-muted);
	font-variant-numeric: tabular-nums;
}

/* The step's SLA state colours its marker and its left edge — the same
   scale the rail runs, so the two read as one instrument. */
.k-jy__step--ok .k-jy__num { border-color: var(--k-sla-ok); color: var(--k-sla-ok-text); }
.k-jy__step--warn .k-jy__num { border-color: var(--k-sla-warn); color: var(--k-sla-warn-text); }
.k-jy__step--late .k-jy__num { border-color: var(--k-sla-late); color: var(--k-sla-late-text); }
.k-jy__step--breach .k-jy__num { border-color: var(--k-sla-breach); color: var(--k-sla-breach-text); }

.k-jy__card {
	padding: 0.85rem 1.1rem;
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-left: 3px solid var(--k-line-strong);
	border-radius: var(--k-radius);
}

.k-jy__step--ok .k-jy__card { border-left-color: var(--k-sla-ok); }
.k-jy__step--warn .k-jy__card { border-left-color: var(--k-sla-warn); }
.k-jy__step--late .k-jy__card { border-left-color: var(--k-sla-late); }
.k-jy__step--breach .k-jy__card { border-left-color: var(--k-sla-breach); }

.k-jy__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.7rem;
	margin: 0;
}

.k-jy__hop {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--k-ink);
	white-space: nowrap;
}

.k-jy__who {
	font-size: 0.8rem;
	color: var(--k-ink-muted);
}

.k-jy__at {
	margin-left: auto;
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--k-ink-muted);
	white-space: nowrap;
}

.k-jy__step--late .k-jy__at { color: var(--k-sla-late-text); }
.k-jy__step--breach .k-jy__at { color: var(--k-sla-breach-text); }

/* What was actually said — set as speech, which is what it is. */
.k-jy__said {
	margin: 0.4rem 0 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--k-blue-hover);
	text-wrap: pretty;
}

.k-jy__key {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.78rem;
	color: var(--k-ink-muted);
}

/* ---- the matrix, full width now that it is not beside the prose ---- */

.k-matrix--wide {
	margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 62rem) {
	.k-matrix--wide tbody th {
		width: 32%;
	}
}

/* ---- closing band ---- */

.k-ucband {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
	background: var(--k-ink-surface);
	border-radius: var(--k-radius-xl);
}

.k-ucband p {
	flex: 1 1 24ch;
	min-width: 0;
	margin: 0;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--k-white);
	text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
	.k-jy__fill {
		height: 100%;
		transition: none;
	}
}

/* ==========================================================================
   Figures against the curve
   --------------------------------------------------------------------------
   Label above figure down the left, the quarter-century curve filling the
   right. The curve carries no values on purpose — the figures beside it are
   estate scale rather than a series, so numbering it would imply data that
   does not exist. What it does carry is the span, marked at each end.
   ========================================================================== */

.k-outcomes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
	align-items: center;
}

@media (min-width: 58rem) {
	.k-outcomes {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: clamp(2.5rem, 5vw, 4.5rem);
	}
}

.k-outcomes__figures {
	display: grid;
	gap: clamp(1.1rem, 2.2vw, 1.6rem);
	margin: clamp(2rem, 4vw, 2.75rem) 0 0;
}

.k-outcomes__figures dt {
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--k-ink-muted);
}

.k-outcomes__figures dd {
	margin: 0.15rem 0 0;
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--k-ink);
	font-variant-numeric: tabular-nums;
}

/* ---- the curve ---- */

.k-outcomes__chart {
	min-width: 0;
}

.k-curve {
	margin: 0;
}

.k-curve svg {
	display: block;
	width: 100%;
	height: clamp(13rem, 26vw, 21rem);
	overflow: visible;
}

/* The line draws itself along its own length on reveal. */
/* non-scaling-stroke keeps the weight in device pixels regardless of the
   viewBox, so it is set here in px rather than user units — at 0.7 it came
   out as a hairline. */
.k-curve__line {
	stroke-width: 2.5px;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	pathLength: 1;
	transition: stroke-dashoffset 1500ms var(--k-ease-out) 120ms;
}

.k-curve__area {
	opacity: 0;
	transition: opacity 900ms var(--k-ease-out) 520ms;
}

.is-in .k-curve__line {
	stroke-dashoffset: 0;
}

.is-in .k-curve__area {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.k-curve__line,
	.k-curve__area {
		transition: none;
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

/* Copy and figures in the first column, the curve in the second and top
   aligned, so it begins level with the heading. */
/* Under the paragraph it belongs to — no rule, no extra band of space. */
.k-hero__inner--split .k-outcomes__figures {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* Three across rather than stacked. The head's first column is about 530px,
   so the figures come down a size to sit side by side without the labels
   breaking mid-word. */
@media (min-width: 46rem) {
	.k-hero__inner--split .k-outcomes__figures {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(1rem, 2vw, 1.5rem);
	}

	.k-hero__inner--split .k-outcomes__figures dt {
		font-size: 0.8rem;
		text-wrap: pretty;
	}

	.k-hero__inner--split .k-outcomes__figures dd {
		font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
	}
}

/* Breadcrumb on a use case, in place of a bare back-link eyebrow — it says
   where the page sits, not just where to go back to. */
.k-crumbs {
	margin-bottom: clamp(0.85rem, 1.6vw, 1.25rem);
}

/* Sentence case: a breadcrumb reads as a path, and the uppercase treatment
   the eyebrows use turned "Enterprise mailbox operations" into a banner. */
.k-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0;
}

.k-crumbs li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--k-ink-muted);
}

.k-crumbs li + li::before {
	content: '/';
	color: var(--k-line-strong);
}

.k-crumbs a {
	color: var(--k-accent-press);
	text-decoration: none;
	transition: color var(--k-dur) var(--k-ease-io);
}

.k-crumbs a:hover {
	color: var(--k-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.k-crumbs [aria-current="page"] {
	color: var(--k-ink-muted);
}

/* The curve runs right down to the section boundary, so the body below does
   not also need a full section's leading on top of it. */
.k-hero--compact:has(.k-hero__inner--split) + .k-section {
	padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* A split head's bottom padding is the distance the chart bleeds through, so
   it is stated here rather than inherited from the compact hero's clamp. */
@media (min-width: 58rem) {
	.k-hero--compact:has(.k-hero__inner--split) {
		padding-bottom: clamp(2rem, 4vw, 3.5rem);
	}
}

/* Scoped to .k-hero--compact and placed after it: the "copy only, so one
   column" rule for the compact hero carries two classes and would otherwise
   win on both specificity and order. */
@media (min-width: 58rem) {
	.k-hero--compact .k-hero__inner--split {
		/* Weighted to the copy: "Enterprise mailbox operations" needs 636px
		   on one line at the size below, and a 0.95fr column gave it 533. */
		grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
		gap: clamp(2rem, 4vw, 3.5rem);
		/* Stretch, not start: the curve takes the head's full height rather
		   than sitting as a short band against a much taller copy column. */
		align-items: stretch;
	}

	/*
	 * The chart bleeds to the viewport's right edge and down through the
	 * hero's bottom padding to the section boundary.
	 *
	 * The right bleed is the distance from the shell's content edge to the
	 * viewport edge: half of whatever the shell is not using, plus its own
	 * gutter. Worked out from the shell's own tokens so it stays correct at
	 * every width rather than being a guessed constant.
	 */
	.k-hero__inner--split .k-outcomes__chart {
		--k-bleed: calc(
			(100vw - min(100vw, var(--k-max))) / 2 + var(--k-gutter)
		);

		display: flex;
		flex-direction: column;
		margin-right: calc(var(--k-bleed) * -1);
		margin-bottom: calc(clamp(2rem, 4vw, 3.5rem) * -1);
	}

	.k-hero__inner--split .k-curve {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	/*
	 * flex-basis 0 with height 0, so the svg contributes no intrinsic height
	 * and simply fills what the copy column sets. With height:auto its 100x100
	 * viewBox imposed a 1:1 ratio — once the figures went horizontal and the
	 * copy got shorter, that ratio started setting the row height and left a
	 * 400px void under the copy.
	 */
	.k-hero__inner--split .k-curve svg {
		flex: 1 1 0;
		height: 0;
		min-height: 0;
	}
}

/* A use-case title is one string with no authored breaks, so it must wrap —
   the hero's nowrap rule exists for headlines that carry their own line
   breaks, and here it clipped "Enterprise mailbox operations" in the
   narrower column. */
@media (min-width: 62rem) {
	.k-hero__inner--split h1 .k-mask > span {
		white-space: normal;
	}
}

@media (min-width: 58rem) {
	.k-hero__inner--split h1 {
		font-size: clamp(2rem, 1.55rem + 1.9vw, 3rem);
	}

	/* The lede's 48ch measure was set for a full-width head; here it leaves
	   the paragraph short of a column it can use. */
	.k-hero__inner--split .k-lede {
		max-width: none;
	}
}


/* ==========================================================================
   Article page

   Editorial structure: a byline row, a headline across the full measure of
   the shell, then the body in a single column narrow enough to read. The
   proportions follow the reference; the type scale, palette and weights are
   ours, so it reads as Kunye rather than as a copy.
   ========================================================================== */

.k-article {
	padding: clamp(2.5rem, 6vw, 5rem) 0 0;
}

.k-article__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.k-article__byline {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.35;
}

.k-article__byline b {
	display: block;
	font-weight: 600;
	color: var(--k-ink);
}

.k-article__byline em {
	display: block;
	font-style: normal;
	color: var(--k-ink-muted);
}

/* An initial rather than a photograph: the articles have no author images,
   and a placeholder silhouette looks like a missing asset. */
.k-article__avatar {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	background: var(--k-navy);
	color: var(--k-on-dark);
	font-size: 0.95rem;
	font-weight: 600;
}

.k-article__filed {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin: 0;
	font-size: 0.82rem;
	color: var(--k-ink-muted);
}

.k-article__category {
	font-weight: 600;
	color: var(--k-accent);
	letter-spacing: 0.02em;
}

.k-article__title {
	margin: 0 0 clamp(2.5rem, 6vw, 5rem);
	/* Big, but a step below the reference's 96px: at that size the Kunye
	   headline outruns the logo and the rest of the page. */
	font-size: clamp(2.25rem, 5.2vw, 4.25rem);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.k-article__body {
	/* Wider than the site's default prose and set larger: an article is read
	   start to finish, unlike the marketing pages. */
	max-width: 40rem;
	margin-inline: auto;
	font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
	line-height: 1.65;
}

.k-article__standfirst {
	font-size: 1.22em;
	line-height: 1.5;
	color: var(--k-ink);
	margin-bottom: 1.6em;
}

.k-article__body h2 {
	margin: 2.2em 0 0.6em;
	font-size: 1.6em;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--k-ink);
}

.k-article__body h3 {
	margin: 1.9em 0 0.5em;
	font-size: 1.2em;
	font-weight: 600;
	line-height: 1.3;
	color: var(--k-ink);
}

.k-article__body blockquote {
	margin: 2.2em 0;
	padding-left: 1.4rem;
	border-left: 2px solid var(--k-accent);
}

.k-article__body blockquote p {
	margin: 0;
	font-size: 1.28em;
	line-height: 1.45;
	font-weight: 300;
	letter-spacing: -0.015em;
	color: var(--k-ink);
}

.k-article__body blockquote cite {
	display: block;
	margin-top: 0.9em;
	font-size: 0.8em;
	font-style: normal;
	color: var(--k-ink-muted);
}

/* Figures break out of the text column, which is what makes the column
   read as a column rather than as the page width. */
.k-article__body figure {
	margin: 2.4em 0;
	width: min(52rem, calc(100vw - 2 * var(--k-gutter)));
	margin-inline: calc(50% - min(26rem, (100vw - 2 * var(--k-gutter)) / 2));
}

.k-article__body figure img {
	width: 100%;
	height: auto;
	border-radius: var(--k-radius);
	display: block;
}

.k-article__body figcaption {
	margin-top: 0.85em;
	font-size: 0.82em;
	line-height: 1.5;
	color: var(--k-ink-muted);
}

.k-article__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
	font-size: 0.92em;
}

.k-article__body :is(th, td) {
	padding: 0.75em 1em 0.75em 0;
	text-align: left;
	border-bottom: 1px solid var(--k-line);
}

.k-article__body th {
	font-weight: 600;
	color: var(--k-ink);
	font-size: 0.86em;
	letter-spacing: 0.02em;
}

/* A table is the one element that can outgrow the column on a phone. */
.k-article__body :has(> table) {
	overflow-x: auto;
}

.k-article__body li::marker {
	color: var(--k-accent);
}


/* ==========================================================================
   Share control
   ========================================================================== */

.k-share {
	position: fixed;
	left: 50%;
	bottom: clamp(1rem, 3vw, 2.25rem);
	transform: translateX(-50%);
	z-index: 55;
	/* The pill floats over the article; only the controls take pointer
	   events, so the text behind it stays selectable. */
	pointer-events: none;
	/* Hidden until the article is actually on screen. Without this it
	   carries on floating over the closing band and the footer, where
	   there is no longer an article to share. */
	opacity: 0;
	visibility: hidden;
	translate: 0 0.75rem;
	transition: opacity 260ms var(--k-ease-out), translate 260ms var(--k-ease-out), visibility 0s linear 260ms;
}

.k-share[data-visible] {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
	.k-share {
		transition: opacity 160ms linear, visibility 0s linear 160ms;
		translate: none;
	}
}

.k-share__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.k-share__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: var(--k-radius-pill);
	background: var(--k-navy);
	color: var(--k-on-dark);
	font: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 12px 30px -12px rgba(11, 28, 65, 0.55);
	transition: background 240ms var(--k-ease-out), transform 240ms var(--k-ease-out);
}

.k-share__toggle:hover {
	background: var(--k-navy-hover);
	transform: translateY(-2px);
}

.k-share__icon {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
}

.k-share__icon svg {
	width: 100%;
	height: 100%;
}

.k-share__list {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Closed: the buttons sit behind the pill, scaled out. They are still in
   the layout so the row does not jump when it opens. */
.k-share__list li {
	transform: translateX(2.5rem) scale(0.4);
	opacity: 0;
	transition: transform 380ms var(--k-ease-out), opacity 260ms linear;
	transition-delay: calc((2 - var(--i)) * 45ms);
}

.k-share[data-open] .k-share__list li {
	transform: none;
	opacity: 1;
	transition-delay: calc(var(--i) * 55ms);
}

.k-share__btn {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--k-navy);
	color: var(--k-on-dark);
	pointer-events: auto;
	box-shadow: 0 12px 30px -12px rgba(11, 28, 65, 0.55);
	transition: background 220ms var(--k-ease-out), transform 220ms var(--k-ease-out);
}

.k-share__btn svg {
	width: 20px;
	height: 20px;
}

.k-share__btn:hover {
	background: var(--k-accent);
	transform: translateY(-3px);
}

.k-share[data-open] .k-share__toggle .k-share__label {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.k-share__list li {
		transition: opacity 120ms linear;
		transform: none;
	}
}

@media (max-width: 30rem) {
	.k-share__toggle {
		padding: 0.75rem 1.15rem;
	}

	.k-share__btn {
		width: 44px;
		height: 44px;
	}
}


/* ==========================================================================
   Hero app: the live enquiry

   The top row plays an enquiry's whole life on one loop — it arrives
   unowned, somebody takes it, the clock against the service target drains,
   and it resolves. Everything is keyed off the same --cycle as the status
   pills, so assignment, the clock and the status can never drift apart.

   Built as DOM and CSS keyframes rather than a screen recording: it stays
   sharp at any size, weighs nothing, and the text is real text.
   ========================================================================== */

.k-app__enq {
	display: grid;
	gap: 0.05rem;
	min-width: 0;
}

.k-app__subj {
	font-weight: 600;
	font-size: 0.62rem;
	color: var(--k-ink);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.k-app__enq .k-app__who {
	font-style: normal;
	font-size: 0.56rem;
	color: var(--k-ink-muted);
}

/* --- the owner cell, before and after assignment ----------------------- */

.k-app__ownercell--live {
	position: relative;
	display: grid;
	min-width: 0;
}

.k-app__ownercell--live > span {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	gap: 0.28rem;
	min-width: 0;
	white-space: nowrap;
}

.k-app__owner-none {
	color: var(--k-ink-muted);
	font-style: italic;
	animation: k-app-unassigned var(--cycle) ease-in-out infinite;
}

.k-app__owner-set {
	opacity: 0;
	animation: k-app-assigned var(--cycle) ease-in-out infinite;
}

/* The initial lands first and the name follows it in. */
.k-app__owner-set i {
	display: grid;
	place-items: center;
	width: 0.92rem;
	height: 0.92rem;
	flex: none;
	border-radius: 50%;
	background: var(--k-accent);
	color: #fff;
	font-size: 0.48rem;
	font-weight: 700;
	font-style: normal;
}

/* Unowned for the first quarter of the cycle, then handed over. */
@keyframes k-app-unassigned {
	0%, 22% { opacity: 1; }
	26%, 100% { opacity: 0; }
}

@keyframes k-app-assigned {
	0%, 22% { opacity: 0; transform: translateY(4px); }
	26%, 96% { opacity: 1; transform: none; }
	100% { opacity: 0; }
}

/* --- the clock against the service target ------------------------------ */

.k-app__exp {
	position: relative;
}

.k-app__sla {
	position: absolute;
	left: 0;
	right: 0.35rem;
	bottom: -0.24rem;
	height: 2px;
	border-radius: 2px;
	background: var(--k-line);
	overflow: hidden;
}

.k-app__sla > i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--k-sla-ok, #2f9e6f);
	animation: k-app-sla var(--cycle) linear infinite;
}

/*
 * Drains for three quarters of the cycle, shifting green to amber as the
 * target approaches, then resolves the moment the enquiry completes. The
 * point of the shot is that it never reaches breach.
 */
@keyframes k-app-sla {
	0%    { width: 0; background: #2f9e6f; }
	22%   { width: 28%; background: #2f9e6f; }
	48%   { width: 55%; background: #d9a441; }
	72%   { width: 78%; background: #d9a441; }
	74%   { width: 100%; background: #2f9e6f; }
	96%   { width: 100%; background: #2f9e6f; }
	100%  { width: 0; background: #2f9e6f; }
}

/* The row lifts while it is being worked, and settles once resolved.
   Both animations are named here: `animation` is a shorthand, so listing
   only k-app-live dropped the k-app-deal that fades the row in, and the
   row sat at opacity 0 forever. */
.k-app__row.is-active {
	animation:
		k-app-deal 620ms var(--k-ease-out) 700ms forwards,
		k-app-live var(--cycle) ease-in-out infinite;
}

@keyframes k-app-live {
	0%, 20%   { background: rgba(217, 95, 54, 0.05); }
	26%, 70%  { background: rgba(217, 95, 54, 0.09); }
	76%, 96%  { background: rgba(47, 158, 111, 0.10); }
	100%      { background: rgba(217, 95, 54, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
	/* Still frame: owned, resolved, target met — the end of the story, which
	   is the frame that makes the argument. */
	.k-app__owner-none { animation: none; opacity: 0; }
	.k-app__owner-set { animation: none; opacity: 1; transform: none; }
	.k-app__sla > i { animation: none; width: 100%; background: #2f9e6f; }
	.k-app__row.is-active { animation: none; opacity: 1; background: rgba(47, 158, 111, 0.10); }
}

/* The app frame is a table, so it keeps its own alignment regardless of the
   centred hero copy around it. */
.k-app,
.k-app__head,
.k-app__row {
	text-align: left;
}

/* The pinned live row sits above the scrolling queue and does not move. */
.k-app__pinned {
	position: relative;
	z-index: 2;
	background: var(--k-white);
	box-shadow: 0 6px 14px -10px rgba(13, 29, 65, 0.45);
}

.k-app__pinned .k-app__row {
	border-bottom: 1px solid var(--k-line);
}

/*
 * The live row's own responsive rules.
 *
 * These have to sit after .k-app__ownercell--live's display:grid above --
 * same specificity, so source order decides, and the narrow-width rules
 * further up the file were losing to it.
 */
@media (max-width: 76rem) {
	.k-app__ownercell--live { display: none; }
}

@media (max-width: 46rem) {
	.k-app__ownercell--live { display: none; }

	/* The clock needs the expiry cell, which is hidden at this width. */
	.k-app__sla { display: none; }
}


/* ==========================================================================
   Hero satellites

   Three panels overlapping the queue frame: the mailbox an enquiry arrives
   in, the clock the product keeps, and the report you can put in front of a
   board. They sit outside the frame's edges so the composition reads as
   layered surfaces rather than one flat screenshot.
   ========================================================================== */

.k-sat {
	position: absolute;
	z-index: 3;
	margin: 0;
	padding: 0.85rem 0.95rem;
	width: 15.5rem;
	border-radius: var(--k-radius);
	background: var(--k-white);
	border: 1px solid var(--k-line);
	box-shadow:
		0 2px 4px rgba(13, 29, 65, 0.05),
		0 16px 34px -12px rgba(13, 29, 65, 0.20),
		0 40px 70px -30px rgba(13, 29, 65, 0.22);
	font-size: 0.68rem;
	line-height: 1.45;
	text-align: left;
}

.k-sat__head {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.55rem;
	font-size: 0.56rem;
	font-weight: 700;
	letter-spacing: var(--k-ls-eyebrow);
	text-transform: uppercase;
	color: var(--k-ink-muted);
}

.k-sat__dot,
.k-sat__clock {
	width: 0.5rem;
	height: 0.5rem;
	flex: none;
	border-radius: 50%;
	background: var(--k-accent);
}

.k-sat__clock {
	background: none;
	border: 1.5px solid var(--k-amber, #d9a441);
}

.k-sat__count {
	margin-left: auto;
	padding: 0.05rem 0.35rem;
	border-radius: var(--k-radius-pill);
	background: var(--k-amber-wash, rgba(217, 164, 65, 0.16));
	color: #8a6420;
	font-size: 0.58rem;
}

/* --- the inbound mail ---------------------------------------------------- */

.k-sat__from {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 0.2rem;
	font-size: 0.62rem;
	color: var(--k-ink-muted);
}

.k-sat__from b {
	font-weight: 600;
	color: var(--k-ink);
}

.k-sat__subj {
	margin: 0 0 0.3rem;
	font-weight: 600;
	font-size: 0.66rem;
	line-height: 1.35;
	color: var(--k-ink);
}

.k-sat__snip {
	margin: 0;
	color: var(--k-ink-muted);
	font-size: 0.62rem;
	/* Two lines and out: it is a glimpse of an inbox, not a reading task. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- the clock ----------------------------------------------------------- */

.k-sat__due {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	margin: 0 0 0.3rem;
	font-size: 0.62rem;
	color: var(--k-ink-muted);
	font-variant-numeric: tabular-nums;
}

.k-sat__due:last-child { margin-bottom: 0; }

.k-sat__due b { font-weight: 700; }
.k-sat__due .is-warn { color: #8a6420; }
.k-sat__due .is-late { color: var(--k-red, #c0452b); }

/* --- the report ---------------------------------------------------------- */

.k-sat__figure {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	margin: 0 0 0.6rem;
}

.k-sat__figure b {
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: -0.02em;
	color: var(--k-ink);
	line-height: 1;
}

.k-sat__figure span {
	font-size: 0.6rem;
	color: var(--k-ink-muted);
}

.k-sat__spark {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.2rem;
	height: 1.9rem;
}

.k-sat__spark i {
	/* Narrow bars, not blocks: at flex:1 these came out 22px wide in a
	   13rem panel and read as a bar chart rather than a trend. */
	width: 0.4rem;
	height: var(--h);
	border-radius: 1px;
	background: var(--k-accent);
	opacity: 0.28;
	transform-origin: bottom;
	animation: k-sat-bar 620ms var(--k-ease-out) backwards;
	animation-delay: calc(1400ms + var(--n) * 70ms);
}

/* The last bar is the one the number refers to. */
.k-sat__spark i:last-child {
	opacity: 1;
}

@keyframes k-sat-bar {
	from { scale: 1 0; }
	to   { scale: 1 1; }
}

/* --- placement ----------------------------------------------------------- */

.k-sat--mail {
	top: -2.5rem;
	left: -3.5rem;
}

.k-sat--alert {
	bottom: -2.25rem;
	left: -1.5rem;
}

.k-sat--report {
	top: 32%;
	right: -3.25rem;
	width: 13rem;
}

/* Below the widest layouts there is no room outside the frame, so the panels
   tuck back over its corners rather than pushing the page sideways. */
@media (max-width: 86rem) {
	.k-sat--mail { left: -1rem; top: -1.75rem; }
	.k-sat--alert { left: 0; bottom: -1.5rem; }
	.k-sat--report { right: -1rem; }
}

@media (max-width: 68rem) {
	.k-sat--mail,
	.k-sat--alert,
	.k-sat--report { display: none; }
}


/* ==========================================================================
   Hero: settling on scroll

   As the reader scrolls past, the whole composition eases back — the frame
   scales down a little and the satellites draw in toward it, so the layered
   stack closes into a single object on its way off the screen.

   Measured off the reference: scale 1 to 0.95 with the outer panels
   converging by 13-15px. Deliberately small; it should register as depth,
   not as a effect.

   Scroll-driven only. There is no JavaScript fallback and none is wanted:
   without animation-timeline the composition simply sits still, which is
   the correct still frame anyway.
   ========================================================================== */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 68rem) {
		.k-hero__stage {
			animation: k-hero-settle linear both;
			animation-timeline: view();
			/* Starts once the stage is properly in view and runs as it
			   leaves, so nothing moves while the reader is still reading. */
			animation-range: contain 0% exit 90%;
			transform-origin: 50% 40%;
		}

		.k-sat--mail {
			animation: k-sat-draw-left linear both;
			animation-timeline: view();
			animation-range: contain 0% exit 90%;
		}

		.k-sat--alert {
			animation: k-sat-draw-left linear both;
			animation-timeline: view();
			animation-range: contain 0% exit 90%;
		}

		.k-sat--report {
			animation: k-sat-draw-right linear both;
			animation-timeline: view();
			animation-range: contain 0% exit 90%;
		}
	}
}

@keyframes k-hero-settle {
	from { scale: 1; }
	to   { scale: 0.95; }
}

@keyframes k-sat-draw-left {
	from { translate: 0 0; }
	to   { translate: 1.1rem -0.4rem; }
}

@keyframes k-sat-draw-right {
	from { translate: 0 0; }
	to   { translate: -1.1rem -0.4rem; }
}


/* ==========================================================================
   Decorative petals: keeping their bleed off the page width

   The petals sit at right: calc(size * -0.28), so a 270px one hangs 75px
   past the viewport edge. That scrolled the homepage sideways by about
   160px at wide widths -- body's overflow-x: hidden hides the scrollbar but
   does not stop the scroll.

   The sections that carry one clip it. Workflow is deliberately excluded:
   it holds the only sticky element on the page other than the header, and a
   clipping ancestor stops position: sticky working. Its petal is pulled
   inside the edge instead, which costs a little of the bleed on one
   decoration and keeps the sticky panel behaving.

   Not fixed on the root: overflow-x there kills the sticky header too.
   ========================================================================== */

.k-section:has(> .k-float) {
	overflow: clip;
}

#workflow {
	overflow: visible;
}

#workflow > .k-float {
	/* Far enough in that the drift animation cannot carry it back out. */
	right: 2rem;
}


/* Case study — client testimonial variant of the quote (home page). */
.k-case__quote--testimonial::before {
	content: "\201D";
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.25rem;
	font-weight: 700;
	line-height: 0.8;
	height: 2.4rem;
	color: var(--k-accent);
}
.k-case__quote--testimonial p {
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
	font-style: italic;
	font-weight: 300;
	line-height: 1.35;
	color: var(--k-navy);
}
.k-case__quote--testimonial footer {
	margin-top: 1.1rem;
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
.k-case__quote--testimonial cite {
	display: block;
	font-style: italic;
	line-height: 1.6;
	color: var(--k-ink-muted);
}
.k-case__quote-name {
	color: var(--k-accent);
}
.k-case__quote-logo {
	display: block;
	width: auto;
	height: 26px;
	margin-top: 1rem;
}

/* Case study — keep the title, lede and eyebrow tight; the quote alone sets
   the height of the copy block, so no row gap between the left-hand items. */
@media (min-width: 62rem) {
	.k-case .k-case__copy {
		row-gap: 0;
	}
	.k-case__copy > .k-case__quote {
		margin-top: 0;
		align-self: center;
	}
}

/* Home — "25 years of proven successful outcomes" intro: centre the lede on
   the heading and give it room so it reads apart from the case study below.
   (:not(#k-m) matches the specificity of the Divi override layer.) */
.et_pb_section .et_pb_column .k-head.k-head--split:has(+ .k-stats):not(#k-m) {
	align-items: center;
	margin-bottom: clamp(4rem, 8vw, 7rem);
}