/* ==========================================================================
   UpHive — design system
   Workshop editorial: limestone paper, warm ink, oxide accent, pine ground.
   Libre Caslon Display (display) · Schibsted Grotesk (text/UI) · IBM Plex Mono (labels/code)

   Contents
   01 Fonts            06 Elementor integration   11 Process & record
   02 Tokens           07 Header & menu           12 CTA & footer
   03 Base             08 Hero scene              13 Theme templates
   04 Type             09 Index, ledger, spreads  14 Forms
   05 Buttons & links  10 Code & capabilities     15 Motion
                                                  16 Industry templates
   ========================================================================== */

/* 01 Fonts ---------------------------------------------------------------- */
@font-face {
	font-family: "Libre Caslon Display";
	src: url("../fonts/libre-caslon-display-normal-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Schibsted Grotesk";
	src: url("../fonts/schibsted-grotesk-normal-400-900.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Schibsted Grotesk";
	src: url("../fonts/schibsted-grotesk-italic-400-900.woff2") format("woff2");
	font-weight: 400 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono-normal-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono-normal-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* 02 Tokens --------------------------------------------------------------- */
:root {
	/* Palette */
	--uh-limestone: #f1ede4;
	--uh-paper: #f8f6f1;
	--uh-bone: #e7e1d5;
	--uh-stone: #cdc4b3;
	--uh-clay: #6f665a;
	--uh-graphite: #3b362f;
	--uh-ink: #17140f;
	--uh-oxide: #b3401c;
	--uh-oxide-deep: #8e3013;
	--uh-oxide-light: #ea9470;
	--uh-pine: #1d332d;
	--uh-pine-deep: #142520;
	--uh-sage-mist: #b9c6bd;

	/* Semantic (light ground) */
	--bg: var(--uh-limestone);
	--surface: var(--uh-paper);
	--fg: var(--uh-ink);
	--fg-soft: var(--uh-graphite);
	--fg-muted: var(--uh-clay);
	--rule: var(--uh-stone);
	--rule-soft: rgba(23, 20, 15, 0.1);
	--accent: var(--uh-oxide);
	--accent-hover: var(--uh-oxide-deep);
	--accent-ink: #fff;
	--focus: var(--uh-oxide);
	--ok: #2f5d46;
	--error: #a3271b;

	/* Type */
	--font-display: "Libre Caslon Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--font-text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--fs-display: clamp(3.1rem, 1.4rem + 6.4vw, 8.25rem);
	--fs-h1: clamp(2.75rem, 1.6rem + 4.4vw, 6rem);
	--fs-h2: clamp(2.25rem, 1.5rem + 2.9vw, 4.25rem);
	--fs-h3: clamp(1.6rem, 1.3rem + 1.1vw, 2.35rem);
	--fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
	--fs-lead: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
	--fs-body: 1.0625rem;
	--fs-small: 0.9375rem;
	--fs-mono: 0.75rem;

	--lh-tight: 0.98;
	--lh-heading: 1.08;
	--lh-body: 1.6;

	--tracking-display: -0.022em;
	--tracking-mono: 0.08em;

	/* Space (4px base) */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-section: clamp(4.5rem, 2rem + 6.5vw, 8.5rem);
	--sp-block: clamp(3rem, 2rem + 4vw, 6rem);

	/* Layout */
	--w-max: 1440px;
	--w-text: 40rem;
	--w-narrow: 48rem;
	--gutter: clamp(1.25rem, 0.6rem + 3.2vw, 3.5rem);
	--col-gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
	--header-h: 4.5rem;

	/* Shape */
	--r-0: 0;
	--r-1: 2px;
	--r-2: 4px;
	--hair: 1px solid var(--rule);
	--sh-plate: 0 1px 0 rgba(23, 20, 15, 0.05), 0 2px 6px -2px rgba(23, 20, 15, 0.12), 0 36px 70px -36px rgba(23, 20, 15, 0.45);
	--sh-lift: 0 30px 60px -30px rgba(23, 20, 15, 0.5);

	/* Motion */
	--dur-1: 0.18s;
	--dur-2: 0.42s;
	--dur-3: 0.85s;
	--dur-4: 1.3s;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-snap: cubic-bezier(0.2, 0.9, 0.1, 1);
}

/* Dark grounds redefine the semantic tokens, so every component works on them. */
.uh-ground-ink,
.uh-ground-pine,
.uh-footer {
	--bg: var(--uh-ink);
	--surface: #221e18;
	--fg: #f2ede3;
	--fg-soft: #d9d2c4;
	--fg-muted: #a69d8e;
	--rule: rgba(242, 237, 227, 0.2);
	--rule-soft: rgba(242, 237, 227, 0.1);
	--accent: var(--uh-oxide-light);
	--accent-hover: #f3b496;
	--accent-ink: var(--uh-ink);
	--focus: var(--uh-oxide-light);
	--error: #f09a8a;
	color: var(--fg);
	background-color: var(--bg);
}
.uh-ground-pine {
	--bg: var(--uh-pine);
	--surface: var(--uh-pine-deep);
	--fg-muted: var(--uh-sage-mist);
	--rule: rgba(242, 237, 227, 0.22);
}
.uh-ground-paper {
	--bg: var(--uh-paper);
	background-color: var(--bg);
}
.uh-ground-bone,
.uh-case-stage {
	--fg-muted: #5f574c; /* clay darkened to keep 4.5:1 on bone */
}
.uh-ground-bone {
	--bg: var(--uh-bone);
	background-color: var(--bg);
}

/* 03 Base ----------------------------------------------------------------- */
html {
	scroll-padding-top: calc(var(--header-h) + 1rem);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-text);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: 400;
	font-feature-settings: "ss01", "kern";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
/* Paper grain: a 2 KB noise tile, barely visible, so flat grounds feel printed rather than rendered. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.32;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .08 0 0 0 0 .06 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection {
	background: var(--uh-oxide);
	color: #fff;
}
figcaption {
	font-style: normal;
}
img,
svg,
video {
	max-width: 100%;
	height: auto;
}
a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
a:hover {
	color: var(--accent);
}
:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: var(--r-1);
}
.uh-main:focus {
	outline: none;
}
.screen-reader-text {
	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;
}
.skip-link.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	z-index: 10000;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.75rem 1.25rem;
	background: var(--uh-ink);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.uh-wrap {
	width: 100%;
	max-width: calc(var(--w-max) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
	box-sizing: border-box;
}
hr,
.uh-rule {
	border: 0;
	border-top: var(--hair);
	margin: 0;
}

/* 04 Type ----------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: inherit;
	font-weight: 400;
}
p {
	margin: 0 0 1em;
}
p:last-child {
	margin-bottom: 0;
}
.uh-display .elementor-heading-title,
.uh-display:is(h1, h2, p),
.uh-h1 .elementor-heading-title,
.uh-h1:is(h1, h2),
.uh-h2 .elementor-heading-title,
.uh-h2:is(h1, h2, h3),
.uh-h3 .elementor-heading-title,
.uh-h3:is(h2, h3, h4) {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: var(--tracking-display);
	color: var(--fg);
	text-wrap: balance;
	font-kerning: normal;
}
.uh-display .elementor-heading-title,
.uh-display:is(h1, h2, p) {
	font-size: var(--fs-display);
	line-height: var(--lh-tight);
	letter-spacing: -0.03em;
}
.uh-h1 .elementor-heading-title,
.uh-h1:is(h1, h2) {
	font-size: var(--fs-h1);
	line-height: 1;
	letter-spacing: -0.026em;
}
.uh-h2 .elementor-heading-title,
.uh-h2:is(h1, h2, h3) {
	font-size: var(--fs-h2);
	line-height: 1.02;
}
.uh-h3 .elementor-heading-title,
.uh-h3:is(h2, h3, h4) {
	font-size: var(--fs-h3);
	line-height: var(--lh-heading);
	letter-spacing: -0.012em;
}
.uh-h4 .elementor-heading-title,
.uh-h4:is(h2, h3, h4, p) {
	font-family: var(--font-text);
	font-size: var(--fs-h4);
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--fg);
}
/* The accent word: Caslon's own roman, set in oxide, never an italic. */
.uh-display em,
.uh-h1 em,
.uh-h2 em,
.uh-h3 em {
	font-style: normal;
	color: var(--accent);
}
.uh-eyebrow .elementor-heading-title,
.uh-eyebrow:is(p, h2, h3, span),
.uh-mono,
.uh-mono .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
	color: var(--fg-muted);
}
.uh-eyebrow .elementor-heading-title,
.uh-eyebrow:is(p, h2, h3, span) {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	color: var(--fg-soft);
}
.uh-eyebrow .elementor-heading-title::before,
.uh-eyebrow:is(p, h2, h3, span)::before {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: var(--accent);
	flex: none;
}
.uh-lead,
.uh-lead p {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--fg-soft);
	letter-spacing: -0.005em;
	max-width: 36rem;
	text-wrap: pretty;
}
.uh-body,
.uh-body p,
.uh-prose p,
.uh-prose li {
	color: var(--fg-soft);
	max-width: var(--w-text);
	text-wrap: pretty;
}
.uh-small,
.uh-small p {
	font-size: var(--fs-small);
	color: var(--fg-muted);
}
.uh-body a,
.uh-prose a,
.uh-lead a {
	color: var(--fg);
	text-decoration: underline;
	text-decoration-color: var(--accent);
}
.uh-body a:hover,
.uh-prose a:hover {
	color: var(--accent);
}
.uh-prose h2 {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	line-height: var(--lh-heading);
	letter-spacing: -0.012em;
	margin: 2.2em 0 0.6em;
}
.uh-prose h3 {
	font-size: var(--fs-h4);
	font-weight: 600;
	margin: 1.8em 0 0.5em;
}
.uh-prose ul,
.uh-prose ol {
	padding-left: 1.2em;
	margin: 0 0 1.4em;
}
.uh-prose li + li {
	margin-top: 0.4em;
}
.uh-prose li::marker {
	color: var(--accent);
}
.uh-prose figure {
	margin: 2.5em 0;
}
.uh-prose > *:first-child {
	margin-top: 0;
}

/* Ruled list: an editorial list with hairlines instead of bullets. */
.uh-ruled ul,
ul.uh-ruled {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--hair);
}
.uh-ruled li,
ul.uh-ruled li {
	position: relative;
	padding: 0.85em 0 0.85em 1.75rem;
	border-bottom: var(--hair);
	color: var(--fg-soft);
	max-width: none;
}
.uh-ruled li::before,
ul.uh-ruled li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.45em;
	width: 0.75rem;
	height: 1px;
	background: var(--accent);
}
.uh-ruled li strong {
	color: var(--fg);
	font-weight: 600;
}

