/* KYNVEO DIGITAL: theme stylesheet (front end and editor canvas).

   Rules this file follows:
   - Flexbox for all layout. No CSS Grid.
   - No absolute or fixed positioning. The header is the one sticky element.
   - Every colour, font family, font size, spacing, radius, duration and offset
     is defined once in :root below and used through var().
   - No visible ::before or ::after. Dots, rings, bars and lines are real
     elements or inline SVG.
   - Component selectors start with :root so they reliably override the flex
     and gap defaults WordPress generates for core blocks.
   - Media query breakpoints are the only literal sizes outside :root, because
     CSS does not allow var() inside a media condition.
*/

:root {
	/* Colour */
	--kv-orange: #FF7900;
	--kv-orange-soft: #FFB46E;
	--kv-charcoal: #101115;
	--kv-graphite: #1B1D22;
	--kv-graphite-light: #262933;
	--kv-white: #FFFFFF;
	--kv-grey: #BFC3CC;
	--kv-grey-dim: #9499A6;
	--kv-stroke: #343843;
	--kv-stroke-strong: #5B606D;
	--kv-paper: #E9EBEF;
	--kv-orange-tint: rgb(255 121 0 / .1);
	--kv-orange-line: rgb(255 121 0 / .5);
	--kv-transparent: transparent;

	/* Type */
	--kv-font-display: "Space Grotesk", "Helvetica Neue", "Arial";
	--kv-font-body: "Inter", "Helvetica Neue", "Arial";
	--kv-text-xs: .75rem;
	--kv-text-sm: .875rem;
	--kv-text-base: 1.0625rem;
	--kv-text-lead: 1.25rem;
	--kv-text-h3: 1.375rem;
	--kv-text-h2: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
	--kv-text-page: clamp(2.5rem, 1.3rem + 4vw, 4.5rem);
	--kv-text-h1: clamp(2.75rem, 1.1rem + 5.4vw, 5.5rem);
	--kv-weight-regular: 400;
	--kv-weight-medium: 500;
	--kv-weight-semibold: 600;
	--kv-weight-bold: 700;
	--kv-leading-tight: 1.02;
	--kv-leading-head: 1.1;
	--kv-leading-body: 1.65;
	--kv-tracking-tight: -.02em;
	--kv-tracking-wide: .12em;

	/* Space */
	--kv-space-0: 0;
	--kv-space-1: .25rem;
	--kv-space-2: .5rem;
	--kv-space-3: .75rem;
	--kv-space-4: 1rem;
	--kv-space-5: 1.5rem;
	--kv-space-6: 2rem;
	--kv-space-7: 3rem;
	--kv-space-8: 4.5rem;
	--kv-space-9: 6rem;
	--kv-gutter: clamp(1.25rem, 4vw, 3rem);
	--kv-gutter-negative: calc(-1 * var(--kv-gutter));
	--kv-section: clamp(4rem, 8vw, 7.5rem);
	--kv-hero-pad: clamp(3rem, 6vw, 6rem);
	--kv-form-pad: clamp(1.5rem, 4vw, 3rem);

	/* Shape and line */
	--kv-radius-s: .625rem;
	--kv-radius-m: 1.125rem;
	--kv-radius-l: 1.75rem;
	--kv-radius-pill: 10rem;
	--kv-line: .0625rem;
	--kv-line-accent: .125rem;
	--kv-line-track: .25rem;
	--kv-border: var(--kv-line) solid var(--kv-stroke);
	--kv-border-strong: var(--kv-line) solid var(--kv-stroke-strong);

	/* Sizes */
	--kv-full: 100%;
	--kv-none: none;
	--kv-container: 80rem;
	--kv-measure: 36rem;
	--kv-measure-wide: 46rem;
	--kv-col-copy: 24rem;
	--kv-col-art: 26rem;
	--kv-col-orbit: 18rem;
	--kv-col-foot: 10rem;
	--kv-card-min: 14rem;
	--kv-field-min: 13rem;
	--kv-compare-min: 12rem;
	--kv-kit-wide: 13rem;
	--kv-kit-narrow: 8rem;
	--kv-kit-wide-max: 21rem;
	--kv-kit-logo-max: 26rem;
	--kv-kit-narrow-max: 12rem;
	--kv-logo-width: 10.5rem;
	--kv-icon: 3rem;
	--kv-icon-small: 1.125rem;
	--kv-tap: 2.875rem;
	--kv-tap-small: 2.5rem;
	--kv-check: 1.25rem;
	--kv-arrow: 3rem;
	--kv-menu-bar: 1.375rem;
	--kv-orbit-max: 22rem;
	--kv-wave-height: clamp(6rem, 14vw, 11rem);
	--kv-ratio-thumb: 3 / 2;
	--kv-ratio-wide: 16 / 9;
	--kv-ratio-tall: 9 / 16;
	--kv-video-wide-grow: 3.16;
	--kv-video-tall-min: 10rem;
	--kv-video-tall-max: 18rem;
	--kv-position-right: 78% 50%;
	--kv-position-end: 100% 50%;
	--kv-glow-hero: 76% 42%;
	--kv-glow-cta: 50% 100%;
	--kv-glow-reach: 62%;
	--kv-z-header: 20;
	--kv-alpha-0: 0;
	--kv-alpha-1: 1;
	--kv-alpha-disabled: .55;

	/* Hero stage proportions (percentages of the stage width) */
	--kv-stage-max: 46rem;
	--kv-stage-type: 27%;
	--kv-stage-palette: 27%;
	--kv-stage-motion: 36%;
	--kv-stage-layers: 13%;
	--kv-stage-browser: 66%;
	--kv-stage-phone: 24%;
	--kv-stage-browser-duo: 74%;
	--kv-stage-phone-duo: 26%;
	--kv-stage-overlap: -5%;
	--kv-stage-drop: 9%;
	--kv-stage-tuck: -3%;
	--kv-stage-lift-a: 5%;
	--kv-stage-lift-b: 9%;
	--kv-stage-inset: 2%;

	/* Motion */
	--kv-ease: cubic-bezier(.2, .65, .2, 1);
	--kv-duration-hover: .28s;
	--kv-duration-reveal: .8s;
	--kv-duration-enter: .9s;
	--kv-duration-glow: 1.4s;
	--kv-duration-parallax: .6s;
	--kv-duration-float-a: 7s;
	--kv-duration-float-b: 9s;
	--kv-duration-float-c: 11s;
	--kv-duration-wave: 16s;
	--kv-duration-pulse: 3.4s;
	--kv-duration-swap: 15s;
	--kv-duration-spin: 90s;
	--kv-duration-spin-back: 120s;
	--kv-reel-duration: 8s;
	--kv-reel-step: .18s;
	--kv-delay-0: 0s;
	--kv-delay-1: .12s;
	--kv-delay-2: .24s;
	--kv-delay-3: .36s;
	--kv-delay-4: .48s;
	--kv-delay-browser: .55s;
	--kv-delay-stagger: .14s;
	--kv-delay-glow: 1.3s;
	--kv-delay-ambient: 2s;
	--kv-delay-pulse: 1.2s;
	--kv-shift-enter: 1.25rem;
	--kv-shift-enter-negative: -1.25rem;
	--kv-shift-hover: -.25rem;
	--kv-shift-float: -.45rem;
	--kv-shift-float-down: .4rem;
	--kv-shift-layer: -3px;
	--kv-shift-seq: 26px;
	--kv-shift-seq-negative: -26px;
	--kv-shift-seq-slide: -70px;
	--kv-wave-shift: -400px;
	--kv-tilt: -1deg;
	--kv-scale-pulse: 1.3;
	--kv-scale-0: 0;
	--kv-scale-1: 1;
	--kv-progress-rest: .4;
	--kv-turn: 360deg;
	--kv-menu-shift: .4375rem;
	--kv-menu-shift-negative: -.4375rem;
	--kv-menu-turn: 45deg;
	--kv-menu-turn-negative: -45deg;
	--kv-parallax-a: .3rem;
	--kv-parallax-b: .65rem;
	--kv-parallax-c: 1.1rem;
	--kv-px: 0;
	--kv-py: 0;
}

