/*
Theme Name:        Kreametrix
Theme URI:         https://kreametrix.com/
Description:       GeneratePress child theme for kreametrix.com. Design tokens live in theme.json. Needs the kreametrix-content-types must-use plugin for case studies.
Author:            Kreametrix
Template:          generatepress
Version:           0.6.14
Requires at least: 6.6
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       kreametrix-child
*/

/* --------------------------------------------------------------------------
   Base
   GeneratePress prints its own font stack, colours and heading sizes. These
   rules load after it and restate the theme.json values, so the front end
   matches the editor whatever order the two stylesheets land in.
   -------------------------------------------------------------------------- */

body,
button,
input,
select,
textarea {
	font-family: var(--wp--preset--font-family--inter);
}

body {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body, 1.62);
	-webkit-font-smoothing: antialiased;
}

/*
 * Every line-height below carries a fallback. A var() that doesn't resolve
 * doesn't fall back to theme.json: it becomes "unset" and the heading inherits
 * its parent's computed line-height, which overlaps multi-line headings.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--wp--preset--color--navy);
	font-weight: var(--wp--custom--font-weight--semibold);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	line-height: var(--wp--custom--line-height--heading, 1.18);
}

/*
 * The heading size presets are h-1 to h-4, not h1 to h4: WordPress puts a
 * hyphen before a digit when it turns a theme.json slug into a variable name.
 */
h1 {
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: var(--wp--custom--font-weight--bold);
}

h2 {
	font-size: var(--wp--preset--font-size--h-2);
}

h3 {
	font-size: var(--wp--preset--font-size--h-3);
	line-height: var(--wp--custom--line-height--snug, 1.35);
}

h4 {
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--wp--custom--line-height--snug, 1.35);
}

h5 {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--snug, 1.35);
}

h6 {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--snug, 1.35);
}

code,
kbd,
pre,
samp {
	font-family: var(--wp--preset--font-family--mono);
}

::selection {
	background: var(--wp--preset--color--blue-100);
	color: var(--wp--preset--color--navy-900);
}

/* --------------------------------------------------------------------------
   Links
   Underline sits at blue-100 and takes the text colour on hover.
   -------------------------------------------------------------------------- */

a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--blue);
	text-decoration-color: var(--wp--preset--color--blue-100);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: var(--wp--custom--transition--color);
}

a:where(:not(.wp-element-button)):hover,
a:where(:not(.wp-element-button)):focus {
	color: var(--wp--preset--color--blue-700);
	text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   Focus
   Never suppressed: 2px blue outline at 2px offset.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Buttons
   Default core Button = design system "secondary" (blue). The outline style
   is "quiet". Press nudges 1px down; nothing scales.

   theme.json's button colours print at the lowest specificity (:root :where),
   so GeneratePress's grey "a.wp-block-button__link:not(.has-background)" (0-2-1)
   and its :hover/:focus/:active twin (0-3-1) beat them on any block Button
   whose style has no class rule. The default and outline colours are restated
   here at 0-3-0, states at 0-4-0. Primary, on-dark and pill set their own in
   blocks.css. Preset colours picked in the editor still win (!important), and
   a style that sets its own colours at 0-4-0 or more, such as the navy-ground
   outline, still overrides these.
   -------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition: var(--wp--custom--transition--color), transform var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

/*
 * Size and padding, restated over GeneratePress's
 * ".wp-block-button .wp-block-button__link" (font-size and line-height inherit,
 * padding 10px 20px; 0-2-0), which beats theme.json's button element styles
 * and makes buttons 17px wide enough to wrap. Same specificity, later in the
 * cascade: this file loads after GeneratePress's. The large, pill, header and
 * sidebar buttons set their own sizes.
 */
.wp-block-button > .wp-block-button__link {
	font-size: 16px;
	line-height: 1.4;
	padding: 11px 20px;
}

/* Default (Fill): a Button with no style, or Fill picked explicitly. */
.wp-block-button:is(:not([class*="is-style-"]), .is-style-fill) > .wp-block-button__link {
	background-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
}

.wp-block-button:is(:not([class*="is-style-"]), .is-style-fill) > .wp-block-button__link:is(:hover, :focus, :active) {
	background-color: var(--wp--preset--color--blue-700);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--neutral-300);
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus, :active) {
	background-color: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--blue-500);
	color: var(--wp--preset--color--blue-700);
}