/* 05 Buttons & links ------------------------------------------------------ */
.uh-btn,
.uh-button .elementor-button {
	--btn-bg: var(--uh-ink);
	--btn-fg: var(--uh-limestone);
	--btn-fill: var(--uh-oxide);
	--btn-fill-fg: #fff;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	min-height: 3.25rem;
	padding: 0.85rem 1.35rem 0.85rem 1.5rem;
	border: 1px solid var(--btn-bg);
	border-radius: var(--r-1);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-text);
	font-size: 0.97rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
	box-sizing: border-box;
}
/* The fill sweeps in from the left on hover, like ink drawn across a page. */
.uh-btn::before,
.uh-button .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-fill);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--dur-2) var(--ease-out);
}
.uh-btn:hover,
.uh-button .elementor-button:hover,
.uh-button .elementor-button:focus-visible,
.uh-btn:focus-visible {
	color: var(--btn-fill-fg);
	border-color: var(--btn-fill);
}
.uh-btn:hover::before,
.uh-button .elementor-button:hover::before,
.uh-btn:focus-visible::before,
.uh-button .elementor-button:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
}
.uh-btn .uh-icon {
	width: 1.15rem;
	height: 1.15rem;
	transition: transform var(--dur-2) var(--ease-out);
}
.uh-button .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
}
.uh-button .elementor-button-content-wrapper::after {
	content: "";
	width: 1.15rem;
	height: 1.15rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--dur-2) var(--ease-out);
}
.uh-btn:hover .uh-icon,
.uh-button .elementor-button:hover .elementor-button-content-wrapper::after {
	transform: translateX(4px);
}
/* Ghost: hairline outline, ink fill on hover. */
.uh-btn--ghost,
.uh-button--ghost .elementor-button {
	--btn-bg: transparent;
	--btn-fg: var(--fg);
	--btn-fill: var(--fg);
	--btn-fill-fg: var(--bg);
	border-color: var(--rule);
}
/* On dark grounds the primary button is paper, filling with oxide. */
.uh-ground-ink .uh-button:not(.uh-button--ghost) .elementor-button,
.uh-ground-pine .uh-button:not(.uh-button--ghost) .elementor-button,
.uh-footer .uh-btn--primary {
	--btn-bg: var(--uh-limestone);
	--btn-fg: var(--uh-ink);
	--btn-fill: var(--uh-oxide);
	--btn-fill-fg: #fff;
}
.uh-buttons.e-con {
	display: flex;
	--flex-direction: row;
	--flex-wrap: wrap;
	--align-items: center;
	--row-gap: 0.75rem;
	--column-gap: 0.75rem;
	--width: auto;
}
.uh-buttons.e-con > .elementor-widget {
	--container-widget-width: auto;
	width: auto;
}

/* Text link with a drawn underline. */
.uh-link,
.uh-textlink .elementor-heading-title a,
.uh-textlink a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--fg);
	font-weight: 600;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
	padding-bottom: 0.25rem;
	transition: background-size var(--dur-2) var(--ease-out), color var(--dur-1);
}
.uh-link:hover,
.uh-textlink a:hover {
	color: var(--accent);
	background-size: 0 1px;
	background-position: right bottom;
}
.uh-link .uh-icon {
	width: 1.1rem;
	height: 1.1rem;
	transition: transform var(--dur-2) var(--ease-out);
}
.uh-link:hover .uh-icon {
	transform: translateX(4px);
}
.uh-textlink .elementor-heading-title {
	font-family: var(--font-text);
	font-size: var(--fs-body);
	line-height: 1.4;
}

/* 06 Elementor integration ------------------------------------------------
   Pages are built from full-width containers carrying these classes.
   They set Elementor's own variables, so Elementor's panel still overrides them. */
:where(.elementor) .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--gap: 0px;
}
/* Apply Elementor's own spacing variables directly, so layout never depends on
   which of Elementor's generated stylesheets happens to be present. */
.elementor .e-con-full {
	padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
	gap: var(--row-gap) var(--column-gap);
	box-sizing: border-box;
}
.elementor .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}
.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}
/* Section: full-bleed ground, content aligned to the max width without an extra wrapper. */
.elementor .elementor-element.e-con.uh-section {
	--edge: max(var(--gutter), calc((100% - var(--w-max)) / 2));
	--padding-top: var(--sp-section);
	--padding-bottom: var(--sp-section);
	--padding-left: var(--edge);
	--padding-right: var(--edge);
	--row-gap: var(--sp-block);
	position: relative;
}
.elementor .elementor-element.e-con.uh-section--tight {
	--padding-top: var(--sp-block);
	--padding-bottom: var(--sp-block);
}
.elementor .elementor-element.e-con.uh-section--flush-top {
	--padding-top: 0px;
}
.elementor .elementor-element.e-con.uh-stack {
	--row-gap: var(--sp-5);
}
.elementor .elementor-element.e-con.uh-stack--sm {
	--row-gap: var(--sp-4);
}
.elementor .elementor-element.e-con.uh-stack--lg {
	--row-gap: var(--sp-7);
}
/* Section header: label + title left, intro right, on a shared baseline. */
.elementor .elementor-element.e-con.uh-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	--row-gap: var(--sp-5);
	--column-gap: var(--col-gap);
	align-items: end;
}
.elementor .elementor-element.e-con.uh-head > .e-con {
	--row-gap: var(--sp-5);
}
@media (min-width: 1024px) {
	.elementor .elementor-element.e-con.uh-head {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
	.elementor .elementor-element.e-con.uh-head--even {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}
/* Splits */
.elementor .elementor-element.e-con.uh-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	--row-gap: var(--sp-7);
	--column-gap: var(--col-gap);
	align-items: start;
}
@media (min-width: 1024px) {
	.elementor .elementor-element.e-con.uh-split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		--column-gap: clamp(2rem, 5vw, 6rem);
	}
	.elementor .elementor-element.e-con.uh-split--flip {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
	.elementor .elementor-element.e-con.uh-split--even {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.elementor .elementor-element.e-con.uh-split--narrow {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}
	.uh-sticky.e-con {
		position: sticky;
		top: calc(var(--header-h) + 2rem);
	}
}
.elementor .elementor-element.e-con.uh-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	--row-gap: var(--sp-7);
	--column-gap: var(--col-gap);
}
@media (min-width: 768px) {
	.elementor .elementor-element.e-con.uh-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.elementor .elementor-element.e-con.uh-cols--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.elementor .elementor-element.e-con.uh-cols--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.elementor .elementor-element.e-con.uh-col {
	--row-gap: var(--sp-4);
	align-content: start;
}
.uh-ruletop.e-con,
.uh-ruletop {
	border-top: var(--hair);
	--padding-top: var(--sp-5);
}
.uh-measure {
	max-width: var(--w-narrow);
}

/* 07 Header & menu -------------------------------------------------------- */
.uh-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--header-h);
	color: var(--uh-ink);
	transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2), color var(--dur-2);
}
.admin-bar .uh-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}
.uh-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(241, 237, 228, 0.86);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur-2), background-color var(--dur-2);
}
.uh-header.is-scrolled::before {
	border-bottom-color: rgba(23, 20, 15, 0.1);
}
.uh-header.is-dark {
	color: var(--uh-limestone);
}
.uh-header.is-dark::before {
	background: rgba(23, 20, 15, 0.78);
	border-bottom-color: rgba(242, 237, 227, 0.1);
}
.uh-header.is-hidden:not(.is-open):not(:focus-within) {
	transform: translateY(-100%);
}
.uh-header__inner {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
}
.uh-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: inherit;
	text-decoration: none;
	position: relative;
	z-index: 2;
}
.uh-logo:hover {
	color: inherit;
}
.uh-mark {
	width: 1.6rem;
	height: 1.6rem;
	overflow: visible;
}
.uh-mark__outer,
.uh-mark__inner {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	transition: transform var(--dur-3) var(--ease-out);
	transform-origin: 13px 13px;
}
.uh-mark__inner {
	fill: var(--uh-oxide);
	stroke: none;
}
.uh-logo:hover .uh-mark__outer {
	transform: rotate(60deg);
}
.uh-logo__word {
	font-family: var(--font-text);
	font-weight: 700;
	font-size: 1.28rem;
	letter-spacing: -0.035em;
}
.uh-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: clamp(1.25rem, 2.4vw, 2.5rem);
}
.uh-nav__list a {
	position: relative;
	display: inline-block;
	padding: 0.4rem 0;
	color: inherit;
	font-size: 0.97rem;
	font-weight: 500;
	text-decoration: none;
}
.uh-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.1rem;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--dur-2) var(--ease-out);
}
.uh-nav__list a:hover::after,
.uh-nav__list a[aria-current]::after {
	transform: scaleX(1);
	transform-origin: left;
}
.uh-nav__list a[aria-current]::after {
	background: var(--uh-oxide);
}
.uh-header .uh-btn {
	min-height: 2.6rem;
	padding: 0.55rem 1rem 0.55rem 1.15rem;
	font-size: 0.9rem;
}
.uh-header.is-dark .uh-btn--primary {
	--btn-bg: var(--uh-limestone);
	--btn-fg: var(--uh-ink);
}
.uh-header__panel-foot {
	display: none;
}
.uh-menu-toggle {
	display: none;
}