/* -----------------------------------------------------------------------------
   Base
----------------------------------------------------------------------------- */

:root body {
	background: var(--kv-charcoal);
	color: var(--kv-white);
	font-family: var(--kv-font-body);
	font-size: var(--kv-text-base);
	line-height: var(--kv-leading-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:root [class*="kv-"] {
	box-sizing: border-box;
}

:root .wp-site-blocks > * {
	margin-block-start: var(--kv-space-0);
}

:root a:focus-visible,
:root button:focus-visible,
:root .kv-input:focus-visible,
:root .kv-check-box:focus-visible {
	outline: var(--kv-line-accent) solid var(--kv-orange-soft);
	outline-offset: var(--kv-space-1);
}

/* -----------------------------------------------------------------------------
   Header (one sticky bar, shared template part)
----------------------------------------------------------------------------- */

:root header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, var(--kv-space-0));
	z-index: var(--kv-z-header);
	background: var(--kv-charcoal);
	border-bottom: var(--kv-border);
}

:root .kv-header {
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kv-space-3) var(--kv-space-6);
	max-width: var(--kv-container);
	margin-inline: auto;
	padding: var(--kv-space-3) var(--kv-gutter);
}

:root .kv-logo {
	flex: 0 0 auto;
	margin: var(--kv-space-0);
	line-height: var(--kv-space-0);
}

:root .kv-logo img {
	display: block;
	width: var(--kv-logo-width);
	height: auto;
}

:root .kv-header-menu {
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--kv-space-3) var(--kv-space-6);
}

:root .kv-nav,
:root .kv-nav .wp-block-navigation__container {
	gap: var(--kv-space-2) var(--kv-space-6);
}

:root .kv-nav .wp-block-navigation-item__content {
	padding: var(--kv-space-2) var(--kv-space-0);
	border-bottom: var(--kv-line-accent) solid var(--kv-transparent);
	color: var(--kv-grey);
	font-size: var(--kv-text-sm);
	font-weight: var(--kv-weight-medium);
	text-decoration: none;
	transition: color var(--kv-duration-hover) var(--kv-ease), border-color var(--kv-duration-hover) var(--kv-ease);
}

:root .kv-nav .wp-block-navigation-item__content:hover,
:root .kv-nav .wp-block-navigation-item__content[aria-current="page"],
:root .kv-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--kv-white);
	border-bottom-color: var(--kv-orange);
}

:root .kv-header-cta {
	flex: 0 0 auto;
}

:root .kv-menu-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--kv-space-1);
	width: var(--kv-tap);
	height: var(--kv-tap);
	padding: var(--kv-space-0);
	border: var(--kv-border-strong);
	border-radius: var(--kv-radius-s);
	background: var(--kv-transparent);
	color: var(--kv-white);
	cursor: pointer;
}

:root .kv-menu-bar {
	display: block;
	width: var(--kv-menu-bar);
	height: var(--kv-line-accent);
	border-radius: var(--kv-radius-pill);
	background: var(--kv-white);
	transition: transform var(--kv-duration-hover) var(--kv-ease), opacity var(--kv-duration-hover) var(--kv-ease);
}

/* -----------------------------------------------------------------------------
   Page structure
----------------------------------------------------------------------------- */

:root .kv-main {
	flex-direction: column;
	align-items: stretch;
	gap: var(--kv-space-0);
}

:root .kv-section {
	flex-direction: column;
	align-items: center;
	gap: var(--kv-space-0);
	padding: var(--kv-section) var(--kv-gutter);
	overflow-x: clip;
}

:root .kv-section-alt {
	background: var(--kv-graphite);
}

:root .kv-section-tight {
	padding-block: var(--kv-space-7) var(--kv-space-0);
}

:root .kv-wrap {
	flex-direction: column;
	align-items: stretch;
	gap: var(--kv-space-8);
	width: var(--kv-full);
	max-width: var(--kv-container);
}

:root .kv-head {
	align-items: flex-start;
	gap: var(--kv-space-4);
	max-width: var(--kv-measure-wide);
}

/* -----------------------------------------------------------------------------
   Type
----------------------------------------------------------------------------- */

:root .kv-eyebrow {
	margin: var(--kv-space-0);
	color: var(--kv-orange);
	font-size: var(--kv-text-xs);
	font-weight: var(--kv-weight-semibold);
	letter-spacing: var(--kv-tracking-wide);
	line-height: var(--kv-leading-head);
	text-transform: uppercase;
}

:root .kv-hero-title,
:root .kv-intro-title,
:root .kv-title,
:root .kv-word-title,
:root .kv-card-title {
	margin: var(--kv-space-0);
	color: var(--kv-white);
	font-family: var(--kv-font-display);
	font-weight: var(--kv-weight-bold);
	letter-spacing: var(--kv-tracking-tight);
	line-height: var(--kv-leading-head);
	text-wrap: balance;
}

:root .kv-hero-title {
	font-size: var(--kv-text-h1);
	line-height: var(--kv-leading-tight);
}

:root .kv-intro-title {
	font-size: var(--kv-text-page);
}

:root .kv-title,
:root .kv-word-title {
	font-size: var(--kv-text-h2);
}

:root .kv-card-title {
	font-size: var(--kv-text-h3);
}

:root .kv-lead {
	max-width: var(--kv-measure);
	margin: var(--kv-space-0);
	color: var(--kv-white);
	font-size: var(--kv-text-lead);
	line-height: var(--kv-leading-body);
}

:root .kv-copy {
	max-width: var(--kv-measure);
	margin: var(--kv-space-0);
	color: var(--kv-grey);
}

:root .kv-note {
	margin: var(--kv-space-0);
	color: var(--kv-grey-dim);
	font-size: var(--kv-text-sm);
}

