/**
 * CREATING V2 — theme stylesheet (F5 foundation).
 *
 * Tokens come from theme.json (--wp--preset--*, --wp--custom--*). This file only adds
 * what theme.json cannot express: layout shells, states, accessibility utilities,
 * content-flow rules and the decoration layer. Loaded on the frontend and in the editor.
 *
 * Source of truth: docs/design/F4_*.md (approved 2026-10-07).
 */

/* ---------------------------------------------------------------------------
 * 1. Aliases (short names for the tokens used most in this file)
 * ------------------------------------------------------------------------- */
:root {
	--cr-base: var(--wp--preset--color--base);
	--cr-surface: var(--wp--preset--color--surface);
	--cr-raised: var(--wp--preset--color--raised);
	--cr-text: var(--wp--preset--color--text);
	--cr-muted: var(--wp--preset--color--text-muted);
	--cr-subtle: var(--wp--custom--color--text-subtle);
	--cr-line: var(--wp--custom--color--line);
	--cr-gold: var(--wp--preset--color--gold);
	--cr-gold-light: var(--wp--custom--color--gold-light);
	--cr-violet: var(--wp--preset--color--violet);
	--cr-violet-deep: var(--wp--custom--color--violet-deep);
	--cr-violet-light: var(--wp--custom--color--violet-light);
	--cr-signal: var(--wp--preset--color--signal);
	--cr-on-gold: var(--wp--custom--color--on-gold);
	--cr-font-display: var(--wp--preset--font-family--display);
	--cr-font-mono: var(--wp--preset--font-family--mono);
	--cr-font-text: var(--wp--preset--font-family--text);
	--cr-gutter: var(--wp--custom--gutter);
	--cr-max: var(--wp--custom--max-width);
	--cr-header-h: 72px;
	--cr-notch: var(--wp--custom--radius--notch);
	--cr-dur-fast: var(--wp--custom--motion--fast);
	--cr-dur: var(--wp--custom--motion--base);
	--cr-ease: var(--wp--custom--motion--ease);
	--cr-focus: 3px solid var(--cr-gold);
}

/* ---------------------------------------------------------------------------
 * 2. Document
 * ------------------------------------------------------------------------- */
html {
	scroll-padding-top: calc(var(--cr-header-h) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	/* Brand texture: one small cached file, no inline/base64 payload (F4 DD-02). */
	background-color: var(--cr-base);
	background-image: url("../images/texture.webp");
	background-repeat: repeat;
	background-size: 256px 256px;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--cr-gold);
	color: var(--cr-on-gold);
}

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

.entry-content svg {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * 3. Accessibility utilities
 * ------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--cr-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 1px var(--cr-base);
}

.screen-reader-text,
.cr-sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Core skip link ("Pāriet uz saturu" on LV sites), visible on focus. */
.skip-link.screen-reader-text:focus {
	background: var(--cr-gold);
	color: var(--cr-on-gold);
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	left: 1rem;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 0.75rem);
	padding: 0.75rem 1.25rem;
	z-index: var(--wp--custom--z--skip);
	font-family: var(--cr-font-mono);
	font-weight: 600;
	text-decoration: none;
	outline: var(--cr-focus);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * 4. Typography rules not expressible in theme.json
 * ------------------------------------------------------------------------- */
h1,
h2,
.wp-block-post-title {
	/* Display face exists in one weight only: never synthesize bold/italic. */
	font-synthesis: none;
	text-wrap: balance;
	overflow-wrap: break-word;
}

:is(h1, h2) :is(strong, b, em, i) {
	font-weight: inherit;
	font-style: normal;
	color: var(--cr-gold-light);
}

/* Latvian hyphenation is unreliable: manual (soft hyphens) only. DE/FR/ES compounds may hyphenate. */
:lang(lv) :is(h1, h2, h3) {
	hyphens: manual;
}

:is(:lang(de), :lang(fr), :lang(es)) :is(h1, h2, h3) {
	hyphens: auto;
}

h3,
h4 {
	text-wrap: balance;
	overflow-wrap: break-word;
}

p,
li {
	text-wrap: pretty;
	overflow-wrap: break-word;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--cr-dur-fast) var(--cr-ease), text-decoration-thickness var(--cr-dur-fast) var(--cr-ease);
}

a:hover {
	text-decoration-thickness: 2px;
}

abbr[title] {
	text-decoration: underline dotted var(--cr-muted);
}

:not(pre) > code {
	background: var(--cr-surface);
	border: 1px solid var(--cr-line);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--cr-font-mono);
	font-size: 0.9em;
	padding: 0.1em 0.35em;
}

/* ---------------------------------------------------------------------------
 * 5. Header shell (sticky, F4 DD-20)
 * ------------------------------------------------------------------------- */
.cr-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: var(--wp--custom--z--sticky);
	background-color: rgba(15, 15, 18, 0.94);
	border-bottom: 1px solid var(--cr-line);
}

.cr-header__inner {
	box-sizing: border-box;
	gap: 1rem;
	margin-inline: auto;
	max-width: var(--cr-max);
	min-height: var(--cr-header-h);
	padding: 0.5rem var(--cr-gutter);
}

.cr-header__actions {
	gap: 1rem;
}

/* Compact header after scrolling — CSS scroll-driven animation, no JS; skipped with reduced motion. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.cr-header__inner {
			animation: cr-header-compact linear both;
			animation-timeline: scroll(root);
			animation-range: 0 160px;
		}
	}
}

@keyframes cr-header-compact {
	to {
		min-height: 60px;
		padding-block: 0.25rem;
	}
}

/* Logo (SVG integration point or text fallback — inc/blocks.php). */
.cr-logo__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

/* Core ".wp-block-site-logo a { display: inline-block; line-height: 0 }" otherwise wins and
 * the text logo sits ~12 px above the header's centre line (found in the F7 LocalWP check). */
.cr-logo .cr-logo__link {
	display: inline-flex;
}

.cr-logo__text {
	color: var(--cr-gold);
	font-family: var(--cr-font-display);
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
	line-height: 1;
	white-space: nowrap;
}

/* The logo never shrinks in the header's flex row; two classes beat core's
 * ".wp-block-site-logo img { height: auto; max-width: 100% }" (else it collapses to 0 × 0). */
.wp-block-site-logo.cr-logo {
	flex: none;
}

.cr-logo .cr-logo__img {
	display: block;
	height: 46px;
	max-height: none;
	/* Browser zoom on a very narrow window (< 320 CSS px): the logo scales down inside its box so the menu
	   button stays on screen (TXT200-01). Never reached at 320 px and wider. */
	max-width: calc(100vw - 2 * var(--cr-gutter) - 4.5rem);
	object-fit: contain;
	object-position: left center;
	width: auto;
}

@media (max-width: 37.49875em) {
	.cr-logo .cr-logo__img {
		height: 40px;
	}
}

/* Footer brand: the original horizontal footer logo. The file has wide empty margins
 * (letters: x 142–675, y 66–118 of 838 × 172), so the link frames just the lettering. */
.cr-footer__logo {
	aspect-ratio: 537 / 56;
	display: block;
	overflow: hidden;
	position: relative;
	width: min(16.25rem, 100%);
}

.cr-footer__logo img {
	height: auto;
	left: -26.07%;
	max-width: none;
	position: absolute;
	top: -114.29%;
	width: 156.11%;
}

/* Header CTA: visible from 600 px; below that it lives in the menu overlay. */
.cr-header__cta .wp-block-button__link {
	padding: 0.625rem 1rem;
	min-height: 44px;
	white-space: nowrap;
}

@media (max-width: 37.49875em) {
	/* Two classes: must beat core "body .is-layout-flex { display: flex }". */
	.cr-header .cr-header__cta {
		display: none;
	}
}

/*
 * 960–1199 px: the full navigation is visible from 960 px. With the real logo text
 * (CREATING.LV), six menu items and the CTA the header needed ~1019 px and overflowed at
 * 960 px; the footer CTA wrapped to two lines (both found in the F7 LocalWP check).
 * Tighter gaps, CTA padding and logo size keep everything on one line; ≥ 1200 px unchanged.
 */
@media (min-width: 60em) and (max-width: 74.99875em) {
	.cr-header__inner,
	.cr-header__actions {
		gap: 0.5rem;
	}

	.cr-header .cr-nav {
		font-size: 0.8125rem;
	}

	.cr-header .cr-nav .wp-block-navigation__container {
		gap: 0.5rem;
	}

	.cr-header .cr-nav .wp-block-navigation-item__content {
		letter-spacing: 0.04em;
	}

	.cr-header__cta .wp-block-button__link {
		padding-inline: 0.75rem;
	}

	.cr-logo__text {
		font-size: 1.125rem;
	}

	/* Footer CTA column is ~184 px wide here; keep "Pieteikt projektu" on one line. */
	.cr-footer .wp-block-button__link {
		font-size: 0.8125rem;
		padding-inline: 0.75rem;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------------------
 * 6. Navigation (core Navigation block; overlay below 960 px — F4 responsive §3)
 * ------------------------------------------------------------------------- */
.cr-nav {
	--navigation-layout-justification-setting: flex-end;
	color: var(--cr-gold);
}

.cr-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 0.25rem;
	text-decoration: none;
}

@media (min-width: 60em) {
	/* Horizontal menu: top-level labels never break onto two lines ("Par mums"). */
	.cr-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		white-space: nowrap;
	}
}

.cr-nav .wp-block-navigation-item__content:hover,
.cr-nav .current-menu-item > .wp-block-navigation-item__content,
.cr-nav [aria-current="page"] {
	color: var(--cr-gold-light);
	text-decoration: underline;
	text-decoration-color: var(--cr-signal);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
}

.cr-nav .wp-block-navigation__submenu-icon {
	align-items: center;
	display: inline-flex;
	height: 44px;
	justify-content: center;
	margin-left: -0.5rem;
	width: 44px;
}

.cr-nav .wp-block-navigation__submenu-icon svg {
	height: 12px;
	width: 12px;
}

/* Desktop dropdown. */
.cr-nav .wp-block-navigation__submenu-container {
	background-color: var(--cr-raised) !important;
	border: 1px solid var(--cr-line) !important;
	box-shadow: var(--wp--custom--shadow--overlay);
	min-width: 18rem !important;
	padding: 0.5rem 0;
	z-index: var(--wp--custom--z--dropdown);
}

/* Core sets #000 text on submenus without a text colour; restore the theme text colour. */
.cr-nav:not(.has-text-color) .wp-block-navigation__submenu-container {
	color: var(--cr-text);
}

.cr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
	text-transform: none;
	letter-spacing: 0.02em;
	width: 100%;
}

/* Menu toggle and close buttons: 44 × 44 px minimum. */
.cr-nav .wp-block-navigation__responsive-container-open,
.cr-nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	color: var(--cr-gold);
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

/* The CTA inside the navigation is only shown in the mobile overlay. */
.cr-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .cr-nav-cta {
	display: none;
}

/* Use the overlay up to 959 px instead of core's 599 px (labels + CTA do not fit earlier). The query is in
   em (owner 2026-10-16, TXT200-01): with larger browser text the overlay is used up to a proportionally wider
   screen — also below 600 px, where core's own px rule would otherwise show the inline menu. */
@media (max-width: 59.99875em) {
	.cr-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.cr-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Overlay (open menu). */
.cr-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--cr-base) !important;
	background-image: url("../images/texture.webp");
	background-size: 256px 256px;
	color: var(--cr-text) !important;
	padding: calc(var(--wp-admin--admin-bar--height, 0px) + 1rem) var(--cr-gutter) 2rem;
}

.cr-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 0 !important;
	padding-top: 3.5rem;
}

.cr-nav .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--cr-line);
}

.cr-nav .is-menu-open .wp-block-navigation-item__content {
	font-size: 1rem;
	min-height: 56px;
	padding-inline: 0;
	width: 100%;
}

/* Large text on a narrow screen: the menu column never gets wider than the overlay; a label longer than
   the line wraps (inside a word only when the word itself does not fit) (TXT200-01). */
.cr-nav .is-menu-open :is(.wp-block-navigation__container, .wp-block-navigation-item) {
	max-width: 100%;
	min-width: 0;
}

.cr-nav .is-menu-open .wp-block-navigation-item__label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.cr-nav .is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none;
	max-width: 100%;
	min-width: 0 !important; /* the desktop dropdown's 18 rem would push large-text labels off screen (TXT200-01) */
	padding: 0 0 0.5rem 1rem !important;
}

.cr-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}

.cr-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--cr-text);
	min-height: 48px;
	text-transform: none;
}

.cr-nav .is-menu-open .cr-nav-cta {
	border-bottom: 0;
	margin-top: 1.5rem;
}

.cr-nav .is-menu-open .cr-nav-cta .wp-block-navigation-item__content {
	background: var(--cr-gold);
	color: var(--cr-on-gold);
	font-weight: 600;
	justify-content: center;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 7. Main wrapper and page rhythm
 * ------------------------------------------------------------------------- */
.cr-main {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--80);
}

.cr-entry-header {
	margin-bottom: var(--wp--preset--spacing--60);
}

.cr-entry-meta,
.cr-card__meta {
	color: var(--cr-muted);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
}

/* F11.3A: published date + "Pārskatīts" in one meta row; "Avoti" below the article body. */
.cr-entry-meta-row {
	column-gap: 0.75em;
	row-gap: 0.25em;
}

.cr-entry-meta-row > * {
	margin: 0;
}

/* C-05: "Autore: …" first, then the date (and "Pārskatīts") separated by a dot. */
.cr-entry-meta--author + .wp-block-post-date::before,
.cr-entry-meta--reviewed::before {
	content: "·";
	margin-inline-end: 0.75em;
}

.cr-article-sources {
	border-top: 1px solid var(--cr-line);
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
}

.cr-article-sources__list {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-inline-start: 1.5em;
}

.cr-article-sources__list li + li {
	margin-top: var(--wp--preset--spacing--20);
}

.cr-article-sources__list a {
	overflow-wrap: anywhere;
}

/* F14 layout (2026-10-15): article pages and article archives start at the left edge of the
 * wide frame, as Portfolio and Cenas. Running text keeps the content width (720 px); the original
 * two-column sections (pcs-*) span the wide frame (proportions: next block). */
.cr-main--archive > .cr-entry-header > *,
.cr-main > .cr-entry-header.alignwide > * {
	max-width: 52rem;
}

.cr-main--article .cr-article {
	box-sizing: content-box;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
	padding-inline: var(--cr-gutter);
}

.cr-main--article .cr-entry-header > * {
	max-width: 52rem;
}

.cr-main--article .cr-article > :not(.cr-entry-header, .entry-content, .wp-block-post-featured-image),
.cr-main--article .entry-content > :not(.pcs-row, .alignwide, .alignfull) {
	max-width: var(--wp--style--global--content-size, 720px);
}

/* F14 article sections (owner 2026-10-15, design iteration 2): compact header spacing; the original
 * two-column sections (pcs-*, heading column + text column) use 30 / 70 from 782 px and stack below
 * (heading above its text); running text stays within the content width (720 px). Section headings in the
 * heading column share one gold display style per level, smaller than the H1, keeping the H2 / H3 / H4
 * hierarchy; sub-headings inside the text column stay in the text face and below the section headings.
 * Scope: article pages only (portfolio, service pages, tables and other columns are not affected). */
.cr-main--article .cr-entry-header {
	margin-bottom: var(--wp--preset--spacing--50);
}

.cr-main--article .entry-content .pcs-columns {
	align-items: flex-start !important; /* original "align-tems-center" typo class has no effect */
}

@media (min-width: 48.875em) {
	.cr-main--article .entry-content .pcs-columns > .pcs-col--left {
		flex-basis: 30% !important;
	}

	.cr-main--article .entry-content .pcs-columns > .pcs-col--right {
		flex-basis: 70% !important;
	}
}

.cr-main--article .entry-content .pcs-col--right > * {
	max-width: var(--wp--style--global--content-size, 720px);
}

.cr-main--article .entry-content .pcs-col--left :is(h2, h3, h4) {
	color: var(--cr-gold);
	font-family: var(--cr-font-display);
	font-weight: 400;
	line-height: 1.2;
	margin-block: 0;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.cr-main--article .entry-content .pcs-col--left :is(h2, h3, h4) + :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--30);
}

.cr-main--article .entry-content .pcs-col--left h2 {
	font-size: var(--wp--preset--font-size--heading-3);
}

.cr-main--article .entry-content .pcs-col--left h3 {
	font-size: calc(var(--wp--preset--font-size--heading-3) * 0.875);
}

.cr-main--article .entry-content .pcs-col--left h4 {
	font-size: max(var(--wp--preset--font-size--base), calc(var(--wp--preset--font-size--heading-3) * 0.75));
}

.cr-main--article .entry-content .pcs-col--right h2 {
	font-size: max(1.25rem, calc(var(--wp--preset--font-size--heading-3) * 0.9));
}

.cr-main--article .entry-content .pcs-col--right h3 {
	font-size: max(1.0625rem, calc(var(--wp--preset--font-size--heading-3) * 0.8));
}

.cr-main--article .entry-content .pcs-col--right h4 {
	font-size: max(var(--wp--preset--font-size--base), calc(var(--wp--preset--font-size--heading-3) * 0.7));
}

/* F14 (owner 2026-10-16, round 3): the site's brand arrow above the section heading of the heading column —
 * exactly the motif of the content H2s on the service pages (§8: 4 rem gold 1 px rule + 0.5 × 0.625 rem signal
 * triangle 0.25 rem after it), pointing RIGHT towards the text column (local assets/images/brand/section-arrow.svg,
 * 76 × 10 px = 4.75 × 0.625 rem). Same on mobile. Static and decorative only: empty generated content, no text,
 * nothing for screen readers; heading text and level unchanged. */
.cr-main--article .entry-content .pcs-col--left > :is(h2, h3, h4):first-child::before,
.cr-main--article .entry-content.cr-article-flow > h2::before,
.cr-project__content .pcs-col--left > :is(h2, h3, h4):first-child::before {
	background: url("../images/brand/section-arrow.svg") no-repeat left center / 100% 100%;
	content: "";
	content: "" / "";
	display: block;
	height: 0.625rem;
	margin-bottom: 1rem;
	width: 4.75rem;
}

/* F14 (owner 2026-10-16): the 4 articles without the original two-column sections (plain H2 + text flow)
 * get the same reading layout from 782 px: each H2 sits in the heading column (30 %), the text that follows it
 * in the text column (70 %, text width 720 px), both starting at the same height. The H2 is taken out of the
 * flow (absolute, top: auto = its own place in the text), so a long heading never stretches the gap between
 * the paragraphs next to it; the DOM order and the heading hierarchy stay as they are (H3 / H4 stay in the text
 * column). Below 782 px: normal flow, the heading above its text. The class is added server-side
 * (inc/article.php) only when the content has no pcs-row and has at least one H2. */
@media (min-width: 48.875em) {
	.cr-main--article .entry-content.cr-article-flow {
		position: relative;
	}

	.cr-main--article .entry-content.cr-article-flow > :not(h2, .alignwide, .alignfull) {
		margin-inline-start: calc((100% - 1rem) * 0.3 + 1rem); /* = text column of the pcs sections (gap 16 px) */
	}

	.cr-main--article .entry-content.cr-article-flow > h2 {
		left: 0;
		margin-block-start: var(--wp--preset--spacing--70);
		position: absolute;
		width: calc((100% - 1rem) * 0.3);
	}

	.cr-main--article .entry-content.cr-article-flow > h2 + * {
		margin-block-start: var(--wp--preset--spacing--70);
	}

	.cr-main--article .entry-content.cr-article-flow > h2:first-child,
	.cr-main--article .entry-content.cr-article-flow > h2:first-child + * {
		margin-block-start: 0;
	}
}

.cr-main--article .entry-content.cr-article-flow > h2 {
	color: var(--cr-gold);
	font-family: var(--cr-font-display);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 400;
	line-height: 1.2;
	overflow-wrap: anywhere;
	padding-top: 0;
	text-wrap: balance;
}

.cr-main--article .entry-content.cr-article-flow > h2::before {
	position: static;
}