@media (min-width: 1024px) {
	.uh-header__panel {
		display: flex;
		align-items: center;
		gap: clamp(1.5rem, 3vw, 3rem);
	}
}

@media (max-width: 1023.98px) {
	:root {
		--header-h: 4rem;
	}
	.uh-menu-toggle {
		position: relative;
		z-index: 2;
		display: inline-flex;
		align-items: center;
		gap: 0.7rem;
		min-height: 2.75rem;
		padding: 0 0.25rem;
		border: 0;
		background: none;
		color: inherit;
		font: 500 0.95rem/1 var(--font-text);
		cursor: pointer;
	}
	.uh-menu-toggle__icon {
		position: relative;
		width: 1.5rem;
		height: 0.7rem;
	}
	.uh-menu-toggle__icon i {
		position: absolute;
		left: 0;
		right: 0;
		height: 1.5px;
		background: currentColor;
		transition: transform var(--dur-2) var(--ease-out), top var(--dur-2) var(--ease-out);
	}
	.uh-menu-toggle__icon i:first-child {
		top: 0;
	}
	.uh-menu-toggle__icon i:last-child {
		top: calc(100% - 1.5px);
	}
	.uh-header.is-open .uh-menu-toggle__icon i:first-child {
		top: calc(50% - 0.75px);
		transform: rotate(45deg);
	}
	.uh-header.is-open .uh-menu-toggle__icon i:last-child {
		top: calc(50% - 0.75px);
		transform: rotate(-45deg);
	}
	/* Without JS the menu is a simple stacked list under the bar. */
	.uh-header__panel {
		display: none;
	}
	html:not(.js) .uh-header {
		height: auto;
	}
	html:not(.js) .uh-header__inner {
		flex-wrap: wrap;
		padding-block: 1rem;
	}
	html:not(.js) .uh-header__panel {
		display: block;
		width: 100%;
	}
	html:not(.js) .uh-nav__list {
		flex-wrap: wrap;
		gap: 0.5rem 1.25rem;
	}
	html:not(.js) .uh-menu-toggle {
		display: none;
	}
	/* With JS: a full-height ink panel; links rise in sequence. */
	.js .uh-header__panel {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: var(--sp-7);
		padding: calc(var(--header-h) + 2.5rem) var(--gutter) 2rem;
		background: var(--uh-ink);
		color: var(--uh-limestone);
		clip-path: inset(0 0 100% 0);
		visibility: hidden;
		transition: clip-path var(--dur-3) var(--ease-in-out), visibility 0s linear var(--dur-3);
		overflow-y: auto;
	}
	.admin-bar.js .uh-header__panel,
	.js .admin-bar .uh-header__panel {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
	.uh-header.is-open .uh-header__panel {
		clip-path: inset(0 0 0 0);
		visibility: visible;
		transition: clip-path var(--dur-3) var(--ease-in-out), visibility 0s;
	}
	.uh-header.is-open {
		color: var(--uh-limestone);
	}
	.uh-header.is-open::before {
		background: transparent;
		border-color: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.js .uh-nav__list {
		flex-direction: column;
		gap: 0;
		border-top: 1px solid rgba(242, 237, 227, 0.16);
	}
	.js .uh-nav__list li {
		border-bottom: 1px solid rgba(242, 237, 227, 0.16);
		overflow: hidden;
	}
	.js .uh-nav__list a {
		display: block;
		padding: 0.9rem 0 0.7rem;
		font-family: var(--font-display);
		font-size: clamp(2.2rem, 9vw, 3.5rem);
		line-height: 1.05;
		font-weight: 400;
		letter-spacing: -0.02em;
		transform: translateY(105%);
		transition: transform var(--dur-3) var(--ease-out);
		transition-delay: calc(var(--si, 0) * 55ms + 120ms);
	}
	.js .uh-nav__list a::after {
		display: none;
	}
	.js .uh-nav__list a[aria-current] {
		color: var(--uh-oxide-light);
	}
	.uh-header.is-open .uh-nav__list a {
		transform: none;
	}
	.js .uh-header__cta .uh-btn {
		--btn-bg: var(--uh-limestone);
		--btn-fg: var(--uh-ink);
		min-height: 3.25rem;
		width: 100%;
		justify-content: space-between;
		font-size: 1rem;
	}
	.js .uh-header__panel-foot {
		display: grid;
		gap: 0.5rem;
		color: var(--uh-sage-mist);
	}
	.uh-header__panel-foot .uh-mono {
		color: #a69d8e;
	}
	.uh-header__panel-foot a {
		color: var(--uh-limestone);
	}
	html.uh-menu-locked {
		overflow: hidden;
	}
}

/* 08 Hero & scene --------------------------------------------------------- */
.elementor .elementor-element.e-con.uh-hero {
	--padding-top: clamp(2.5rem, 1rem + 5vw, 6rem);
	--padding-bottom: clamp(4rem, 2rem + 6vw, 8rem);
	--row-gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
	overflow: hidden;
}
.elementor .elementor-element.e-con.uh-hero__top {
	display: flex;
	--flex-direction: row;
	--flex-wrap: wrap;
	--justify-content: space-between;
	--align-items: center;
	--row-gap: var(--sp-3);
	--column-gap: var(--sp-6);
}
.uh-hero__title {
	max-width: 15ch;
}
.uh-hero .uh-display .elementor-heading-title {
	max-width: 14.5ch;
}
.elementor .elementor-element.e-con.uh-hero__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	--row-gap: var(--sp-7);
	align-items: end;
}
.elementor .elementor-element.e-con.uh-hero__copy {
	--row-gap: var(--sp-6);
	align-content: end;
}
@media (min-width: 1024px) {
	.elementor .elementor-element.e-con.uh-hero__body {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		--column-gap: clamp(2rem, 4vw, 5rem);
	}
	.elementor .elementor-element.e-con.uh-hero__copy {
		padding-bottom: 3.25rem;
	}
}
.uh-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0;
	padding: 1rem 0 0;
	border-top: var(--hair);
	list-style: none;
}
.uh-facts li {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
	color: var(--fg-muted);
}
.uh-facts strong {
	color: var(--fg);
	font-weight: 500;
}

/* The scene: limestone wall in window light, an oak desk, a monitor showing real work.
   Built in CSS so it is crisp at any density and can be recomposed per breakpoint. */