/* Buttons printed by PHP templates, matching the design system Button. */
a.kx-button {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--md);
	display: inline-flex;
	font-size: 16px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	letter-spacing: -.005em;
	line-height: 1.4;
	padding: 11px 20px;
	text-decoration: none;
	transition: var(--wp--custom--transition--color), transform var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
	white-space: nowrap;
}

a.kx-button:active {
	transform: translateY(1px);
}

a.kx-button--primary {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy-900);
}

a.kx-button--primary:hover,
a.kx-button--primary:focus {
	background-color: var(--wp--preset--color--gold-600);
	color: var(--wp--preset--color--navy-900);
}

a.kx-button--secondary {
	background-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
}

a.kx-button--secondary:hover,
a.kx-button--secondary:focus {
	background-color: var(--wp--preset--color--blue-700);
	color: var(--wp--preset--color--white);
}

/* --------------------------------------------------------------------------
   Separator
   1px hairline, never the 2px core default.
   -------------------------------------------------------------------------- */

.wp-block-separator:not(.is-style-dots) {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--neutral-200);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Layout shell
   On the theme's own templates GeneratePress's page container steps aside so
   sections can run full width. Each section sets its own inner width.
   -------------------------------------------------------------------------- */

.kx-template .site.grid-container {
	max-width: none;
	padding: 0;
}

.kx-template .site-content {
	display: block;
	padding: 0;
}

.kx-main {
	display: block;
}

.kx-container {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--wp--custom--layout--container);
	padding-inline: var(--wp--custom--spacing--gutter);
}

.kx-container--narrow {
	max-width: var(--wp--custom--layout--container-narrow);
}

.kx-section--tail {
	padding-bottom: var(--wp--preset--spacing--9);
}

/* Block content. Spacing comes from the block gap, not GeneratePress margins. */
.kx-content :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre),
.kx-article__body :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre) {
	margin-bottom: 0;
}

.kx-content {
	padding-bottom: var(--wp--preset--spacing--9);
}

/* Full-width sections sit flush against each other and against the footer. */
.kx-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

.kx-content:has(> .alignfull:last-child) {
	padding-bottom: 0;
}

/* Phones: 20px gutter. */
@media (max-width: 600px) {
	:root body {
		--wp--custom--spacing--gutter: 20px;
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}
}

/* --------------------------------------------------------------------------
   Site header (template part)
   White by default; navy when the page opens with a navy section.
   -------------------------------------------------------------------------- */

.kx-site-header {
	background-color: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--neutral-200);
}

.kx-has-dark-hero .kx-site-header {
	background-color: var(--wp--preset--color--navy);
	border-bottom-color: var(--wp--custom--border--on-dark);
}

.kx-site-header .kx-site-header__inner {
	gap: 14px 28px;
	min-height: 72px;
	padding-block: 14px;
}

.kx-site-header .kx-site-header__nav {
	gap: 12px 24px;
	margin-left: auto;
}

a.kx-logo {
	align-items: center;
	display: flex;
	text-decoration: none;
}

.kx-logo img {
	display: block;
	height: 26px;
	width: auto;
}

.kx-site-header .kx-logo__on-dark,
.kx-has-dark-hero .kx-site-header .kx-logo__on-light {
	display: none;
}

.kx-has-dark-hero .kx-site-header .kx-logo__on-dark {
	display: block;
}

.kx-site-header .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.kx-site-header .wp-block-navigation__container {
	gap: 12px 24px;
}

.kx-site-header .wp-block-navigation a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--body);
	text-decoration: none;
}

.kx-site-header .wp-block-navigation a.wp-block-navigation-item__content:hover,
.kx-site-header .wp-block-navigation a.wp-block-navigation-item__content.is-current {
	color: var(--wp--preset--color--blue);
}