:root .kv-label-title {
	margin: var(--kv-space-0);
	color: var(--kv-grey);
	font-family: var(--kv-font-body);
	font-size: var(--kv-text-xs);
	font-weight: var(--kv-weight-semibold);
	letter-spacing: var(--kv-tracking-wide);
	text-transform: uppercase;
}

:root .kv-link {
	margin: var(--kv-space-0);
	font-size: var(--kv-text-sm);
	font-weight: var(--kv-weight-semibold);
}

:root .kv-link a {
	padding-bottom: var(--kv-space-1);
	border-bottom: var(--kv-line-accent) solid var(--kv-orange);
	color: var(--kv-white);
	text-decoration: none;
	transition: color var(--kv-duration-hover) var(--kv-ease);
}

:root .kv-link a:hover {
	color: var(--kv-orange-soft);
}

:root .kv-chip {
	display: inline-flex;
	align-self: flex-start;
	margin: var(--kv-space-0);
	padding: var(--kv-space-1) var(--kv-space-3);
	border: var(--kv-border-strong);
	border-radius: var(--kv-radius-pill);
	background: var(--kv-charcoal);
	color: var(--kv-grey);
	font-size: var(--kv-text-xs);
	font-weight: var(--kv-weight-semibold);
	letter-spacing: var(--kv-tracking-wide);
	line-height: var(--kv-leading-body);
	text-transform: uppercase;
}

:root .kv-chip-accent {
	border-color: var(--kv-orange);
	background: var(--kv-orange);
	color: var(--kv-charcoal);
}

:root .kv-disclaimer {
	align-self: flex-start;
	max-width: var(--kv-measure-wide);
	margin: var(--kv-space-0);
	padding: var(--kv-space-3) var(--kv-space-4);
	border: var(--kv-border);
	border-radius: var(--kv-radius-s);
	background: var(--kv-graphite);
	color: var(--kv-grey);
	font-size: var(--kv-text-sm);
}

:root .kv-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kv-space-2);
	margin: var(--kv-space-0);
	padding: var(--kv-space-0);
	list-style: none;
}

:root .kv-tags li {
	padding: var(--kv-space-2) var(--kv-space-4);
	border: var(--kv-border);
	border-radius: var(--kv-radius-pill);
	background: var(--kv-graphite-light);
	color: var(--kv-white);
	font-size: var(--kv-text-sm);
	line-height: var(--kv-leading-head);
}

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

:root .kv-actions {
	flex-wrap: wrap;
	gap: var(--kv-space-3);
}

:root .kv-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--kv-tap);
	padding: var(--kv-space-2) var(--kv-space-6);
	border: var(--kv-line) solid var(--kv-orange);
	border-radius: var(--kv-radius-pill);
	background: var(--kv-orange);
	color: var(--kv-charcoal);
	font-size: var(--kv-text-base);
	font-weight: var(--kv-weight-semibold);
	line-height: var(--kv-leading-head);
	text-decoration: none;
	transition: transform var(--kv-duration-hover) var(--kv-ease), background-color var(--kv-duration-hover) var(--kv-ease), border-color var(--kv-duration-hover) var(--kv-ease);
}

:root .kv-button .wp-block-button__link:hover {
	border-color: var(--kv-orange-soft);
	background: var(--kv-orange-soft);
	transform: translateY(var(--kv-shift-hover));
}

:root .kv-button-ghost .wp-block-button__link {
	border-color: var(--kv-stroke-strong);
	background: var(--kv-transparent);
	color: var(--kv-white);
}

:root .kv-button-ghost .wp-block-button__link:hover {
	border-color: var(--kv-orange);
	background: var(--kv-transparent);
}

:root .kv-button-small .wp-block-button__link {
	min-height: var(--kv-tap-small);
	padding: var(--kv-space-2) var(--kv-space-5);
	font-size: var(--kv-text-sm);
}

/* -----------------------------------------------------------------------------
   Hero and page intros
----------------------------------------------------------------------------- */

:root .kv-hero {
	padding-block: var(--kv-hero-pad);
	background-image: radial-gradient(ellipse at var(--kv-glow-hero), var(--kv-orange-tint), var(--kv-transparent) var(--kv-glow-reach));
}

:root .kv-hero-inner,
:root .kv-intro-inner {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kv-space-7);
}

:root .kv-hero-copy {
	flex: 1 1 var(--kv-col-copy);
	align-items: flex-start;
	gap: var(--kv-space-5);
	min-width: var(--kv-space-0);
}

:root .kv-hero-art {
	flex: 1.4 1 var(--kv-col-art);
	align-items: stretch;
	min-width: var(--kv-space-0);
}

:root .kv-intro {
	padding-block: var(--kv-hero-pad) var(--kv-section);
	background-image: radial-gradient(ellipse at var(--kv-glow-hero), var(--kv-orange-tint), var(--kv-transparent) var(--kv-glow-reach));
}

:root .kv-intro-copy {
	flex: 1.6 1 var(--kv-col-art);
	align-items: flex-start;
	gap: var(--kv-space-5);
	min-width: var(--kv-space-0);
}

:root .kv-intro-art {
	flex: 1 1 var(--kv-col-orbit);
	align-items: stretch;
	min-width: var(--kv-space-0);
}

:root .kv-hero-copy > *,
:root .kv-intro-copy > * {
	animation: kv-rise var(--kv-duration-enter) var(--kv-ease) both;
}

:root .kv-hero-copy > :nth-child(2),
:root .kv-intro-copy > :nth-child(2) {
	animation-delay: var(--kv-delay-1);
}

:root .kv-hero-copy > :nth-child(3),
:root .kv-intro-copy > :nth-child(3) {
	animation-delay: var(--kv-delay-2);
}

:root .kv-hero-copy > :nth-child(4),
:root .kv-intro-copy > :nth-child(4) {
	animation-delay: var(--kv-delay-3);
}

:root .kv-hero-copy > :nth-child(5),
:root .kv-intro-copy > :nth-child(5) {
	animation-delay: var(--kv-delay-4);
}

:root .kv-prose {
	gap: var(--kv-space-5);
	max-width: var(--kv-measure-wide);
}

/* -----------------------------------------------------------------------------
   Two-column splits
----------------------------------------------------------------------------- */

:root .kv-split {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--kv-space-7) var(--kv-space-8);
}

:root .kv-split-wide {
	align-items: center;
}

:root .kv-split-flip {
	flex-direction: row-reverse;
}

:root .kv-split-copy {
	flex: 1 1 var(--kv-col-copy);
	align-items: flex-start;
	gap: var(--kv-space-5);
	min-width: var(--kv-space-0);
}

:root .kv-split-art {
	flex: 1.2 1 var(--kv-col-copy);
	align-items: stretch;
	gap: var(--kv-space-4);
	min-width: var(--kv-space-0);
}

:root .kv-extra {
	align-items: stretch;
}

:root .kv-reels {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--kv-space-6);
}

:root .kv-reels > .kv-visual {
	flex: 1 1 var(--kv-col-copy);
}