.uh-scene {
	--scene-ratio: 16 / 10.4;
	position: relative;
	margin: 0;
	aspect-ratio: var(--scene-ratio);
	isolation: isolate;
	container-type: inline-size;
}
.uh-scene__room {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var(--r-1);
	background:
		radial-gradient(120% 90% at 78% 8%, rgba(255, 246, 228, 0.9) 0%, rgba(255, 246, 228, 0) 55%),
		linear-gradient(180deg, #ddd3c2 0%, #d6cab6 58%, #cbbda6 74%);
	box-shadow: inset 0 0 0 1px rgba(23, 20, 15, 0.06);
}
/* Window light: two soft slanted bars falling across the wall. */
.uh-scene__light {
	position: absolute;
	inset: -10% -20% 20% 10%;
	background:
		linear-gradient(104deg, transparent 0 36%, rgba(255, 249, 236, 0.55) 36% 47%, transparent 47% 52%, rgba(255, 249, 236, 0.45) 52% 61%, transparent 61%);
	filter: blur(14px);
	transform: translate3d(0, var(--scene-shift, 0px), 0);
	mix-blend-mode: soft-light;
	opacity: 0.95;
}
.uh-scene__shelf {
	position: absolute;
	left: 6%;
	width: 22%;
	top: 30%;
	height: 1.1%;
	background: linear-gradient(180deg, #b48d62, #8f6a45);
	box-shadow: 0 10px 18px -8px rgba(60, 40, 20, 0.45);
	border-radius: 1px;
}
.uh-scene__books {
	position: absolute;
	left: 8%;
	top: 16.5%;
	height: 13.5%;
	display: flex;
	align-items: flex-end;
	gap: 0.18cqi;
}
.uh-scene__books i {
	display: block;
	width: 1.5cqi;
	height: 100%;
	border-radius: 1px 1px 0 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12) 40%, rgba(0, 0, 0, 0.1));
}
.uh-scene__books i:nth-child(1) {
	background-color: #2b3f37;
	height: 92%;
}
.uh-scene__books i:nth-child(2) {
	background-color: #e9e1d2;
	height: 100%;
	width: 1.9cqi;
}
.uh-scene__books i:nth-child(3) {
	background-color: #b3401c;
	height: 84%;
}
.uh-scene__books i:nth-child(4) {
	background-color: #3b362f;
	height: 78%;
	width: 1.3cqi;
	transform: rotate(14deg);
	transform-origin: bottom left;
	margin-left: 0.4cqi;
}
/* A stoneware vessel with a single dried stem. */
.uh-scene__vessel {
	position: absolute;
	right: 7%;
	bottom: 22.5%;
	width: 6.2%;
	aspect-ratio: 1 / 1.25;
	border-radius: 42% 42% 30% 30% / 38% 38% 26% 26%;
	background:
		radial-gradient(60% 50% at 34% 30%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
		linear-gradient(90deg, #cfc2ad, #e9e0d0 40%, #b9aa92);
	box-shadow: 0 1.2cqi 1.6cqi -1cqi rgba(50, 35, 20, 0.5);
}
.uh-scene__vessel i {
	position: absolute;
	left: 52%;
	bottom: 88%;
	width: 1px;
	height: 330%;
	background: #6b5a43;
	transform: rotate(-9deg);
	transform-origin: bottom center;
}
.uh-scene__vessel i::before,
.uh-scene__vessel i::after {
	content: "";
	position: absolute;
	left: -0.55cqi;
	width: 1.2cqi;
	height: 2.6cqi;
	border-radius: 50% 50% 50% 0;
	background: #8a7a58;
	opacity: 0.85;
}
.uh-scene__vessel i::before {
	top: 12%;
	transform: rotate(-30deg);
}
.uh-scene__vessel i::after {
	top: 34%;
	left: 0;
	transform: rotate(40deg) scaleX(-1);
	background: #9a8961;
}
.uh-scene__desk {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 24%;
	background:
		linear-gradient(180deg, rgba(255, 240, 215, 0.35) 0, rgba(255, 240, 215, 0) 6%),
		repeating-linear-gradient(90deg, rgba(90, 60, 30, 0.05) 0 2px, rgba(0, 0, 0, 0) 2px 9px),
		linear-gradient(180deg, #b78f66 0%, #a17a52 38%, #8b6643 100%);
	box-shadow: 0 -1px 0 rgba(255, 245, 225, 0.5);
}
.uh-scene__desk::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 9%;
	background: linear-gradient(180deg, rgba(40, 25, 10, 0.25), transparent);
}
.uh-scene__monitor {
	position: absolute;
	left: 50%;
	bottom: 16.5%;
	width: 66%;
	transform: translateX(-50%);
	z-index: 2;
}
.uh-scene__bezel {
	position: relative;
	padding: 1.05%;
	border-radius: 0.9cqi;
	background: linear-gradient(180deg, #2a2723, #121110);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.05) inset,
		0 2.4cqi 3.4cqi -1.4cqi rgba(40, 25, 10, 0.55),
		0 0.6cqi 1.2cqi rgba(40, 25, 10, 0.25);
}
.uh-scene__screen {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: 0.25cqi;
	background: #fff;
}
.uh-scene__screen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}
/* Glass: a faint reflection of the window. */
.uh-scene__screen::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0) 56%);
	pointer-events: none;
}
.uh-scene__neck {
	position: absolute;
	left: 50%;
	top: 100%;
	width: 10%;
	height: 4.6cqi;
	transform: translateX(-50%);
	background: linear-gradient(90deg, #a9a6a0, #e2dfda 45%, #9b978f);
	clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}
.uh-scene__foot {
	position: absolute;
	left: 50%;
	top: calc(100% + 4.5cqi);
	width: 24%;
	height: 0.9cqi;
	transform: translateX(-50%);
	border-radius: 0.3cqi;
	background: linear-gradient(180deg, #d9d6d0, #8f8b84);
	box-shadow: 0 1cqi 1.4cqi -0.4cqi rgba(40, 25, 10, 0.5);
}
.uh-scene__notebook {
	position: absolute;
	left: 9%;
	bottom: 6%;
	width: 17%;
	height: 5.5%;
	z-index: 3;
	background: linear-gradient(180deg, #ece5d7, #d8cfbe);
	border-radius: 1px;
	transform: skewX(-24deg) rotate(-2deg);
	box-shadow: 0 0.8cqi 1cqi -0.6cqi rgba(40, 25, 10, 0.5), inset 0 -0.3cqi 0 #c8bea9;
}
.uh-scene__notebook::after {
	content: "";
	position: absolute;
	left: 62%;
	top: 34%;
	width: 52%;
	height: 0.45cqi;
	border-radius: 1cqi;
	background: var(--uh-oxide);
	transform: rotate(-4deg);
}
.uh-scene__cap {
	position: absolute;
	left: 0;
	bottom: calc(-1 * clamp(2.6rem, 2rem + 1vw, 3.1rem));
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	font-size: var(--fs-small);
	color: var(--fg-muted);
}
.uh-scene__cap a {
	color: var(--fg);
	font-weight: 600;
	text-decoration: none;
	background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 1px no-repeat;
}
.uh-scene__cap a:hover {
	color: var(--accent);
}
@media (max-width: 767.98px) {
	/* On phones the room is cropped tight to the monitor, so the screenshot stays legible. */
	.uh-scene {
		--scene-ratio: 4 / 3.3;
		margin-inline: calc(-1 * var(--gutter));
	}
	.uh-scene__room {
		border-radius: 0;
	}
	.uh-scene__monitor {
		width: 88%;
		bottom: 17%;
	}
	.uh-scene__books,
	.uh-scene__shelf,
	.uh-scene__notebook {
		display: none;
	}
	.uh-scene__vessel {
		right: 3%;
		width: 7%;
		bottom: 21%;
		z-index: 3;
	}
	.uh-scene__cap {
		left: var(--gutter);
	}
}

/* Typographic tools strip */
.elementor .elementor-element.e-con.uh-strip {
	--padding-top: var(--sp-6);
	--padding-bottom: var(--sp-6);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	--row-gap: var(--sp-4);
	--column-gap: var(--col-gap);
	border-block: var(--hair);
	align-items: baseline;
}
@media (min-width: 1024px) {
	.elementor .elementor-element.e-con.uh-strip {
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	}
}
.uh-tools ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0;
}
.uh-tools li {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--fg);
	transition: color var(--dur-1);
}
.uh-tools li:not(:last-child)::after {
	content: "/";
	margin: 0 0.5em;
	color: var(--uh-stone);
	font-family: var(--font-text);
	font-weight: 300;
}
.uh-tools li:hover {
	color: var(--accent);
}

/* 09 Service index, ledger, spreads -------------------------------------- */
.elementor .elementor-element.e-con.uh-index {
	--row-gap: 0px;
	border-top: 1px solid var(--fg);
}
.elementor .elementor-element.e-con.uh-index__row {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem;
	grid-template-areas: "num title arrow" "num text text";
	--row-gap: 0.6rem;
	--column-gap: var(--sp-4);
	--padding-top: clamp(1.4rem, 1rem + 1vw, 2.1rem);
	--padding-bottom: clamp(1.4rem, 1rem + 1vw, 2.1rem);
	position: relative;
	align-items: baseline;
	border-bottom: var(--hair);
	color: var(--fg);
	text-decoration: none;
	isolation: isolate;
}
.elementor .elementor-element.e-con.uh-index__row::before {
	content: "";
	position: absolute;
	inset: 0 calc(-1 * var(--sp-4));
	z-index: -1;
	background: var(--surface);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--dur-2) var(--ease-out);
}
.elementor .elementor-element.e-con.uh-index__row::after {
	content: "";
	grid-area: arrow;
	justify-self: end;
	width: 1.4rem;
	height: 1.4rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translateX(-6px);
	opacity: 0.35;
	transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2), color var(--dur-2);
}
a.e-con.uh-index__row:hover::before,
a.e-con.uh-index__row:focus-visible::before {
	transform: scaleY(1);
	transform-origin: top;
}
a.e-con.uh-index__row:hover::after,
a.e-con.uh-index__row:focus-visible::after {
	transform: none;
	opacity: 1;
	color: var(--accent);
}
.uh-index__num {
	grid-area: num;
}
.uh-index__num .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--tracking-mono);
	color: var(--accent);
}
.uh-index__title {
	grid-area: title;
}
.uh-index__title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.85rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	transition: transform var(--dur-2) var(--ease-out);
}
a.e-con.uh-index__row:hover .uh-index__title .elementor-heading-title {
	transform: translateX(0.4rem);
}
.uh-index__text {
	grid-area: text;
}
.uh-index__text,
.uh-index__text p {
	font-size: var(--fs-small);
	color: var(--fg-muted);
	max-width: 46rem;
}
@media (min-width: 1024px) {
	.elementor .elementor-element.e-con.uh-index__row {
		grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 6fr) 2rem;
		grid-template-areas: "num title text arrow";
		align-items: center;
	}
}

/* Ledger: numbered statements on a dark ground. */
.elementor .elementor-element.e-con.uh-ledger {
	--row-gap: 0px;
	border-top: var(--hair);
}
.elementor .elementor-element.e-con.uh-ledger__row {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	--column-gap: var(--sp-4);
	--row-gap: 0.35rem;
	--padding-top: 1.35rem;
	--padding-bottom: 1.35rem;
	border-bottom: var(--hair);
}
.elementor .elementor-element.e-con.uh-ledger__row > :first-child {
	grid-row: span 2;
}
.uh-ledger__num .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--tracking-mono);
	color: var(--accent);
	padding-top: 0.3rem;
}
.uh-ledger__title .elementor-heading-title {
	font-family: var(--font-text);
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.3;
	color: var(--fg);
}
.uh-ledger__text,
.uh-ledger__text p {
	color: var(--fg-muted);
	font-size: var(--fs-small);
}
/* Honest small print, set apart. */
.elementor .elementor-element.e-con.uh-note {
	--padding-top: var(--sp-5);
	--padding-bottom: var(--sp-5);
	--padding-left: var(--sp-5);
	--padding-right: var(--sp-5);
	--row-gap: var(--sp-2);
	border: 1px dashed var(--rule);
}