.kx-has-dark-hero .kx-site-header .wp-block-navigation a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--on-dark-muted);
}

.kx-has-dark-hero .kx-site-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--white);
}

.kx-has-dark-hero .kx-site-header .wp-block-navigation a.wp-block-navigation-item__content.is-current {
	color: var(--wp--preset--color--blue-500);
}

/* Open mobile menu: a navy overlay whatever the header tone. */
.kx-site-header .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--lead);
}

.kx-site-header .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content.is-current {
	color: var(--wp--preset--color--blue-500);
}

.kx-site-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--navy);
}

.kx-has-dark-hero .kx-site-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--white);
}

.kx-site-header .kx-header-cta .wp-block-button__link {
	font-size: 14px;
	padding: 7px 14px;
}

.kx-has-dark-hero .kx-site-header .kx-header-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.kx-has-dark-hero .kx-site-header .kx-header-cta .wp-block-button__link:hover,
.kx-has-dark-hero .kx-site-header .kx-header-cta .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--tint);
}

/* On phones the header is logo and menu only, as in the mobile frames. */
@media (max-width: 599px) {
	.kx-site-header .kx-header-cta {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Site footer (template part)
   -------------------------------------------------------------------------- */

.kx-site-footer {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--on-dark-muted);
	padding-block: 64px 28px;
}

.kx-site-footer p {
	margin: 0;
}

.kx-site-footer .kx-logo img {
	height: 30px;
}

.kx-site-footer .wp-block-columns {
	gap: 40px;
}

.kx-site-footer .wp-block-column > * + * {
	margin-block-start: 10px;
}

.kx-site-footer .kx-site-footer__about {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	margin-top: 12px;
	max-width: 34ch;
}

.kx-site-footer .kx-eyebrow {
	color: var(--wp--preset--color--blue-500);
}

.kx-site-footer .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
}

.kx-site-footer .wp-block-navigation__container {
	gap: 10px;
}

.kx-site-footer .wp-block-navigation a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--on-dark-muted);
	text-decoration: none;
}

.kx-site-footer .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--white);
}

.kx-site-footer .kx-site-footer__base {
	border-top: 1px solid var(--wp--custom--border--on-dark);
	color: rgba(255, 255, 255, .5);
	font-size: var(--wp--preset--font-size--caption);
	gap: 12px;
	margin-top: 40px;
	padding-top: 20px;
}

/* --------------------------------------------------------------------------
   Text components
   -------------------------------------------------------------------------- */

.kx-eyebrow {
	color: var(--wp--preset--color--blue);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

.kx-meta {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	margin: 0;
}

.kx-crumbs {
	align-items: center;
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 8px;
	margin-bottom: 22px;
}

.kx-crumbs a {
	text-decoration: none;
}

.kx-empty {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* Page header: "single" is the 760px column, "section" the wide archive header. */
.kx-page-header {
	padding-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--7);
}

.kx-page-header .kx-eyebrow {
	margin-bottom: 16px;
}

.kx-page-header .kx-page-title {
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.12;
	margin: 0 0 18px;
	text-wrap: pretty;
}

.kx-page-header .kx-lead {
	color: var(--wp--preset--color--body);
	font-size: clamp(17px, 1.3vw, 19px);
	line-height: 1.6;
	margin: 0;
}

.kx-page-header .kx-meta--rule {
	border-top: 1px solid var(--wp--preset--color--neutral-200);
	margin-top: 20px;
	padding-top: 16px;
}

.kx-page-header--section {
	padding-block: var(--wp--preset--spacing--9) var(--wp--preset--spacing--7);
}

.kx-page-header--section .kx-eyebrow {
	margin-bottom: 12px;
}

.kx-page-header--section .kx-page-title {
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	line-height: var(--wp--custom--line-height--heading, 1.18);
	margin-bottom: 12px;
	max-width: 780px;
}

.kx-page-header--section .kx-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	max-width: 52ch;
}