:root .kv-videos {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: var(--kv-space-6);
}

:root .kv-video {
	min-width: var(--kv-space-0);
	margin: var(--kv-space-0);
}

:root .kv-video-wide {
	flex: var(--kv-video-wide-grow) 1 var(--kv-space-0);
	min-width: min(var(--kv-col-copy), var(--kv-full));
}

:root .kv-video-tall {
	flex: 1 1 var(--kv-space-0);
	min-width: var(--kv-video-tall-min);
	max-width: var(--kv-video-tall-max);
}

:root .kv-video video {
	display: block;
	width: var(--kv-full);
	height: auto;
	aspect-ratio: var(--kv-ratio-wide);
	border: var(--kv-border);
	border-radius: var(--kv-radius-m);
	background: var(--kv-graphite);
}

:root .kv-video-tall video {
	aspect-ratio: var(--kv-ratio-tall);
}

:root .kv-video figcaption {
	margin: var(--kv-space-3) var(--kv-space-0) var(--kv-space-0);
	color: var(--kv-grey-dim);
	font-size: var(--kv-text-sm);
}

/* -----------------------------------------------------------------------------
   Cards, points and steps
----------------------------------------------------------------------------- */

:root .kv-cards,
:root .kv-steps {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--kv-space-5);
}

:root .kv-service-card,
:root .kv-concept-card {
	flex: 1 1 var(--kv-card-min);
	align-items: flex-start;
	gap: var(--kv-space-4);
	min-width: var(--kv-space-0);
	border: var(--kv-border);
	border-radius: var(--kv-radius-m);
	background: var(--kv-graphite);
	transition: transform var(--kv-duration-hover) var(--kv-ease), border-color var(--kv-duration-hover) var(--kv-ease);
}

:root .kv-service-card {
	padding: var(--kv-space-6);
}

:root .kv-service-card:hover,
:root .kv-concept-card:hover {
	border-color: var(--kv-orange-line);
	transform: translateY(var(--kv-shift-hover));
}

:root .kv-service-card > .kv-visual {
	flex: 0 0 auto;
	width: var(--kv-icon);
}

:root .kv-concept-card {
	gap: var(--kv-space-3);
	padding-bottom: var(--kv-space-6);
	overflow: hidden;
}

:root .kv-concept-card > * {
	margin-inline: var(--kv-space-5);
}

:root .kv-concept-card > .kv-thumb {
	align-self: stretch;
	margin: var(--kv-space-0) var(--kv-space-0) var(--kv-space-2);
}

:root .kv-thumb img {
	display: block;
	width: var(--kv-full);
	height: auto;
	aspect-ratio: var(--kv-ratio-thumb);
	object-fit: cover;
}

:root .kv-thumb-right img {
	object-position: var(--kv-position-right);
}

:root .kv-thumb-end img {
	object-position: var(--kv-position-end);
}

:root .kv-point,
:root .kv-step {
	flex: 1 1 var(--kv-card-min);
	align-items: flex-start;
	gap: var(--kv-space-3);
	min-width: var(--kv-space-0);
	padding-top: var(--kv-space-5);
	border-top: var(--kv-line-accent) solid var(--kv-stroke);
}

:root .kv-step-num {
	margin: var(--kv-space-0);
	color: var(--kv-orange);
	font-family: var(--kv-font-display);
	font-size: var(--kv-text-h3);
	font-weight: var(--kv-weight-bold);
	line-height: var(--kv-leading-head);
}

:root .kv-figure {
	width: var(--kv-full);
	margin: var(--kv-space-0);
}

:root .kv-figure img {
	display: block;
	width: var(--kv-full);
	height: auto;
	border: var(--kv-border);
	border-radius: var(--kv-radius-m);
}

:root .kv-figure figcaption {
	margin: var(--kv-space-3) var(--kv-space-0) var(--kv-space-0);
	color: var(--kv-grey-dim);
	font-size: var(--kv-text-sm);
}

/* -----------------------------------------------------------------------------
   Final call to action
----------------------------------------------------------------------------- */

:root .kv-cta {
	gap: var(--kv-space-7);
	padding-bottom: var(--kv-space-0);
	background-image: radial-gradient(ellipse at var(--kv-glow-cta), var(--kv-orange-tint), var(--kv-transparent) var(--kv-glow-reach));
}

:root .kv-cta-inner {
	align-items: center;
	gap: var(--kv-space-5);
	text-align: center;
}

:root .kv-cta-inner .kv-actions {
	justify-content: center;
}

:root .kv-cta > .kv-visual {
	align-self: stretch;
	width: auto;
	margin-inline: var(--kv-gutter-negative);
}

/* -----------------------------------------------------------------------------
   Footer (shared template part)
----------------------------------------------------------------------------- */

:root .kv-footer {
	align-items: center;
	gap: var(--kv-space-7);
	padding: var(--kv-space-8) var(--kv-gutter) var(--kv-space-6);
	border-top: var(--kv-border);
	background: var(--kv-graphite);
}

:root .kv-footer-top {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--kv-space-7);
}

:root .kv-footer-brand {
	flex: 1.6 1 var(--kv-card-min);
	align-items: flex-start;
	gap: var(--kv-space-2);
}

:root .kv-footer-tagline {
	margin: var(--kv-space-4) var(--kv-space-0) var(--kv-space-0);
	color: var(--kv-white);
	font-family: var(--kv-font-display);
	font-size: var(--kv-text-lead);
	font-weight: var(--kv-weight-medium);
}

:root .kv-footer-col {
	flex: 1 1 var(--kv-col-foot);
	align-items: flex-start;
	gap: var(--kv-space-4);
}

:root .kv-footer-title {
	margin: var(--kv-space-0);
	color: var(--kv-grey);
	font-family: var(--kv-font-body);
	font-size: var(--kv-text-xs);
	font-weight: var(--kv-weight-semibold);
	letter-spacing: var(--kv-tracking-wide);
	text-transform: uppercase;
}

:root .kv-footer-list {
	display: flex;
	flex-direction: column;
	gap: var(--kv-space-2);
	margin: var(--kv-space-0);
	padding: var(--kv-space-0);
	list-style: none;
}

:root .kv-footer-list a {
	color: var(--kv-white);
	font-size: var(--kv-text-sm);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color var(--kv-duration-hover) var(--kv-ease);
}

:root .kv-footer-list a:hover {
	color: var(--kv-orange);
}

:root .kv-footer-base {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--kv-space-3);
	padding-top: var(--kv-space-5);
	border-top: var(--kv-border);
}

/* -----------------------------------------------------------------------------
   Contact
----------------------------------------------------------------------------- */

:root .kv-contact-list {
	align-self: stretch;
	gap: var(--kv-space-0);
	margin-top: var(--kv-space-3);
	border-top: var(--kv-border);
}

:root .kv-contact-item {
	align-items: flex-start;
	gap: var(--kv-space-1);
	padding: var(--kv-space-4) var(--kv-space-0);
	border-bottom: var(--kv-border);
}