/* Selected work: large alternating spreads. */
.uh-spreads {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(4.5rem, 3rem + 6vw, 9rem);
}
.uh-spread {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-6);
	align-items: center;
}
@media (min-width: 1024px) {
	.uh-spread {
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
		gap: clamp(2rem, 4vw, 5rem);
	}
	.uh-spread--flip .uh-spread__media {
		order: 2;
	}
	.uh-spread--flip {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}
}
.uh-spread__media {
	position: relative;
	display: block;
	padding-bottom: 7%;
}
.uh-spread__main,
.uh-spread__second {
	display: block;
	overflow: hidden;
	background: var(--uh-bone);
	box-shadow: var(--sh-plate);
}
.uh-spread__main {
	width: 92%;
	border-radius: var(--r-1);
}
.uh-spread--flip .uh-spread__main {
	margin-left: auto;
}
.uh-spread__second {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 38%;
	border: 6px solid var(--uh-paper);
	border-radius: var(--r-1);
}
.uh-spread--flip .uh-spread__second {
	right: auto;
	left: 0;
}
.uh-spread__main img,
.uh-spread__second img,
.uh-tile__img img,
.uh-card__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top;
	transition: transform 1.2s var(--ease-out);
}
.uh-spread__media:hover .uh-spread__main img {
	transform: scale(1.035);
}
.uh-spread__media:hover .uh-spread__second img {
	transform: scale(1.06);
}
.uh-spread__text {
	display: grid;
	gap: var(--sp-4);
	align-content: center;
}
.uh-spread__num {
	margin: 0;
	color: var(--accent);
}
.uh-spread__num span {
	color: var(--fg-muted);
}
.uh-spread__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
	line-height: 1.02;
	letter-spacing: -0.022em;
}
.uh-spread__title a {
	text-decoration: none;
	color: var(--fg);
}
.uh-spread__title a:hover {
	color: var(--accent);
}
.uh-spread__summary {
	margin: 0;
	color: var(--fg-soft);
}
.uh-spec {
	margin: var(--sp-2) 0 var(--sp-3);
	border-top: var(--hair);
}
.uh-spec > div {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: var(--sp-4);
	padding: 0.65rem 0;
	border-bottom: var(--hair);
}
.uh-spec dt {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
	color: var(--fg-muted);
	padding-top: 0.2rem;
}
.uh-spec dd {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--fg);
}
.uh-spec dd a {
	color: var(--fg);
}
.uh-origin {
	display: inline-block;
	justify-self: start;
	margin: 0;
	padding: 0.2rem 0.5rem;
	border: 1px solid var(--accent);
	color: var(--accent);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
}

/* Tiles: compact related work. */
.uh-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-7) var(--col-gap);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
	.uh-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.uh-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.uh-tile a {
	display: grid;
	gap: 0.5rem;
	color: var(--fg);
	text-decoration: none;
}
.uh-tile__img {
	display: block;
	overflow: hidden;
	margin-bottom: 0.6rem;
	border-radius: var(--r-1);
	background: var(--uh-bone);
	box-shadow: var(--sh-plate);
}
.uh-tile a:hover img {
	transform: scale(1.04);
}
.uh-tile__title {
	font-family: var(--font-display);
	font-size: 1.55rem;
	line-height: 1.1;
	letter-spacing: -0.015em;
}
.uh-tile a:hover .uh-tile__title {
	color: var(--accent);
}

/* 10 Code & capabilities -------------------------------------------------- */
.uh-code {
	margin: 0;
	border: 1px solid rgba(242, 237, 227, 0.14);
	border-radius: var(--r-2);
	background: #0f0d0a;
	color: #e6dfd2;
	overflow: hidden;
	box-shadow: var(--sh-lift);
}
.uh-code__bar {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1.1rem;
	border-bottom: 1px solid rgba(242, 237, 227, 0.1);
}
.uh-code__bar .uh-mono {
	color: #a69d8e;
}
.uh-code__live {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.uh-code__live::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: #7fae8e;
	box-shadow: 0 0 0 3px rgba(127, 174, 142, 0.2);
}
.uh-code pre {
	margin: 0;
	padding: 1.25rem 1.25rem 1.5rem;
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	line-height: 1.7;
	tab-size: 4;
	background: none;
	color: inherit;
	border: 0;
}
.uh-code pre:focus-visible {
	outline-offset: -3px;
}
.uh-code code {
	font: inherit;
	background: none;
	color: inherit;
	padding: 0;
}
.uh-code__c {
	color: #8f877a;
	font-style: italic;
}
.uh-code__s {
	color: #c9d8a6;
}
.uh-code__v {
	color: #f0b28f;
}
.uh-code__k {
	color: #e88c6a;
}
.uh-code__f {
	color: #b9cfe0;
}
.elementor .elementor-element.e-con.uh-caps {
	--row-gap: 0px;
	border-top: var(--hair);
}
.elementor .elementor-element.e-con.uh-cap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	--row-gap: 0.5rem;
	--column-gap: var(--col-gap);
	--padding-top: 1.4rem;
	--padding-bottom: 1.4rem;
	border-bottom: var(--hair);
}
@media (min-width: 768px) {
	.elementor .elementor-element.e-con.uh-cap {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	}
}
.uh-cap__title .elementor-heading-title {
	font-family: var(--font-text);
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.3;
	color: var(--fg);
}
.uh-cap__text,
.uh-cap__text p {
	color: var(--fg-muted);
	font-size: var(--fs-small);
}
.uh-cap__text a {
	color: var(--fg);
	text-decoration-color: var(--accent);
}

/* 11 Process & record ----------------------------------------------------- */
.elementor .elementor-element.e-con.uh-steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	--row-gap: 0px;
	--column-gap: var(--col-gap);
	counter-reset: step;
}
@media (min-width: 1024px) {
	.elementor .elementor-element.e-con.uh-steps {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}
.elementor .elementor-element.e-con.uh-step {
	--row-gap: var(--sp-3);
	--padding-top: var(--sp-5);
	--padding-bottom: var(--sp-6);
	position: relative;
	border-top: var(--hair);
	align-content: start;
}
/* The rule draws itself across each step as the row enters. */
.elementor .elementor-element.e-con.uh-step::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 1px;
	background: var(--fg);
	transform-origin: left;
	transition: transform var(--dur-4) var(--ease-out);
	transition-delay: calc(var(--si, 0) * 140ms);
}
.js .uh-steps:not(.is-in) .uh-step::before {
	transform: scaleX(0);
}
/* Tablet: numeral beside the text, so single-column steps don't run the full width. */
@media (min-width: 640px) and (max-width: 1023.98px) {
	.elementor .elementor-element.e-con.uh-step {
		display: grid;
		grid-template-columns: 6.5rem minmax(0, 1fr);
		column-gap: var(--sp-5);
		align-content: start;
	}
	.elementor .elementor-element.e-con.uh-step > :first-child {
		grid-row: span 2;
	}
	.uh-step__text,
	.uh-step__text p {
		max-width: 34rem;
	}
}
.uh-step__num .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
	line-height: 1;
	color: var(--accent);
	letter-spacing: -0.02em;
}
.uh-step__title .elementor-heading-title {
	font-family: var(--font-text);
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.3;
}
.uh-step__text,
.uh-step__text p {
	color: var(--fg-muted);
	font-size: var(--fs-small);
}

.elementor .elementor-element.e-con.uh-figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	--row-gap: var(--sp-6);
	--column-gap: var(--col-gap);
}
@media (min-width: 1024px) {
	.elementor .elementor-element.e-con.uh-figures {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.elementor .elementor-element.e-con.uh-figure {
	--row-gap: 0.5rem;
	border-top: var(--hair);
	--padding-top: var(--sp-4);
}
.uh-figure__value,
.uh-figure__value p {
	font-family: var(--font-display);
	font-size: clamp(3rem, 2rem + 3.6vw, 5.5rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--fg);
}
.uh-figure__label,
.uh-figure__label p {
	font-size: var(--fs-small);
	color: var(--fg-muted);
	max-width: 15rem;
}
.elementor .elementor-element.e-con.uh-people {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	--row-gap: 0px;
	--column-gap: var(--col-gap);
	border-top: var(--hair);
}
@media (min-width: 768px) {
	.elementor .elementor-element.e-con.uh-people {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.elementor .elementor-element.e-con.uh-person {
	--row-gap: 0.35rem;
	--padding-top: var(--sp-5);
	--padding-bottom: var(--sp-5);
	border-bottom: var(--hair);
}
/* Monogram: initials set in Caslon where a portrait would go, until real photos are supplied. */
.uh-monogram .elementor-heading-title {
	display: grid;
	place-items: center;
	width: 4.25rem;
	height: 4.25rem;
	margin-bottom: 0.75rem;
	border: 1px solid var(--rule);
	border-radius: 50%;
	font-family: var(--font-display);
	font-size: 1.6rem;
	letter-spacing: 0;
	color: var(--accent);
}

/* 12 CTA & footer --------------------------------------------------------- */
/* Closing partnership section: the argument on the left, real work on the right. */
.uh-cta--theme {
	padding-block: var(--sp-section);
}
.elementor .elementor-element.e-con.uh-cta {
	overflow: hidden;
}
.uh-cta__grid,
.elementor .elementor-element.e-con.uh-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--sp-8);
	column-gap: clamp(2.5rem, 6vw, 7rem);
	align-items: center;
}
@media (min-width: 1024px) {
	.uh-cta__grid,
	.elementor .elementor-element.e-con.uh-cta__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}
}
.uh-cta__copy {
	display: grid;
	gap: var(--sp-5);
	align-content: center;
}
.elementor .elementor-element.e-con.uh-cta__copy {
	--row-gap: var(--sp-5);
}
.uh-cta__title,
.uh-cta__title .elementor-heading-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2.6rem, 1.5rem + 3.3vw, 4.9rem);
	line-height: 1;
	letter-spacing: -0.026em;
	color: var(--fg);
	text-wrap: balance;
}
.uh-cta__title em,
.uh-cta__title .elementor-heading-title em {
	font-style: normal;
	color: var(--accent);
}
.uh-cta__list ul,
ul.uh-cta__list {
	list-style: none;
	margin: var(--sp-2) 0 var(--sp-3);
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--sp-6);
	border-top: var(--hair);
}
@media (min-width: 480px) {
	.uh-cta__list ul,
	ul.uh-cta__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.uh-cta__list li {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.7rem 0;
	border-bottom: var(--hair);
	font-size: var(--fs-small);
	color: var(--fg-soft);
}
.uh-cta__list li::before {
	content: "";
	flex: none;
	width: 0.7rem;
	height: 1px;
	transform: translateY(-0.3em);
	background: var(--accent);
}
.uh-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.uh-ground-ink .uh-btn--primary {
	--btn-bg: var(--uh-limestone);
	--btn-fg: var(--uh-ink);
	--btn-fill: var(--uh-oxide);
	--btn-fill-fg: #fff;
}

/* Showcase: a studio monitor cycling through delivered projects. */
.uh-showcase {
	margin: 0;
	display: grid;
	gap: var(--sp-5);
}
.uh-showcase__stage {
	position: relative;
	aspect-ratio: 16 / 12;
	container-type: inline-size;
}
.uh-showcase__glow {
	position: absolute;
	inset: 6% 2% 4%;
	background: radial-gradient(60% 55% at 50% 42%, rgba(234, 148, 112, 0.16), rgba(234, 148, 112, 0) 70%);
	filter: blur(6px);
}
.uh-showcase__ledge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 9%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(242, 237, 227, 0.28) 20%, rgba(242, 237, 227, 0.28) 80%, transparent);
}
.uh-showcase__ledge::after {
	content: "";
	position: absolute;
	left: 30%;
	right: 30%;
	top: 0;
	height: 2.4cqi;
	background: radial-gradient(50% 100% at 50% 0, rgba(0, 0, 0, 0.55), transparent);
}
.uh-scene__monitor.uh-showcase__monitor {
	left: 50%;
	bottom: calc(9% + 1px + 5.4cqi);
	width: 88%;
	transform: translateX(-50%);
}
.uh-showcase__monitor .uh-scene__bezel {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.07) inset,
		0 3cqi 5cqi -2cqi rgba(0, 0, 0, 0.7);
}
.uh-showcase__shot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	opacity: 0;
	transition: opacity 0.9s var(--ease-in-out);
}
.uh-showcase__shot.is-active {
	opacity: 1;
}
.uh-showcase__cap {
	display: grid;
	gap: var(--sp-3);
}
.uh-showcase__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--hair);
}
.uh-showcase__list li {
	position: relative;
	border-bottom: var(--hair);
}
.uh-showcase__list a {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: var(--sp-3);
	padding: 0.8rem 0;
	color: var(--fg-muted);
	text-decoration: none;
	transition: color var(--dur-1);
}
.uh-showcase__name {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
	letter-spacing: -0.012em;
	line-height: 1.2;
}
.uh-showcase__type {
	font-size: 0.85rem;
}
.uh-showcase__list .is-active a,
.uh-showcase__list a:hover,
.uh-showcase__list a:focus-visible {
	color: var(--fg);
}
.uh-showcase__list .is-active .uh-showcase__num {
	color: var(--accent);
}
/* A hairline fills under the project on screen, timing the next change. */
.uh-showcase__list li::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
	.uh-showcase.is-playing .uh-showcase__list li.is-active::after {
		animation: uh-progress var(--showcase-ms, 5000ms) linear forwards;
	}
}
@keyframes uh-progress {
	to {
		transform: scaleX(1);
	}
}
@media (max-width: 1023.98px) {
	.uh-cta__visual {
		max-width: 40rem;
	}
}