/* Figure with caption: featured diagrams and evidence screenshots. */
.kx-figure {
	margin: 32px 0 0;
}

.kx-figure img {
	border-radius: var(--wp--custom--radius--lg);
	display: block;
	height: auto;
	width: 100%;
}

.kx-figure figcaption {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.6;
	margin-top: 10px;
	max-width: 66ch;
}

/* --------------------------------------------------------------------------
   Pills, badges, callouts
   -------------------------------------------------------------------------- */

.kx-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}

a.kx-pill {
	align-items: center;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--body);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	padding: 5px 12px;
	text-decoration: none;
	transition: var(--wp--custom--transition--color);
}

a.kx-pill:hover,
a.kx-pill:focus {
	background-color: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--blue-500);
	color: var(--wp--preset--color--blue-700);
}

a.kx-pill.is-active {
	background-color: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--blue-500);
	color: var(--wp--preset--color--blue);
}

/* --------------------------------------------------------------------------
   Link cards and rows
   The title link stretches over the whole card, so the card is one target
   without wrapping a heading and paragraph in a link.
   -------------------------------------------------------------------------- */

.kx-stretched-link::after {
	border-radius: inherit;
	content: "";
	inset: 0;
	position: absolute;
}

a.kx-stretched-link:focus-visible {
	outline: none;
}

.kx-card--link:has(a.kx-stretched-link:focus-visible),
.kx-post-row:has(a.kx-stretched-link:focus-visible) {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}

.kx-card-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.kx-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
	display: flex;
	flex-direction: column;
	padding: 28px;
	position: relative;
	transition: box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out), border-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.kx-card--link:hover {
	border-color: var(--wp--preset--color--blue-500);
	box-shadow: var(--wp--preset--shadow--raised);
}

.kx-card .kx-card__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}

.kx-card .kx-card__title {
	font-size: 20px;
	letter-spacing: -.01em;
	line-height: 1.35;
	margin: 0 0 8px;
}

.kx-card__title a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.kx-card .kx-card__excerpt {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	margin: 0 0 16px;
}

.kx-card .kx-card__more {
	color: var(--wp--preset--color--blue);
	font-size: 14px;
	font-weight: 500;
	margin-top: auto;
}

.kx-post-list {
	border-bottom: 1px solid var(--wp--preset--color--neutral-200);
}

.kx-post-row {
	align-items: start;
	border-top: 1px solid var(--wp--preset--color--neutral-200);
	display: grid;
	gap: 12px 24px;
	padding-block: 28px;
	position: relative;
	transition: background-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

@media (min-width: 782px) {
	.kx-post-row {
		grid-template-columns: 1fr 1fr;
	}
}

.kx-post-row:hover {
	background-color: var(--wp--preset--color--neutral-50);
}

.kx-post-row .kx-post-row__title {
	font-size: 22px;
	letter-spacing: -.01em;
	line-height: 1.3;
	margin: 10px 0 0;
}

.kx-post-row__title a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.kx-post-row .kx-post-row__standfirst {
	font-size: 16px;
	line-height: 1.65;
	margin: 0;
}

.kx-pagination {
	margin-top: 40px;
}

.kx-pagination .nav-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kx-pagination .page-numbers {
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
	padding: 5px 12px;
	text-decoration: none;
}

.kx-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--blue-500);
	color: var(--wp--preset--color--blue);
}

/* --------------------------------------------------------------------------
   Article
   Content column beside a 280px sidebar. Nothing sticky.
   -------------------------------------------------------------------------- */

.kx-article__layout {
	align-items: start;
	display: grid;
	gap: 48px;
	padding-bottom: var(--wp--preset--spacing--9);
}

@media (min-width: 960px) {
	.kx-article__layout {
		grid-template-columns: minmax(0, 760px) 280px;
		justify-content: space-between;
	}
}

.kx-article__body > h2:not(:first-child) {
	margin-block-start: 40px;
}

.kx-article__body .alignwide,
.kx-article__body .alignfull {
	margin-inline: 0;
	max-width: 100%;
}