:root .kv-contact-label {
	margin: var(--kv-space-0);
	color: var(--kv-grey-dim);
	font-size: var(--kv-text-xs);
	font-weight: var(--kv-weight-semibold);
	letter-spacing: var(--kv-tracking-wide);
	text-transform: uppercase;
}

:root .kv-contact-value {
	margin: var(--kv-space-0);
	color: var(--kv-white);
	font-family: var(--kv-font-display);
	font-size: var(--kv-text-lead);
	font-weight: var(--kv-weight-medium);
	overflow-wrap: anywhere;
}

:root .kv-contact-value a {
	color: var(--kv-white);
	text-decoration: none;
	transition: color var(--kv-duration-hover) var(--kv-ease);
}

:root .kv-contact-value a:hover {
	color: var(--kv-orange);
}

.kv-form {
	display: flex;
	flex-direction: column;
	gap: var(--kv-space-5);
	margin: var(--kv-space-0);
	padding: var(--kv-form-pad);
	border: var(--kv-border);
	border-radius: var(--kv-radius-l);
	background: var(--kv-graphite);
}

.kv-form-note {
	margin: var(--kv-space-0);
	padding: var(--kv-space-3) var(--kv-space-4);
	border: var(--kv-line) solid var(--kv-orange-line);
	border-radius: var(--kv-radius-s);
	background: var(--kv-orange-tint);
	color: var(--kv-white);
	font-size: var(--kv-text-sm);
}

.kv-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kv-space-5);
}

.kv-field {
	display: flex;
	flex: 1 1 var(--kv-field-min);
	flex-direction: column;
	gap: var(--kv-space-2);
	min-width: var(--kv-space-0);
}

.kv-label {
	color: var(--kv-grey);
	font-size: var(--kv-text-sm);
	font-weight: var(--kv-weight-medium);
}

.kv-input {
	width: var(--kv-full);
	min-height: var(--kv-tap);
	padding: var(--kv-space-3) var(--kv-space-4);
	border: var(--kv-border-strong);
	border-radius: var(--kv-radius-s);
	background: var(--kv-charcoal);
	color: var(--kv-white);
	font-family: var(--kv-font-body);
	font-size: var(--kv-text-base);
	line-height: var(--kv-leading-head);
}

.kv-input-area {
	line-height: var(--kv-leading-body);
	resize: vertical;
}

.kv-check {
	display: flex;
	align-items: flex-start;
	gap: var(--kv-space-3);
}

.kv-check-box {
	flex: 0 0 auto;
	width: var(--kv-check);
	height: var(--kv-check);
	margin: var(--kv-space-1) var(--kv-space-0) var(--kv-space-0);
	accent-color: var(--kv-orange);
}

.kv-check-label {
	color: var(--kv-grey);
	font-size: var(--kv-text-sm);
}

.kv-form-button {
	align-self: flex-start;
	min-height: var(--kv-tap);
	padding: var(--kv-space-2) var(--kv-space-6);
	border: var(--kv-line) solid var(--kv-orange);
	border-radius: var(--kv-radius-pill);
	background: var(--kv-orange);
	color: var(--kv-charcoal);
	font-family: var(--kv-font-body);
	font-size: var(--kv-text-base);
	font-weight: var(--kv-weight-semibold);
	opacity: var(--kv-alpha-disabled);
	cursor: not-allowed;
}

.kv-form-help {
	margin: var(--kv-space-0);
	color: var(--kv-grey-dim);
	font-size: var(--kv-text-sm);
}

.kv-form-help a {
	color: var(--kv-white);
}

/* -----------------------------------------------------------------------------
   Visuals: shared SVG paint (inline SVG reuses the :root colour tokens)
----------------------------------------------------------------------------- */

:root .kv-visual {
	width: var(--kv-full);
	min-width: var(--kv-space-0);
}

.kv-f-orange { fill: var(--kv-orange); }
.kv-f-soft { fill: var(--kv-orange-soft); }
.kv-f-white { fill: var(--kv-white); }
.kv-f-grey { fill: var(--kv-grey); }
.kv-f-dim { fill: var(--kv-grey-dim); }
.kv-f-strong { fill: var(--kv-stroke-strong); }
.kv-f-panel { fill: var(--kv-graphite-light); }
.kv-f-graphite { fill: var(--kv-graphite); }
.kv-f-charcoal { fill: var(--kv-charcoal); }
.kv-f-paper { fill: var(--kv-paper); }
.kv-s-orange { stroke: var(--kv-orange); }
.kv-s-soft { stroke: var(--kv-orange-soft); }
.kv-s-white { stroke: var(--kv-white); }
.kv-s-grey { stroke: var(--kv-grey); }
.kv-s-strong { stroke: var(--kv-stroke-strong); }
.kv-s-line { stroke: var(--kv-stroke); }
.kv-stop { stop-color: var(--kv-white); }
.kv-t-display { font-family: var(--kv-font-display); font-weight: var(--kv-weight-bold); }
.kv-t-body { font-family: var(--kv-font-body); }

/* -----------------------------------------------------------------------------
   Visuals: hero stage. Normal document flow only: nested flex rows, percentage
   widths, negative margins for overlap and transforms for movement.
----------------------------------------------------------------------------- */

.kv-stage {
	display: flex;
	flex-direction: column-reverse;
	width: var(--kv-full);
	max-width: var(--kv-stage-max);
	margin-inline: auto;
	padding-block: var(--kv-space-4);
}

.kv-stage-top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: var(--kv-stage-tuck);
	padding-inline: var(--kv-stage-inset);
}

.kv-stage-main {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
}

.kv-stage-sky,
.kv-stage-ground {
	flex: 0 0 var(--kv-full);
	height: var(--kv-space-0);
}

.kv-sky-art,
.kv-ground-art {
	display: block;
	width: var(--kv-full);
	height: auto;
	overflow: visible;
}

.kv-piece {
	min-width: var(--kv-space-0);
}

.kv-piece-type {
	flex: 0 0 var(--kv-stage-type);
	margin-bottom: var(--kv-stage-lift-a);
}

.kv-piece-palette {
	flex: 0 0 var(--kv-stage-palette);
	margin-bottom: var(--kv-stage-lift-b);
}

.kv-piece-motion {
	flex: 0 0 var(--kv-stage-motion);
}

.kv-piece-layers {
	flex: 0 0 var(--kv-stage-layers);
	align-self: flex-end;
	margin-bottom: var(--kv-stage-lift-a);
}

.kv-piece-browser {
	flex: 0 0 var(--kv-stage-browser);
}

.kv-piece-phone {
	flex: 0 0 var(--kv-stage-phone);
	margin-top: var(--kv-stage-drop);
	margin-left: var(--kv-stage-overlap);
}

.kv-stage-duo .kv-piece-browser {
	flex-basis: var(--kv-stage-browser-duo);
}

.kv-stage-duo .kv-piece-phone {
	flex-basis: var(--kv-stage-phone-duo);
}