.uh-email {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--fg-muted);
}
.uh-email a {
	color: var(--fg);
	font-weight: 600;
}

.uh-footer {
	position: relative;
	padding-top: clamp(4rem, 3rem + 4vw, 7rem);
	overflow: hidden;
	font-size: var(--fs-small);
}
.uh-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--sp-6);
	padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
	border-bottom: var(--hair);
}
.uh-footer__line {
	margin: 0;
	max-width: 18ch;
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
	line-height: 1.04;
	letter-spacing: -0.022em;
	color: var(--fg);
}
.uh-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-7) var(--col-gap);
	padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}
@media (min-width: 768px) {
	.uh-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.uh-footer__about {
		grid-column: 1 / -1;
	}
}
@media (min-width: 1024px) {
	.uh-footer__grid {
		grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr));
	}
	.uh-footer__about {
		grid-column: auto;
	}
}
.uh-footer__about {
	display: grid;
	gap: var(--sp-4);
	align-content: start;
}
.uh-footer__about p {
	color: var(--fg-muted);
	max-width: 22rem;
}
.uh-footer .uh-logo {
	color: var(--fg);
}
.uh-footer .uh-footer__head {
	margin: 0 0 1rem;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	font-weight: 400;
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
	color: var(--fg-muted);
}
.uh-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}
.uh-footer__col a {
	color: var(--fg-soft);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size var(--dur-2) var(--ease-out), color var(--dur-1);
}
.uh-footer__col a:hover {
	color: var(--fg);
	background-size: 100% 1px;
}
.uh-footer__markets {
	margin-top: 1.5rem;
	max-width: 16rem;
}
/* The wordmark as a typographic signature, cut off by the page edge. */
.uh-footer__word {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(6rem, 2rem + 21vw, 23rem);
	line-height: 0.74;
	letter-spacing: -0.045em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(242, 237, 227, 0.22);
	white-space: nowrap;
	user-select: none;
	transform: translateY(var(--word-shift, 0));
}
.uh-footer__base {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 2rem;
	padding-block: 1.25rem 1.5rem;
	border-top: var(--hair);
	color: var(--fg-muted);
	background: var(--bg);
}
.uh-footer__base p {
	margin: 0;
}
.uh-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.5rem;
}
.uh-footer__base a {
	color: var(--fg-soft);
}
.uh-footer__top-link {
	margin-left: auto;
}


/* Inner page hero */
.elementor .elementor-element.e-con.uh-pagehero {
	--padding-top: clamp(2rem, 1rem + 3vw, 4.5rem);
}
.uh-pagehero__title .elementor-heading-title {
	max-width: 17ch;
}
.elementor .elementor-element.e-con.uh-pagehero__foot {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--sp-6);
	column-gap: var(--col-gap);
	align-items: end;
	border-top: var(--hair);
	--padding-top: var(--sp-6);
}
@media (min-width: 1024px) {
	.elementor .elementor-element.e-con.uh-pagehero__foot {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
	.uh-pagehero__foot > .uh-buttons {
		justify-self: end;
	}
}

/* FAQ: native details/summary, no script needed. */
.uh-faq {
	border-top: var(--hair);
}
.uh-faq details {
	border-bottom: var(--hair);
}
.uh-faq summary {
	position: relative;
	display: block;
	padding: 1.3rem 3rem 1.3rem 0;
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}
.uh-faq summary::-webkit-details-marker {
	display: none;
}
.uh-faq summary::before,
.uh-faq summary::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 50%;
	width: 1rem;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--dur-2) var(--ease-out);
}
.uh-faq summary::after {
	transform: rotate(90deg);
}
.uh-faq details[open] summary::after {
	transform: rotate(0);
}
.uh-faq summary:hover {
	color: var(--accent);
}
.uh-faq details p {
	margin: 0;
	padding: 0 3rem 1.5rem 0;
	color: var(--fg-soft);
	max-width: var(--w-text);
}

/* 13 Theme templates (work archive, case study, journal, 404) ------------- */
.uh-pagehead {
	padding-top: clamp(2.5rem, 1rem + 5vw, 6rem);
	padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
	display: grid;
	gap: var(--sp-5);
}
.uh-pagehead__title {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	line-height: 1;
	letter-spacing: -0.026em;
	max-width: 16ch;
	text-wrap: balance;
}
.uh-pagehead__lead {
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--fg-soft);
	max-width: 40rem;
}
.uh-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.6rem;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
	color: var(--fg-muted);
}
.uh-crumbs li + li::before {
	content: "/";
	margin-right: 0.6rem;
	color: var(--uh-stone);
}
.uh-crumbs a {
	color: var(--fg-muted);
	text-decoration: none;
}
.uh-crumbs a:hover {
	color: var(--accent);
}
.uh-crumbs [aria-current] {
	color: var(--fg);
}
.uh-band {
	padding-block: var(--sp-section);
}
.uh-band--tight {
	padding-block: var(--sp-block);
}

/* Work archive */
.uh-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.75rem;
	padding-block: 1rem;
	margin-bottom: var(--sp-7);
	border-block: var(--hair);
}
.uh-filter__label {
	margin-right: 0.5rem;
}
.uh-filter button,
.uh-filter a {
	position: relative;
	padding: 0.35rem 0;
	border: 0;
	background: none;
	color: var(--fg-muted);
	font: 500 0.97rem/1.2 var(--font-text);
	text-decoration: none;
	cursor: pointer;
}
.uh-filter sup {
	margin-left: 0.2rem;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	color: var(--fg-muted);
}
.uh-filter [aria-pressed="true"],
.uh-filter [aria-current] {
	color: var(--fg);
}
.uh-filter [aria-pressed="true"]::after,
.uh-filter [aria-current]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--accent);
}
.uh-filter button:hover {
	color: var(--fg);
}
.uh-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(3rem, 2rem + 2.5vw, 4.5rem) var(--col-gap);
}
@media (min-width: 768px) {
	.uh-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* Desktop rhythm: two featured projects at half width, then three at a third. */
@media (min-width: 1024px) {
	.uh-cards {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.uh-card {
		grid-column: span 2;
	}
	.uh-card--feature {
		grid-column: span 3;
	}
}
.uh-card[hidden] {
	display: none;
}
.uh-card a {
	display: grid;
	gap: 0.5rem;
	color: var(--fg);
	text-decoration: none;
}
.uh-card__img {
	display: block;
	overflow: hidden;
	margin-bottom: 0.75rem;
	border-radius: var(--r-1);
	background: var(--uh-bone);
	box-shadow: var(--sh-plate);
}
.uh-card a:hover .uh-card__img img {
	transform: scale(1.035);
}
.uh-card__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
}
.uh-card__title {
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 1.3rem + 0.45vw, 1.75rem);
	line-height: 1.08;
	letter-spacing: -0.018em;
}
.uh-card--feature .uh-card__title {
	font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.5rem);
}
.uh-card a {
	align-content: start;
}
.uh-card__meta > span:last-child {
	text-align: right;
}
.uh-card a:hover .uh-card__title {
	color: var(--accent);
}
.uh-card__sum {
	color: var(--fg-muted);
	font-size: var(--fs-small);
	max-width: 34rem;
}