.kx-article__aside {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.kx-toc ul {
	border-left: 1px solid var(--wp--preset--color--neutral-200);
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0 0 0 16px;
}

.kx-toc a {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-decoration: none;
}

.kx-sidebar-cta {
	border-top: 1px solid var(--wp--preset--color--neutral-200);
	padding-top: 20px;
}

.kx-sidebar-cta p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	margin: 0;
}

.kx-sidebar-cta .wp-block-button__link {
	font-size: 14px;
	padding: 7px 14px;
}

/* --------------------------------------------------------------------------
   Case study
   -------------------------------------------------------------------------- */

.kx-case-study__context {
	margin-bottom: var(--wp--preset--spacing--8);
}

.kx-context {
	background-color: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--tint-200);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
	display: grid;
	font-size: var(--wp--preset--font-size--small);
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	margin: 0;
	padding: 26px;
}

.kx-context dt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	margin-bottom: 6px;
	text-transform: uppercase;
}

.kx-context dd {
	color: var(--wp--preset--color--body);
	margin: 0;
}

.kx-case-study .kx-content,
.kx-case-study .kx-content:has(> .alignfull:last-child) {
	padding-bottom: var(--wp--preset--spacing--8);
}

.kx-case-study__end {
	padding-bottom: var(--wp--preset--spacing--9);
}

.kx-cta-row {
	align-items: center;
	border-top: 1px solid var(--wp--preset--color--neutral-200);
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
	padding-top: 28px;
}

/* --------------------------------------------------------------------------
   Service page template
   -------------------------------------------------------------------------- */

.kx-service__head {
	padding-top: var(--wp--preset--spacing--8);
}

.kx-service__intro {
	align-items: start;
	display: grid;
	gap: var(--wp--preset--spacing--8);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	padding-bottom: var(--wp--custom--spacing--band, 64px);
}

.kx-service__head .kx-service__title {
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
	margin: 0;
	max-width: 22ch;
}

/* The tagline: what the service does, in a line, under the service name. */
.kx-service__head .kx-service__tagline {
	color: var(--wp--preset--color--navy);
	font-size: clamp(19px, 1.7vw, 23px);
	font-weight: 600;
	letter-spacing: -.012em;
	line-height: 1.35;
	margin: 12px 0 0;
	max-width: 24ch;
}

.kx-service__head .kx-service__lead {
	font-size: clamp(17px, 1.3vw, 19px);
	line-height: 1.58;
	margin: 18px 0 0;
	max-width: 54ch;
	text-wrap: pretty;
}

.kx-service__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.kx-glance {
	background-color: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--tint-200);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
	padding: 28px;
}

.kx-glance .kx-eyebrow {
	margin-bottom: 14px;
}

.kx-glance dl {
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--small);
	gap: 14px;
	line-height: 1.6;
	margin: 0;
}

.kx-glance dl > div {
	display: grid;
	gap: 12px;
	grid-template-columns: 120px 1fr;
}

.kx-glance dt {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.kx-glance dd {
	color: var(--wp--preset--color--body);
	margin: 0;
}

a.kx-button--quiet {
	background-color: transparent;
	border-color: var(--wp--preset--color--neutral-300);
	color: var(--wp--preset--color--navy);
}

a.kx-button--quiet:hover,
a.kx-button--quiet:focus {
	background-color: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--blue-500);
	color: var(--wp--preset--color--blue-700);
}

/* --------------------------------------------------------------------------
   Patterns: front-end only
   A card with the "kx-link-card" class becomes one link target: its heading
   link stretches over it. Kept out of blocks.css so the editor stays clickable.
   A card whose heading has no link yet stays still on hover.
   -------------------------------------------------------------------------- */

.kx-link-card {
	position: relative;
	transition: box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out), border-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.kx-link-card :is(h2, h3, h4) a::after {
	border-radius: inherit;
	content: "";
	inset: 0;
	position: absolute;
}

.kx-link-card:has(a):hover {
	border-color: var(--wp--preset--color--blue-500);
	box-shadow: var(--wp--preset--shadow--raised);
}

.kx-link-card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}