.cr-main--article .entry-content.cr-article-flow > h2::after {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 8. Content flow (Gutenberg content — F4 content styling §3–§4)
 * ------------------------------------------------------------------------- */
.entry-content > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.entry-content > h2 {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-top: 1.25rem;
	position: relative;
}

/* Brand motif, generated automatically: gold rule + signal triangle (decorative). */
.entry-content > h2::before {
	background: var(--cr-gold);
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	top: 0;
	width: 4rem;
}

.entry-content > h2::after {
	background: var(--cr-signal);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	content: "";
	height: 0.625rem;
	left: 4.25rem;
	position: absolute;
	top: -0.3rem;
	width: 0.5rem;
}

.entry-content > h3 {
	margin-block-start: var(--wp--preset--spacing--60);
}

.entry-content > h4 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.entry-content > :is(h2, h3, h4) + * {
	margin-block-start: 0.75rem;
}

.entry-content > :first-child {
	margin-block-start: 0;
}

/* Lists. */
.entry-content :is(ul, ol) {
	padding-inline-start: 1.25em;
}

.entry-content li + li {
	margin-top: 0.4em;
}

.entry-content ul:not([class*="is-style-"]) {
	list-style: square;
}

.entry-content ul:not([class*="is-style-"]) > li::marker {
	color: var(--cr-signal);
}

.entry-content ul ul {
	list-style: circle;
}

.entry-content ul ul > li::marker {
	color: var(--cr-muted);
}

.entry-content ol > li::marker {
	color: var(--cr-gold);
	font-family: var(--cr-font-mono);
	font-variant-numeric: tabular-nums;
}

.entry-content ol ol {
	list-style: lower-alpha;
}

:is(ul, ol) :is(ul, ol) {
	margin-top: 0.4em;
}

/* F14 (owner 2026-10-16): one list rhythm in all articles. 309 imported list items (14 articles) carry pasted
 * markup <li><br><p>…</p><br>: the empty line put the marker on its own line and the paragraph margins
 * doubled the gaps. Only the line breaks directly next to a paragraph inside a list item are hidden and the
 * paragraph margins inside list items are removed; a line break inside the text (e.g. "<strong>…</strong>:<br>…")
 * is kept. ul / ol / li semantics and nesting are unchanged (the markup itself: content plan, not CSS). */
.entry-content li > br:has(+ p),
.entry-content li > p + br {
	display: none;
}

.entry-content li > p {
	margin-block: 0;
}

.entry-content li > p + :is(p, ul, ol) {
	margin-block-start: 0.4em;
}

.entry-content :is(ul, ol) > li::marker {
	font-size: 1em;
}

/* "Kas iekļauts" checklist block style. */
.is-style-checklist {
	list-style: none;
	padding-inline-start: 0 !important;
}

.is-style-checklist > li {
	padding-left: 1.75em;
	position: relative;
}

.is-style-checklist > li::before {
	color: var(--cr-signal);
	content: "✓" / "";
	font-family: var(--cr-font-mono);
	font-weight: 600;
	left: 0;
	position: absolute;
}

/* Tables (wrapper is a focusable region — inc/blocks.php). */
.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table table {
	border-collapse: collapse;
	min-width: 100%;
	font-variant-numeric: tabular-nums;
}

.wp-block-table :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--cr-line);
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.wp-block-table thead {
	border-bottom: 0;
}

.wp-block-table th {
	background: var(--cr-surface);
	color: var(--cr-gold);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wp-block-table td:first-child {
	font-weight: 650;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--cr-raised);
}

.wp-block-table.is-style-stripes {
	border-bottom: 0;
}

.wp-block-table figcaption {
	text-align: left;
}

/* Quotes. */
.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-top: 0.75rem;
}

.wp-block-quote cite::before,
.wp-block-pullquote cite::before {
	content: "— ";
}

.wp-block-pullquote {
	text-align: left;
}

/* Code / preformatted scroll inside their own box. */
.wp-block-code,
.wp-block-preformatted {
	overflow-x: auto;
	white-space: pre;
}

/* Images and captions. */
.wp-block-image img {
	height: auto;
}

.wp-block-image figcaption,
.wp-element-caption {
	margin-top: 0.5rem;
	text-align: left;
}

.wp-block-image.is-style-frame img {
	border: 1px solid var(--cr-line);
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	background: linear-gradient(0deg, rgba(15, 15, 18, 0.85), rgba(15, 15, 18, 0));
	color: var(--cr-text);
	font-size: var(--wp--preset--font-size--xs);
}

/* Separator. */
.wp-block-separator,
hr {
	background: var(--cr-line);
	border: 0;
	height: 1px;
	opacity: 1;
}

/* Embeds keep their aspect ratio (responsive-embeds support). */
.wp-block-embed iframe {
	max-width: 100%;
}

/* Notes / callouts (block style "Note" on Group). */
.is-style-note {
	background: var(--cr-raised);
	border-left: 3px solid var(--cr-gold);
	padding: 1rem 1.25rem;
}

/* Answer box — first block of an article/hub (F4 §11). */
.is-style-answer {
	background: var(--cr-raised);
	border-top: 2px solid var(--cr-gold);
	font-size: var(--wp--preset--font-size--lead);
	padding: 1.25rem 1.5rem;
}

.is-style-answer > :last-child,
.is-style-takeaways > :last-child,
.is-style-note > :last-child {
	margin-bottom: 0;
}

/* Key takeaways (F4 §11). */
.is-style-takeaways {
	background: var(--cr-surface);
	border: 1px solid var(--cr-line);
	padding: 1.25rem 1.5rem;
}

.is-style-takeaways > .wp-block-heading {
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.08em;
	margin-top: 0;
	text-transform: uppercase;
}

/* CTA section inside content (F4 §9 look). */
.is-style-cta {
	background: var(--cr-surface);
	border-top: 1px solid var(--cr-line);
	border-bottom: 1px solid var(--cr-line);
	padding: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.25rem, 1rem + 2vw, 3rem);
}

/* ---------------------------------------------------------------------------
 * 9. FAQ / details (native <details>, no JS — F4 component library §7)
 * ------------------------------------------------------------------------- */
.wp-block-details {
	border-top: 1px solid var(--cr-line);
}

.wp-block-details:last-of-type {
	border-bottom: 1px solid var(--cr-line);
}

.wp-block-details + .wp-block-details {
	margin-block-start: 0 !important;
}

.wp-block-details summary {
	box-sizing: border-box; /* min-height = touch target incl. padding (F7 density fix) */
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: min(1rem, 5vw); /* 1 rem as before (5 vw ≥ 1 rem from 320 px at the default text size) */
	font-size: 1.125rem;
	font-weight: 650;
	line-height: 1.4;
	list-style: none;
	min-height: 44px;
	overflow-wrap: anywhere; /* a word longer than the line wraps instead of leaving the screen (TXT200-09) */
	padding: 1rem 0;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	color: var(--cr-signal);
	content: "+" / "";
	flex: 0 0 auto;
	font-family: var(--cr-font-mono);
	font-size: 1.5rem;
	line-height: 1;
}

.wp-block-details[open] summary::after {
	content: "−" / "";
}

.wp-block-details > :not(summary) {
	margin-top: 0;
	padding-bottom: 1rem;
}

/* ---------------------------------------------------------------------------
 * 10. Buttons
 * ------------------------------------------------------------------------- */
.wp-block-button__link,
.wp-element-button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 48px;
	transition: background-color var(--cr-dur-fast) var(--cr-ease), color var(--cr-dur-fast) var(--cr-ease), border-color var(--cr-dur-fast) var(--cr-ease);
}

.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: var(--cr-violet);
	color: #fff;
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background-color: var(--cr-violet-deep);
	color: #fff;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--cr-gold);
	color: var(--cr-gold);
	padding: calc(0.875rem - 1px) calc(1.5rem - 1px);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--cr-raised);
	color: var(--cr-gold-light);
}

/* ---------------------------------------------------------------------------
 * 11. Forms (base — the CREATING contact form arrives in F12)
 * ------------------------------------------------------------------------- */
label {
	display: inline-block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-bottom: 0.375rem;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]), select, textarea) {
	background-color: var(--cr-surface);
	border: 1px solid var(--cr-subtle);
	border-radius: 0 var(--cr-notch) 0 0;
	box-sizing: border-box;
	color: var(--cr-text);
	font-family: var(--cr-font-text);
	font-size: 1rem;
	line-height: 1.4;
	max-width: 100%;
	min-height: 48px;
	padding: 0.75rem 1rem;
}

textarea {
	min-height: 7.5rem;
}

:is(input, select, textarea):focus-visible {
	border-color: var(--cr-gold);
	border-width: 2px;
}

:is(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--wp--custom--color--error);
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--cr-gold);
	height: 1.25rem;
	width: 1.25rem;
}

::placeholder {
	color: var(--cr-subtle);
	opacity: 1;
}

.wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.wp-block-search__input {
	border-radius: 0 var(--cr-notch) 0 0;
}

/* ---------------------------------------------------------------------------
 * 12. Archive cards and pagination (real <a href> links — HC-5)
 * ------------------------------------------------------------------------- */
.cr-cards__grid {
	gap: var(--wp--preset--spacing--50) !important;
}

/* F14 layout (2026-10-15): article cards in the archive have one height (every row as tall as the
 * tallest card); the date / reading-time row sits at the bottom of each card. */
.cr-cards__grid {
	grid-auto-rows: 1fr;
}

.cr-cards__grid > li {
	display: flex;
}

.cr-cards__grid > li > .cr-article-card,
.cr-article-card__body {
	flex: 1 1 auto;
	min-width: 0; /* a card never grows wider than its grid column (large text, TXT200-08) */
}

.cr-cards__grid > li > .cr-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.cr-article-card__body > .cr-card__meta,
.cr-cards__grid .cr-card > .cr-card__meta {
	margin-top: auto;
}

.cr-card {
	background: var(--cr-surface);
	border: 1px solid var(--cr-line);
	padding: var(--wp--preset--spacing--50);
}

.cr-card > * + * {
	margin-block-start: 0.75rem;
}

.cr-card .cr-card__title {
	color: var(--cr-text);
	font-family: var(--cr-font-text);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 650;
	line-height: 1.3;
}

.cr-card .cr-card__title a {
	color: inherit;
	text-decoration: none;
}

.cr-card .cr-card__title a:hover {
	color: var(--cr-gold-light);
	text-decoration: underline;
}

.cr-pagination {
	margin-top: var(--wp--preset--spacing--60);
}

.cr-pagination :is(a, .page-numbers) {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding-inline: 0.5rem;
	text-decoration: none;
}

.cr-pagination .page-numbers.current {
	background: var(--cr-gold);
	color: var(--cr-on-gold);
}