.kv-card {
	display: block;
	width: var(--kv-full);
	height: auto;
	transition: transform var(--kv-duration-hover) var(--kv-ease);
}

.kv-card:hover {
	transform: translateY(var(--kv-shift-hover)) rotate(var(--kv-tilt));
}

/* Cursor parallax: three depths, driven by --kv-px and --kv-py (-1 to 1). */
.kv-depth-a,
.kv-depth-b,
.kv-depth-c {
	transition: transform var(--kv-duration-parallax) var(--kv-ease);
}

.kv-depth-a {
	transform: translate3d(calc(var(--kv-px) * var(--kv-parallax-a)), calc(var(--kv-py) * var(--kv-parallax-a)), 0);
}

.kv-depth-b {
	transform: translate3d(calc(var(--kv-px) * var(--kv-parallax-b)), calc(var(--kv-py) * var(--kv-parallax-b)), 0);
}

.kv-depth-c {
	transform: translate3d(calc(var(--kv-px) * var(--kv-parallax-c)), calc(var(--kv-py) * var(--kv-parallax-c)), 0);
}

/* Entrance, then ambient float. Separate wrappers so the transforms never fight. */
.kv-enter {
	animation: kv-rise var(--kv-duration-enter) var(--kv-ease) both;
}

.kv-enter-1 { animation-delay: var(--kv-delay-browser); }
.kv-enter-2 { animation-delay: calc(var(--kv-delay-browser) + var(--kv-delay-stagger) * 2); }
.kv-enter-3 { animation-delay: calc(var(--kv-delay-browser) + var(--kv-delay-stagger) * 3); }
.kv-enter-4 { animation-delay: calc(var(--kv-delay-browser) + var(--kv-delay-stagger) * 4); }
.kv-enter-5 { animation-delay: calc(var(--kv-delay-browser) + var(--kv-delay-stagger) * 5); }
.kv-enter-6 { animation-delay: calc(var(--kv-delay-browser) + var(--kv-delay-stagger) * 6); }

.kv-float {
	animation: kv-float var(--kv-duration-float-a) ease-in-out var(--kv-delay-ambient) infinite alternate;
}

.kv-float-b {
	animation-name: kv-float-down;
	animation-duration: var(--kv-duration-float-b);
}

.kv-float-c {
	animation-duration: var(--kv-duration-float-c);
}

.kv-glow {
	animation: kv-fade var(--kv-duration-glow) var(--kv-ease) var(--kv-delay-glow) both;
}

.kv-drift {
	animation: kv-drift var(--kv-duration-wave) linear infinite;
}

.kv-pulse {
	transform-box: fill-box;
	transform-origin: center;
	animation: kv-pulse var(--kv-duration-pulse) ease-in-out infinite;
}

.kv-pulse-late {
	animation-delay: var(--kv-delay-pulse);
}

/* Browser mockup: two layouts take turns, and the three cards highlight in sequence. */
.kv-swap-a {
	animation: kv-swap-a var(--kv-duration-swap) var(--kv-ease) var(--kv-delay-ambient) infinite;
}

.kv-swap-b {
	opacity: var(--kv-alpha-0);
	animation: kv-swap-b var(--kv-duration-swap) var(--kv-ease) var(--kv-delay-ambient) infinite;
}

.kv-hl {
	opacity: var(--kv-alpha-0);
	animation: kv-highlight var(--kv-duration-swap) ease-in-out var(--kv-delay-ambient) infinite;
}

.kv-hl-2 {
	animation-delay: calc(var(--kv-delay-ambient) + var(--kv-duration-swap) / 3);
}

.kv-hl-3 {
	animation-delay: calc(var(--kv-delay-ambient) + var(--kv-duration-swap) * 2 / 3);
}

.kv-progress,
.kv-reel-progress {
	transform: scaleX(var(--kv-progress-rest));
	transform-origin: left center;
	animation: kv-progress var(--kv-reel-duration) linear infinite;
}

.kv-progress {
	transform-box: fill-box;
}

.kv-layer-1,
.kv-layer-2,
.kv-layer-3 {
	animation: kv-layer var(--kv-duration-float-a) ease-in-out infinite alternate;
}

.kv-layer-2 {
	animation-duration: var(--kv-duration-float-b);
}

.kv-layer-3 {
	animation-direction: alternate-reverse;
}

.kv-spin {
	transform-box: view-box;
	transform-origin: center;
	animation: kv-spin var(--kv-duration-spin) linear infinite;
}

.kv-spin-back {
	animation-duration: var(--kv-duration-spin-back);
	animation-direction: reverse;
}

.kv-seq-in {
	animation: kv-fade var(--kv-duration-enter) var(--kv-ease) both;
}

.kv-seq-in-1 { animation-delay: var(--kv-delay-2); }
.kv-seq-in-2 { animation-delay: var(--kv-delay-4); }
.kv-seq-in-3 { animation-delay: var(--kv-delay-browser); }

/* -----------------------------------------------------------------------------
   Visuals: brand kit, before and after, orbit, wave, icons
----------------------------------------------------------------------------- */

.kv-kit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--kv-space-4);
}

.kv-kit-item {
	min-width: var(--kv-space-0);
}

.kv-kit-type,
.kv-kit-palette {
	flex: 1 1 var(--kv-kit-wide);
	max-width: var(--kv-kit-wide-max);
}

.kv-kit-logo {
	flex: 1.5 1 var(--kv-kit-wide);
	max-width: var(--kv-kit-logo-max);
}

.kv-kit-layers,
.kv-kit-pen {
	flex: 1 1 var(--kv-kit-narrow);
	max-width: var(--kv-kit-narrow-max);
}

.kv-compare {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--kv-space-4);
}

.kv-compare-item {
	display: flex;
	flex: 1 1 var(--kv-compare-min);
	flex-direction: column;
	align-items: flex-start;
	gap: var(--kv-space-3);
	min-width: var(--kv-space-0);
}

.kv-compare-art {
	display: block;
	width: var(--kv-full);
	height: auto;
}

.kv-compare-arrow {
	flex: 0 0 var(--kv-arrow);
	width: var(--kv-arrow);
	height: auto;
}

.kv-orbit {
	display: flex;
	justify-content: center;
}

.kv-orbit-art {
	display: block;
	width: var(--kv-full);
	max-width: var(--kv-orbit-max);
	height: auto;
}

.kv-wave-band {
	display: flex;
	height: var(--kv-wave-height);
	overflow: hidden;
}

.kv-wave-art {
	display: block;
	flex: 1 1 auto;
	width: var(--kv-full);
	height: var(--kv-full);
}

.kv-icon {
	display: block;
	width: var(--kv-icon);
	height: var(--kv-icon);
	transition: transform var(--kv-duration-hover) var(--kv-ease);
}

:root .kv-service-card:hover .kv-icon {
	transform: translateY(var(--kv-shift-hover));
}

/* -----------------------------------------------------------------------------
   Visuals: motion reels. Live SVG and CSS animation with a working play and
   pause button. Every element loops on the same duration so the bar stays in sync.
----------------------------------------------------------------------------- */