/* Case study */
.uh-case-hero {
	display: grid;
	gap: var(--sp-6);
	padding-bottom: var(--sp-block);
}
@media (min-width: 1024px) {
	.uh-case-hero {
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
		align-items: end;
		column-gap: var(--col-gap);
	}
	.uh-case-hero .uh-crumbs,
	.uh-case-hero .uh-eyebrow {
		grid-column: 1 / -1;
	}
}
.uh-case-hero__title {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	line-height: 1;
	letter-spacing: -0.026em;
	text-wrap: balance;
}
.uh-case-hero__sum {
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--fg-soft);
}
.uh-case-stage {
	padding-block: var(--sp-block);
	background: var(--uh-bone);
}
.uh-plate {
	margin: 0;
}
.uh-plate__img {
	overflow: hidden;
	border-radius: var(--r-1);
	box-shadow: var(--sh-plate);
	background: #fff;
}
.uh-plate__img img {
	display: block;
	width: 100%;
	height: auto;
}
.uh-plate__cap {
	margin-top: 0.9rem;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
	color: var(--fg-muted);
}
.uh-case-body {
	display: grid;
	gap: var(--sp-8) var(--col-gap);
	padding-block: var(--sp-section);
}
@media (min-width: 1024px) {
	.uh-case-body {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}
	.uh-case-aside {
		position: sticky;
		top: calc(var(--header-h) + 2rem);
		align-self: start;
	}
}
.uh-case-aside .uh-spec > div {
	grid-template-columns: 7rem minmax(0, 1fr);
}
.uh-case-sections {
	display: grid;
	gap: var(--sp-8);
}
.uh-case-sec {
	display: grid;
	gap: var(--sp-4);
	padding-top: var(--sp-5);
	border-top: var(--hair);
}
@media (min-width: 768px) {
	.uh-case-sec {
		grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
		column-gap: var(--col-gap);
	}
}
.uh-case-sec h2 {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	font-weight: 400;
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
	color: var(--fg-muted);
	padding-top: 0.45rem;
}
.uh-case-sec__body > p:first-child {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--fg);
}
.uh-case-note {
	padding: var(--sp-4) var(--sp-5);
	border-left: 2px solid var(--accent);
	background: var(--surface);
	color: var(--fg-soft);
	font-size: var(--fs-small);
}
.uh-case-gallery {
	display: grid;
	gap: var(--sp-6);
	padding-bottom: var(--sp-section);
}
.uh-next {
	display: grid;
	gap: var(--sp-5);
	padding-block: var(--sp-section);
	border-top: var(--hair);
}
@media (min-width: 1024px) {
	.uh-next {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		align-items: center;
		column-gap: var(--col-gap);
	}
}
.uh-next__link {
	display: grid;
	gap: var(--sp-3);
	color: var(--fg);
	text-decoration: none;
}
.uh-next__title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: 1.02;
	letter-spacing: -0.024em;
	transition: color var(--dur-1);
}
.uh-next__link:hover .uh-next__title {
	color: var(--accent);
}

/* Journal */
.uh-posts {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--fg);
}
.uh-post-row a {
	display: grid;
	gap: 0.5rem var(--col-gap);
	padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	border-bottom: var(--hair);
	color: var(--fg);
	text-decoration: none;
}
@media (min-width: 1024px) {
	.uh-post-row a {
		grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
		align-items: baseline;
	}
}
.uh-post-row__title {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.3rem);
	line-height: 1.08;
	letter-spacing: -0.016em;
}
.uh-post-row a:hover .uh-post-row__title {
	color: var(--accent);
}
.uh-post-row__ex {
	font-size: var(--fs-small);
	color: var(--fg-muted);
}
.uh-article {
	display: grid;
	gap: var(--sp-7);
	padding-bottom: var(--sp-section);
}
.uh-article__body {
	max-width: var(--w-text);
	font-size: 1.125rem;
}
@media (min-width: 1024px) {
	.uh-article {
		grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
		column-gap: var(--col-gap);
	}
	.uh-article__aside {
		position: sticky;
		top: calc(var(--header-h) + 2rem);
		align-self: start;
	}
}
.uh-article__body > p:first-child {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--fg);
}

/* Simple pages (privacy) */
.uh-page-body {
	padding-bottom: var(--sp-section);
}
.uh-page-body .uh-prose {
	max-width: var(--w-text);
}
.uh-page-body .uh-prose .is-style-uh-panel,
.uh-prose .uh-panel {
	padding: var(--sp-4) var(--sp-5);
	border-left: 2px solid var(--accent);
	background: var(--surface);
	margin-bottom: 2em;
}

/* 404 */
.uh-404 {
	min-height: 60vh;
	display: grid;
	align-content: center;
}

/* 14 Forms ---------------------------------------------------------------- */
.uh-form__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-5) var(--sp-5);
}
@media (min-width: 640px) {
	.uh-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.uh-field--full {
		grid-column: 1 / -1;
	}
}
.uh-field {
	display: grid;
	gap: 0.4rem;
	align-content: start;
}
.uh-field label {
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--fg);
}
.uh-req {
	font-weight: 400;
	color: var(--fg-muted);
}
.uh-field__hint {
	font-size: 0.875rem;
	color: var(--fg-muted);
}
.uh-field__hint:empty {
	display: none;
}
.uh-field input,
.uh-field select,
.uh-field textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 3.25rem;
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--uh-stone);
	border-bottom-color: var(--uh-clay);
	border-radius: var(--r-1);
	background: var(--uh-paper);
	color: var(--uh-ink);
	font: inherit;
	font-size: 1rem;
	transition: border-color var(--dur-1), box-shadow var(--dur-1), background-color var(--dur-1);
}
.uh-field textarea {
	min-height: 10rem;
	resize: vertical;
	line-height: 1.55;
}
.uh-field select {
	appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317140f' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 1.1rem;
}
.uh-field input:hover,
.uh-field select:hover,
.uh-field textarea:hover {
	border-color: var(--uh-clay);
}
.uh-field input:focus,
.uh-field select:focus,
.uh-field textarea:focus {
	outline: none;
	border-color: var(--uh-ink);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(179, 64, 28, 0.25);
}
.uh-field [aria-invalid="true"] {
	border-color: var(--error);
	box-shadow: inset 3px 0 0 var(--error);
}
.uh-field__error {
	margin: 0;
	color: var(--error);
	font-size: 0.875rem;
	font-weight: 600;
}
.uh-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.uh-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4) var(--sp-6);
	margin-top: var(--sp-6);
}
.uh-form__privacy {
	margin: 0;
	max-width: 22rem;
	font-size: 0.875rem;
	color: var(--fg-muted);
}
.uh-form__privacy a {
	color: var(--fg);
}
.uh-form button[disabled] {
	opacity: 0.7;
	cursor: progress;
}
.uh-notice {
	display: flex;
	gap: var(--sp-4);
	padding: var(--sp-5);
	margin-bottom: var(--sp-6);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--ok);
	background: var(--uh-paper);
	color: var(--uh-ink);
}
.uh-notice:focus {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}
.uh-notice--error {
	border-left-color: var(--error);
}
.uh-notice .uh-icon {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--ok);
}
.uh-notice__title {
	font-weight: 600;
	margin-bottom: 0.35rem;
}
.uh-notice ul {
	margin: 0.5rem 0 0;
	padding-left: 1.1rem;
}
.uh-notice a {
	color: var(--error);
}
.elementor .elementor-element.e-con.uh-formcard {
	--padding-top: clamp(1.5rem, 1rem + 2vw, 3rem);
	--padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
	--padding-left: clamp(1.25rem, 0.75rem + 2vw, 3rem);
	--padding-right: clamp(1.25rem, 0.75rem + 2vw, 3rem);
	background: var(--uh-paper);
	border: var(--hair);
	box-shadow: 0 40px 80px -60px rgba(23, 20, 15, 0.45);
}