/* The anonymity note, rendered from its synced pattern outside block content. */
.kx-anonymity {
	margin-top: 32px;
	max-width: 700px;
}

.kx-anonymity p {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.kx-page-header.kx-not-found {
	padding-bottom: var(--wp--preset--spacing--10);
}

.kx-link-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 28px 0 32px;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Enquiry form
   Markup comes from the kreametrix-enquiries must-use plugin. Fields use the
   field tokens in theme.json. The submit button is the blue secondary: the
   page's gold button is the Cal.com link.
   -------------------------------------------------------------------------- */

.is-style-card > :is(.kx-form, .kx-form__success) {
	margin-block-start: 24px;
}

.kx-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.kx-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.kx-field label {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--custom--field--label-size);
	font-weight: 600;
}

.kx-field__required {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.kx-form :is(input[type="text"], input[type="email"], select, textarea) {
	appearance: none;
	background-color: var(--wp--custom--field--background);
	border: 1px solid var(--wp--custom--field--border);
	border-radius: var(--wp--custom--field--radius);
	box-sizing: border-box;
	color: var(--wp--custom--field--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.4;
	padding: var(--wp--custom--field--padding);
	transition: var(--wp--custom--transition--color);
	width: 100%;
}

.kx-form .kx-field textarea {
	line-height: 1.6;
	min-height: 140px;
	resize: vertical;
}

.kx-form :is(input[type="text"], input[type="email"], select, textarea):focus {
	border-color: var(--wp--custom--field--border-focus);
	box-shadow: var(--wp--custom--focus-ring);
	outline: none;
}

.kx-form .kx-field [aria-invalid="true"] {
	border-color: var(--wp--custom--field--border-error);
}

.kx-select {
	display: block;
	position: relative;
}

.kx-select::after {
	color: var(--wp--preset--color--muted);
	content: "\25BE";
	font-size: 12px;
	pointer-events: none;
	position: absolute;
	right: 13px;
	top: 50%;
	transform: translateY(-50%);
}

.kx-form .kx-select select {
	padding-right: 36px;
}

.kx-field .kx-field__hint,
.kx-field .kx-field__error {
	font-size: var(--wp--custom--field--hint-size);
	line-height: 1.5;
	margin: 0;
}

.kx-field .kx-field__hint {
	color: var(--wp--preset--color--muted);
}

.kx-field .kx-field__error {
	color: var(--wp--custom--field--border-error);
	font-weight: 500;
}

.kx-form__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 4px;
}

.kx-form .kx-form__submit {
	background-color: var(--wp--preset--color--blue);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: 1.4;
	padding: 14px 26px;
	transition: var(--wp--custom--transition--color), transform var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
}

.kx-form .kx-form__submit:hover,
.kx-form .kx-form__submit:focus {
	background-color: var(--wp--preset--color--blue-700);
	color: var(--wp--preset--color--white);
}

.kx-form .kx-form__submit:active {
	transform: translateY(1px);
}

/* Honeypot: off screen for people, still in the form for bots. */
.kx-form__trap {
	height: 1px;
	left: -10000px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

/* Success and error states share the callout shape. */
.kx-form__summary,
.kx-form__success {
	border-left: var(--wp--custom--border--rule-strong) solid var(--wp--preset--color--blue);
	border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	padding: 16px 20px;
}

.kx-form__summary {
	background-color: var(--wp--custom--status--fail--bg);
	border-left-color: var(--wp--custom--status--fail--fg);
}

.kx-form__success {
	background-color: var(--wp--preset--color--tint);
}

.kx-form__summary p,
.kx-form__success p {
	margin: 0;
}

.kx-form__summary p + *,
.kx-form__success p + * {
	margin-top: 4px;
}

.kx-form__summary .kx-form__status-title,
.kx-form__success .kx-form__status-title {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

.kx-form__summary ul {
	margin: 6px 0 0;
	padding-left: 18px;
}

.kx-form__summary:focus,
.kx-form__success:focus {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Reduced motion zeroes every duration.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0ms !important;
	}
}