.kv-reel {
	display: flex;
	flex-direction: column;
	margin: var(--kv-space-0);
	border: var(--kv-border);
	border-radius: var(--kv-radius-m);
	background: var(--kv-graphite);
	overflow: hidden;
}

.kv-reel-screen {
	display: flex;
}

.kv-reel-art {
	display: block;
	flex: 1 1 auto;
	width: var(--kv-full);
	height: auto;
}

.kv-reel-bar {
	display: flex;
	align-items: center;
	gap: var(--kv-space-4);
	padding: var(--kv-space-3) var(--kv-space-4);
	border-top: var(--kv-border);
}

.kv-reel-toggle {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--kv-tap);
	height: var(--kv-tap);
	padding: var(--kv-space-0);
	border: var(--kv-border-strong);
	border-radius: var(--kv-radius-pill);
	background: var(--kv-charcoal);
	color: var(--kv-white);
	cursor: pointer;
	transition: border-color var(--kv-duration-hover) var(--kv-ease);
}

:root.kv-js .kv-reel-toggle {
	display: inline-flex;
}

.kv-reel-toggle:hover {
	border-color: var(--kv-orange);
}

.kv-reel-icon {
	width: var(--kv-icon-small);
	height: var(--kv-icon-small);
	fill: currentColor;
}

.kv-reel-icon-play,
.kv-reel-paused .kv-reel-icon-pause {
	display: none;
}

.kv-reel-paused .kv-reel-icon-play {
	display: block;
}

.kv-reel-track {
	display: flex;
	flex: 1 1 auto;
	height: var(--kv-line-track);
	border-radius: var(--kv-radius-pill);
	background: var(--kv-stroke);
	overflow: hidden;
}

.kv-reel-progress {
	flex: 1 1 auto;
	background: var(--kv-orange);
}

.kv-reel-time {
	flex: 0 0 auto;
	color: var(--kv-grey);
	font-size: var(--kv-text-xs);
}

.kv-reel-caption {
	margin: var(--kv-space-0);
	padding: var(--kv-space-0) var(--kv-space-4) var(--kv-space-4);
	color: var(--kv-grey-dim);
	font-size: var(--kv-text-sm);
}