/* 15 Motion ----------------------------------------------------------------
   Content is visible by default. Hidden start states apply only once the
   head script has set .js, and the failsafe removes .js if the main script
   never boots. Everything is off under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
	/* Hero entrance is CSS-only, so it never waits on JavaScript or delays LCP. */
	.uh-hero .uh-eyebrow,
	.uh-hero__top > *,
	.uh-hero__copy > * {
		animation: uh-rise var(--dur-4) var(--ease-out) both;
		animation-delay: calc(0.55s + var(--si, 0) * 90ms);
	}
	.uh-hero__copy > :nth-child(2) {
		--si: 1;
	}
	.uh-hero__copy > :nth-child(3) {
		--si: 2;
	}
	.uh-hero__copy > :nth-child(4) {
		--si: 3;
	}
	.uh-scene {
		animation: uh-unveil 1.5s var(--ease-in-out) 0.25s both;
	}
	.uh-scene__monitor {
		animation: uh-monitor 1.6s var(--ease-out) 0.55s both;
	}
	.uh-scene__screen img {
		animation: uh-screen 1.4s var(--ease-out) 1s both;
	}

	/* Page headlines rise as a line from behind a mask. CSS only and never fully transparent,
	   so the headline (usually the LCP element) is painted in the first frame. */
	.uh-split-words .elementor-heading-title,
	.uh-pagehead__title,
	.uh-case-hero__title {
		animation: uh-line 1.15s var(--ease-out) 0.08s both;
	}
	.uh-cta .uh-split-words .elementor-heading-title {
		animation: none;
	}

	/* The closing headline's words rise one by one; they are wrapped by uphive.js. */
	.uh-w {
		display: inline-block;
		overflow: hidden;
		vertical-align: top;
		padding-bottom: 0.08em;
		margin-bottom: -0.08em;
	}
	.uh-w > span {
		display: inline-block;
		animation: uh-word 1.1s var(--ease-out) both;
		animation-delay: calc(0.1s + var(--wi, 0) * 55ms);
	}
	.js .uh-cta .uh-split-words .elementor-heading-title:not(.is-split) {
		opacity: 0;
	}

	/* Scroll reveals */
	.js [data-reveal]:not(.is-in) {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
	}
	.js [data-reveal] {
		transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
		transition-delay: calc(var(--si, 0) * 80ms);
	}
	/* Project images open like a shutter. */
	.js .uh-spread:not(.is-in) .uh-spread__main,
	.js .uh-spread:not(.is-in) .uh-spread__second {
		clip-path: inset(0 0 100% 0);
	}
	.uh-spread__main,
	.uh-spread__second {
		clip-path: inset(0 0 0 0);
		transition: clip-path 1.4s var(--ease-in-out);
	}
	.uh-spread__second {
		transition-delay: 0.35s;
	}
	.js .uh-spread:not(.is-in) .uh-spread__main img {
		transform: scale(1.12);
	}

	/* Scroll-linked depth where the browser supports it; static elsewhere. */
	@supports (animation-timeline: view()) {
		.uh-scene__light {
			animation: uh-light linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
		.uh-spread__second {
			animation: uh-drift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
		.uh-footer__word {
			animation: uh-word-up linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 100%;
		}
	}
}

@keyframes uh-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 22px, 0);
	}
}
@keyframes uh-line {
	from {
		opacity: 0.01;
		transform: translate3d(0, 0.45em, 0);
		clip-path: inset(0 0 100% 0);
	}
	to {
		opacity: 1;
		transform: none;
		clip-path: inset(-0.2em -0.2em -0.3em -0.2em);
	}
}
@keyframes uh-word {
	from {
		transform: translate3d(0, 108%, 0);
	}
}
@keyframes uh-unveil {
	from {
		clip-path: inset(100% 0 0 0);
	}
	to {
		clip-path: inset(0 0 -4rem 0);
	}
}
@keyframes uh-monitor {
	from {
		transform: translate3d(-50%, 9%, 0);
	}
}
@keyframes uh-screen {
	from {
		opacity: 0;
		filter: brightness(1.6);
	}
}
@keyframes uh-light {
	from {
		transform: translate3d(-4%, -6%, 0);
	}
	to {
		transform: translate3d(4%, 8%, 0);
	}
}
@keyframes uh-drift {
	from {
		transform: translate3d(0, 2.5rem, 0);
	}
	to {
		transform: translate3d(0, -2.5rem, 0);
	}
}
@keyframes uh-word-up {
	from {
		transform: translate3d(0, 30%, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Elementor editor: never hide anything while editing. */
.elementor-editor-active [data-reveal],
.elementor-editor-active [data-split] {
	opacity: 1 !important;
	transform: none !important;
}

/* 16 Industry templates ----------------------------------------------------
   The collection (/industry-templates/) and the live device mockup on each
   template page. The demos are separate WordPress installs (templates/ in the repository). */
.uh-templates {
	display: grid;
	gap: var(--sp-7);
}
.uh-templates__filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}
/* The filter needs JavaScript: without it, it isn't shown; with it, its space is reserved
   from the first paint (no layout shift) and it appears once the script has wired it up. */
html:not(.js) .uh-templates__filter {
	display: none;
}
.js .uh-templates__filter:not(.is-ready) {
	visibility: hidden;
}
.uh-templates__filter button {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--rule);
	border-radius: var(--r-1);
	background: transparent;
	color: var(--fg);
	font: inherit;
	font-size: var(--fs-small);
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--dur-1), background-color var(--dur-1), color var(--dur-1);
}
.uh-templates__filter button span {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--fg-muted);
}
.uh-templates__filter button:hover,
.uh-templates__filter button:focus {
	border-color: var(--fg);
	background: transparent;
	color: var(--fg);
}
.uh-templates__filter button[aria-pressed="true"],
.uh-templates__filter button[aria-pressed="true"]:hover,
.uh-templates__filter button[aria-pressed="true"]:focus {
	border-color: var(--uh-ink);
	background: var(--uh-ink);
	color: var(--uh-limestone);
}
.uh-templates__filter button[aria-pressed="true"] span {
	color: var(--uh-oxide-light);
}
.uh-templates__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(4rem, 3rem + 4vw, 7rem);
}
.uh-tcard {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-6);
	align-items: center;
}
.uh-tcard[hidden] {
	display: none;
}
@media (min-width: 1024px) {
	.uh-tcard {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: clamp(2.5rem, 5vw, 6rem);
	}
}
/* A browser window whose tall screenshot scrolls on hover: the real page, top to bottom. */
.uh-tcard__media {
	display: block;
	text-decoration: none;
}
.uh-tcard__browser {
	display: block;
	overflow: hidden;
	border-radius: var(--r-2);
	background: var(--uh-paper);
	box-shadow: var(--sh-plate);
}
.uh-tcard__bar {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	height: 2.1rem;
	padding: 0 0.85rem;
	border-bottom: 1px solid var(--rule);
	background: var(--uh-bone);
}
.uh-tcard__bar i {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 999px;
	background: var(--uh-stone);
}
.uh-tcard__bar span {
	margin-left: 0.75rem;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: #5f574c; /* clay darkened for 4.5:1 on bone (BRAND.md §2) */
}
.uh-tcard__viewport {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #fff;
}
.uh-tcard__shot {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	transform: translate3d(0, 0, 0);
	transition: transform 1.2s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
	.uh-tcard__media:hover .uh-tcard__shot {
		/* --scroll is set by uphive.js from the image and viewport heights. */
		transform: translate3d(0, var(--scroll, -60%), 0);
		transition: transform var(--scroll-ms, 14s) linear;
	}
}
.uh-tcard__body {
	display: grid;
	gap: var(--sp-5);
	justify-items: start;
}
.uh-tcard__num span {
	color: var(--fg-muted);
}
.uh-tcard__title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	letter-spacing: var(--tracking-display);
}
.uh-tcard__title a {
	text-decoration: none;
}
.uh-tcard__desc {
	color: var(--fg-soft);
	font-size: var(--fs-lead);
	line-height: 1.5;
}
.uh-tcard .uh-spec {
	width: 100%;
}
.uh-tcard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Live mockup: a studio monitor and a phone showing the real demo. */
.uh-mockup {
	margin: 0;
	display: grid;
	gap: var(--sp-5);
	container-type: inline-size;
}
.uh-mockup__stage {
	position: relative;
	padding-bottom: 7cqi;
}
.uh-mockup__monitor {
	position: relative;
	display: block;
	width: 100%;
	text-decoration: none;
}
.uh-mockup--with-phone .uh-mockup__monitor {
	width: 86%;
}
.uh-mockup__bezel {
	position: relative;
	display: block;
	padding: 1.1cqi;
	border-radius: 1cqi;
	background: linear-gradient(180deg, #2a2723, #121110);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.05) inset,
		0 3cqi 5cqi -2.5cqi rgba(40, 25, 10, 0.55),
		0 0.6cqi 1.2cqi rgba(40, 25, 10, 0.2);
}
.uh-mockup__screen,
.uh-mockup__phone-screen {
	position: relative;
	display: block;
	overflow: hidden;
	background: #fff;
}
.uh-mockup__screen {
	aspect-ratio: 16 / 10;
	border-radius: 0.3cqi;
}
.uh-mockup__poster,
.uh-mockup iframe {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	border: 0;
}
.uh-mockup__poster {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: top center;
}
.uh-mockup iframe {
	max-width: none; /* Hello Elementor's reset caps iframes at 100%; the virtual viewport must stay full width. */
	transform-origin: 0 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s var(--ease-out);
	background: #fff;
}
.is-live > iframe {
	opacity: 1;
}
.uh-mockup__neck {
	position: absolute;
	left: 50%;
	top: 100%;
	width: 11%;
	height: 4.4cqi;
	transform: translateX(-50%);
	background: linear-gradient(90deg, #a9a6a0, #e2dfda 45%, #9b978f);
	clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}
.uh-mockup__foot {
	position: absolute;
	left: 50%;
	top: calc(100% + 4.3cqi);
	width: 26%;
	height: 0.9cqi;
	transform: translateX(-50%);
	border-radius: 0.3cqi;
	background: linear-gradient(180deg, #d9d6d0, #8f8b84);
	box-shadow: 0 1cqi 1.4cqi -0.4cqi rgba(40, 25, 10, 0.45);
}
.uh-mockup__phone {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 22%;
	padding: 0.9cqi;
	border-radius: 3.2cqi;
	background: #141311;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.08) inset,
		0 3cqi 5cqi -2cqi rgba(40, 25, 10, 0.6);
}
.uh-mockup__phone-screen {
	aspect-ratio: 390 / 800;
	border-radius: 2.4cqi;
}
.uh-mockup__monitor:focus-visible {
	outline-offset: 6px;
}
.uh-mockup__monitor:hover .uh-mockup__bezel {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.05) inset,
		0 0 0 2px var(--accent),
		0 3cqi 5cqi -2.5cqi rgba(40, 25, 10, 0.55);
}
.uh-mockup__cap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-4);
	color: var(--fg-muted);
	font-size: var(--fs-small);
}
.uh-mockup__live {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--fg);
}
.uh-mockup__live::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--accent);
}
.uh-mockup__toggle {
	margin-left: auto;
	min-height: 2.5rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--rule);
	border-radius: var(--r-1);
	background: transparent;
	color: var(--fg);
	font: inherit;
	font-size: var(--fs-small);
	font-weight: 600;
	cursor: pointer;
}
.uh-mockup__toggle:hover,
.uh-mockup__toggle:focus {
	border-color: var(--fg);
	background: transparent;
	color: var(--fg);
}
@media (max-width: 767.98px) {
	.uh-mockup--with-phone .uh-mockup__monitor {
		width: 100%;
	}
	.uh-mockup__phone {
		display: none;
	}
	.uh-mockup__hint {
		flex-basis: 100%;
	}
}
/* Contact form: the industry-template context line above the fields. */
.uh-form__context {
	margin-bottom: var(--sp-5) !important;
	padding: var(--sp-4) var(--sp-5);
	border-left: 2px solid var(--accent);
	background: var(--uh-bone);
	font-size: var(--fs-small);
}

@media print {
	.uh-header,
	.uh-footer,
	body::before {
		display: none !important;
	}
}