.cr-post-nav {
	border-top: 1px solid var(--cr-line);
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------------------------------------------------------------------------
 * 13. Footer shell
 * ------------------------------------------------------------------------- */
.cr-footer {
	background-color: var(--cr-base);
	border-top: 1px solid var(--cr-line);
	font-size: var(--wp--preset--font-size--sm);
	padding: var(--wp--preset--spacing--70) var(--cr-gutter) var(--wp--preset--spacing--50);
}

.cr-footer__columns {
	gap: var(--wp--preset--spacing--60) !important;
}

/* Large text (TXT200-10): the footer columns stack below 48.8125 em — at the default text size the same
   781 px as the core Columns block, with larger text at a proportionally wider screen — so labels and the
   "Pieteikt projektu" button keep whole words. */
@media (max-width: 48.8125em) {
	.cr-footer .cr-footer__columns {
		flex-wrap: wrap !important;
	}

	.cr-footer .cr-footer__columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Very large text on a narrow screen: the footer uses the page gutter only once (the inner group's second
   gutter is dropped). rem-based, so it never applies at the default text size (footer ≥ 20 rem there). */
.cr-footer {
	container: cr-footer / inline-size;
}

@container cr-footer (max-width: 15rem) {
	.cr-footer .cr-footer__inner.has-global-padding {
		padding-left: 0;
		padding-right: 0;
	}
}

.cr-footer .cr-footer__title {
	color: var(--cr-gold);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
}

.cr-footer .cr-footer__title::before,
.cr-footer .cr-footer__title::after {
	content: none;
}

.cr-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cr-footer__links a {
	align-items: center;
	color: var(--cr-muted);
	display: inline-flex;
	min-height: 32px;
	text-decoration: none;
}

.cr-footer__links a:hover {
	color: var(--cr-gold-light);
	text-decoration: underline;
}

.cr-footer__tagline {
	color: var(--cr-muted);
}

.cr-footer__bottom {
	border-top: 1px solid var(--cr-line);
	color: var(--cr-muted);
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
}

.cr-funding-notice:empty {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 13a. Sections and components (F7 — homepage; reused by later templates)
 *     F4 component library §1, §5, §7, §8, §13, §18–§24; layout §3–§5.
 * ------------------------------------------------------------------------- */
.cr-main--home {
	padding-top: 0;
	padding-bottom: 0;
}

/* Pages that end with a full-width section (the contact section on the homepage, service
   pages and /cenas/): that section's own bottom padding is the breathing room. The generic
   main bottom padding and the root block gap above the footer would otherwise show the body
   texture as a full-width strip before the footer. Text pages (articles) keep the padding. */
.cr-main:has(> .cr-section:last-child) {
	padding-bottom: 0;
}

.wp-site-blocks > .cr-footer {
	margin-block-start: 0;
}

/* Section shell: full-width band, inner max = wide (1200 px) + gutter. */
.cr-section {
	border-top: 1px solid var(--cr-line);
	padding: var(--wp--preset--spacing--80) var(--cr-gutter);
	position: relative;
}

.cr-section__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.cr-section--content .cr-section__inner {
	max-width: var(--wp--style--global--content-size, 720px);
}

.cr-section--offers,
.cr-section--contact {
	background-color: var(--cr-surface);
}

.cr-section__head {
	margin-bottom: var(--wp--preset--spacing--60);
	max-width: 46rem;
}

.cr-section__head > * {
	margin: 0;
}

.cr-section__head > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

.cr-eyebrow {
	color: var(--cr-muted);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

.cr-section__head .cr-eyebrow::before {
	border-top: 2px solid var(--cr-gold);
	content: "";
	display: inline-block;
	margin-right: 0.75rem;
	vertical-align: middle;
	width: 2rem;
}

.cr-section__title {
	color: var(--cr-gold);
	font-family: var(--cr-font-display);
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 400;
	line-height: 1.15;
	text-wrap: balance;
}

.cr-section__intro {
	color: var(--cr-muted);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
}

.cr-section__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: var(--wp--preset--spacing--60);
}

/* Grid (F4 layout §3): auto-fill, never more than 4 columns. */
.cr-grid {
	--cr-card-min: 18.75rem;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cr-card-min)), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.cr-grid--projects { --cr-card-min: 20rem; }
/* One column until 960 px (no 2 + 1 orphan), three columns from 960 px. */
.cr-grid--offers,
.cr-grid--maintenance { --cr-card-min: 22.5rem; }

@media (min-width: 60em) {
	.cr-grid { gap: var(--wp--preset--spacing--60); }
	.cr-grid--offers,
	.cr-grid--maintenance,
	.cr-grid--projects,
	.cr-grid--articles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cr-grid--services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Text link with arrow ("Visi projekti →"). */
.cr-text-link {
	align-items: center;
	color: var(--cr-gold);
	display: inline-flex;
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	min-height: 44px;
	text-decoration: none;
}

.cr-text-link__arrow {
	margin-left: 0.375em;
}

.cr-text-link:hover {
	color: var(--cr-gold-light);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Buttons rendered by components (same look as core buttons). */
.cr-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.cr-button {
	align-items: center;
	border: 1px solid transparent;
	display: inline-flex;
	font-family: var(--cr-font-mono);
	font-size: 0.9375rem;
	font-weight: 600;
	justify-content: center;
	box-sizing: border-box; /* min-height is the full touch target (F7 fix) */
	max-width: 100%;
	min-height: 48px;
	padding: 0.625rem 1.5rem;
	/* 1.5 rem as before; with large text on a narrow screen the side padding stops at 7.5 vw (= 1.5 rem at
	   320 px with default text), so the label keeps its room (TXT200-07). */
	padding-inline: min(1.5rem, 7.5vw);
	text-decoration: none;
	transition: background-color var(--cr-dur-fast) var(--cr-ease), color var(--cr-dur-fast) var(--cr-ease);
}

.cr-button--primary {
	background-color: var(--cr-gold);
	color: var(--cr-on-gold);
}

.cr-button--primary:hover {
	background-color: var(--cr-gold-light);
	color: var(--cr-on-gold);
}

.cr-button--outline {
	border-color: var(--cr-gold);
	color: var(--cr-gold);
}

.cr-button--outline:hover {
	background-color: var(--cr-raised);
	color: var(--cr-gold-light);
}

.cr-button[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

/* Whole-card click target through one link (F4 §5.1). */
.cr-card__link {
	color: inherit;
	text-decoration: none;
}

.cr-card__link::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.cr-card__link:focus-visible {
	outline: none;
}

:is(.cr-service-card, .cr-project-card, .cr-article-card):focus-within {
	outline: var(--cr-focus);
	outline-offset: 3px;
}

/* Hero ------------------------------------------------------------------- */
.cr-hero {
	overflow: hidden;
	padding: var(--wp--preset--spacing--80) var(--cr-gutter);
	position: relative;
}

.cr-hero__text {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
	position: relative;
	z-index: 1;
}

.cr-hero__text > * {
	margin-block: 0;
	max-width: 50rem;
}

.cr-hero__text > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

.cr-hero .cr-hero__title {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.08;
}

.cr-hero__lead {
	color: var(--cr-text);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	max-width: 40rem;
}

.cr-hero__actions {
	gap: 0.75rem;
}

/* Decorative technical line art (CSS only, aria-free, no layout shift — F4 layout §7). */
.cr-hero::before,
.cr-hero::after {
	content: "";
	pointer-events: none;
	position: absolute;
}

.cr-hero::before {
	background-image:
		linear-gradient(var(--cr-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--cr-line) 1px, transparent 1px);
	background-size: 48px 48px;
	inset: 0 0 0 auto;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
	mask-image: linear-gradient(90deg, transparent, #000 40%);
	opacity: 0.45;
	width: min(42%, 34rem);
}

.cr-hero::after {
	border-right: 2px solid var(--cr-gold);
	border-top: 2px solid var(--cr-gold);
	height: 6rem;
	right: calc(var(--cr-gutter) + 2rem);
	top: var(--wp--preset--spacing--70);
	width: 6rem;
}

@media (max-width: 59.99875em) {
	.cr-hero::before,
	.cr-hero::after {
		display: none;
	}
}

.cr-hero-prices {
	border-top: 1px solid var(--cr-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--40) 0 0;
}

.cr-hero-prices li {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.cr-hero-prices__label {
	color: var(--cr-muted);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cr-hero-prices__value {
	color: var(--cr-gold);
	font-family: var(--cr-font-mono);
	font-size: 1.0625rem;
	font-weight: 600;
}

/* Service card (gold variant, notched corner — F4 §5.1). */
.cr-service-card {
	background-color: var(--cr-gold);
	clip-path: polygon(0 0, calc(100% - var(--cr-notch)) 0, 100% var(--cr-notch), 100% 100%, 0 100%);
	color: var(--cr-on-gold);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 8.5rem;
	padding: var(--wp--preset--spacing--50);
	position: relative;
	transition: background-color var(--cr-dur-fast) var(--cr-ease);
}

@media (max-width: 37.49875em) {
	.cr-service-card {
		min-height: 0;
	}
}

.cr-service-card.is-linked:hover {
	background-color: var(--cr-gold-light);
}

.cr-service-card__title {
	color: inherit;
	font-family: var(--cr-font-text);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 650;
	line-height: 1.25;
	margin: 0;
}

.cr-service-card .cr-price {
	margin-top: auto;
}

.cr-service-card .cr-price,
.cr-service-card .cr-price__vat {
	color: var(--cr-on-gold);
}

.cr-service-card .cr-price__amount {
	font-size: 1.25rem;
}

.cr-service-card__arrow {
	bottom: var(--wp--preset--spacing--50);
	font-family: var(--cr-font-mono);
	font-size: 1.25rem;
	position: absolute;
	right: var(--wp--preset--spacing--50);
}

/* Price (F4 §5.4). */
.cr-price {
	color: var(--cr-gold);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	font-family: var(--cr-font-mono);
	margin: 0;
}

.cr-price__prefix {
	color: var(--cr-muted);
	font-family: var(--cr-font-text);
	font-size: 1rem;
}

.cr-service-card .cr-price__prefix {
	color: var(--cr-on-gold);
}

.cr-price__amount {
	font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1;
}

.cr-price__currency,
.cr-price__period {
	font-size: 1rem;
	font-weight: 600;
}

.cr-price__vat {
	color: var(--cr-muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* Pricing / offer card (F4 §18). */
.cr-pricing-card,
.cr-maintenance-card {
	background-color: var(--cr-base);
	border: 1px solid var(--cr-line);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	position: relative;
}

.cr-pricing-card::before {
	border-left: 2px solid var(--cr-gold);
	border-top: 2px solid var(--cr-gold);
	content: "";
	height: 1.5rem;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 1.5rem;
}

.cr-pricing-card > *,
.cr-maintenance-card > * {
	margin: 0;
}

.cr-pricing-card__title,
.cr-maintenance-card__title {
	color: var(--cr-text);
	font-family: var(--cr-font-text);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 650;
	line-height: 1.2;
}

.cr-pricing-card__positioning {
	color: var(--cr-muted);
}

.cr-pricing-card__body {
	border-top: 1px solid var(--cr-line);
	flex: 1 1 auto;
	padding-top: var(--wp--preset--spacing--40);
}

.cr-pricing-card__note {
	border-left: 2px solid var(--cr-line);
	color: var(--cr-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding-left: 0.75rem;
}

.cr-pricing-card__note-label {
	color: var(--cr-text);
	font-weight: 600;
}

.cr-pricing-card__foot {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.cr-pricing-card__scope {
	color: var(--cr-subtle);
	font-size: var(--wp--preset--font-size--xs);
	margin: 0;
}

.cr-pricing-card__foot .cr-button {
	align-self: stretch;
}

/* Homepage offers (owner review 2026-10-08): the three cards incl. the CTA fit a laptop
   viewport — tighter vertical rhythm, same type sizes; equal heights, CTA aligned at the bottom. */
.cr-grid--offers .cr-pricing-card {
	gap: 0.5rem;
	padding: 1.25rem var(--wp--preset--spacing--50) 1rem;
}

.cr-grid--offers .cr-pricing-card__title {
	margin-top: -0.25rem;
}

.cr-grid--offers .cr-pricing-card__positioning {
	line-height: 1.5;
}

.cr-grid--offers .cr-pricing-card .cr-price {
	margin-top: 0.25rem;
}

.cr-grid--offers .cr-pricing-card__body {
	padding-top: 0.75rem;
}

.cr-grid--offers .cr-includes__label {
	margin-bottom: 0.375rem;
}

.cr-grid--offers .cr-includes > li {
	line-height: 1.4;
	padding-block: 0.125rem;
}

.cr-grid--offers .cr-pricing-card__note {
	margin-top: 0.625rem;
}

.cr-grid--offers .cr-pricing-card__foot {
	gap: 0.5rem;
	padding-top: 0.25rem;
}

/* Compact homepage offer cards (F9, owner 2026-10-09 08:33): homepage-only lists (7 / 8 / 8
   items). From 960 px the three cards share one row grid (subgrid): eyebrow, title, intro,
   service link, price, list, CTA — so service links, prices, divider lines, "Kas iekļauts" labels and the CTA buttons line
   up whatever the text length or item count; no fixed heights or spacer items. */
.cr-pricing-card--compact .cr-includes__label {
	margin-top: 0;
}

.cr-pricing-card__link:empty {
	display: none;
}

.cr-pricing-card__intro > :first-child {
	margin-top: 0;
}

@media (min-width: 60em) {
	.cr-grid--offers:has(> .cr-pricing-card--compact) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 0;
	}

	.cr-grid--offers > .cr-pricing-card--compact {
		display: grid;
		grid-row: span 7;
		grid-template-rows: subgrid;
		row-gap: 0.5rem;
	}

	.cr-grid--offers > .cr-pricing-card--compact > .cr-pricing-card__foot {
		align-self: end;
	}
}

/* Cumulative maintenance cards (homepage): "Viss no BASIC, plus:" above the extra items. */
.cr-includes__base {
	color: var(--cr-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 0.25rem;
}

.cr-grid--cumulative .cr-maintenance-card .cr-includes {
	margin-top: var(--wp--preset--spacing--30);
}

.cr-grid--cumulative .cr-includes__base + .cr-includes {
	margin-top: 0;
}

/* "Izstrādātie projekti" (F9, owner 2026-10-09): one light, centred CTA under the cards. */
.cr-section--projects .cr-section__foot {
	justify-content: center;
}

@media (max-width: 37.4375em) {
	.cr-projects__all {
		width: 100%;
	}
}

/* "Kas iekļauts" checklist (F4 §19). */
.cr-includes__label {
	color: var(--cr-muted);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.cr-includes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cr-includes > li {
	line-height: 1.45;
	padding: 0.375rem 0 0.375rem 1.75rem;
	position: relative;
}

.cr-includes > li::before {
	color: var(--cr-signal);
	content: "✓" / "";
	font-family: var(--cr-font-mono);
	font-weight: 600;
	left: 0;
	position: absolute;
}

.cr-includes--compare > li {
	border-top: 1px solid var(--cr-line);
	min-height: 3.25rem;
}

.cr-includes--compare > li.is-excluded::before {
	content: none;
}

.cr-includes--compare > li.is-excluded {
	color: var(--cr-subtle);
}

.cr-includes--compare > li.is-excluded > span[aria-hidden="true"]:first-child {
	left: 0;
	position: absolute;
}

.cr-includes__excluded {
	font-style: italic;
}

/* Project card (F4 §5.2): overlay only on hover/focus. */
.cr-project-card,
.cr-article-card {
	background-color: var(--cr-surface);
	border: 1px solid var(--cr-line);
	display: flex;
	flex-direction: column;
	position: relative;
}

.cr-project-card__media,
.cr-article-card__media {
	aspect-ratio: 4 / 3;
	background-color: var(--cr-raised);
	overflow: hidden;
	position: relative;
}

.cr-article-card__media {
	aspect-ratio: 16 / 9;
}

.cr-project-card__media img,
.cr-article-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: top;
	width: 100%;
}

.cr-project-card__noimage {
	background-image:
		linear-gradient(var(--cr-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--cr-line) 1px, transparent 1px);
	background-size: 32px 32px;
	display: block;
	height: 100%;
	opacity: 0.6;
}

.cr-project-card__overlay {
	align-items: flex-end;
	background-color: color-mix(in srgb, var(--cr-gold) 82%, transparent);
	color: var(--cr-on-gold);
	display: flex;
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	inset: 0;
	opacity: 0;
	padding: var(--wp--preset--spacing--40);
	position: absolute;
	transition: opacity var(--cr-dur) var(--cr-ease);
}

.cr-project-card:hover .cr-project-card__overlay,
.cr-project-card:focus-within .cr-project-card__overlay {
	opacity: 1;
}

.cr-project-card.is-placeholder .cr-project-card__overlay {
	display: none;
}

.cr-project-card__body,
.cr-article-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--50);
}

/* Very large text in a narrow card: less inner padding, so long words (WooCommerce) keep their line
   (TXT200-08). rem-based — at the default text size every card is wider than 12 rem. */
.cr-article-card {
	container-type: inline-size;
}

@container (max-width: 12rem) {
	.cr-article-card__body {
		padding: var(--wp--preset--spacing--30);
	}
}

.cr-project-card__body > *,
.cr-article-card__body > * {
	margin: 0;
}

.cr-project-card__title,
.cr-article-card__title {
	color: var(--cr-text);
	font-family: var(--cr-font-text);
	font-size: 1.1875rem;
	font-weight: 650;
	line-height: 1.3;
}

.cr-project-card__title a:hover,
.cr-article-card__title a:hover {
	color: var(--cr-gold-light);
	text-decoration: underline;
}

.cr-project-card__summary,
.cr-article-card__excerpt {
	color: var(--cr-muted);
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* F14 P16: article cards show the whole manual excerpt (140–160 characters, ~3–5 lines) — no clamp, no "…". */
.cr-article-card__excerpt {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* LOCAL placeholders (dev only). */
.cr-placeholder-badge {
	background-color: var(--cr-violet);
	color: #fff;
	display: inline-block;
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 0.25rem 0.5rem;
}

.cr-project-card__media .cr-placeholder-badge {
	left: 0.75rem;
	position: absolute;
	top: 0.75rem;
}

/* Client logos: static grid, no carousel (F4 DD-35). */
.cr-logos {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: var(--cr-line);
	border: 1px solid var(--cr-line);
}

.cr-logos__item {
	align-items: center;
	background-color: var(--cr-base);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	justify-content: center;
	min-height: 6.5rem;
	padding: 1rem;
	text-align: center;
}

.cr-logos__item img {
	filter: grayscale(1) brightness(1.6);
	height: auto;
	max-height: 3rem;
	max-width: 100%;
	width: auto;
}

.cr-logos__item.is-placeholder {
	color: var(--cr-subtle);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
}

/* Client logo slider (F9, owner 2026-10-09; replaces the static grid of F4 DD-35):
   two identical tracks move left by their own width — a seamless, slow loop (≈ 4.6 s per logo),
   paused on hover / keyboard focus (owner 2026-10-22: no visible pause switch);
   phones (< 600 px), touch devices without hover and reduced motion: logos once, centred, no movement. */
.cr-marquee {
	display: flex;
	overflow: hidden;
}

.cr-logos.cr-logos--marquee,
.cr-logos.cr-logos--row {
	background: none;
	border: 0;
	display: flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	gap: 0;
}

.cr-logos--marquee {
	animation: cr-marquee var(--cr-logos-dur, 40s) linear infinite;
}

.cr-logos--row {
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}

.cr-logos:is(.cr-logos--marquee, .cr-logos--row) .cr-logos__item {
	background: none;
	box-sizing: content-box;
	flex: 0 0 auto;
	height: 5.75rem; /* tallest logo (max. 90 px with a size correction) + a little air */
	min-height: 0;
	padding: 0 2rem; /* equal gaps between logos of any width */
}

.cr-logos:is(.cr-logos--marquee, .cr-logos--row) .cr-logos__img {
	filter: none;
	height: var(--cr-logo-h, 3rem);
	max-height: none;
	max-width: 19rem;
	object-fit: contain;
	opacity: 0.88;
	transition: opacity var(--cr-dur-fast) var(--cr-ease);
	width: auto;
}

.cr-logos__link {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

.cr-logos__link:is(:hover, :focus-visible) .cr-logos__img {
	opacity: 1;
}

/* Fallback until a white version exists (prepared white files are preferred). */
.cr-logos:is(.cr-logos--marquee, .cr-logos--row) .cr-logos__img.is-unprocessed {
	filter: brightness(0) invert(1);
}

.cr-marquee:is(:hover, :focus-within) .cr-logos--marquee {
	animation-play-state: paused;
}

/* The rail is the focus target when no logo is linked: keep its focus ring inside the clipped area. */
.cr-marquee:focus-visible {
	outline-offset: -3px;
}

@keyframes cr-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

@media (max-width: 37.4375em) {
	.cr-logos:is(.cr-logos--marquee, .cr-logos--row) .cr-logos__item {
		height: 4.75rem;
		padding: 0 1.25rem;
	}

	.cr-logos:is(.cr-logos--marquee, .cr-logos--row) .cr-logos__img {
		height: calc(var(--cr-logo-h, 3rem) * 0.85);
		max-width: 16rem;
	}
}

/* Static logos: reduced motion, phones, and touch devices without hover (owner 2026-10-22: there the motion
   could not be paused); desktops with a mouse keep the motion, paused by hover / keyboard focus. */
@media (prefers-reduced-motion: reduce), (max-width: 37.4375em), (hover: none) and (pointer: coarse) {
	.cr-marquee {
		justify-content: center;
	}

	.cr-logos.cr-logos--marquee { /* must outrank the base .cr-logos.cr-logos--marquee flex / nowrap */
		animation: none;
		flex: 1 1 100%;
		flex-wrap: wrap;
		justify-content: center;
		max-width: 100%;
		row-gap: 0.5rem;
	}

	.cr-logos.cr-logos--clone, /* outranks the base .cr-logos.cr-logos--marquee display: flex */
	.cr-logos--marquee > .cr-logos__item[aria-hidden="true"] {
		display: none;
	}
}

/* FAQ list (component §7/§20 — base styles in §9). */
.cr-faq__answer > :first-child {
	margin-top: 0;
}

.cr-faq__answer > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

/* About + person card (F4 §22–§24): no photo required. */
.cr-about {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: minmax(0, 1fr); /* never wider than the screen with large text (TXT200-06) */
}

@media (min-width: 60em) {
	.cr-about {
		align-items: start;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}

.cr-about__text > * {
	margin: 0;
}

.cr-about__text > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.cr-about__text p {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	max-width: 40rem;
}

.cr-person-card {
	border: 1px solid var(--cr-line);
	border-top: 2px solid var(--cr-gold);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	position: relative;
}

.cr-person-card > * {
	margin: 0;
}

.cr-person-card__mark {
	color: var(--cr-subtle);
	font-family: var(--cr-font-display);
	font-size: 1rem;
	letter-spacing: 0.04em;
}

.cr-person-card__name {
	color: var(--cr-text);
	font-family: var(--cr-font-text);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 650;
}

/* /par-mums/: the person's earlier brand experience — plain text list, no logos (owner 2026-10-21). */
.cr-brand-experience {
	border-top: 1px solid var(--cr-line);
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
}

.cr-brand-experience > * {
	margin: 0;
}

.cr-brand-experience__title {
	font-size: var(--wp--preset--font-size--heading-3);
}

.cr-brand-experience__intro {
	color: var(--cr-muted);
	margin-top: var(--wp--preset--spacing--30);
	max-width: 40rem;
}

.cr-brand-experience__list {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin-top: var(--wp--preset--spacing--40);
	padding: 0;
}

.cr-brand-experience__list li {
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
	min-width: 0;
	overflow-wrap: anywhere;
}

.cr-person-card__role {
	color: var(--cr-muted);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
}

.cr-facts {
	display: grid;
	gap: 0;
	margin: 0;
}

.cr-facts {
	container-type: inline-size;
}

.cr-facts__row {
	border-top: 1px solid var(--cr-line);
	display: grid;
	gap: 0.25rem 1rem;
	grid-template-columns: minmax(min(8rem, 100%), 12rem) 1fr;
	padding: 0.625rem 0;
}

/* Values wrap inside their column (long e-mail addresses, URLs) instead of leaving the screen. */
.cr-facts__row > dd {
	overflow-wrap: break-word;
}

/* Large text in a narrow column: the label goes above the value (owner 2026-10-16, TXT200-05).
   rem-based, so it follows the browser text size; at the default size every column used today is wider. */
@container (max-width: 17.5rem) {
	.cr-facts__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cr-facts dt {
	color: var(--cr-muted);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	padding-top: 0.15em;
	text-transform: uppercase;
}

.cr-facts dd {
	margin: 0;
}

@media (max-width: 37.49875em) {
	.cr-facts__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Contact section + form (F4 §8). */
.cr-contact {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

@media (min-width: 60em) {
	.cr-contact {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

.cr-contact__title {
	color: var(--cr-text);
	font-family: var(--cr-font-text);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 650;
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* Direct contacts next to the form (owner-approved design 2026-10-28): large gold phone, large e-mail, smaller
 * WhatsApp with its mark; left-aligned, no labels, no rules, underline only on hover / keyboard focus. */
.cr-direct {
	display: grid;
	gap: 0.5rem;
	justify-items: start;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.cr-direct__item {
	margin: 0;
	max-width: 100%;
}

/* Page-content list rules (e.g. on /kontakti/) must not add markers or an indent to the contact list. */
.cr-contact__direct .cr-direct {
	margin: 0;
	padding: 0;
}

.cr-direct .cr-direct__item {
	list-style: none;
}

.cr-direct .cr-direct__item::marker {
	content: none;
}

/* The narrow contact column (e.g. /kontakti/, 1fr of 3) scales the large lines down instead of breaking them inside
 * the number or the address; wider columns keep the approved size. */
.cr-contact__direct {
	container-type: inline-size;
}

.cr-direct__link {
	color: var(--cr-text);
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	max-width: 100%;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.cr-direct__item--phone .cr-direct__link,
.cr-direct__item--email .cr-direct__link {
	font-family: var(--cr-font-text);
	font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
	font-size: min(clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem), 10.5cqi);
	font-weight: 650;
	white-space: nowrap;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.cr-direct__item--phone .cr-direct__link {
	color: var(--cr-gold);
}

.cr-direct__item--whatsapp {
	margin-top: 0.75rem;
}

.cr-direct__item--whatsapp .cr-direct__link {
	font-size: var(--wp--preset--font-size--base, 1rem);
}

.cr-direct__mark {
	color: var(--cr-gold);
	flex: none;
	height: 1.75rem;
	width: 1.75rem;
}

.cr-direct__link:hover,
.cr-direct__link:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.cr-form {
	max-width: 46rem;
	position: relative; /* Contains the off-screen honeypot. */
}

.cr-form__legend {
	color: var(--cr-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.cr-form__grid {
	display: grid;
	gap: 0.875rem var(--wp--preset--spacing--50);
}

@media (min-width: 37.5em) {
	.cr-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cr-form__field.is-wide {
		grid-column: 1 / -1;
	}
}

.cr-form__field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cr-form__field :is(input:not([type="checkbox"]), select, textarea) {
	width: 100%;
}

.cr-form__field--checkbox {
	align-items: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.cr-form__field--checkbox input {
	flex: 0 0 auto;
	height: 1.5rem;
	margin: 0.1rem 0 0;
	width: 1.5rem;
}

.cr-form__field--checkbox label {
	flex: 1 1 0;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	min-height: 1.5rem;
}

/* Privacy policy acknowledgement: own row directly above the submit button. */
.cr-form__ack {
	margin-top: var(--wp--preset--spacing--50);
}

.cr-form__req {
	color: var(--cr-muted);
	font-weight: 400;
}

.cr-form__error {
	color: var(--wp--custom--color--error);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin: 0.375rem 0 0;
	width: 100%;
}

.cr-form__summary,
.cr-form__status {
	border-left: 3px solid var(--wp--custom--color--error);
	background-color: var(--cr-raised);
	margin-bottom: var(--wp--preset--spacing--50);
	padding: 1rem 1.25rem;
}

.cr-form__status.is-success {
	/* Site lilac (owner 2026-10-29): violet-light #B48CBF on raised #242327 ≈ 5.5:1 (≥ 3:1 for a UI accent). */
	border-left-color: var(--cr-violet-light);
}

.cr-form__summary > *,
.cr-form__status > * {
	margin: 0;
}

.cr-form__summary ul {
	margin-top: 0.5rem;
	padding-left: 1.25rem;
}

.cr-form__summary a {
	color: var(--cr-text);
}

.cr-form__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: var(--wp--preset--spacing--50);
}

/* Final row: CTA + the small "* obligāts · Privātuma politika" note. */
.cr-form__actions .cr-form__legend {
	font-size: var(--wp--preset--font-size--xs);
	margin: 0;
}

.cr-form__demo {
	color: var(--cr-muted);
	font-size: var(--wp--preset--font-size--xs);
	margin: 0.75rem 0 0;
}

/* Editor-only diagnostics (logged-in editors; never visitors). */
.cr-editor-notice {
	border: 1px dashed var(--wp--custom--color--warning);
	color: var(--cr-text);
	font-size: var(--wp--preset--font-size--sm);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0.75rem 1rem;
}

.cr-editor-notice__label {
	color: var(--wp--custom--color--warning);
	font-family: var(--cr-font-mono);
	font-weight: 600;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 13b. F8 — service pages, named price lines, card copy, breadcrumbs
 * ------------------------------------------------------------------------- */
.cr-nowrap {
	/* Kept together like nowrap (the box moves to the next line as a whole), but never wider than
	   the line: with very large text a pair such as "SEO / GEO" may wrap inside instead of
	   overflowing (owner 2026-10-16: 200 % text check). */
	display: inline-block;
	max-width: 100%;
	text-indent: 0;
}

/* Hero note (differentiator line) and named starting prices. */
.cr-hero__note {
	color: var(--cr-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	max-width: 40rem;
}

.cr-hero-prices > li {
	max-width: 100%;
	min-width: min(12rem, 100%); /* large text: never wider than the column */
}

.cr-price-lines {
	display: grid;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cr-price-lines li {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem 0.5rem;
}

.cr-price-lines__label {
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
}

.cr-price-lines__value {
	font-family: var(--cr-font-mono);
	font-weight: 600;
}

.cr-price-lines--hero .cr-price-lines__label {
	color: var(--cr-muted);
}

.cr-price-lines--hero .cr-price-lines__value {
	color: var(--cr-gold);
	font-size: 1.0625rem;
}

/* Service card: positioning line + price lines on gold. */
.cr-service-card__text {
	color: var(--cr-on-gold);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	margin: 0;
	max-width: 34ch;
}

.cr-service-card .cr-price-lines {
	color: var(--cr-on-gold);
	margin-top: auto;
	padding-right: 2rem;
}

.cr-service-card .cr-price-lines__value {
	font-size: 1rem;
}

/* Breadcrumbs (Rank Math trail or minimal fallback). */
.cr-breadcrumbs {
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
	line-height: 2.25; /* Same line rhythm for the Rank Math trail (no ol/li) and the fallback list. */
}

.cr-breadcrumbs p {
	margin: 0;
}

.cr-breadcrumbs ol {
	/* Inline flow (M12, 2026-10-20): long trails (Sākums › Pakalpojumi › hub › page) wrap like a sentence at any
	   width and text size — full names, no squeezed column for the last item, no gap before a wrapped line. */
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cr-breadcrumbs li {
	display: inline;
}

.cr-breadcrumbs li + li::before {
	color: var(--cr-muted);
	/* The zero-width space after "›" is the line-break opportunity between items (the list markup has no whitespace
	   between <li>s), so a long trail wraps between crumbs instead of splitting a word. */
	content: "›\200B" / "";
	padding-inline: 0.5rem;
}

.cr-breadcrumbs a {
	color: var(--cr-muted);
	padding-block: 0.375rem;
	text-underline-offset: 0.25em;
}

.cr-breadcrumbs a:hover {
	color: var(--cr-gold-light);
}

.cr-breadcrumbs [aria-current="page"],
.cr-breadcrumbs .last {
	color: var(--cr-text);
	overflow-wrap: anywhere;
}

/* Service page hero + body. */
.cr-main--service {
	padding-top: 0;
}

.cr-service-hero {
	border-bottom: 1px solid var(--cr-line);
	padding: var(--wp--preset--spacing--50) var(--cr-gutter) var(--wp--preset--spacing--70);
}

.cr-service-hero__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.cr-service-hero__inner > * {
	margin-block: 0;
	max-width: 50rem;
}

.cr-service-hero__inner > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.cr-service-hero .cr-service-hero__title {
	font-size: var(--wp--preset--font-size--heading-1);
	line-height: 1.12;
	text-wrap: balance;
}

.cr-service-intro {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.cr-service-intro__summary {
	color: var(--cr-text);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	margin: 0;
	max-width: 42rem;
}

.cr-service-intro .cr-price-lines {
	border-top: 1px solid var(--cr-line);
	gap: 0.375rem;
	padding-top: var(--wp--preset--spacing--30);
}

.cr-service-intro .cr-price-lines__label {
	color: var(--cr-muted);
	min-width: min(11rem, 100%); /* TXT200-03: never wider than the column; the price then moves below */
}

.cr-price-lines__value {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.cr-service-intro .cr-price-lines__value {
	color: var(--cr-gold);
}

.cr-service-body {
	padding: var(--wp--preset--spacing--70) var(--cr-gutter);
}

/* Comparison tables: cells and headers wrap; the region scrolls only as a fallback. */
.cr-service-body .wp-block-table {
	overflow-x: auto;
}

.cr-service-body .wp-block-table th {
	white-space: normal;
}

/* Narrow screens: each row becomes a stacked card; labels come from the header row. */
@media (max-width: 37.49875em) {
	.cr-service-body .wp-block-table :is(table, tbody, tr, td) {
		display: block;
		width: 100%;
	}

	.cr-service-body .wp-block-table thead {
		block-size: 1px;
		clip-path: inset(50%);
		inline-size: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
	}

	.cr-service-body .wp-block-table tr {
		border-bottom: 1px solid var(--cr-line);
		padding-block: 0.75rem;
	}

	.cr-service-body .wp-block-table td {
		border: 0;
		overflow-wrap: break-word;
		padding: 0.25rem 0;
	}

	.cr-service-body .wp-block-table td:first-child {
		color: var(--cr-gold);
		font-size: var(--wp--preset--font-size--base);
	}

	.cr-service-body .wp-block-table td[data-label]::before {
		color: var(--cr-muted);
		content: attr(data-label);
		display: block;
		font-family: var(--cr-font-mono);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.cr-service-body .wp-block-table td:first-child::before {
		display: none;
	}
}

.cr-service-body .wp-block-table :is(td, th) {
	overflow-wrap: break-word;
	vertical-align: top;
}

/* ---------------------------------------------------------------------------
 * 13c. F9 — Pricing page (/cenas/) and project budget calculator
 * ------------------------------------------------------------------------- */
.cr-pricing-hero .cr-hero__actions {
	margin-top: var(--wp--preset--spacing--50);
}

/* Editorial catalogue (owner reviews 2–3): no navigation, no notes; each category is ONE soft
   panel — a slightly lifted dark surface with a thin gold top rule, no outline, no shadow.
   Gold only for the rule, category names and prices (never a gold background). */
.cr-section--price-catalogue {
	background-color: var(--cr-base);
}

.cr-price-cats {
	align-items: start;
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 40em) {
	.cr-price-cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 68.75em) {
	.cr-price-cats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cr-price-cat {
	background-color: var(--cr-surface);
	border-top: 1px solid var(--cr-gold);
	container-type: inline-size;
	min-width: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	scroll-margin-top: calc(var(--cr-header-h) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
	transition: background-color var(--cr-dur-fast) var(--cr-ease);
}

/* Restrained emphasis: a faint gold tint while the block is hovered or its link focused. */
.cr-price-cat:hover,
.cr-price-cat:focus-within {
	background-color: color-mix(in srgb, var(--cr-gold) 5%, var(--cr-surface));
}

.cr-price-cat__title {
	color: var(--cr-gold);
	font-family: var(--cr-font-display);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.cr-price-cat__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Name left (wraps inside its column), price right on the first line — always aligned. The price may
   wrap inside its own column when name + price do not fit (large text); in a narrow card the price
   moves below the name (container query below) — never outside the block (owner 2026-10-16, TXT200-02). */
.cr-price-cat__list li {
	align-items: baseline;
	display: grid;
	gap: 0.125rem 1.25rem;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 0.625rem 0;
}

.cr-price-cat__list li + li {
	border-top: 1px solid color-mix(in srgb, var(--cr-line) 70%, transparent);
}

.cr-price-cat__name {
	color: var(--cr-text);
	font-weight: 500;
	min-width: 0;
	overflow-wrap: anywhere;
}

.cr-price-cat__price {
	color: var(--cr-gold);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
	font-variant-numeric: tabular-nums;
	max-width: 100%;
	text-align: right;
}

/* Large text in a narrow card: the price goes below its name (rem-based; never at the default size). */
@container (max-width: 12rem) {
	.cr-price-cat__list li {
		grid-template-columns: minmax(0, 1fr);
	}

	.cr-price-cat__price {
		text-align: left;
	}
}

.cr-price-cat .cr-text-link {
	display: inline-flex;
	font-size: var(--wp--preset--font-size--sm);
	margin-top: var(--wp--preset--spacing--20);
}

/* Calculator invitation: a quiet band between the catalogue and the calculator. */
.cr-section--calc-cta {
	background-color: var(--cr-surface);
	text-align: center;
}

.cr-section--calc-cta .cr-section__head {
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--50);
}

.cr-section--calc-cta .cr-eyebrow {
	justify-content: center;
}

.cr-calc-cta__action {
	margin: 0;
}

.cr-button__arrow {
	margin-left: 0.5rem;
}

.cr-maintenance-card .cr-pricing-card__foot {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40);
}

/* Buttons rendered as <button> (calculator navigation): no UA background. */
button.cr-button {
	cursor: pointer;
}

.cr-button--outline {
	background-color: transparent;
}

/* Calculator (F9 final UX): four short stages, one decision at a time, then a full-width
   result. Gold only for the selected state, the active stage, the primary CTA and the amount. */
.cr-section--calculator {
	background-color: var(--cr-base);
	border-top: 0;
	padding-top: var(--wp--preset--spacing--60);
}

.cr-calc-wrap {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

@media (min-width: 60em) {
	.cr-calc-wrap {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) 18rem;
	}

	.cr-calc-result,
	.cr-calc-request {
		grid-column: 1 / -1;
	}

	.cr-calc__summary {
		position: sticky;
		top: calc(var(--cr-header-h) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
	}
}

.cr-calc [hidden],
.cr-calc-wrap [hidden] {
	display: none !important;
}

/* Progress: one compact line. */
.cr-calc__progress {
	border-bottom: 1px solid var(--cr-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
}

.cr-calc__progress li {
	border-bottom: 2px solid transparent;
	color: var(--cr-muted);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	margin-bottom: -1px;
	padding: 0.5rem 0;
	text-transform: uppercase;
}

.cr-calc__progress-no {
	margin-right: 0.25rem;
}

/* Narrow screens: numbers for all stages, the label only for the current one (one line). */
@media (max-width: 29.9375em) {
	.cr-calc__progress {
		gap: 0 1rem;
	}

	.cr-calc__progress li:not([aria-current]) .cr-calc__progress-label {
		clip: rect(0 0 0 0);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

.cr-calc__progress li[aria-current="step"] {
	border-bottom-color: var(--cr-gold);
	color: var(--cr-text);
}

.cr-calc__progress li.is-done::after {
	content: " ✓";
}

.cr-calc__step,
.cr-calc__panel,
.cr-calc__field {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.cr-calc__step + .cr-calc__step {
	margin-top: var(--wp--preset--spacing--60);
}

.cr-calc.is-enhanced .cr-calc__step + .cr-calc__step {
	margin-top: 0;
}

.cr-calc__step > legend {
	margin-bottom: var(--wp--preset--spacing--50);
	padding: 0;
}

/* One heading per screen. */
.cr-calc__legend {
	color: var(--cr-text);
	display: block;
	font-family: var(--cr-font-display);
	font-size: var(--wp--preset--font-size--heading-3);
	line-height: 1.2;
}

.cr-calc__legend:focus,
.cr-calc__panel-name:focus {
	outline: none;
}

.cr-calc__legend:focus-visible,
.cr-calc__panel-name:focus-visible {
	outline: var(--cr-focus);
	outline-offset: 4px;
}

/* Per-service panels: one at a time when enhanced. */
.cr-calc__panel + .cr-calc__panel {
	margin-top: var(--wp--preset--spacing--60);
}

.cr-calc.is-enhanced .cr-calc__panel:not(.is-current) {
	display: none;
}

.cr-calc.is-enhanced .cr-calc__panel + .cr-calc__panel {
	margin-top: 0;
}

.cr-calc__panel-title {
	align-items: baseline;
	color: var(--cr-gold);
	display: flex;
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	gap: 0.75rem;
	letter-spacing: 0.08em;
	margin-bottom: var(--wp--preset--spacing--40);
	padding: 0;
	text-transform: uppercase;
	width: 100%;
}

.cr-calc__count {
	color: var(--cr-muted);
	letter-spacing: 0;
}

.cr-calc__count:empty {
	display: none;
}

/* One service: its name above the panel adds nothing. */
.cr-calc.is-single .cr-calc__panel-title {
	clip: rect(0 0 0 0);
	height: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.cr-calc__panel-hint,
.cr-calc__hint,
.cr-calc__meta,
.cr-calc__placeholder,
.cr-calc__disclaimer {
	color: var(--cr-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.cr-calc__meta {
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* Large selectable cards (stages 1–2). The native input stays focusable but is drawn as a
   mark (circle = one, square = several); selection = gold border + filled mark + text. */
.cr-calc__choices {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.cr-calc__choice {
	background-color: var(--cr-surface);
	border: 1px solid var(--cr-line);
	box-sizing: border-box;
	cursor: pointer;
	display: grid;
	gap: 0.375rem 0.875rem;
	grid-template-columns: auto minmax(0, 1fr);
	min-height: 5.5rem;
	padding: 1.125rem 1.25rem;
	position: relative;
	transition: border-color var(--cr-dur-fast) var(--cr-ease), background-color var(--cr-dur-fast) var(--cr-ease);
}

.cr-calc__choice:hover {
	border-color: var(--cr-muted);
}

.cr-calc__choice input,
.cr-calc__check input,
.cr-calc__pill input {
	height: 100%;
	inset: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 100%;
	cursor: pointer;
}

.cr-calc__mark {
	border: 1px solid var(--cr-muted);
	border-radius: 50%;
	box-sizing: border-box;
	display: inline-block;
	flex: 0 0 auto;
	grid-row: span 2;
	height: 1.25rem;
	margin-top: 0.125rem;
	position: relative;
	width: 1.25rem;
}

.cr-calc__choice:has(input[type="checkbox"]) .cr-calc__mark,
.cr-calc__check .cr-calc__mark {
	border-radius: 0;
}

.cr-calc__choice:has(input:checked),
.cr-calc__check:has(input:checked),
.cr-calc__pill:has(input:checked) {
	background-color: var(--cr-raised);
	border-color: var(--cr-gold);
}

.cr-calc__choice:has(input:checked) {
	box-shadow: inset 0 0 0 1px var(--cr-gold);
}

:is(.cr-calc__choice, .cr-calc__check, .cr-calc__pill):has(input:checked) .cr-calc__mark {
	background-color: var(--cr-gold);
	border-color: var(--cr-gold);
}

:is(.cr-calc__choice, .cr-calc__check, .cr-calc__pill):has(input:checked) .cr-calc__mark::after {
	border: solid var(--cr-on-gold);
	border-width: 0 2px 2px 0;
	content: "";
	height: 0.55rem;
	left: 50%;
	position: absolute;
	top: 45%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 0.3rem;
}

.cr-calc__choice:has(input:focus-visible),
.cr-calc__pill:has(input:focus-visible),
.cr-calc__check:has(input:focus-visible) {
	outline: var(--cr-focus);
	outline-offset: 2px;
}

.cr-calc__choice-title {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.cr-calc__choice-price {
	color: var(--cr-muted);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
	grid-column: 2;
}

.cr-calc__choice:has(input:checked) .cr-calc__choice-price {
	color: var(--cr-gold);
}

/* Stage 3 blocks: Apjoms / Saturs / Funkcijas. */
.cr-calc__block + .cr-calc__block {
	margin-top: var(--wp--preset--spacing--50);
}

.cr-calc__block-title {
	color: var(--cr-muted);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.cr-calc__block--features,
.cr-calc__block--content,
.cr-calc__more {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.cr-calc__block > .cr-calc__block-title,
.cr-calc__more {
	grid-column: 1 / -1;
}

.cr-calc__block--scope > * + * {
	margin-top: 0.5rem;
}

.cr-calc__field-title {
	color: var(--cr-text);
	font-weight: 600;
	margin-bottom: 0.75rem;
	padding: 0;
}

.cr-calc__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.cr-calc__pill {
	align-items: center;
	background-color: var(--cr-surface);
	border: 1px solid var(--cr-line);
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	gap: 0.625rem;
	min-height: 48px;
	padding: 0.5rem 1rem;
	position: relative;
}

.cr-calc__pill .cr-calc__mark {
	height: 1rem;
	margin: 0;
	width: 1rem;
}

/* Quantity rows: label left, compact stepper right. */
.cr-calc__qty {
	align-items: center;
	background-color: var(--cr-surface);
	border: 1px solid var(--cr-line);
	display: grid;
	gap: 0.25rem 1rem;
	grid-template-columns: minmax(0, 1fr) auto;
	min-height: 64px;
	padding: 0.5rem 0.5rem 0.5rem 1.25rem;
}

.cr-calc__qty label {
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	overflow-wrap: anywhere;
}

.cr-calc__unit {
	display: none;
}

.cr-calc__stepper {
	align-items: center;
	display: inline-flex;
}

.cr-calc .cr-calc__stepper input[type="number"][inputmode][min][max] {
	-moz-appearance: textfield;
	appearance: textfield;
	background: transparent;
	border: 1px solid var(--cr-line);
	border-radius: 0;
	box-sizing: border-box;
	color: var(--cr-text);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--base);
	height: 48px;
	min-height: 48px;
	padding: 0 0.25rem;
	text-align: center;
	width: 4rem;
}

.cr-calc .cr-calc__stepper.is-enhanced input[type="number"][inputmode][min][max] {
	border-left: 0;
	border-right: 0;
	width: 3.25rem;
}

.cr-calc__stepper input::-webkit-outer-spin-button,
.cr-calc__stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cr-calc__stepper input:focus-visible,
.cr-calc__step-btn:focus-visible,
.cr-calc__more-btn:focus-visible,
.cr-calc__summary-toggle:focus-visible {
	outline: var(--cr-focus);
	outline-offset: 2px;
	position: relative;
}

.cr-calc__step-btn {
	background: transparent;
	border: 1px solid var(--cr-line);
	color: var(--cr-text);
	cursor: pointer;
	font-family: var(--cr-font-mono);
	font-size: 1.25rem;
	height: 48px;
	line-height: 1;
	padding: 0;
	width: 48px;
}

.cr-calc__step-btn:hover {
	border-color: var(--cr-muted);
}

.cr-calc__qty .cr-form__error {
	grid-column: 1 / -1;
}

/* Toggle cards (stage 3 content / features). */
.cr-calc__check {
	align-items: center;
	background-color: var(--cr-surface);
	border: 1px solid var(--cr-line);
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	gap: 0.75rem;
	line-height: 1.4;
	min-height: 64px;
	overflow-wrap: anywhere;
	padding: 0.75rem 1.25rem;
	position: relative;
}

.cr-calc__check-label {
	flex: 1 1 auto;
	font-weight: 600;
}

.cr-calc__tag {
	border: 1px solid var(--cr-line);
	color: var(--cr-muted);
	flex: 0 0 auto;
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	padding: 0.125rem 0.5rem;
}

/* Content toggle: when on, the stepper sits directly under its card. */
.cr-calc__opt--toggle .cr-calc__toggled.is-toggled .cr-calc__qty {
	border-top: 0;
}

.cr-calc__toggled.is-toggled .cr-calc__qty {
	grid-template-columns: auto minmax(0, 1fr);
	min-height: 0;
	padding: 0.5rem 1.25rem 0.75rem;
}

/* The toggle card already names the item: the stepper label stays for assistive tech only. */
.cr-calc__toggled.is-toggled label {
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.cr-calc__toggled.is-toggled .cr-calc__unit {
	color: var(--cr-muted);
	display: inline;
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
}

.cr-calc__more-btn {
	background: transparent;
	border: 1px dashed var(--cr-line);
	color: var(--cr-text);
	cursor: pointer;
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
	min-height: 48px;
	padding: 0.5rem 1rem;
}

.cr-calc__more-btn:hover {
	border-color: var(--cr-gold);
}

/* Stage 4: contact only. */
.cr-calc__gate-fields {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.cr-calc__req {
	color: var(--cr-muted);
}

.cr-calc__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--50);
}

.cr-calc__nav [data-calc-next],
.cr-calc__nav [type="submit"] {
	margin-left: auto;
}

.cr-calc__nav:has([data-calc-back][hidden]) [data-calc-next],
.cr-calc__nav:not(:has([data-calc-back])) [data-calc-next] {
	margin-left: 0;
}

/* "Jūsu izvēle": desktop sticky card; mobile bottom bar (drawer). Names only, no prices. */
.cr-calc__summary {
	background-color: var(--cr-surface);
	border-top: 2px solid var(--cr-line);
	padding: var(--wp--preset--spacing--50);
}

.cr-calc__summary-title {
	color: var(--cr-muted);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: 0.08em;
	margin: 0 0 var(--wp--preset--spacing--40);
	text-transform: uppercase;
}

.cr-calc__sum {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cr-calc__sum li {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.cr-calc__sum-name {
	font-family: var(--cr-font-display);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.3;
}

.cr-calc__sum-item {
	color: var(--cr-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.cr-calc__placeholder {
	margin: 0;
}

.cr-calc__summary-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--cr-text);
	cursor: pointer;
	display: flex;
	flex-wrap: wrap; /* large text: the current choice and "Skatīt" move to the next line (TXT200-07) */
	font: inherit;
	gap: 0.5rem;
	min-height: 56px;
	padding: 0 var(--cr-gutter);
	text-align: left;
	width: 100%;
}

.cr-calc__summary-label {
	color: var(--cr-muted);
	flex: 0 0 auto;
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
}

.cr-calc__summary-current {
	flex: 1 1 6rem;
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cr-calc__summary-current:not(:empty)::before {
	color: var(--cr-muted);
	content: "· ";
}

.cr-calc__summary-action {
	color: var(--cr-gold);
	flex: 0 0 auto;
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: underline;
}

@media (min-width: 60em) {
	.cr-calc__summary-toggle {
		display: none !important;
	}
}

@media (max-width: 59.9375em) {
	html:has(.cr-calc-wrap.is-enhanced) {
		scroll-padding-bottom: 5rem;
	}

	.cr-calc-wrap.is-enhanced .cr-calc__summary {
		border-top: 1px solid var(--cr-gold);
		bottom: 0;
		box-shadow: 0 -12px 24px rgb(0 0 0 / 0.35);
		margin-inline: calc(var(--cr-gutter) * -1);
		padding: 0;
		position: sticky;
		z-index: 20;
	}

	.cr-calc-wrap.is-enhanced .cr-calc__summary-title {
		clip: rect(0 0 0 0);
		height: 1px;
		margin: 0;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.cr-calc-wrap.is-enhanced .cr-calc__summary-body {
		display: none;
	}

	.cr-calc-wrap.is-enhanced .cr-calc__summary.is-open .cr-calc__summary-body {
		border-top: 1px solid var(--cr-line);
		display: block;
		max-height: 55vh;
		overflow-y: auto;
		padding: var(--wp--preset--spacing--40) var(--cr-gutter) var(--wp--preset--spacing--50);
	}
}

/* Result: a dedicated full-width reward screen. */
.cr-calc-result {
	background-color: var(--cr-surface);
	border-top: 2px solid var(--cr-gold);
	padding: var(--wp--preset--spacing--60) clamp(1.25rem, 4vw, 3.5rem);
}

.cr-calc-result:focus,
.cr-calc-result:focus-visible {
	outline: none; /* programmatic focus target (tabindex=-1) for the announcement only */
}

.cr-calc-result__done {
	color: var(--cr-gold);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	margin: 0 0 var(--wp--preset--spacing--30);
	text-transform: uppercase;
}

.cr-calc-result__title {
	font-family: var(--cr-font-display);
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 400;
	line-height: 1.15;
	margin: 0;
}

.cr-calc-result__packages {
	color: var(--cr-text);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.06em;
	margin: var(--wp--preset--spacing--30) 0 0;
	text-transform: uppercase;
}

.cr-calc-result__grid {
	border-top: 1px solid var(--cr-line);
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--50);
}

@media (min-width: 48em) {
	.cr-calc-result__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

.cr-calc-result__amount {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
}

.cr-calc-result__amount + .cr-calc-result__amount {
	margin-top: var(--wp--preset--spacing--50);
}

.cr-calc-result__label,
.cr-calc-result__subtitle {
	color: var(--cr-muted);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cr-calc-result__value {
	color: var(--cr-gold);
	font-family: var(--cr-font-display);
	font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
	line-height: 1.15;
}

.cr-calc-result__amount--monthly .cr-calc-result__value {
	color: var(--cr-text);
	font-size: var(--wp--preset--font-size--heading-3);
}

.cr-calc-result__chosen,
.cr-calc-result__individual {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cr-calc-result__chosen li,
.cr-calc-result__individual li {
	border-bottom: 1px solid var(--cr-line);
	padding: 0.5rem 0;
}

.cr-calc-result__chosen li::before {
	color: var(--cr-gold);
	content: "✓ ";
}

.cr-calc-result__subtitle {
	display: block;
	margin: var(--wp--preset--spacing--40) 0 0.25rem;
}

.cr-calc-result__chosen + .cr-calc-result__subtitle {
	margin-top: var(--wp--preset--spacing--50);
}

.cr-calc-result__individual li::before {
	color: var(--cr-muted);
	content: "+ ";
}

.cr-calc-result__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin: var(--wp--preset--spacing--60) 0 0;
}

.cr-calc-result__edit {
	color: var(--cr-text);
	font-size: var(--wp--preset--font-size--sm);
}

.cr-calc-result .cr-calc__disclaimer {
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* Optional project request right below the result. */
.cr-calc-request {
	max-width: 52rem;
	scroll-margin-top: calc(var(--cr-header-h) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
}

.cr-calc-request__title {
	font-family: var(--cr-font-display);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 400;
	margin: 0;
}

.cr-calc-request__intro {
	color: var(--cr-muted);
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--50);
}

/* Requests off: the region shows the direct contacts under its title. */
.cr-calc-request__title + .cr-facts {
	margin-top: var(--wp--preset--spacing--40);
}

.cr-contact--direct-only {
	display: block;
}

/* Optional attachments: explicit Latvian control (the native input is visually hidden but
   focusable; its label is the visible button). One compact row + one short help line. */
.cr-file {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1rem;
	position: relative;
}

.cr-file__input {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.cr-form .cr-file .cr-file__button {
	align-items: center;
	box-sizing: border-box;
	gap: 0.375rem;
	height: 44px;
	line-height: 1.2;
	width: auto;
	border: 1px dashed var(--cr-muted);
	color: var(--cr-text);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin: 0;
	min-height: 44px;
	padding: 0 1rem;
}

/* Large text (200 %): the file button may wrap its label instead of overflowing the form. */
.cr-form .cr-file .cr-file__button {
	flex-shrink: 1;
	height: auto;
	max-width: 100%;
	padding-block: 0.5rem;
}

.cr-file__button:hover,
.cr-file.has-files .cr-file__button {
	border-color: var(--cr-gold);
	color: var(--cr-gold);
}

.cr-file:has(.cr-file__input:focus-visible) .cr-file__button {
	outline: var(--cr-focus);
	outline-offset: 2px;
}

.cr-file__status {
	color: var(--cr-text);
	font-size: var(--wp--preset--font-size--sm);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cr-file__status:empty {
	display: none;
}

.cr-file .cr-form__help {
	flex-basis: 100%;
}

/* F12.3 request forms: one file — "Noņemt failu" next to the chosen name; a file refused before sending
   (too large / wrong type) is explained in the status line, which may then wrap. */
.cr-form .cr-file .cr-file__remove {
	background: none;
	border: 0;
	color: var(--cr-text);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--sm);
	min-height: 44px;
	padding: 0 0.25rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cr-form .cr-file .cr-file__remove:focus-visible {
	outline: var(--cr-focus);
	outline-offset: 2px;
}

.cr-file.has-file-error .cr-file__status,
.cr-file--single .cr-file__status {
	white-space: normal;
}

.cr-file.has-file-error .cr-file__status {
	color: var(--wp--custom--color--error);
	font-weight: 600;
}

.cr-file__keep {
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--sm);
}

.cr-form__help {
	color: var(--cr-muted);
	font-size: var(--wp--preset--font-size--xs);
	margin: 0;
}

.cr-form__field--file .cr-form__error {
	margin-top: 0.25rem;
}

/* Message: compact by default, grows with the text where supported (selector outranks the
   global field rule's 48 px minimum). */
.cr-form .cr-form__field.cr-form__field--textarea textarea[name][rows]:not([type]) {
	field-sizing: content;
	max-height: 20rem;
	min-height: 7.5rem;
	resize: vertical;
}

/* Contact section: a compact editorial rhythm (CTA visible on a laptop screen). */
.cr-section--contact {
	padding-block: var(--wp--preset--spacing--70);
}

.cr-section--contact .cr-section__head {
	margin-bottom: var(--wp--preset--spacing--50);
}

.cr-section--contact .cr-section__intro {
	font-size: var(--wp--preset--font-size--base);
}

@media (max-width: 37.4375em) {
	.cr-form .cr-form__field.cr-form__field--textarea textarea[name][rows]:not([type]) {
		min-height: 7rem;
	}
}

.cr-turnstile:not(:empty) {
	margin-top: var(--wp--preset--spacing--40);
	min-height: 65px;
}

.cr-form__grid + .cr-form__legend {
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* Contact form: selection context from a pricing card or the calculator. */
.cr-form__context {
	border-left: 3px solid var(--cr-gold);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding-left: 1rem;
}

.cr-form__context-title {
	font-weight: 650;
	margin: 0;
}

.cr-form__context ul {
	margin: 0.25rem 0 0;
	padding-left: 1.1rem;
}

/* F12.2c: "Pieteikums par" — compact summary with "Mainīt"; the selects open on demand. */
.cr-request-about {
	border-left: 3px solid var(--cr-gold);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding-left: 1rem;
}

.cr-request-about__summary {
	cursor: pointer;
	line-height: 1.5;
	list-style: none;
	overflow-wrap: anywhere;
	padding: 0.125rem 0;
}

/* A form bound to its package (request form profile): the same line, fixed — no "Mainīt". */
.cr-request-about--fixed .cr-request-about__summary {
	cursor: auto;
	margin: 0;
}

.cr-request-about__summary::-webkit-details-marker {
	display: none;
}

.cr-request-about__label {
	font-weight: 650;
}

.cr-request-about__change {
	color: var(--cr-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

.cr-request-about[open] .cr-request-about__change {
	text-decoration-thickness: 2px;
}

.cr-request-about__fields {
	display: grid;
	gap: 0.875rem var(--wp--preset--spacing--50);
	margin-top: 0.75rem;
}

@media (min-width: 37.5em) {
	.cr-request-about__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cr-request-about__help {
		grid-column: 1 / -1;
	}
}

.cr-request-about__help {
	margin: 0;
}

.cr-request-about .cr-form__field[hidden] {
	display: none;
}

/* Honeypot: off screen for people and assistive technology, still present for bots (never display:none). */
.cr-form__hp {
	height: 1px;
	left: -10000px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.cr-form--done .cr-form__status:focus {
	outline-offset: 4px;
}

.cr-form__again {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 13b. Motion system (F9 — docs/design/F9_MOTION_SYSTEM.md)
 *
 * One small reusable system, no library: A section reveal, B card stagger, C decorative
 * brand layer, D image reveal, E link/CTA hover, F header (§5, scroll-driven), G calculator.
 * Levels: 1 = most content (12 px), 2 = services/portfolio/clients (20 px, stagger, image
 * reveal), 3 = hero + calculator invitation (brand drawing). Only transform, opacity,
 * clip-path and stroke-dashoffset are animated; every effect runs once and ends in the
 * element's normal state. Hidden pre-reveal states exist only on classes added by
 * assets/js/motion.js (below the first viewport, never with reduced motion), so content is
 * fully visible without JavaScript.
 * ------------------------------------------------------------------------- */
:root {
	--cr-motion-fast: 160ms;
	--cr-motion-base: 320ms;
	--cr-motion-reveal: 880ms; /* owner 2026-10-08: slower, smoother content reveals (was 560 ms) */
	--cr-motion-draw: 1200ms;
	--cr-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--cr-ease-reveal: cubic-bezier(0.25, 0.6, 0.3, 1); /* soft ease-out: no hard stop, no overshoot */
	--cr-rise-1: 16px;
	--cr-rise-2: 22px;
}

@keyframes cr-draw-y {
	from { transform: scaleY(0); }
}

@keyframes cr-draw-x {
	from { transform: scaleX(0); }
}

@keyframes cr-draw-stroke {
	from { stroke-dashoffset: 1; }
}

@keyframes cr-pulse-in {
	0% { opacity: 0; transform: scale(0); }
	70% { opacity: 1; transform: scale(1.15); }
}

@keyframes cr-wipe-up {
	from { clip-path: inset(100% 0 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes cr-fade-rise {
	from { opacity: 0; transform: translate3d(0, 8px, 0); }
}

@keyframes cr-fade {
	from { opacity: 0; }
}

/* A / B — reveal (motion.js adds .cr-reveal, then .is-in; removes both afterwards). */
.cr-reveal {
	opacity: 0;
	transform: translate3d(0, var(--cr-rise, var(--cr-rise-1)), 0);
}

/* Doubled class: must beat component transitions such as ".cr-service-card.is-linked" (hover),
 * which otherwise replaced the reveal with a 160 ms jump (found 2026-10-09). The helper classes
 * are removed after the reveal, so hover transitions are untouched. */
.cr-reveal.cr-reveal.is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--cr-reveal-dur, var(--cr-motion-reveal)) var(--cr-ease-reveal) var(--cr-delay, 0ms),
		transform var(--cr-reveal-dur, var(--cr-motion-reveal)) var(--cr-ease-reveal) var(--cr-delay, 0ms);
}

/* Card groups (owner 2026-10-09): a clearly visible, calm slide-up as each row enters. */
:is(.cr-grid--services, .cr-grid--articles) > .cr-reveal {
	--cr-reveal-dur: 1050ms;
	--cr-rise: 36px;
}

.cr-grid--projects > .cr-reveal {
	--cr-reveal-dur: 1000ms;
	--cr-rise: 32px;
}

.cr-logos > .cr-reveal {
	--cr-reveal-dur: 920ms;
	--cr-rise: 18px;
}

:is(.cr-grid--offers, .cr-grid--maintenance, .cr-price-cats) > .cr-reveal {
	--cr-rise: var(--cr-rise-2);
}

/* Section eyebrow rule draws in with its heading (brand line motif, Level 1). */
.cr-section__head.cr-reveal .cr-eyebrow::before {
	transform: scaleX(0);
	transform-origin: left center;
}

.cr-section__head.is-in .cr-eyebrow::before {
	transform: scaleX(1);
	transition: transform var(--cr-motion-draw) var(--cr-ease-out) 160ms;
}

/* D — portfolio cards: image and text enter together as one card (owner 2026-10-09; the
 * separate image wipe was removed). */

/* E — links and CTAs: the arrow moves 3 px; buttons keep colour-only hovers (§10). */
.cr-text-link__arrow,
.cr-button__arrow {
	display: inline-block;
	transition: transform var(--cr-motion-fast) var(--cr-ease-out);
}

.cr-text-link:is(:hover, :focus-visible) .cr-text-link__arrow,
a:is(:hover, :focus-visible) > .cr-button__arrow {
	transform: translateX(3px);
}

/* Linked service cards lift slightly (production M8, without the colour flip). */
.cr-service-card.is-linked {
	transition: background-color var(--cr-dur-fast) var(--cr-ease), transform var(--cr-motion-fast) var(--cr-ease-out);
}

.cr-service-card.is-linked:is(:hover, :focus-within) {
	transform: translateY(-3px);
}

/* C — decorative brand layer (inc/components.php creating_v2_decor()). */
.has-decor {
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
	position: relative;
}

.has-decor > .cr-section__inner {
	position: relative;
	z-index: 1;
}

.cr-decor {
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.cr-decor__line {
	background-image: linear-gradient(to bottom, var(--cr-gold), transparent);
	height: var(--h, 50%);
	left: var(--x, 50%);
	opacity: 0.32;
	position: absolute;
	top: var(--y, 0);
	transform-origin: top center;
	width: 1px;
}

/* Thin gold lines in a section (Level 2): drawn once when the section enters. They sit in
 * the side margins outside the 1200 px content column, or in the gutter when there is none. */
.cr-decor--lines .cr-decor__line:nth-child(1) { --x: max(calc(var(--cr-gutter) * 0.25), calc((100% - 1200px) / 2 - 5rem)); --h: 46%; --d: 0ms; }
.cr-decor--lines .cr-decor__line:nth-child(2) { --x: max(calc(var(--cr-gutter) * 0.6), calc((100% - 1200px) / 2 - 1.5rem)); --h: 72%; --d: 280ms; }
.cr-decor--lines .cr-decor__line:nth-child(3) { --x: min(calc(100% - var(--cr-gutter) * 0.6), calc((100% + 1200px) / 2 + 1.5rem)); --h: 58%; --d: 140ms; }
.cr-decor--lines .cr-decor__line:nth-child(4) { --x: min(calc(100% - var(--cr-gutter) * 0.25), calc((100% + 1200px) / 2 + 5rem)); --h: 34%; --d: 420ms; }

.cr-decor.is-pending .cr-decor__line {
	transform: scaleY(0);
}

.cr-decor--lines.is-drawn .cr-decor__line {
	animation: cr-draw-y 1600ms var(--cr-ease-out) var(--d, 0ms) backwards;
}

/* Hero (Level 3): lines, rule + node and the outlined "ing" of the logo — drawn on load.
 * Timing B (owner 2026-10-08): the whole sequence ends at ~1.55 s (was 2.7 s). */
:is(.cr-decor--hero, .cr-decor--hero-crystal) .cr-decor__line {
	animation: cr-draw-y 1000ms var(--cr-ease-out) var(--d, 0ms) backwards;
}

:is(.cr-decor--hero, .cr-decor--hero-crystal) .cr-decor__line:nth-child(1) { --x: 58%; --h: 44%; --d: 60ms; }
:is(.cr-decor--hero, .cr-decor--hero-crystal) .cr-decor__line:nth-child(2) { --x: 66%; --h: 78%; --d: 240ms; }
:is(.cr-decor--hero, .cr-decor--hero-crystal) .cr-decor__line:nth-child(3) { --x: 74%; --h: 56%; --d: 150ms; }
:is(.cr-decor--hero, .cr-decor--hero-crystal) .cr-decor__line:nth-child(4) { --x: 83%; --h: 90%; --d: 300ms; }
:is(.cr-decor--hero, .cr-decor--hero-crystal) .cr-decor__line:nth-child(5) { --x: 91%; --h: 38%; --d: 0ms; }

.cr-decor__rule {
	animation: cr-draw-x 800ms var(--cr-ease-out) 120ms backwards;
	background-color: var(--cr-gold);
	height: 1px;
	left: 52%;
	opacity: 0.45;
	position: absolute;
	top: calc(var(--wp--preset--spacing--70) + 3rem);
	transform-origin: left center;
	width: 26%;
}

.cr-decor__node {
	animation: cr-pulse-in 600ms var(--cr-ease-out) 700ms backwards;
	border: 1px solid var(--cr-violet-light);
	border-radius: 50%;
	height: 2.75rem;
	left: calc(78% - 1.375rem);
	position: absolute;
	top: calc(var(--wp--preset--spacing--70) + 3rem - 1.375rem);
	width: 2.75rem;
}

.cr-decor__node::before,
.cr-decor__node::after {
	background-color: var(--cr-violet-light);
	content: "";
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.cr-decor__node::before {
	height: 1px;
	width: 1rem;
}

.cr-decor__node::after {
	height: 1rem;
	width: 1px;
}

.cr-decor__ing {
	color: var(--cr-gold);
	height: auto;
	opacity: 0.3;
	position: absolute;
	right: -5%;
	top: 46%;
	width: min(44vw, 42rem);
}

.cr-decor__ing path {
	animation: cr-draw-stroke 1400ms var(--cr-ease-out) 150ms backwards;
	stroke-dasharray: 1;
}

@media (max-width: 59.99875em) {
	/* Below 960 px the text spans the hero: only two lines in the side gutters remain
	 * (the hero grid and corner are hidden here too — §Hero). */
	:is(.cr-decor--hero, .cr-decor--hero-crystal) .cr-decor__line:nth-child(n + 3),
	.cr-decor__rule,
	.cr-decor__node,
	.cr-decor__ing {
		display: none;
	}

	:is(.cr-decor--hero, .cr-decor--hero-crystal) .cr-decor__line:nth-child(1) { --x: calc(100% - var(--cr-gutter) / 2); }
	:is(.cr-decor--hero, .cr-decor--hero-crystal) .cr-decor__line:nth-child(2) { --x: calc(var(--cr-gutter) / 2); --h: 52%; }

	.cr-decor--lines .cr-decor__line:nth-child(2),
	.cr-decor--lines .cr-decor__line:nth-child(3) {
		display: none;
	}

}

/* Calculator invitation (Level 3): the arrow mark of bg-price2.svg, cropped at the edge. */
.cr-decor__mark {
	color: var(--cr-violet-light);
	height: auto;
	opacity: 0.5;
	position: absolute;
	right: -3rem;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(11rem, 20vw, 18rem);
}

.cr-decor__mark-bar {
	fill: var(--cr-signal);
	transform-box: fill-box;
	transform-origin: left center;
}

.cr-decor--mark.is-pending .cr-decor__mark {
	clip-path: inset(100% 0 0 0);
}

.cr-decor--mark.is-pending .cr-decor__mark-bar {
	transform: scaleX(0);
}

.cr-decor--mark.is-drawn .cr-decor__mark {
	animation: cr-wipe-up 1400ms var(--cr-ease-out) both;
}

.cr-decor--mark.is-drawn .cr-decor__mark-bar {
	animation: cr-draw-x 600ms var(--cr-ease-out) 1000ms backwards;
}

/* Below 960 px the centred heading spans the band — the mark would sit behind text. */
@media (max-width: 59.99875em) {
	.cr-decor--mark {
		display: none;
	}
}

/* Original pixel illustrations (Level 2): money bags in the homepage "Cenas" section, the
 * portrait in the contact section — beside the content in free space, never under text,
 * fields or buttons. One stepped "pixel" wipe on entry (production revealed them row by
 * row). Desktop only: below 1200 px the free space is too narrow. */
@keyframes cr-pixel-x {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes cr-pixel-y {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0 0 0 0); }
}

.cr-decor.cr-decor--pixel {
	/* The layer is the illustration's own box, so the reveal starts when it is in view. */
	inset: auto;
	right: calc(var(--cr-gutter) + max(0px, (100% - 2 * var(--cr-gutter) - 1200px) / 2));
}

.cr-decor__pixel {
	display: block;
	height: auto;
	width: 100%;
}

.cr-decor.cr-decor--money {
	top: var(--wp--preset--spacing--80);
	width: clamp(12rem, 16vw, 15rem);
}

.cr-decor.cr-decor--growth {
	/* Beside the heading, clear of the cards (the section has no intro paragraph since 2026-10-09). */
	top: var(--wp--preset--spacing--60);
	width: 17.25rem; /* 46 grid pixels × 6 px: every pixel lands on whole screen pixels */
}

/* Orange pixel growth arrow (homepage "Cenas"): the line is revealed segment by segment
 * (stepped scaleX / scaleY) while the ↗ head travels along it (stepped translate, keyframes
 * generated with the geometry in inc/components.php) — one timeline, ~3 s, once. Base state =
 * the finished arrow (no JS / reduced motion). */
.cr-growth {
	display: block;
	height: auto;
	overflow: visible;
	width: 100%;
}

.cr-growth rect {
	fill: #ff8500;
}

.cr-growth :is(.g-h, .g-v) {
	transform-box: fill-box;
}

.cr-growth .g-h {
	transform-origin: left center;
}

.cr-growth .g-v {
	transform-origin: center bottom;
}

.cr-growth .g-head {
	transform: translate(36px, 0); /* final position */
}

.cr-decor--growth.is-pending .cr-growth :is(.g-h, .g-v) {
	transform: scale(0);
}

.cr-decor--growth.is-pending .g-head {
	visibility: hidden;
}

@keyframes cr-grow-x {
	from { transform: scaleX(var(--s0)); }
	to { transform: scaleX(1); }
}

@keyframes cr-grow-y {
	from { transform: scaleY(var(--s0)); }
	to { transform: scaleY(1); }
}

.cr-decor--growth.is-drawn .g-h {
	animation: cr-grow-x var(--t) steps(var(--n), end) var(--d) var(--f, forwards);
	transform: scaleX(0);
}

.cr-decor--growth.is-drawn .g-v {
	animation: cr-grow-y var(--t) steps(var(--n), end) var(--d) forwards;
	transform: scaleY(0);
}

.cr-decor.cr-decor--portrait {
	bottom: var(--wp--preset--spacing--80);
	width: clamp(10rem, 13vw, 12.5rem);
}

/* Contact section (owner 2026-10-21 17:06): the portrait is part of the direct-contacts column, below the
 * links (normal flow, not an overlay) — same reveal; hidden on narrow screens as before. */
.cr-contact__direct .cr-decor.cr-decor--portrait {
	inset: auto;
	margin-top: var(--wp--preset--spacing--50);
	position: relative;
	width: clamp(8rem, 60%, 12.5rem);
}

.cr-decor--pixel.is-pending .cr-decor__pixel {
	clip-path: inset(0 100% 0 0);
}

.cr-decor--money.is-drawn .cr-decor__pixel {
	animation: cr-pixel-x 900ms steps(12, end) both;
}

.cr-decor--portrait.is-pending .cr-decor__pixel {
	clip-path: inset(0 0 100% 0);
}

.cr-decor--portrait.is-drawn .cr-decor__pixel {
	animation: cr-pixel-y 1000ms steps(14, end) both;
}

@media (max-width: 74.99875em) {
	.cr-decor--pixel {
		display: none;
	}
}

/* "Par mums" wordmark (inc/components.php creating_v2_wordmark()): the original CREATING.LV
 * letterforms as 1 px gold outlines in the empty top-right of the section, behind the content;
 * drawn once left → right (~2.5 s) when the section enters. Desktop ≥ 960 px only. */
.cr-decor--wordmark {
	inset: auto;
	left: max(var(--cr-gutter), calc((100% - var(--wp--style--global--wide-size, 1200px)) / 2));
	right: max(var(--cr-gutter), calc((100% - var(--wp--style--global--wide-size, 1200px)) / 2));
	top: calc(var(--wp--preset--spacing--80) - 0.5rem);
}

.cr-decor__wordmark {
	display: block;
	fill: none;
	margin-left: auto;
	opacity: 0.32;
	overflow: visible;
	stroke: #b79955;
	stroke-width: 0.8; /* ≈ 1 px at the rendered size (537 units → ~672 px) */
	width: min(56%, 42rem);
}

/* No non-scaling stroke here: it breaks pathLength-based dashes (fragments before the draw). */
.cr-decor__wordmark path {
	stroke-dasharray: 1;
}

.cr-decor--wordmark.is-pending .cr-decor__wordmark path {
	stroke-dashoffset: 1;
}

.cr-decor--wordmark.is-drawn .cr-decor__wordmark path {
	animation: cr-draw-stroke 1100ms cubic-bezier(0.45, 0, 0.25, 1) var(--d, 0ms) both;
}

/* /par-mums/ only (owner 2026-10-21, fill removed 17:06): slow draw — outlines ~3.7 s left → right. Final state
 * (no JS, reduced motion, after the draw): the finished outlines only. */
.cr-decor--wordmark-slow.is-drawn .cr-decor__wordmark path {
	animation: cr-draw-stroke 2500ms cubic-bezier(0.45, 0, 0.25, 1) calc(var(--d, 0ms) * 0.8) both;
}

/* Start state already before the deferred motion.js runs (no flash of the finished logo on a slow network);
 * without JS or with reduced motion this block does not apply and the finished outlines show at once. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.cr-decor--wordmark-slow:not(.is-drawn) .cr-decor__wordmark path {
		stroke-dashoffset: 1;
	}

	/* Safety net: if motion.js never runs (blocked, or delayed until interaction by a cache plugin), the
	 * finished outlines still appear after 6 s. Not while the draw is pending or running. */
	.cr-decor--wordmark-slow:not(.is-drawn):not(.is-pending) .cr-decor__wordmark path {
		animation: cr-wordmark-show-path 1ms linear 6s forwards;
	}
}

@keyframes cr-wordmark-show-path {
	to { stroke-dashoffset: 0; }
}

@media (max-width: 59.99875em) {
	.cr-decor--wordmark {
		display: none;
	}
}

/* Crystal composition (production `svg.bg-contact`): photo + original vector shapes in the
 * production geometry and blend modes — homepage hero.
 * Draws once: outlines and star stroke-draw (staggered), arrows wipe in, photo fades up. */
.cr-crystal {
	aspect-ratio: 1799.27 / 1906.93;
	isolation: isolate;
	opacity: 0.7;
	position: relative;
}

.cr-crystal__photo {
	height: 85.62%;
	left: 31.5%;
	/* color-dodge as in production; full photo opacity matches the production rendering
	 * (compared side by side — the .57 of the source group does not show there). */
	mix-blend-mode: color-dodge;
	position: absolute;
	top: 6.88%;
	width: 62.65%;
}

.cr-crystal__shapes {
	display: block;
	height: 100%;
	inset: 0;
	overflow: visible;
	position: absolute;
	width: 100%;
}

.cr-crystal__arrow-gold {
	mix-blend-mode: multiply;
}

.cr-crystal__arrow {
	mix-blend-mode: overlay;
}

.cr-crystal__outlines > *,
.cr-crystal__star > * {
	stroke-dasharray: 1;
}

@keyframes cr-crystal-photo {
	from { opacity: 0; transform: translate3d(0, var(--cr-rise-2), 0); }
}

@keyframes cr-crystal-wipe {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

.cr-decor--hero-crystal .cr-crystal__photo {
	animation: cr-crystal-photo 900ms var(--cr-ease-out) backwards;
}

.cr-decor--hero-crystal .cr-crystal__outlines > * {
	animation: cr-draw-stroke 1100ms var(--cr-ease-out) var(--d, 0ms) backwards;
}

.cr-crystal__outlines > :nth-child(2) { --d: 80ms; }
.cr-crystal__outlines > :nth-child(3) { --d: 160ms; }
.cr-crystal__outlines > :nth-child(4) { --d: 240ms; }
.cr-crystal__outlines > :nth-child(5) { --d: 120ms; }
.cr-crystal__outlines > :nth-child(6) { --d: 200ms; }
.cr-crystal__outlines > :nth-child(7) { --d: 280ms; }
.cr-crystal__outlines > :nth-child(8) { --d: 320ms; }
.cr-crystal__outlines > :nth-child(9) { --d: 0ms; }

.cr-decor--hero-crystal .cr-crystal__square {
	animation: cr-fade 600ms var(--cr-ease-out) 500ms backwards;
}

.cr-decor--hero-crystal .cr-crystal__arrows {
	animation: cr-crystal-wipe 1000ms var(--cr-ease-out) 200ms backwards;
}

.cr-decor--hero-crystal .cr-crystal__star > * {
	animation: cr-draw-stroke 600ms var(--cr-ease-out) var(--d, 650ms) backwards;
}

/* The star is drawn last: the whole hero sequence ends at 1.55 s (owner decision). */
.cr-crystal__star > :nth-child(2) { --d: 750ms; }
.cr-crystal__star > :nth-child(3) { --d: 850ms; }
.cr-crystal__star > :nth-child(4) { --d: 950ms; }

/* Homepage hero (owner decision 2026-10-08): the crystal composition replaces the "ing",
 * rule and node; right side, below the header line; drawn on load like the lines. */
.cr-decor--hero-crystal .cr-crystal {
	position: absolute;
	right: max(-2rem, calc((100% - 1200px) / 2 - 6rem));
	top: var(--wp--preset--spacing--50);
	/* Capped so the photo stays smaller than the H1: the heading remains the LCP element
	 * (measured: at 36 rem the photo became LCP at ~1.3 s). */
	width: min(36vw, 33rem);
}

@media (max-width: 74.99875em) {
	.cr-decor--hero-crystal .cr-crystal {
		display: none;
	}
}

/* HERO comparison B (owner review 2026-10-08, round 4): a short Laravel fragment as part of
 * the background on the right — no window, frame, statuses or caret. It is the first child of
 * the brand layer, so the gold lines, rule, "+" node and "ing" paint above it; 18 % opacity.
 * Typed once, calmly, line by line with a stepped clip-path (each line is exactly --n ch wide
 * after --i ch of indent): no layout change, no JS. Desktop ≥ 1200 px only. */
.cr-code {
	/* Owner decision 2026-10-08 23:07: hero B, 18 % (rendered contrast on the hero
	 * background ≈ 1.6 : 1 vs 7 : 1 for the H1). */
	opacity: 0.18;
	position: absolute;
	right: calc(var(--cr-gutter) + 1rem);
	top: calc(var(--wp--preset--spacing--70) + 6rem);
}

.cr-code__pre {
	background: none;
	border: 0;
	color: var(--cr-text);
	font-family: var(--cr-font-mono);
	font-size: clamp(0.75rem, 0.3rem + 0.55vw, 0.875rem);
	line-height: 1.75;
	margin: 0;
	overflow: hidden;
	padding: 0;
	white-space: pre;
}

.cr-code__pre code {
	display: block;
	font: inherit;
}

.cr-code__l {
	display: block;
	padding-left: calc(var(--i, 0) * 1ch);
	width: max-content;
}

.cr-code__l.is-empty {
	height: 1.75em;
}

.cr-code .t-k,
.cr-code .t-s { color: var(--cr-gold-light); }
.cr-code .t-v,
.cr-code .t-c { color: var(--cr-violet-light); }

@keyframes cr-type {
	from { clip-path: inset(0 calc(100% - var(--i, 0) * 1ch) 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

.cr-code__l:not(.is-empty) {
	animation: cr-type var(--t) steps(var(--n), end) var(--d) backwards;
}

@media (max-width: 74.99875em) {
	.cr-code {
		display: none;
	}
}

/* Global contact / scroll-to-top stack (inc/fab.php, assets/js/fab.js): WhatsApp above,
 * back-to-top below, 14 px apart, bottom-right, above the safe area (iPhone). Below the
 * header (z 100), so the open mobile menu covers it; steps aside over forms (is-clear) and
 * rises above the calculator's stuck mobile summary bar (--cr-fab-lift). */
.cr-fab {
	align-items: flex-end;
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	transform: translateY(calc(var(--cr-fab-lift, 0px) * -1)); /* lift via transform: no layout shift */
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	position: fixed;
	right: calc(1rem + env(safe-area-inset-right, 0px));
	transition: opacity 200ms ease, visibility 0s linear 0s;
	z-index: 90;
}

/* F14 (owner 2026-10-16): reading progress of the article text — a 2 px gold line on the bottom edge of the
 * sticky header (assets/js/reading-progress.js, article pages only). It is absolutely positioned inside the
 * header (no layout shift), only scaled (transform), never animated, aria-hidden (no announcements). */
.cr-reading-progress {
	bottom: -1px;
	height: 2px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
}

.cr-reading-progress__bar {
	background-color: var(--cr-gold);
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* F14 (owner 2026-10-15): on article pages below 1440 px neither floating button is shown (WhatsApp
 * and back-to-top floated over running text up to 1439 px); the WhatsApp link stays in the contact
 * section. Article pages from 1440 px and all other pages are unchanged; text width and padding unchanged. */
@media (max-width: 89.99875em) {
	.single-post .cr-fab__wa,
	.single-post .cr-fab__top {
		display: none;
	}
}

.cr-fab.is-clear,
html.has-modal-open .cr-fab {
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease, visibility 0s linear 200ms;
	visibility: hidden;
}

.cr-fab__sentinel {
	height: 500px;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	visibility: hidden;
	width: 1px;
}

/* WhatsApp: the original gold mark; on desktop inside a dark pill with the label. */
.cr-fab__wa {
	align-items: center;
	border-radius: 999px;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
	color: var(--cr-gold);
	display: flex;
	text-decoration: none;
}

.cr-fab__mark {
	display: block;
	flex: none;
	height: 3.25rem;
	width: 3.25rem;
}

.cr-fab__label {
	font-family: var(--cr-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* F14 (owner 2026-10-16): the labelled pill only where the side gutter beside the 1200 px content is wide
 * enough for it (≥ 1680 px); below that the compact round mark (label kept as the accessible name). */
@media (min-width: 105em) {
	.cr-fab__wa {
		background-color: rgba(20, 19, 22, 0.92);
		border: 1px solid rgba(183, 153, 85, 0.45);
		color: var(--cr-gold);
		gap: 0.75rem;
		padding: 0.3rem 1.25rem 0.3rem 0.3rem;
		transition: border-color 200ms ease, background-color 200ms ease;
	}

	.cr-fab__wa .cr-fab__mark {
		height: 2.5rem;
		width: 2.5rem;
	}

	.cr-fab__label {
		color: var(--cr-gold-light);
	}

	.cr-fab__wa:hover {
		background-color: #1c1b1f;
		border-color: var(--cr-gold);
	}
}

@media (max-width: 104.99875em) {
	.cr-fab__label {
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}

	/* A dark ring keeps the gold mark legible over gold cards. */
	.cr-fab__wa {
		background-color: var(--cr-base);
		box-shadow: 0 0 0 3px var(--cr-base), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
	}
}

/* Back to top: dark circle, hairline gold ring, gold arrow; shown after ~500 px. */
.cr-fab__top {
	align-items: center;
	background-color: rgba(20, 19, 22, 0.92);
	border: 1px solid rgba(183, 153, 85, 0.45);
	border-radius: 50%;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
	color: var(--cr-gold);
	cursor: pointer;
	display: flex;
	height: 2.75rem;
	justify-content: center;
	margin-right: 0.25rem;
	opacity: 0;
	padding: 0;
	transform: translateY(0.375rem);
	transition: opacity 200ms ease, transform 200ms ease, border-color 200ms ease, visibility 0s linear 200ms;
	visibility: hidden;
	width: 2.75rem;
}

.cr-fab.has-top .cr-fab__top {
	opacity: 1;
	transform: none;
	transition: opacity 200ms ease, transform 200ms ease, border-color 200ms ease, visibility 0s linear 0s;
	visibility: visible;
}

.cr-fab__top:hover {
	border-color: var(--cr-gold);
}

@media (prefers-reduced-motion: reduce) {
	.cr-fab,
	.cr-fab__top,
	.cr-fab__wa {
		transition: none !important;
	}

	.cr-fab__top {
		transform: none;
	}
}

/* Company social profiles (footer): the original gold circle icons, 36 px targets (WCAG 2.2 ≥ 24 px). */
.cr-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
}

.cr-social__link {
	border-radius: 50%;
	display: block;
	height: 2.25rem;
	padding: 0;
	transition: transform var(--cr-motion-fast) var(--cr-ease-out), filter var(--cr-motion-fast) var(--cr-ease-out);
	width: 2.25rem;
}

.cr-social__link img {
	display: block;
	height: 100%;
	width: 100%;
}

.cr-social__link:hover {
	filter: brightness(1.15);
	transform: translateY(-2px);
}

.cr-social__link:focus-visible {
	outline: var(--cr-focus);
	outline-offset: 3px;
}

/* G — calculator: quiet screen changes and result entrance; no motion while typing. */
.cr-calc.is-enhanced .cr-calc__step:not([hidden]) {
	animation: cr-fade-rise var(--cr-motion-base) var(--cr-ease-out);
}

.cr-calc.is-enhanced .cr-calc__panel.is-current {
	animation: cr-fade var(--cr-motion-base) var(--cr-ease-out);
}

.cr-calc-result {
	animation: cr-fade-rise 420ms var(--cr-ease-out);
}

.cr-calc__progress li {
	transition: color var(--cr-motion-base) var(--cr-ease-out), border-color var(--cr-motion-base) var(--cr-ease-out);
}

/* F14 P16 (point 7): decorative article illustration (inc/article.php) — in the text column of the
 * 30 / 70 layout (same left edge and ≤ 720 px width as the text), full width below 782 px. */
.cr-main--article .cr-article-art {
	margin: 0 0 var(--wp--preset--spacing--60);
	max-width: 720px;
}

.cr-main--article .cr-article-art img {
	display: block;
	height: auto;
	width: 100%;
}

@media (min-width: 48.875em) {
	.cr-main--article .cr-article-art {
		margin-inline-start: calc((100% - 1rem) * 0.3 + 1rem);
	}
}

/* Live illustration (owner 2026-10-21 21:07; inc/article.php + assets/js/article-art.js): inline SVG, same box.
 * Phones: the 1200 × 444 drawing is cropped to 1080 × 444 around the centre (preserveAspectRatio slice) — a fixed
 * ratio, so nothing moves when it loads. Nothing animates off screen or when paused; once drawn, never again. */
.cr-article-art--live {
	position: relative;
}

.cr-article-art--live .cr-art-svg {
	display: block;
	height: auto;
	width: 100%;
}

/* Phones: the button would cover the drawing, so it sits just below it in a fixed extra margin (no shift when the
 * script shows it). */
@media (max-width: 37.49875em) {
	.cr-main--article .cr-article-art--live {
		margin-bottom: calc(var(--wp--preset--spacing--60) + 2.75rem);
	}

	.cr-article-art--live .cr-art-svg {
		aspect-ratio: 1080 / 444;
	}

	.cr-article-art--live .cr-article-art__toggle {
		bottom: auto;
		top: calc(100% + 0.5rem);
	}
}

/* Without the script (no JS, no IntersectionObserver) there is no pause control (WCAG 2.2.2): only the one-time
 * draw-in plays, the loops never start. */
.cr-article-art--live:not(.is-ctl) .cr-art-svg :not(.a-d, .a-f, .a-p) {
	animation: none !important;
}

.cr-article-art--live.is-ctl:not(.is-on) .cr-art-svg * {
	animation-play-state: paused !important;
}

.cr-article-art--live.is-drawn .cr-art-svg :is(.a-d, .a-f, .a-p) {
	animation: none !important;
}

.cr-article-art__toggle {
	align-items: center;
	background: var(--cr-base);
	border: 1px solid color-mix(in srgb, var(--cr-gold) 55%, transparent);
	border-radius: 50%;
	bottom: 0.25rem;
	color: var(--cr-gold);
	cursor: pointer;
	display: inline-flex;
	height: 2.5rem;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 0;
	width: 2.5rem;
}

.cr-article-art__toggle[hidden] {
	display: none;
}

.cr-article-art__toggle:hover {
	border-color: var(--cr-gold);
}

.cr-article-art__toggle:focus-visible {
	outline: 2px solid var(--cr-gold);
	outline-offset: 2px;
}

.cr-article-art__toggle svg {
	height: 1.25rem;
	width: 1.25rem;
}

.cr-article-art__i-pause {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 2.4;
}

.cr-article-art__i-play {
	fill: currentColor;
	stroke: currentColor;
	stroke-linejoin: round;
	stroke-width: 1.5;
}

.cr-article-art__toggle[aria-pressed="false"] .cr-article-art__i-play,
.cr-article-art__toggle[aria-pressed="true"] .cr-article-art__i-pause {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.cr-article-art__toggle {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Services overview (F14 DEF-01 — inc/services-index.php, templates/page-services-index.html)
 * Hero: gold lines + a short code fragment typed once (≥ 1200 px). Six service cards from the
 * service data: number, line icon drawn once (pencil for design), title link, summary, starting
 * price, "Par pakalpojumu →". Additional offers (apps) as a quieter band with the arrow mark.
 * ------------------------------------------------------------------------- */
.cr-main--services-index {
	padding-top: 0;
}

.cr-svc-hero {
	padding-bottom: var(--wp--preset--spacing--80);
}

.cr-svc-hero .cr-service-hero__inner > * {
	max-width: 42rem;
}

.cr-svc-hero__intro > * {
	margin-block: 0;
}

.cr-svc-hero__intro > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

.cr-svc-hero__intro p {
	color: var(--cr-text);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
}

/* Hero composition (owner round 2: the finished state must read as a full composition). All parts are
 * aria-hidden and absolutely placed inside the hero (no layout shift); intro ≤ 36 rem keeps them clear of text.
 * ≥ 1440 px: code fragment + brand arrow + pencil · 960–1439 px: arrow + pencil · < 960 px: small arrow + pencil
 * in the hero's bottom padding (below the text, never over it). Base styles = finished state; the keyframes only
 * start from "not drawn" (backwards fill), so reduced motion (animation: none) shows the full composition at once. */
.cr-svc-hero .cr-svc-hero__intro {
	max-width: 36rem;
}

.cr-decor--services {
	--svc-r: max(var(--cr-gutter), calc((100% - 1200px) / 2));
}

.cr-code--services {
	opacity: 0.3;
	right: calc(var(--svc-r) + 15rem);
	top: calc(var(--wp--preset--spacing--50) + 2.75rem);
}

@media (max-width: 89.99875em) {
	.cr-code--services {
		display: none;
	}
}

/* The arrow and pencil are placed inside a box that spans the hero's content column (≤ 1 200 px). It is a
   size container, so the side placement is used only while the column is wide enough for the intro (36 rem)
   and the art (≤ 17 rem) side by side — in rem, so larger browser text moves the art below the text
   (owner 2026-10-16, TXT200-04). At the default text size the result is the same as before. */
.cr-svc-art {
	container-type: inline-size;
	inset: 0 var(--svc-r);
	position: absolute;
}

.cr-svc-art__arrow,
.cr-svc-art__pencil {
	display: block;
	height: auto;
	position: absolute;
}

.cr-svc-art__arrow {
	bottom: calc(var(--wp--preset--spacing--80) - 0.5rem);
	right: 0;
	width: 13.5rem;
}

.cr-svc-art__pencil {
	bottom: 1rem; /* below the last code line */
	right: 15.5rem;
	width: 4.5rem;
}

@media (max-width: 89.99875em) {
	.cr-svc-art__arrow {
		width: 11rem;
	}

	.cr-svc-art__pencil {
		bottom: calc(var(--wp--preset--spacing--80) - 0.25rem);
		right: 12.5rem;
	}
}

@media (max-width: 59.99875em) {
	.cr-svc-art__arrow {
		bottom: 0.625rem;
		width: 2.75rem;
	}

	.cr-svc-art__pencil {
		bottom: 0.625rem;
		right: 3.5rem;
		width: 2.5rem;
	}
}

@container (max-width: 53.99rem) {
	.cr-svc-art__arrow {
		bottom: 0.625rem;
		width: 2.75rem;
	}

	.cr-svc-art__pencil {
		bottom: 0.625rem;
		right: 3.5rem;
		width: 2.5rem;
	}
}

/* Outline drawn once (stroke-dashoffset), then the fill fades in (opacity) — motion rule: only transform,
 * opacity, clip-path and stroke-dashoffset are animated. */
.cr-svc-art__fill {
	animation: cr-fade 500ms var(--cr-ease-out) 1700ms backwards;
	fill: var(--cr-signal);
	opacity: 0.75;
}

.cr-svc-art__ribbon {
	animation: cr-draw-stroke 1600ms var(--cr-ease-out) 300ms backwards;
	fill: none;
	stroke: var(--cr-gold);
	stroke-dasharray: 1;
	stroke-width: 1.5px;
	vector-effect: non-scaling-stroke;
}

.cr-svc-art__pencil path {
	fill: none;
	stroke-dasharray: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.5px;
	vector-effect: non-scaling-stroke;
}

.cr-svc-art__p {
	animation: cr-draw-stroke 900ms var(--cr-ease-out) 1200ms backwards;
	stroke: var(--cr-gold);
}

.cr-svc-art__line {
	animation: cr-draw-stroke 600ms var(--cr-ease-out) 2000ms backwards;
	stroke: var(--cr-signal);
}

.cr-section--svc-index {
	border-top: 0;
}

.cr-grid--svc {
	--cr-card-min: 17.5rem;
}

@media (min-width: 37.5em) and (max-width: 59.99875em) {
	.cr-grid--svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60em) {
	.cr-grid--svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cr-grid--svc > .cr-reveal {
	--cr-reveal-dur: 1050ms;
	--cr-rise: 36px;
}

.cr-svc-card {
	background-color: var(--cr-surface);
	border: 1px solid var(--cr-line);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	position: relative;
	transition: border-color var(--cr-dur-fast) var(--cr-ease);
}

/* Gold corner: the notch of the brand cards, as an accent (the border stays whole). */
.cr-svc-card::before {
	background-color: var(--cr-gold);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	content: "";
	height: var(--cr-notch);
	position: absolute;
	right: -1px;
	top: -1px;
	width: var(--cr-notch);
}

.cr-svc-card.is-linked:is(:hover, :focus-within) {
	border-color: var(--cr-gold);
}

.cr-svc-card:focus-within {
	outline: var(--cr-focus);
	outline-offset: 3px;
}

.cr-svc-card__top {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
}

.cr-svc-card__num {
	color: var(--cr-muted);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
}

.cr-svc-card__mark {
	color: var(--cr-gold);
	display: block;
	margin-right: calc(var(--cr-notch) * 0.5);
}

.cr-svc-card__icon {
	display: block;
	height: 2.5rem;
	width: 2.5rem;
}

/* One-time line draw when the grid enters (motion.js: is-pending → is-drawn). Above the fold, without
 * JS and with reduced motion the icon is simply shown. */
.cr-svc-card__icon > * {
	stroke-dasharray: 1;
}

.cr-svc-card__mark.is-pending .cr-svc-card__icon > * {
	stroke-dashoffset: 1;
}

.cr-svc-card__mark.is-drawn .cr-svc-card__icon > * {
	animation: cr-draw-stroke 1300ms var(--cr-ease-out) 250ms backwards;
}

.cr-svc-card__title {
	color: var(--cr-text);
	font-family: var(--cr-font-text);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 650;
	line-height: 1.25;
	margin: 0;
}

.cr-svc-card.is-linked:is(:hover, :focus-within) .cr-svc-card__title {
	color: var(--cr-gold-light);
}

.cr-svc-card__text {
	color: var(--cr-muted);
	line-height: 1.6;
	margin: 0;
}

.cr-svc-card__foot {
	align-items: flex-start;
	border-top: 1px solid var(--cr-line);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40);
}

.cr-svc-card .cr-price__amount {
	font-size: 1.375rem;
}

.cr-svc-card__more {
	color: var(--cr-gold);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	max-width: 100%;
	text-transform: uppercase;
}

.cr-svc-card__arrow {
	display: inline-block;
	transition: transform var(--cr-dur-fast) var(--cr-ease);
}

.cr-svc-card.is-linked:is(:hover, :focus-within) .cr-svc-card__arrow {
	transform: translateX(4px);
}

.cr-section--svc-index .cr-section__foot {
	margin-top: var(--wp--preset--spacing--60);
}

/* Additional offers (apps): no cards, no prices — a short list under a gold rule. */
.cr-svc-extra {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	max-width: 60rem;
	padding: 0;
}

@media (min-width: 48.875em) {
	.cr-svc-extra { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cr-svc-extra__item {
	border-top: 1px solid var(--cr-gold);
	padding-top: var(--wp--preset--spacing--40);
}

.cr-svc-extra__title {
	color: var(--cr-gold);
	font-family: var(--cr-font-display);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
}

.cr-svc-extra__text {
	color: var(--cr-muted);
	margin: var(--wp--preset--spacing--30) 0 0;
}

/* The arrow mark sits in the free space right of the 60 rem list — only where that space exists. */
@media (max-width: 74.99875em) {
	.cr-section--svc-extra .cr-decor--mark {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cr-svc-card__icon > *,
	.cr-svc-card__arrow {
		animation: none !important;
		stroke-dashoffset: 0 !important;
		transform: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * 14. Motion preferences
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Motion system: no entrance motion at all — decor is shown in its final state, nothing waits
 * for a delay (motion.js does not run, so no pre-reveal state can exist). */
@media (prefers-reduced-motion: reduce) {
	.cr-decor *,
	.cr-decor__ing path,
	.cr-calc__step,
	.cr-calc__panel,
	.cr-calc-result {
		animation: none !important;
	}

	.cr-social__link:hover,
	.cr-service-card.is-linked:is(:hover, :focus-within),
	.cr-text-link:is(:hover, :focus-visible) .cr-text-link__arrow,
	a:is(:hover, :focus-visible) > .cr-button__arrow {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 15. Print
 * ------------------------------------------------------------------------- */
@media print {
	body {
		background: #fff;
		color: #000;
	}

	.cr-header,
	.cr-footer,
	.cr-post-nav {
		display: none;
	}

	h1,
	h2 {
		color: #000;
	}

	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}

	.cr-project__content figure.cr-shot {
		max-height: none;
		overflow: visible;
	}
}

/* =========================================================================
   Portfolio (F10.1, owner 2026-10-09): archive + project page. Dark base, gold accents,
   large project images in their own proportions, readable two-column case sections.
   ========================================================================= */
.cr-main--portfolio,
.cr-main--project {
	padding-top: 0;
}

.cr-portfolio-hero,
.cr-project__hero {
	border-bottom: 1px solid var(--cr-line);
	padding: var(--wp--preset--spacing--50) var(--cr-gutter) var(--wp--preset--spacing--70);
}

/* F14 (owner 2026-10-16): the portfolio archive showed two parallel lines 16 px apart under the hero
 * (hero border-bottom + the generic .cr-section border-top of the project grid). Keep the hero line only. */
.cr-portfolio-hero + .cr-section--portfolio {
	border-top: 0;
}

.cr-portfolio-hero__inner,
.cr-project__hero-inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.cr-portfolio-hero__inner > *,
.cr-project__hero-inner > * {
	margin-block: 0;
	max-width: 52rem;
}

.cr-portfolio-hero__inner > * + *,
.cr-project__hero-inner > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.cr-portfolio-hero__title,
.cr-project__title {
	color: var(--cr-gold);
	font-family: var(--cr-font-display);
	font-size: var(--wp--preset--font-size--heading-1);
	font-weight: 400;
	line-height: 1.12;
	text-wrap: balance;
}

.cr-portfolio-hero__intro,
.cr-project__lead {
	color: var(--cr-text);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
}

.cr-project__labels {
	color: var(--cr-gold-light);
}

/* Archive grid: two large cards per row from 760 px, one on phones. */
.cr-grid--portfolio {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 47.5em) {
	.cr-grid--portfolio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cr-grid--portfolio .cr-project-card__media {
	aspect-ratio: 16 / 10;
}

.cr-grid--portfolio .cr-project-card__title {
	font-size: var(--wp--preset--font-size--heading-4);
}

.cr-portfolio__pagination {
	margin-top: var(--wp--preset--spacing--70);
}

.cr-portfolio__pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cr-portfolio__empty {
	color: var(--cr-muted);
}

/* Project page: cover image in its own proportions on a raised panel. */
.cr-project__cover {
	background-color: var(--cr-surface);
	border-bottom: 1px solid var(--cr-line);
	margin: 0;
	padding: var(--wp--preset--spacing--60) var(--cr-gutter);
}

.cr-project__cover-img {
	border: 1px solid var(--cr-line);
	box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
	display: block;
	height: auto;
	margin-inline: auto;
	max-height: 78vh;
	max-width: min(100%, var(--wp--style--global--wide-size, 1200px));
	object-fit: contain;
	width: auto;
}

.cr-project__content {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
	padding: var(--wp--preset--spacing--70) var(--cr-gutter) var(--wp--preset--spacing--50);
}

/* Original case sections (post-content-section / pcs-*) restyled for V2. */
.cr-project__content .post-content-section {
	border-top: 1px solid var(--cr-line);
	margin: 0;
	padding-top: var(--wp--preset--spacing--50);
}

.cr-project__content .post-content-section + .post-content-section {
	margin-top: var(--wp--preset--spacing--60);
}

.cr-project__content .pcs-site {
	align-items: center;
	display: inline-flex;
	gap: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--50);
}

.cr-project__content .pcs-site a {
	border: 1px solid color-mix(in srgb, var(--cr-gold) 55%, transparent);
	color: var(--cr-gold);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.4rem 0.9rem;
	text-decoration: none;
}

.cr-project__content .pcs-site a::after {
	content: " ↗";
}

.cr-project__content .pcs-site a:is(:hover, :focus-visible) {
	background-color: var(--cr-gold);
	color: var(--cr-on-gold);
}

.cr-project__content .pcs-site-arrow {
	display: none;
}

/* Visual check 2026-10-21: one section = one two-column block, whether the imported content puts each
 * section in its own pcs-row group or several sections in one group (16 of 23 projects) — the same separator
 * and spacing in both cases (before: 0 px between sections inside one group). */
.cr-project__content .pcs-row + .pcs-row,
.cr-project__content .pcs-columns + .pcs-columns {
	border-top: 1px solid var(--cr-line);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--50);
}

.cr-project__content .pcs-columns {
	align-items: flex-start !important; /* original "align-tems-center" typo class has no effect */
	gap: var(--wp--preset--spacing--60);
	margin-bottom: 0;
	margin-inline: 0;
}

.cr-project__content .pcs-row > .pcs-columns:first-child {
	margin-top: 0;
}

/* Approved portfolio layout (F14 P17 sample, owner 2026-10-17) = the article reading layout: 30 / 70 from
 * 48.875 em (the imported 45 / 55 inline flex-basis of every project is overridden here, as on the articles),
 * text column at most the content width (720 px), the site's horizontal arrow above the section heading;
 * stacked below 48.875 em (arrow + heading above the text). */
@media (min-width: 48.875em) {
	.cr-project__content .pcs-columns > .pcs-col--left {
		flex-basis: 30% !important;
	}

	.cr-project__content .pcs-columns > .pcs-col--right {
		flex-basis: 70% !important;
	}
}

.cr-project__content .pcs-col--right > * {
	max-width: var(--wp--style--global--content-size, 720px);
}

.cr-project__content .pcs-col--left :is(h2, h3) {
	color: var(--cr-gold);
	font-family: var(--cr-font-display);
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	overflow-wrap: anywhere;
	text-transform: none;
	text-wrap: balance;
}

.cr-project__content .pcs-col--left h2 {
	font-size: var(--wp--preset--font-size--heading-3);
}

.cr-project__content .pcs-col--left h3 {
	font-size: var(--wp--preset--font-size--heading-4);
}

.cr-project__content .pcs-col--right > :first-child {
	margin-top: 0;
}

.cr-project__content .pcs-col--right :is(p, li) {
	color: var(--cr-text);
	line-height: 1.7;
}

/* Sub-heading in the text column ("Pakalpojumi, ko izmantojām" …): text face below the section headings, as in
 * the approved sample (the imported "medium" font-size preset is a content attribute — content batch). */
.cr-project__content .pcs-col--right h3 {
	color: var(--cr-text);
	font-family: var(--cr-font-text);
	font-size: max(1.0625rem, calc(var(--wp--preset--font-size--heading-3) * 0.8));
	font-weight: 650;
	line-height: 1.3;
	margin-bottom: 0.5rem;
	margin-top: var(--wp--preset--spacing--50);
	text-transform: none;
}

.cr-project__content .pcs-col--right a {
	color: var(--cr-gold);
}

.cr-project__content .wp-block-spacer {
	height: var(--wp--preset--spacing--40) !important;
}

@media (max-width: 48.8125em) {
	.cr-project__content .pcs-columns {
		flex-wrap: wrap !important; /* core keeps columns side by side from 782 px; with large text (em query) they stack */
		gap: var(--wp--preset--spacing--30);
	}

	.cr-project__content .pcs-col {
		flex-basis: 100% !important;
	}
}

/* Full-page screenshot: a framed, scrollable page view (keyboard focusable). */
.cr-project__content .wp-block-image {
	margin-top: var(--wp--preset--spacing--70);
}

.cr-project__content .wp-block-image img {
	border: 1px solid var(--cr-line);
	height: auto;
	max-width: 100%;
}

.cr-project__content figure.cr-shot {
	background-color: var(--cr-raised);
	box-sizing: border-box;
	display: block; /* core gives .wp-block-image.aligncenter display: table, which ignores max-height / overflow (21 of 23 projects showed the whole long screenshot) */
	width: 100%;
	border: 1px solid color-mix(in srgb, var(--cr-gold) 45%, transparent);
	margin-inline: auto;
	max-height: min(80vh, 56rem);
	max-width: 46rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	position: relative;
	scrollbar-color: var(--cr-gold) var(--cr-raised);
}

.cr-project__content figure.cr-shot::before {
	background-color: var(--cr-raised);
	border-bottom: 1px solid var(--cr-line);
	color: var(--cr-muted);
	content: "● ● ●";
	display: block;
	font-size: 0.6rem;
	letter-spacing: 0.3em;
	padding: 0.55rem 0.9rem;
	position: sticky;
	top: 0;
	z-index: 1;
}

.cr-project__content figure.cr-shot img {
	border: 0;
	display: block;
	width: 100%;
}

.cr-project__content figure.cr-shot:focus-visible {
	outline: var(--cr-focus);
	outline-offset: 4px;
}

/* "Projekta skati" (inc/project-views.php) — the approved F14 P17 views layout (owner 2026-10-17): browser
 * frame with "Palielināt" in its bar (outside the screenshot), first view wide, the others in pairs once the
 * gallery itself is 46 rem wide (container query), one column below; whole images, no inner scrolling frame; one native <dialog> for the full image. */
.cr-pv-views {
	container-type: inline-size; /* pairs follow the gallery's real width (tablet, zoom), not the viewport */
	margin: var(--wp--preset--spacing--70) auto 0;
	max-width: 75rem;
}

/* The case section after the views starts with the same separator and spacing as between two sections. */
.cr-project__content .cr-pv-views + .pcs-row {
	border-top: 1px solid var(--cr-line);
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
}

.cr-pv-views__head {
	margin-bottom: var(--wp--preset--spacing--50);
	max-width: 45rem;
}

.cr-pv-views__head > * {
	margin: 0;
}

.cr-pv-grid,
.entry-content .cr-pv-grid {
	display: grid;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cr-pv-grid > li {
	margin: 0;
	min-width: 0;
}

.cr-pv-grid > li::marker {
	content: none;
}

@container (min-width: 46rem) {
	.cr-pv-grid,
	.entry-content .cr-pv-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cr-pv-grid > .is-wide {
		grid-column: 1 / -1;
	}
}

.cr-pv-view {
	margin: 0;
}

.cr-pv-view figcaption {
	color: var(--cr-text);
	margin-top: 0.75rem;
	overflow-wrap: break-word;
}

.cr-pv-view figcaption strong {
	color: var(--cr-gold);
	display: block;
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-bottom: 0.25rem;
	text-transform: uppercase;
}

.cr-pv-zoom {
	background: none;
	border: 0;
	color: inherit;
	cursor: zoom-in;
	display: block;
	font: inherit;
	padding: 0;
	position: relative;
	text-align: inherit;
	text-decoration: none;
	width: 100%;
}

.cr-pv-zoom:focus-visible {
	outline: var(--cr-focus);
	outline-offset: 4px;
}

.cr-pv-browser {
	background-color: #f4f4f6;
	border: 1px solid color-mix(in srgb, var(--cr-gold) 35%, transparent);
	border-radius: 0.5rem;
	box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.35);
	display: block;
	overflow: hidden;
}

.cr-pv-browser__bar {
	align-items: center;
	background-color: #1d1c21;
	border-bottom: 1px solid var(--cr-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	min-height: 1.5rem;
	padding: 0.25rem 0.75rem;
}

.cr-pv-browser__bar > span:not(.cr-pv-browser__zoom) {
	background-color: #4a4850;
	border-radius: 50%;
	display: block;
	height: 0.5rem;
	width: 0.5rem;
}

.cr-pv-browser__bar > span:first-child {
	background-color: var(--cr-gold);
}

.cr-pv-browser__bar .cr-pv-browser__zoom {
	border: 1px solid color-mix(in srgb, var(--cr-gold) 60%, transparent);
	color: var(--cr-text);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	line-height: 1.2;
	margin-left: auto;
	padding: 0.125rem 0.5rem;
}

.cr-pv-zoom:is(:hover, :focus-visible) .cr-pv-browser__zoom {
	background-color: var(--cr-gold);
	color: var(--cr-on-gold);
}

.cr-pv-browser img {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

/* Off-screen views are not rendered — and their lazy images not requested — until they come near the viewport.
 * Without this, Chrome on a slow connection requests every lazy image within about 2500 px, so the whole gallery
 * counted as initial download (measured 2026-10-28). The reserved height follows the view's aspect ratio
 * (--cr-pv-ar, set per view) plus the frame bar and border, so the page height does not jump; `auto` keeps the
 * real height once rendered. Visible rendering is unchanged (the frame's own shadow is not clipped). */
.cr-pv-browser {
	content-visibility: auto;
	contain-intrinsic-block-size: auto calc(100cqi / var(--cr-pv-ar, 1.8359) + 1.5rem + 8px);
}

@container (min-width: 46rem) {
	.cr-pv-grid > li:not(.is-wide) .cr-pv-browser {
		contain-intrinsic-block-size: auto calc((100cqi - var(--wp--preset--spacing--50)) / 2 / var(--cr-pv-ar, 1.8359) + 1.5rem + 8px);
	}
}

.cr-pv-lightbox {
	background-color: var(--cr-base);
	border: 1px solid var(--cr-line);
	color: var(--cr-text);
	height: min(100dvh - 2rem, 100%);
	max-height: calc(100dvh - 2rem);
	max-width: min(100vw - 2rem, 90rem);
	padding: 0;
	width: 100%;
}

.cr-pv-lightbox::backdrop {
	background-color: rgba(8, 8, 10, 0.85);
}

.cr-pv-lightbox__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cr-pv-lightbox__top {
	align-items: center;
	border-bottom: 1px solid var(--cr-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	padding: 0.75rem 1rem;
}

.cr-pv-lightbox__title {
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
	min-width: 0;
	overflow-wrap: break-word;
}

.cr-pv-lightbox__close {
	background: none;
	border: 1px solid var(--cr-gold);
	color: var(--cr-text);
	cursor: pointer;
	font: inherit;
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	min-height: 44px;
	padding: 0.25rem 1rem;
}

.cr-pv-lightbox__close:focus-visible {
	outline: var(--cr-focus);
	outline-offset: 2px;
}

/* On a phone the full image is larger than the screen and pans inside the dialog (pinch zoom still works);
 * from 48 em it fits the dialog width (never larger than the file: max-width set by the script). */
.cr-pv-lightbox__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 1rem;
}

.cr-pv-lightbox__body img {
	display: block;
	height: auto;
	margin-inline: auto;
	max-width: none;
	width: max(100%, 56rem);
}

@media (min-width: 48em) {
	.cr-pv-lightbox__body img {
		width: 100%;
	}
}

html.cr-pv-locked {
	overflow: hidden;
}

@media print {
	.cr-pv-browser__bar,
	.cr-pv-lightbox {
		display: none;
	}

	.cr-pv-browser {
		box-shadow: none;
	}
}

/* Previous / next project. */
.cr-project-nav {
	align-items: center;
	border-top: 1px solid var(--cr-line);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr auto 1fr;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
	padding: var(--wp--preset--spacing--60) var(--cr-gutter);
}

.cr-project-nav__link {
	color: var(--cr-text);
	display: grid;
	gap: 0.25rem;
	text-decoration: none;
}

.cr-project-nav__link--next {
	text-align: right;
}

.cr-project-nav__label {
	color: var(--cr-gold);
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cr-project-nav__title {
	font-weight: 600;
	line-height: 1.35;
}

.cr-project-nav__link:is(:hover, :focus-visible) .cr-project-nav__title {
	color: var(--cr-gold);
}

@media (max-width: 47.4375em) {
	.cr-project-nav {
		grid-template-columns: 1fr 1fr;
	}

	.cr-project-nav__all {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: center;
	}
}

/* F14 Q3: LocalWP-only placeholder for old images inside imported articles (creating-core
   Article_Legacy_Images). No image is loaded; the final article visuals come in F14 phase C/D. */
.cr-legacy-image__frame {
	align-items: center;
	aspect-ratio: 16 / 9;
	box-sizing: border-box;
	background: color-mix(in srgb, var(--cr-line) 18%, transparent);
	border: 1px dashed var(--cr-line);
	display: flex;
	justify-content: center;
	max-height: 18rem;
	padding: var(--wp--preset--spacing--30);
	width: 100%;
}

.cr-legacy-image--decorative .cr-legacy-image__frame,
.cr-legacy-image--logo .cr-legacy-image__frame {
	aspect-ratio: auto;
	min-height: 4rem;
}

.cr-legacy-image__note,
.cr-legacy-image--inline {
	color: var(--cr-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * SEO / GEO lead offer (owner 2026-10-16, revised 19:35): "2 vienā" is the main offer —
 * one gold frame, a quiet background tone and the "2 vienā" label; no double frame, no lilac
 * ring, never raised, enlarged or taller than the other options. The markup appears only while
 * the lead package is active (creating_v2_lead_offer()).
 * ------------------------------------------------------------------------- */

/* Service page: three short option cards of EQUAL height. The layout follows the space and the
   text size (container query in rem — with 200 % text the threshold doubles): three columns
   with shared rows (subgrid: labels, titles, lines, prices, lists and buttons on common lines)
   only when each column has room; otherwise one column, every card as tall as the tallest. */
.cr-offer-cards {
	container: offers / inline-size;
}

.cr-grid--offer-cards {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-auto-rows: 1fr;
	grid-template-columns: minmax(0, 1fr);
}

.cr-offer-card {
	background: var(--cr-raised);
	border: 1px solid var(--cr-line);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
	overflow-wrap: break-word;
	padding: var(--wp--preset--spacing--50);
}

.cr-offer-card > * {
	margin: 0;
}

@container offers (min-width: 50rem) {
	.cr-grid--offer-cards {
		gap: var(--wp--preset--spacing--60);
		grid-auto-rows: auto;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(6, auto);
	}

	.cr-offer-card {
		display: grid;
		gap: 0.75rem;
		grid-row: span 6;
		grid-template-rows: subgrid;
	}
}

.cr-offer-card.is-lead {
	background: color-mix(in srgb, var(--cr-gold) 7%, var(--cr-raised));
	border: 2px solid var(--cr-gold);
	padding: calc(var(--wp--preset--spacing--50) - 1px); /* same outer size as the 1 px cards */
}

.cr-offer-card__label {
	align-self: start;
	font-family: var(--cr-font-mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	justify-self: start;
	letter-spacing: 0.08em;
	line-height: 1.4;
	min-height: 1.75rem;
	padding: 0.1875rem 0.75rem;
	text-transform: uppercase;
}

.cr-offer-card.is-lead .cr-offer-card__label {
	background: var(--cr-gold);
	color: var(--cr-on-gold);
}

.cr-offer-card__label.is-empty {
	padding: 0;
}

/* One column: no empty rows (they only keep the three columns aligned). */
.cr-offer-card__label.is-empty,
.cr-offer-card__line:empty {
	display: none;
}

@container offers (min-width: 50rem) {
	.cr-offer-card__label.is-empty,
	.cr-offer-card__line:empty {
		display: block;
	}
}

.cr-offer-card__title {
	color: var(--cr-text);
	font-family: var(--cr-font-text);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 650;
	line-height: 1.2;
}

.cr-offer-card__line {
	color: var(--cr-muted);
}

.cr-offer-card .cr-price__amount {
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	line-height: 1.1;
}

.cr-offer-card.is-lead .cr-price__amount {
	color: var(--cr-gold-light);
}

.cr-offer-card__points {
	border-top: 1px solid var(--cr-line);
	padding-top: 0.5rem;
}

.cr-offer-card__foot {
	align-self: stretch;
	display: flex;
	margin-top: auto;
}

/* Every button as tall as the tallest (a longer label may wrap): one horizontal line on desktop. */
.cr-offer-card__foot .cr-button {
	text-align: center;
	width: 100%;
}

@container offers (min-width: 50rem) {
	.cr-offer-card__foot {
		align-items: stretch;
		margin-top: 0;
	}
}

/* Full conditions below the cards. */
.cr-offer-details {
	border-top: 1px solid var(--cr-line);
	margin-top: var(--wp--preset--spacing--60);
	max-width: 52rem;
	padding-top: var(--wp--preset--spacing--50);
}

.cr-offer-details__heading {
	color: var(--cr-text);
	font-family: var(--cr-font-text);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 650;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.cr-offer-details__title {
	color: var(--cr-gold-light);
	font-family: var(--cr-font-text);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 650;
	margin: var(--wp--preset--spacing--40) 0 0.5rem;
}

.cr-offer-details p,
.cr-offer-details__list {
	color: var(--cr-muted);
	margin: 0 0 0.75rem;
}

.cr-offer-details__list {
	padding-left: 1.25rem;
}

.cr-offer-details__list li + li {
	margin-top: 0.25rem;
}

/* Service cards (homepage, services overview): the offer box instead of "no …". */
.cr-lead-offer {
	/* Own dark surface: readable on the gold homepage cards and on the dark overview cards. */
	background: var(--cr-base);
	border: 2px solid var(--cr-gold);
	display: grid;
	gap: 0.25rem;
	margin: 0.25rem 0 0;
	padding: 0.75rem 0.875rem;
}

.cr-lead-offer > * {
	margin: 0;
}

.cr-lead-offer__name {
	color: var(--cr-text);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 650;
	line-height: 1.35;
}

.cr-lead-offer .cr-price__amount {
	color: var(--cr-gold-light);
	font-size: 1.75rem;
}

/* The service card (gold variant) sets dark text on its price; the offer box is dark. */
.cr-lead-offer .cr-price,
.cr-lead-offer .cr-price__vat,
.cr-lead-offer .cr-price__prefix {
	color: var(--cr-muted);
}

.cr-lead-offer .cr-price__currency {
	color: var(--cr-gold);
}

.cr-lead-offer__note,
.cr-price-cat__note,
.cr-calc__choice-note {
	color: var(--cr-gold-light);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

/* Pricing catalogue (/cenas/): the lead row in one gold frame, its note under the name. */
.cr-price-cat__list li.is-lead {
	background: color-mix(in srgb, var(--cr-gold) 7%, transparent);
	border: 2px solid var(--cr-gold);
	margin: 0.375rem 0;
	padding: 0.625rem 0.75rem;
}

.cr-price-cat__list li.is-lead + li {
	border-top: 0;
}

.cr-price-cat__list li.is-lead .cr-price-cat__name {
	font-weight: 650;
}

.cr-price-cat__list li.is-lead .cr-price-cat__price {
	color: var(--cr-gold-light);
	font-weight: 700;
}

.cr-price-cat__note {
	display: block;
	margin-top: 0.125rem;
}

.cr-price-cat__note.is-quiet {
	color: var(--cr-muted);
	font-weight: 400;
}

/* Calculator: the short line of each option (e.g. "Audits jau iekļauts cenā."). */
.cr-calc__choice-note {
	grid-column: 2;
}

/* ---------------------------------------------------------------------------
 * Company requisites in the footer (owner 2026-10-16): one compact block from creating_entity.
 * Desktop: lines with "·" separators; mobile: one readable row per item, no overflow.
 * ------------------------------------------------------------------------- */
.cr-company-details {
	color: var(--cr-muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.6;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.cr-company-details__line {
	margin: 0;
}

.cr-company-details__item.is-nowrap {
	white-space: nowrap;
}

.cr-company-details__item + .cr-company-details__item::before {
	color: var(--cr-subtle);
	content: " · " / "";
}

@media (max-width: 37.49875em) {
	.cr-company-details__line + .cr-company-details__line {
		margin-top: 0.375rem;
	}

	.cr-company-details__item {
		display: block;
	}

	.cr-company-details__item.is-nowrap {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.cr-company-details__item + .cr-company-details__item::before {
		content: none;
	}
}

/* Analytics consent banner (creating-core Google_Tag, M7 2026-10-21): not modal, two equal buttons, the page
   keeps working without a choice; the page gets bottom padding so the banner never covers the last content. */
.cr-consent {
	background: var(--cr-raised);
	border: 1px solid var(--cr-line);
	border-top: 2px solid var(--cr-gold);
	bottom: 0;
	box-sizing: border-box;
	color: var(--cr-text);
	left: 50%;
	max-width: min(56rem, 100%);
	padding: 1rem var(--cr-gutter, 1rem);
	position: fixed;
	transform: translateX(-50%);
	width: 100%;
	z-index: 1000;
}
.cr-consent[hidden] {
	display: none;
}
.cr-consent__title {
	font-family: var(--cr-font-text);
	font-size: 1rem;
	margin: 0 0 0.25rem;
}
.cr-consent__text {
	color: var(--cr-muted);
	font-size: 0.9375rem;
	margin: 0 0 0.75rem;
}
.cr-consent__text a {
	color: var(--cr-gold);
}
.cr-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.cr-consent__button {
	flex: 1 1 10rem;
	min-height: 2.75rem;
}
.cr-consent__button:focus-visible {
	outline: var(--cr-focus);
	outline-offset: 2px;
}
html.has-cr-consent body {
	padding-bottom: var(--cr-consent-h, 0px);
}

/* =========================================================================
   /kontakti/ and /par-mums/ (owner 2026-10-21 17:06, inc/sections.php creating_v2_info_page_class()):
   the approved article / portfolio reading layout — breadcrumbs and H1 on the common content edge (wide size),
   the section heading in the left column, intro and content in the right one (30 / 70 from 48.875 em, the same
   breakpoint as the articles), stacked below. The page's own blocks and the single H1 stay unchanged.
   ========================================================================= */
.cr-page--info .cr-main > *,
.cr-page--info .cr-main .entry-content > * {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.cr-page--info .cr-main .cr-section {
	background: none;
	padding: var(--wp--preset--spacing--60) 0 0;
}

.cr-page--info .cr-section__title {
	color: var(--cr-gold);
	font-family: var(--cr-font-display);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 400;
	line-height: 1.2;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

@media (min-width: 48.875em) {
	.cr-page--info .cr-section__inner {
		column-gap: var(--wp--preset--spacing--60);
		display: grid;
		grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
	}

	.cr-page--info .cr-section__head {
		display: contents; /* eyebrow + heading → left column, intro → right column */
	}

	.cr-page--info .cr-section__head > .cr-eyebrow,
	.cr-page--info .cr-section__title {
		grid-column: 1;
		margin-block: 0;
	}

	.cr-page--info .cr-section__title {
		margin-top: var(--wp--preset--spacing--20);
	}

	.cr-page--info .cr-section__intro,
	.cr-page--info .cr-section__inner > :not(.cr-section__head) {
		grid-column: 2;
		min-width: 0;
	}

	.cr-page--info .cr-section__intro {
		grid-row: 1 / span 2;
		margin-top: 0;
		max-width: var(--wp--style--global--content-size, 720px);
	}

	.cr-page--info .cr-section__inner > :not(.cr-section__head) {
		margin-top: var(--wp--preset--spacing--50);
	}

	/* No intro (e.g. /par-mums/): the content itself starts level with the eyebrow, as the intro does elsewhere. */
	.cr-page--info .cr-section__head:not(:has(.cr-section__intro)) + * {
		grid-row: 1 / span 3;
		margin-top: 0;
	}

	/* Blocks after the section (e.g. the "Pieteikt projektu" button on /par-mums/) line up with the text column. */
	.cr-page--info .cr-main .entry-content > :not(.cr-section) {
		padding-left: calc(30% + var(--wp--preset--spacing--60));
	}
}

/* /par-mums/ "Pieredze darbā ar dažādu nozaru zīmoliem" (owner 2026-10-22): the heading in the left column with the
 * section arrow of the article headings, intro and brand list in the right column (same 30 / 70 grid, gap and
 * breakpoint as the section above); stacked below 48.875 em (heading above the text). Text and order unchanged. */
.cr-page--info .cr-brand-experience__title {
	color: var(--cr-gold);
	font-family: var(--cr-font-display);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 400;
	line-height: 1.2;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.cr-page--info .cr-brand-experience__title::before {
	background: url("../images/brand/section-arrow.svg") no-repeat left center / 100% 100%;
	content: "";
	content: "" / "";
	display: block;
	height: 0.625rem;
	margin-bottom: 1rem;
	width: 4.75rem;
}

@media (min-width: 48.875em) {
	.cr-page--info .cr-section__inner > .cr-brand-experience {
		column-gap: var(--wp--preset--spacing--60);
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
	}

	.cr-page--info .cr-brand-experience__title {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.cr-page--info .cr-brand-experience__intro,
	.cr-page--info .cr-brand-experience__list {
		grid-column: 2;
		min-width: 0;
	}

	.cr-page--info .cr-brand-experience__intro {
		margin-top: 0;
	}
}

/* /par-mums/: the slow-drawn wordmark sits under the heading in the left column (it used to fill the empty
 * top-right of the wide homepage-style section, which is now the text column); at this smaller size the stroke
 * is thicker so it stays a visible ~1 px line. Desktop only (≥ 60 em), as before. */
.cr-page--info .cr-decor--wordmark {
	bottom: auto;
	left: 0;
	right: auto;
	top: calc(var(--wp--preset--spacing--60) + 7rem);
	width: 30%;
}

.cr-page--info .cr-decor--wordmark .cr-decor__wordmark {
	margin-left: 0;
	opacity: 0.5;
	stroke-width: 1.5;
	width: 100%;
}

/* The vertical gold lines are placed for the homepage's full-width contact section; in the reading layout
 * they would cross the heading — not shown here. */
.cr-page--info .cr-decor--lines {
	display: none;
}