.kv-seq {
	animation-duration: var(--kv-reel-duration);
	animation-timing-function: var(--kv-ease);
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

.kv-seq-rise { animation-name: kv-seq-rise; }
.kv-seq-slide { animation-name: kv-seq-slide; }
.kv-seq-fade { animation-name: kv-seq-fade; }

.kv-seq-grow {
	transform-box: fill-box;
	transform-origin: left center;
	animation-name: kv-seq-grow;
}

.kv-seq-0 { animation-delay: var(--kv-delay-0); }
.kv-seq-1 { animation-delay: calc(var(--kv-reel-step) * 1); }
.kv-seq-2 { animation-delay: calc(var(--kv-reel-step) * 2); }
.kv-seq-3 { animation-delay: calc(var(--kv-reel-step) * 3); }
.kv-seq-4 { animation-delay: calc(var(--kv-reel-step) * 4); }
.kv-seq-5 { animation-delay: calc(var(--kv-reel-step) * 5); }
.kv-seq-6 { animation-delay: calc(var(--kv-reel-step) * 6); }
.kv-seq-7 { animation-delay: calc(var(--kv-reel-step) * 7); }
.kv-seq-8 { animation-delay: calc(var(--kv-reel-step) * 8); }
.kv-seq-9 { animation-delay: calc(var(--kv-reel-step) * 9); }

/* -----------------------------------------------------------------------------
   Scroll reveal (only when JavaScript is running)
----------------------------------------------------------------------------- */

:root.kv-js .kv-reveal {
	opacity: var(--kv-alpha-0);
	transform: translateY(var(--kv-shift-enter));
	transition: opacity var(--kv-duration-reveal) var(--kv-ease), transform var(--kv-duration-reveal) var(--kv-ease), border-color var(--kv-duration-hover) var(--kv-ease);
}

:root.kv-js .kv-reveal.kv-visible {
	opacity: var(--kv-alpha-1);
	transform: none;
}

:root.kv-js .kv-reveal.kv-visible:hover {
	transition-duration: var(--kv-duration-hover);
}

:root.kv-js .kv-service-card.kv-visible:hover,
:root.kv-js .kv-concept-card.kv-visible:hover {
	transform: translateY(var(--kv-shift-hover));
}

:root.kv-js .kv-cards > .kv-reveal:nth-child(2),
:root.kv-js .kv-steps > .kv-reveal:nth-child(2) {
	transition-delay: var(--kv-delay-1);
}

:root.kv-js .kv-cards > .kv-reveal:nth-child(3),
:root.kv-js .kv-steps > .kv-reveal:nth-child(3) {
	transition-delay: var(--kv-delay-2);
}

:root.kv-js .kv-cards > .kv-reveal:nth-child(4),
:root.kv-js .kv-steps > .kv-reveal:nth-child(4) {
	transition-delay: var(--kv-delay-3);
}

:root.kv-js .kv-cards > .kv-reveal:nth-child(5) {
	transition-delay: var(--kv-delay-4);
}

/* -----------------------------------------------------------------------------
   Motion states: paused offscreen, paused by the visitor, switched off
----------------------------------------------------------------------------- */

:root .kv-paused * {
	animation-play-state: paused;
}

:root .kv-reel-paused .kv-seq,
:root .kv-reel-paused .kv-drift,
:root .kv-reel-paused .kv-reel-progress {
	animation-play-state: paused;
}

:root .kv-reel-static .kv-seq,
:root .kv-reel-static .kv-drift,
:root .kv-reel-static .kv-reel-progress {
	animation: none;
}

:root .kv-motion-off [data-kv-motion]:not(.kv-reel-live) *,
:root .kv-motion-off .kv-hero-copy > *,
:root .kv-motion-off .kv-intro-copy > * {
	animation: none;
}

:root .kv-motion-off .kv-depth-a,
:root .kv-motion-off .kv-depth-b,
:root .kv-motion-off .kv-depth-c {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	:root [data-kv-motion]:not(.kv-reel-live) *,
	:root .kv-hero-copy > *,
	:root .kv-intro-copy > * {
		animation: none;
	}

	:root .kv-depth-a,
	:root .kv-depth-b,
	:root .kv-depth-c {
		transform: none;
	}

	:root.kv-js .kv-reveal,
	:root .kv-card,
	:root .kv-icon,
	:root .kv-service-card,
	:root .kv-concept-card,
	:root .kv-button .wp-block-button__link,
	:root .kv-menu-bar {
		transition: none;
	}

	:root.kv-js .kv-reveal {
		opacity: var(--kv-alpha-1);
		transform: none;
	}
}

/* -----------------------------------------------------------------------------
   Keyframes (transform and opacity only)
----------------------------------------------------------------------------- */

@keyframes kv-rise {
	from { opacity: var(--kv-alpha-0); transform: translateY(var(--kv-shift-enter)); }
	to { opacity: var(--kv-alpha-1); transform: translateY(var(--kv-space-0)); }
}

@keyframes kv-fade {
	from { opacity: var(--kv-alpha-0); }
	to { opacity: var(--kv-alpha-1); }
}

@keyframes kv-float {
	from { transform: translateY(var(--kv-space-0)); }
	to { transform: translateY(var(--kv-shift-float)); }
}

@keyframes kv-float-down {
	from { transform: translateY(var(--kv-space-0)); }
	to { transform: translateY(var(--kv-shift-float-down)); }
}

@keyframes kv-layer {
	from { transform: translateY(var(--kv-space-0)); }
	to { transform: translateY(var(--kv-shift-layer)); }
}

@keyframes kv-drift {
	from { transform: translateX(var(--kv-space-0)); }
	to { transform: translateX(var(--kv-wave-shift)); }
}

@keyframes kv-pulse {
	0%, 100% { opacity: var(--kv-alpha-disabled); transform: scale(var(--kv-scale-1)); }
	50% { opacity: var(--kv-alpha-1); transform: scale(var(--kv-scale-pulse)); }
}

@keyframes kv-spin {
	to { transform: rotate(var(--kv-turn)); }
}

@keyframes kv-swap-a {
	0%, 44% { opacity: var(--kv-alpha-1); }
	50%, 94% { opacity: var(--kv-alpha-0); }
	100% { opacity: var(--kv-alpha-1); }
}

@keyframes kv-swap-b {
	0%, 44% { opacity: var(--kv-alpha-0); }
	50%, 94% { opacity: var(--kv-alpha-1); }
	100% { opacity: var(--kv-alpha-0); }
}

@keyframes kv-highlight {
	0%, 30%, 100% { opacity: var(--kv-alpha-0); }
	6%, 24% { opacity: var(--kv-alpha-1); }
}

@keyframes kv-progress {
	from { transform: scaleX(var(--kv-scale-0)); }
	to { transform: scaleX(var(--kv-scale-1)); }
}

/* Reel elements: in, hold, out, then a hidden tail long enough to cover the stagger. */
@keyframes kv-seq-rise {
	0% { opacity: var(--kv-alpha-0); transform: translateY(var(--kv-shift-seq)); }
	8%, 70% { opacity: var(--kv-alpha-1); transform: translateY(var(--kv-space-0)); }
	77%, 100% { opacity: var(--kv-alpha-0); transform: translateY(var(--kv-shift-seq-negative)); }
}

@keyframes kv-seq-slide {
	0% { opacity: var(--kv-alpha-0); transform: translateX(var(--kv-shift-seq-slide)); }
	8%, 70% { opacity: var(--kv-alpha-1); transform: translateX(var(--kv-space-0)); }
	77%, 100% { opacity: var(--kv-alpha-0); transform: translateX(var(--kv-shift-seq)); }
}

@keyframes kv-seq-fade {
	0% { opacity: var(--kv-alpha-0); }
	8%, 70% { opacity: var(--kv-alpha-1); }
	77%, 100% { opacity: var(--kv-alpha-0); }
}

@keyframes kv-seq-grow {
	0% { opacity: var(--kv-alpha-1); transform: scaleX(var(--kv-scale-0)); }
	10%, 70% { opacity: var(--kv-alpha-1); transform: scaleX(var(--kv-scale-1)); }
	77%, 100% { opacity: var(--kv-alpha-0); transform: scaleX(var(--kv-scale-1)); }
}

/* -----------------------------------------------------------------------------
   Tablet and smaller: fewer floating pieces, navigation behind one menu button
----------------------------------------------------------------------------- */

@media (max-width: 61.99rem) {
	:root {
		--kv-stage-max: 38rem;
		--kv-stage-type: 34%;
		--kv-stage-palette: 34%;
		--kv-stage-browser: 72%;
		--kv-stage-phone: 26%;
		--kv-stage-lift-b: 3%;
	}

	.kv-piece-layers,
	.kv-piece-motion,
	:root .kv-intro-art > .kv-visual-orbit {
		display: none;
	}

	:root .kv-intro-inner {
		gap: var(--kv-space-5);
	}

	.kv-stage-top {
		justify-content: center;
		gap: var(--kv-space-5);
	}

	:root.kv-js .kv-menu-toggle {
		display: inline-flex;
	}

	:root.kv-js .kv-header-menu {
		display: none;
		flex: 1 0 var(--kv-full);
		flex-direction: column;
		align-items: stretch;
		gap: var(--kv-space-4);
		padding-block: var(--kv-space-3) var(--kv-space-4);
		border-top: var(--kv-border);
	}

	:root.kv-js .kv-header-open .kv-header-menu {
		display: flex;
	}

	:root.kv-js .kv-nav,
	:root.kv-js .kv-nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: var(--kv-space-0);
		width: var(--kv-full);
	}

	:root.kv-js .kv-nav .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		width: var(--kv-full);
		min-height: var(--kv-tap);
		border-bottom: var(--kv-border);
		color: var(--kv-white);
		font-size: var(--kv-text-base);
	}

	:root.kv-js .kv-nav .wp-block-navigation-item__content[aria-current="page"] {
		color: var(--kv-orange);
		border-bottom-color: var(--kv-stroke);
	}

	:root .kv-header-open .kv-menu-bar:nth-child(1) {
		transform: translateY(var(--kv-menu-shift)) rotate(var(--kv-menu-turn));
	}

	:root .kv-header-open .kv-menu-bar:nth-child(2) {
		opacity: var(--kv-alpha-0);
	}

	:root .kv-header-open .kv-menu-bar:nth-child(3) {
		transform: translateY(var(--kv-menu-shift-negative)) rotate(var(--kv-menu-turn-negative));
	}
}

/* -----------------------------------------------------------------------------
   Mobile: heading and buttons first, then one clean browser and phone
----------------------------------------------------------------------------- */

@media (max-width: 47.99rem) {
	:root {
		--kv-stage-browser: 76%;
		--kv-stage-phone: 28%;
		--kv-stage-overlap: -7%;
		--kv-text-lead: 1.125rem;
	}

	.kv-stage-top {
		display: none;
	}

	:root .kv-wrap {
		gap: var(--kv-space-7);
	}

	:root .kv-hero-inner,
	:root .kv-intro-inner {
		gap: var(--kv-space-6);
	}

	:root .kv-intro-art {
		flex-basis: var(--kv-full);
	}

	:root .kv-actions {
		align-self: stretch;
	}

	:root .kv-hero .kv-button,
	:root .kv-cta .kv-button {
		flex: 1 1 auto;
	}

	:root .kv-hero .kv-button .wp-block-button__link,
	:root .kv-cta .kv-button .wp-block-button__link {
		width: var(--kv-full);
	}

	.kv-compare-arrow {
		transform: rotate(calc(var(--kv-menu-turn) * 2));
	}
}