/* ==========================================================================
   Ultimate Building Solutions — component styles
   Tokens (colors, fonts, sizes, spacing) come from theme.json:
   --wp--preset--color--*, --wp--preset--font-family--*, --wp--custom--*
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Contextual color tokens
   Any block with a dark background preset flips text, links and rules.
   -------------------------------------------------------------------------- */
:root,
.has-base-background-color,
.has-snow-background-color,
.has-mist-background-color,
.has-line-background-color,
.has-accent-background-color,
.has-accent-soft-background-color {
	--ubs-heading: var(--wp--preset--color--ink);
	--ubs-text: var(--wp--preset--color--body);
	--ubs-eyebrow: var(--wp--preset--color--primary);
	--ubs-link: var(--wp--preset--color--primary);
	--ubs-link-hover: var(--wp--preset--color--primary-dark);
	--ubs-rule: var(--wp--preset--color--line);
	--ubs-underline: var(--wp--preset--color--primary);
	--ubs-outline: var(--wp--preset--color--primary);
}

.has-ink-background-color,
.has-primary-background-color,
.has-primary-dark-background-color {
	--ubs-heading: var(--wp--preset--color--base);
	--ubs-text: var(--wp--preset--color--on-dark);
	--ubs-eyebrow: var(--wp--preset--color--accent);
	--ubs-link: var(--wp--preset--color--base);
	--ubs-link-hover: var(--wp--preset--color--accent);
	--ubs-rule: rgba(255, 255, 255, 0.18);
	--ubs-underline: var(--wp--preset--color--accent);
	--ubs-outline: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

:where(h1, h2, h3, h4, h5, h6) {
	color: var(--ubs-heading);
}

:where(p, li, dd) {
	color: var(--ubs-text);
}

html:root :where(a:where(:not(.wp-element-button))) {
	color: var(--ubs-link);
	transition: color var(--wp--custom--transition);
}

html:root :where(a:where(:not(.wp-element-button))):hover {
	color: var(--ubs-link-hover);
}

body {
	-webkit-font-smoothing: antialiased;
}

mark.has-inline-color {
	background: transparent;
}

/* --------------------------------------------------------------------------
   2. Page scaffolding
   -------------------------------------------------------------------------- */
.wp-site-blocks > *,
.ubs-main > * {
	margin-block: 0;
}

:where(.ubs-section) {
	padding-block: var(--wp--custom--section--padding);
}

.ubs-section:is(.is-style-angle-peak, .is-style-angle-dip, .is-style-slant, .is-style-slant-both, .is-style-slant-twist) {
	padding-top: calc(var(--wp--custom--section--padding) + var(--wp--custom--section--angle));
}

.ubs-section:is(.is-style-slant-both, .is-style-slant-twist) {
	padding-bottom: calc(var(--wp--custom--section--padding) + var(--wp--custom--section--angle));
}

/* Angled sections slide over the previous section, so the cut shows that
   section's own background instead of a strip of page background. */
.ubs-main > .ubs-section:not(:first-child):is(.is-style-angle-peak, .is-style-angle-dip, .is-style-slant, .is-style-slant-both, .is-style-slant-twist) {
	position: relative;
	margin-top: calc(-1 * var(--wp--custom--section--angle));
}

/* Menu anchors land below the sticky header. */
.ubs-section[id] {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 72px);
}

.ubs-measure {
	max-width: 480px;
}

.ubs-split {
	align-items: center;
}

.ubs-split.is-top {
	align-items: start;
}

.ubs-split.is-bottom {
	align-items: end;
}

.ubs-section-head {
	gap: 20px 24px;
	margin-bottom: 44px;
}

.ubs-section-head > * {
	margin-block: 0;
}

.ubs-section-head__aside {
	max-width: 380px;
}

.ubs-section-head.is-center {
	text-align: center;
	max-width: 640px;
}

/* Narrower blocks inside a centered head stay centered, not flush left. */
.ubs-section-head.is-center > * {
	margin-inline: auto;
}

.ubs-section-head.is-center > * + * {
	margin-top: 14px;
}

/* --------------------------------------------------------------------------
   3. Block styles — group shapes (Styles panel)
   -------------------------------------------------------------------------- */
.is-style-angle-peak {
	clip-path: polygon(0 var(--wp--custom--section--angle), 52% 0, 100% var(--wp--custom--section--angle), 100% 100%, 0 100%);
}

.is-style-angle-dip {
	clip-path: polygon(0 0, 52% var(--wp--custom--section--angle), 100% 0, 100% 100%, 0 100%);
}

.is-style-slant {
	clip-path: polygon(0 0, 100% var(--wp--custom--section--angle), 100% 100%, 0 100%);
}

.is-style-slant-both {
	clip-path: polygon(0 0, 100% var(--wp--custom--section--angle), 100% calc(100% - var(--wp--custom--section--angle)), 0 100%);
}

.is-style-slant-twist {
	clip-path: polygon(0 0, 100% var(--wp--custom--section--angle), 100% 100%, 0 calc(100% - var(--wp--custom--section--angle)));
}

/* Torn-paper bottom edge. Add the CSS class "ubs-edge-torn" to any section
   followed by a white one; the edge image is white, so it blends into it. */
.ubs-section.ubs-edge-torn {
	position: relative;
	padding-bottom: calc(var(--wp--custom--section--padding) + clamp(50px, 7vw, 110px));
}

.ubs-section.ubs-edge-torn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(70px, 10vw, 160px);
	background: url("../images/torn-edge.svg") center bottom / 100% 100% no-repeat;
	pointer-events: none;
}

.wp-block-group.is-style-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	padding: 26px;
	transition: border-color var(--wp--custom--transition);
}

.wp-block-group.is-style-card:hover {
	border-color: var(--wp--preset--color--primary);
}

/* Image shapes */
.wp-block-image.is-style-cut-bottom {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ubs-cut, 64px)), 0 100%);
}

.wp-block-image.is-style-slant-both {
	clip-path: polygon(0 46px, 100% 0, 100% calc(100% - 46px), 0 100%);
}

.wp-block-image.is-style-chamfer {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--wp--custom--chamfer--large)), calc(100% - var(--wp--custom--chamfer--large)) 100%, 0 100%);
}

/* Images that fill a fixed-height frame */
:is(.ubs-media-badge, .ubs-gallery, .ubs-hero__slides) > .wp-block-image img,
:is(.ubs-card__media, .ubs-framed, .ubs-tall-media) img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

:is(.ubs-logos, .ubs-reviews, .ubs-cutout) > .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ubs-eyebrow);
}

.is-style-eyebrow a {
	color: inherit;
}

/* Brand icon before section labels: a steel building with a roll-up door.
   It takes the label colour, so it adapts to light and dark sections. */
.is-style-eyebrow::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	vertical-align: -5px;
	background-color: 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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10.5 12 4l10 6.5'/%3E%3Cpath d='M4 9.2V20h16V9.2'/%3E%3Cpath d='M8 20v-7h8v7'/%3E%3Cpath d='M8 15.5h8M8 18h8'/%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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10.5 12 4l10 6.5'/%3E%3Cpath d='M4 9.2V20h16V9.2'/%3E%3Cpath d='M8 20v-7h8v7'/%3E%3Cpath d='M8 15.5h8M8 18h8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Not on small utility labels, nor in the hero (it already has the big beams). */
:is(.ubs-footer, .ubs-callout, .ubs-hero) .is-style-eyebrow::before {
	display: none;
}

.is-style-eyebrow + .wp-block-heading,
.is-style-eyebrow + .wp-block-post-title,
.is-style-eyebrow + .wp-block-query-title {
	margin-top: 14px;
}

.is-style-lead {
	font-size: clamp(16.5px, 1.4vw, 20px);
	line-height: 1.55;
}

.is-style-dash {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.is-style-dash li {
	display: flex;
	gap: 12px;
	font-size: 16.5px;
}

.is-style-dash li::before {
	content: "—";
	color: var(--ubs-eyebrow);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.wp-block-button:not(.is-style-outline, .is-style-underline, .ubs-btn-flat) > .wp-block-button__link,
.ubs-form__submit {
	clip-path: polygon(var(--wp--custom--chamfer--medium) 0, 100% 0, 100% calc(100% - var(--wp--custom--chamfer--medium)), calc(100% - var(--wp--custom--chamfer--medium)) 100%, 0 100%, 0 var(--wp--custom--chamfer--medium));
}

.wp-block-button__link {
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.wp-block-button.ubs-btn-sm > .wp-block-button__link {
	padding: 13px 22px;
	font-size: 13px;
	letter-spacing: 0.1em;
	white-space: nowrap;
	clip-path: polygon(var(--wp--custom--chamfer--small) 0, 100% 0, 100% calc(100% - var(--wp--custom--chamfer--small)), calc(100% - var(--wp--custom--chamfer--small)) 100%, 0 100%, 0 var(--wp--custom--chamfer--small));
}

.wp-block-button.ubs-btn-flat > .wp-block-button__link {
	padding: 15px 24px;
	font-size: 13px;
	letter-spacing: 0.1em;
}

.wp-block-button.is-style-light > .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-light > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--ubs-outline);
	border: 1.5px solid currentColor;
	padding: 15.5px 26.5px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

:is(.has-ink-background-color, .has-primary-background-color, .has-primary-dark-background-color) .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-underline > .wp-block-button__link {
	background: none;
	color: var(--ubs-link);
	padding: 0 0 4px;
	font-size: 13px;
	border-bottom: 2px solid var(--ubs-underline);
}

.wp-block-button.is-style-underline > .wp-block-button__link:hover {
	background: none;
	color: var(--ubs-link-hover);
}

.wp-block-buttons {
	gap: 14px;
}

.wp-block-buttons.ubs-links {
	gap: 28px;
}

/* --------------------------------------------------------------------------
   6. Top bar + header
   -------------------------------------------------------------------------- */
/* Top bar: 3D designer message + illustrated building button + quick facts. */
.ubs-topbar {
	padding-block: 8px;
}

.ubs-topbar__inner {
	display: grid !important;
	grid-template-columns: auto auto 1fr auto;
	align-items: center;
	gap: 12px 32px;
}

.ubs-topbar p {
	margin: 0;
	color: var(--wp--preset--color--base);
}

.ubs-topbar__msg > * + * {
	margin-top: 3px;
}

.ubs-topbar .ubs-topbar__title {
	max-width: 430px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

.ubs-topbar .ubs-topbar__sub {
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.72);
}

.ubs-topbar__sub strong {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

/* The building illustration is the button; the text sits over the doors. */
.ubs-topbar__cta a {
	--ubs-cta-w: 258px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ubs-cta-w);
	height: calc(var(--ubs-cta-w) / 3);
	padding: calc(var(--ubs-cta-w) * 0.08) calc(var(--ubs-cta-w) * 0.2) 0;
	background: url("../images/designer-building.svg") center / contain no-repeat;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.1;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.5);
	transition: transform var(--wp--custom--transition), filter var(--wp--custom--transition);
}

.ubs-topbar__cta a:hover {
	color: var(--wp--preset--color--base);
	letter-spacing: 0.1em;
	transform: translateY(-2px) scale(1.03);
	filter: drop-shadow(0 6px 14px rgba(143, 194, 206, 0.28));
}

/* Sign lettering: glow pulse + light sweeping across the building. */
.ubs-topbar__cta a {
	position: relative;
	overflow: hidden;
	animation: ubsSignGlow 3s ease-in-out infinite;
}

.ubs-topbar__cta a::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -45%;
	width: 32%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-18deg);
	pointer-events: none;
	animation: ubsSignSweep 5s ease-in-out infinite;
}

@keyframes ubsSignGlow {
	0%, 100% {
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 10px rgba(191, 226, 235, 0.35), 0 0 22px rgba(143, 194, 206, 0.2);
	}

	50% {
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 16px rgba(191, 226, 235, 0.85), 0 0 34px rgba(143, 194, 206, 0.55);
	}
}

@keyframes ubsSignSweep {
	0% {
		left: -45%;
	}

	55%, 100% {
		left: 125%;
	}
}

.ubs-topbar__cta a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* Column 3: address over email. */
.ubs-topbar__contact {
	align-items: flex-start;
	gap: 5px !important;
	padding-left: 28px;
}

.ubs-topbar__contact > * {
	margin: 0 !important;
}

.ubs-topbar .ubs-topbar__contact p {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.92);
}

.ubs-topbar__contact p::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--accent);
}

.ubs-topbar__email::before {
	-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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ubs-topbar__address::before {
	-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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ubs-topbar .ubs-topbar__contact a {
	color: rgba(255, 255, 255, 0.92);
}

.ubs-topbar .ubs-topbar__contact a:hover {
	color: var(--wp--preset--color--base);
}

/* Column 4: languages on top, social icons underneath. */
.ubs-topbar__links {
	align-items: flex-end;
	gap: 9px !important;
}

.ubs-topbar__links > * {
	margin: 0 !important;
}

/* Social icons */
.ubs-topbar__social {
	gap: 12px !important;
	padding: 0;
}

.ubs-topbar__social .wp-social-link {
	background: none !important;
	color: rgba(255, 255, 255, 0.85);
	transition: color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.ubs-topbar__social .wp-social-link a {
	padding: 0;
	color: inherit;
}

.ubs-topbar__social .wp-social-link svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.ubs-topbar__social .wp-social-link:hover {
	color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
}

/* Language switcher */
.ubs-lang {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ubs-lang :is(a, span) {
	padding: 3px 9px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	line-height: 1.3;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.ubs-topbar .ubs-lang a {
	color: rgba(255, 255, 255, 0.72);
}

.ubs-topbar .ubs-lang a:hover {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

.ubs-lang .is-current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

@media (max-width: 1100px) {
	.ubs-topbar__inner {
		grid-template-columns: 1fr auto auto;
	}

	.ubs-topbar .ubs-topbar__links {
		align-items: center;
	}

	.ubs-topbar .ubs-topbar__social,
	.ubs-topbar .ubs-topbar__contact {
		display: none;
	}

}

@media (max-width: 600px) {
	.ubs-topbar {
		padding-block: 6px;
	}

	.ubs-topbar__inner {
		gap: 12px;
	}

	.ubs-topbar .ubs-topbar__sub {
		display: none;
	}

	.ubs-topbar .ubs-topbar__title {
		font-size: 12.5px;
	}

	.ubs-topbar__inner {
		grid-template-columns: auto auto;
		justify-content: space-between;
	}

	.ubs-topbar .ubs-topbar__msg {
		display: none;
	}

	.ubs-topbar__cta a {
		--ubs-cta-w: 176px;
		font-size: 10.5px;
		letter-spacing: 0.03em;
	}

	.ubs-topbar__aside {
		gap: 10px;
	}

	.ubs-lang :is(a, span) {
		padding: 3px 7px;
		font-size: 11px;
	}
}

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 60;
}

/* Blur lives on ::before: backdrop-filter on the header itself would trap
   the fixed mobile menu overlay inside the header box. */
.ubs-header {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ubs-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.95);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.ubs-header__inner {
	gap: 32px;
	padding-block: 14px;
}

/* Brand logo image in the header. */
.ubs-logo-img {
	margin: 0;
	flex-shrink: 0;
	line-height: 0;
}

.ubs-logo-img img {
	display: block;
	width: auto;
	height: 46px;
}

@media (max-width: 600px) {
	.ubs-logo-img img {
		height: 36px;
	}
}

/* Footer logo: white version, as wide as its column allows. */
.ubs-footer .ubs-logo-img {
	margin-bottom: 22px !important;
}

.ubs-footer .ubs-logo-img img {
	width: 100%;
	max-width: 300px;
	height: auto;
}

.ubs-logo {
	margin: 0;
	line-height: 1;
	flex-shrink: 0;
}

.ubs-logo a {
	display: flex;
	flex-direction: column;
}

.ubs-logo strong {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 26px;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
}

.ubs-logo span {
	margin-top: 3px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 0.34em;
	color: var(--wp--preset--color--ink);
}

.ubs-logo.is-inverse {
	margin-bottom: 18px;
}

.ubs-logo.is-inverse strong {
	font-size: 24px;
	color: var(--wp--preset--color--base);
}

.ubs-logo.is-inverse span {
	font-size: 10px;
	letter-spacing: 0.32em;
	color: var(--wp--preset--color--accent);
}

.ubs-nav {
	margin-left: auto;
}

.ubs-nav .wp-block-navigation__container {
	gap: 6px 24px;
}

.ubs-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}

.ubs-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

.ubs-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px var(--wp--style--root--padding-right) 24px var(--wp--style--root--padding-left);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	text-transform: uppercase;
}

/* The desktop menu is right-aligned; the mobile overlay reads better left-aligned.
   Core re-declares the justification variable on the list itself, so set it there. */
.ubs-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container, .wp-block-navigation-item) {
	--navigation-layout-justification-setting: flex-start;
	align-items: flex-start;
}

.ubs-header__actions {
	gap: 16px;
	flex-shrink: 0;
}

.ubs-header__actions > * {
	margin: 0;
}

.ubs-header__phone {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. Hero slider
   -------------------------------------------------------------------------- */
.ubs-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(640px, 86vh);
	padding-block: 0;
}

.ubs-hero > :is(.ubs-hero__slides, .ubs-hero__decor) {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	margin: 0 !important;
}

.ubs-hero__slides > .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1.1s ease;
}

.ubs-hero__slides > :first-child,
.ubs-hero__slides.is-ready > .is-active {
	opacity: 1;
}

/* Slow zoom-out while a slide is on screen (Ken Burns).
   --ubs-scale/--ubs-shift frame the photo, --ubs-zoom does the movement. */
.ubs-hero__slides > .wp-block-image img {
	transform: scale(calc(var(--ubs-scale, 1) * var(--ubs-zoom, 1.1))) translateX(var(--ubs-shift, 0));
	transform-origin: center;
	transition: transform 9s ease-out;
}

.ubs-hero__slides > :first-child img,
.ubs-hero__slides.is-ready > .is-active img {
	--ubs-zoom: 1;
}

/* Nudges a slide's subject to the right so the beams don't cut through it. */
.ubs-hero__slides > .is-shift-right img {
	--ubs-scale: 1.18;
	--ubs-shift: 7%;
}

.ubs-hero__slides.is-ready > :not(.is-active) {
	opacity: 0;
}

.ubs-hero__decor {
	pointer-events: none;
}

.ubs-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(96deg, rgba(5, 12, 14, 0.97) 0%, rgba(6, 14, 17, 0.95) 30%, rgba(8, 18, 21, 0.9) 44%, rgba(11, 24, 28, 0.66) 55%, rgba(13, 34, 40, 0.32) 70%, rgba(11, 22, 24, 0.14) 100%);
}

.ubs-hero__beam {
	position: absolute;
	inset: 0;
}

.ubs-hero__beam.is-one {
	clip-path: polygon(56% 0, 58.4% 0, 41.4% 100%, 39% 100%);
}

.ubs-hero__beam.is-two {
	clip-path: polygon(59.6% 0, 60.9% 0, 43.9% 100%, 42.6% 100%);
}

.ubs-hero__beam span {
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: top center;
	background-size: 100% 300%;
}

.ubs-hero__beam.is-one span {
	background-image: linear-gradient(180deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent) 45%, var(--wp--preset--color--primary) 100%);
	animation: ubsGrow 1.7s cubic-bezier(0.26, 0.9, 0.28, 1) 0.25s both, ubsShimmer 7s linear 2s infinite;
}

.ubs-hero__beam.is-two span {
	background-image: linear-gradient(180deg, var(--wp--preset--color--accent) 0%, var(--wp--preset--color--mist) 40%, var(--wp--preset--color--accent) 100%);
	animation: ubsGrow 1.7s cubic-bezier(0.26, 0.9, 0.28, 1) 0.55s both, ubsShimmer 5.5s linear 2.3s infinite reverse;
}

.ubs-hero__frame {
	position: absolute;
	right: -2%;
	bottom: -4%;
	width: min(34%, 520px);
	height: auto;
	opacity: 0.5;
	overflow: visible;
	color: var(--wp--preset--color--accent-soft);
}

.ubs-draw {
	stroke-dasharray: var(--len);
	animation: ubsDraw 2.6s cubic-bezier(0.6, 0.05, 0.3, 1) both;
}

.ubs-hero__dimension {
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1.2;
	opacity: 0;
	animation: ubsFade 2.2s ease 1.9s forwards;
}

.ubs-hero__dimension text {
	stroke: none;
	fill: var(--wp--preset--color--accent-soft);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	letter-spacing: 3px;
}

.ubs-hero > .ubs-hero__content {
	position: relative;
	z-index: 5;
	width: 100%;
	margin-block: 0;
	padding-block: 76px;
}

.ubs-hero__content > * {
	max-width: 540px;
}

.ubs-hero__content > .wp-block-heading {
	color: var(--wp--preset--color--base);
	text-wrap: balance;
}

.ubs-hero__content > .is-style-eyebrow {
	letter-spacing: 0.26em;
}

.ubs-hero__content > .is-style-lead {
	color: #dce7e9;
}

.ubs-hero__dots {
	display: flex;
	gap: 10px;
	margin-top: 28px;
}

.ubs-hero__dots button {
	width: 34px;
	height: 4px;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.35);
	transition: background-color var(--wp--custom--transition);
}

.ubs-hero__dots button[aria-current="true"] {
	background: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
   8. Marquee
   -------------------------------------------------------------------------- */
.ubs-marquee {
	overflow: hidden;
	padding: 0;
}

.ubs-marquee > .ubs-marquee__track {
	width: max-content;
	gap: 0;
	margin: 0;
	animation: ubsMarquee 38s linear infinite;
}

.ubs-marquee__track p {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 20px 22px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--base);
}

.ubs-marquee__track p::after {
	content: "◆";
	margin-left: 44px;
	color: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
   9. Media + badge, features, cut-out, callout
   -------------------------------------------------------------------------- */
.ubs-media-badge {
	position: relative;
}

.ubs-media-badge > .wp-block-image {
	height: 440px;
	margin: 0;
}

.ubs-badge {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0 !important;
	padding: 22px 28px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%);
}

.ubs-badge > * {
	margin: 0;
}

.ubs-badge p {
	font-size: 14px;
	color: #c6dbe1;
}

.ubs-badge .ubs-badge__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
	color: var(--wp--preset--color--base);
}

.ubs-features {
	margin-top: 34px !important;
}

.ubs-feature {
	border-top: 3px solid var(--wp--preset--color--accent);
	padding-top: 16px;
}

.ubs-feature > * {
	margin: 0;
}

.ubs-feature > * + * {
	margin-top: 6px;
}

.ubs-feature h3 {
	font-size: 16px;
	letter-spacing: 0.06em;
}

.ubs-feature p {
	font-size: 15px;
	line-height: 1.55;
}

.has-ink-background-color .ubs-feature p {
	color: #afc3c7;
}

/* Why choose us: tighter top and the copy centred beside the photo. */
.ubs-section.ubs-why {
	padding-top: calc(var(--wp--custom--section--padding) * 0.85 + var(--wp--custom--section--angle));
}

/* Copy starts at the top; the taller photo spills downward instead. */
.ubs-why .ubs-split.is-bottom {
	align-items: start;
}

/* Intro copy uses the full column width, like the feature list below it. */
.ubs-why .ubs-measure {
	max-width: none;
}

/* Heading lines split evenly instead of leaving a short last line. */
.ubs-why .wp-block-heading {
	text-wrap: balance;
}

.ubs-cutout {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	align-self: stretch;
	min-height: 430px;
}

.ubs-cutout::before {
	content: "";
	position: absolute;
	bottom: calc(-1 * var(--wp--custom--section--padding));
	left: 50%;
	transform: translateX(-50%);
	width: min(440px, 94%);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(143, 194, 206, 0.3) 0%, rgba(11, 22, 24, 0) 70%);
}

/* Out of the flow so the text column decides the height: the photo spans that
   height plus the bottom padding, capped at its natural size to stay sharp. */
.ubs-cutout > .wp-block-image {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(-1 * var(--wp--custom--section--padding));
	height: calc(100% + var(--wp--custom--section--padding));
	max-height: 870px;
	margin: 0;
}

.ubs-cutout > .wp-block-image img {
	object-position: bottom center;
}

.ubs-callout {
	position: absolute;
	top: 10px;
	right: 0;
	margin: 0 !important;
	padding: 18px 22px;
	clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}

.ubs-callout > * {
	margin: 0;
}

.ubs-callout .is-style-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
}

.ubs-callout .ubs-callout__value {
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   10. Cards (services, posts) + steps
   -------------------------------------------------------------------------- */
/* "View all services" under the six cards on the Home page. */
.ubs-cards__more {
	margin-top: clamp(28px, 3vw, 40px) !important;
}

.ubs-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	transition: border-color var(--wp--custom--transition);
}

.ubs-card:hover {
	border-color: var(--wp--preset--color--primary);
}

.ubs-card > * {
	margin: 0;
}

.ubs-card__media {
	height: 215px;
	margin: 0;
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 26px));
}

/* Every post card fills its grid cell, so "Read more" lines up across the row. */
.ubs-posts .wp-block-post {
	display: flex;
	flex-direction: column;
}

.ubs-posts .wp-block-post > .ubs-card {
	flex: 1 1 auto;
}

.ubs-posts .ubs-card__media {
	height: auto;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 22px));
}

.ubs-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 26px 30px;
}

/* "View details" sits at the bottom, so it lines up across cards. */
.ubs-card__body .ubs-card__more {
	margin-top: auto;
	padding-top: 18px;
}

.ubs-card__body > * {
	margin: 0;
}

.ubs-card__body > * + * {
	margin-top: 10px;
}

.ubs-card__num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.ubs-card__num a {
	color: inherit;
}

.ubs-card__body > .ubs-card__num + * {
	margin-top: 8px;
}

.ubs-card__body p:not(.ubs-card__num) {
	font-size: 15.5px;
}

.ubs-posts .wp-block-post-title {
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

.ubs-posts .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
}

.ubs-posts .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

/* Post cards: date · By Ultimate on one line, "Read more" at the bottom. */
.ubs-post-meta {
	gap: 6px 10px;
	align-items: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.ubs-card__body .ubs-post-meta > :is(p, div) {
	margin: 0;
	font-size: inherit;
	line-height: 1.4;
	color: inherit;
}

.ubs-post-meta__date::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 7px;
	vertical-align: -2px;
	background-color: 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ubs-post-meta__author::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 10px;
	vertical-align: 3px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.ubs-card__body > .ubs-post-meta + * {
	margin-top: 10px;
}

html:root .ubs-card__body > .wp-block-read-more {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 20px;
}

html:root .ubs-read-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.ubs-read-more::after {
	content: "\2192";
	transition: transform var(--wp--custom--transition);
}

html:root .ubs-read-more:hover {
	color: var(--wp--preset--color--ink);
}

.ubs-read-more:hover::after {
	transform: translateX(4px);
}

/* Excerpt "Read more" link is replaced by the button above. */
.ubs-posts .wp-block-post-excerpt__more-text {
	display: none;
}

.ubs-step {
	background: var(--wp--preset--color--snow);
	border-top: 3px solid var(--wp--preset--color--primary);
	padding: 24px 22px 28px;
}

.ubs-step > * {
	margin: 0;
}

.ubs-step .ubs-step__num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 34px;
	line-height: 1;
	color: #c9d8db;
}

.ubs-step h3 {
	margin: 12px 0 8px;
	font-size: 18px;
}

.ubs-step p:not(.ubs-step__num) {
	font-size: 15.5px;
}

/* --------------------------------------------------------------------------
   11. Swatches, framed image, gallery, logos, reviews
   -------------------------------------------------------------------------- */
.ubs-swatch {
	position: relative;
	aspect-ratio: 8 / 5;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.ubs-swatch > p {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	color: #eaf1f2;
}

.ubs-swatch.is-popular::after {
	content: "★";
	position: absolute;
	top: 8px;
	right: 10px;
	font-size: 15px;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ubs-note {
	margin-top: 48px !important;
	font-size: 14px;
}

.has-ink-background-color .ubs-note {
	color: #8fa3a8;
}

.ubs-framed img {
	height: auto !important;
}

/* 3D designer section: narrower copy, wider screenshot, tighter gap. */
.ubs-designer .ubs-split {
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr);
	gap: 36px;
}

@media (max-width: 900px) {
	.ubs-designer .ubs-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ubs-framed {
	height: auto;
	margin: 0;
	padding: 12px;
	background: var(--wp--preset--color--base);
	border: 1px solid #d5dfe1;
}

.ubs-gallery > .wp-block-image {
	height: 215px;
	margin: 0;
	--ubs-cut: 28px;
}

.ubs-gallery > .is-tall {
	height: 300px;
}

.ubs-gallery > .is-cut-left {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 28px));
}

.ubs-gallery__note {
	margin-top: 36px !important;
	padding-top: 28px;
	border-top: 1px solid var(--ubs-rule);
	font-size: 16.5px;
}

.ubs-tall-media {
	height: 520px;
	margin: 0;
}

.ubs-logos {
	max-width: 420px;
	margin-top: 28px !important;
}

.ubs-logos > .wp-block-image {
	height: 110px;
	margin: 0;
	padding: 18px;
	border: 1px solid var(--wp--preset--color--line);
}

/* Carousel: a horizontal scroll-snap track; theme.js adds arrows and dots. */
.ubs-carousel {
	--ubs-per-view: 3;
	--ubs-gap: 24px;
	display: flex;
	gap: var(--ubs-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.ubs-carousel::-webkit-scrollbar {
	display: none;
}

.ubs-carousel > * {
	flex: 0 0 calc((100% - var(--ubs-gap) * (var(--ubs-per-view) - 1)) / var(--ubs-per-view));
	margin: 0 !important;
	scroll-snap-align: start;
}

.ubs-carousel:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

.ubs-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 26px;
}

.ubs-carousel__dots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ubs-carousel__dots button {
	width: 28px;
	height: 4px;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: rgba(21, 77, 93, 0.22);
	transition: background-color var(--wp--custom--transition), width var(--wp--custom--transition);
}

.ubs-carousel__dots button[aria-current="true"] {
	width: 44px;
	background: var(--wp--preset--color--primary);
}

.ubs-carousel__arrows {
	display: flex;
	gap: 10px;
}

.ubs-carousel__arrows button {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1.5px solid var(--wp--preset--color--primary);
	background: transparent;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), opacity var(--wp--custom--transition);
}

.ubs-carousel__arrows button:hover:not(:disabled) {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.ubs-carousel__arrows button:disabled {
	opacity: 0.3;
	cursor: default;
}

.ubs-carousel__arrows svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 1100px) {
	.ubs-carousel {
		--ubs-per-view: 2;
	}
}

@media (max-width: 700px) {
	.ubs-carousel {
		--ubs-per-view: 1;
		--ubs-gap: 16px;
	}

	/* One row of dots that shrinks to fit, however many slides there are. */
	.ubs-carousel__dots {
		flex: 1;
		min-width: 0;
		flex-wrap: nowrap;
		gap: 6px;
	}

	.ubs-carousel__dots button {
		flex: 0 1 16px;
		width: 16px;
		min-width: 5px;
	}

	.ubs-carousel__dots button[aria-current="true"] {
		flex: 0 1 26px;
		width: 26px;
	}
}

/* In the editor, lay the cards out so each one is easy to edit. */
.editor-styles-wrapper .ubs-carousel {
	flex-wrap: wrap;
	overflow: visible;
}

/* Review cards */
.ubs-review {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 28px 24px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
}

.ubs-review > * {
	margin: 0;
}

.ubs-review::before {
	content: "\201C";
	position: absolute;
	top: 12px;
	right: 22px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 64px;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	opacity: 0.55;
}

.ubs-review .ubs-review__stars {
	font-size: 17px;
	line-height: 1;
	letter-spacing: 0.14em;
	color: #f2b01e;
}

.ubs-review .ubs-review__text {
	margin: 16px 0 22px;
	font-size: 15.5px;
	line-height: 1.65;
}

.ubs-review .ubs-review__author {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.ubs-review__author span {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 12.5px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--muted);
}

/* Invitation to leave a review */
.ubs-review-cta {
	align-items: center;
	gap: 20px 40px;
	margin-top: 32px !important;
	padding: 34px 38px;
	border-left: 4px solid var(--wp--preset--color--primary);
}

.ubs-review-cta > * {
	margin: 0;
}

.ubs-review-cta h3 {
	margin: 0 0 6px;
	font-size: 22px;
	letter-spacing: 0.03em;
}

.ubs-review-cta p {
	margin: 0;
	max-width: 640px;
}

/* --------------------------------------------------------------------------
   12. FAQ accordion (core/details)
   -------------------------------------------------------------------------- */
/* Two columns: intro on the left that follows the scroll, numbered questions on the right. */
.ubs-faq-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
	gap: 40px 72px;
	align-items: start;
}

.ubs-faq-layout > * {
	margin-block: 0;
}

/* The intro follows the reader while they scroll through the questions. */
.ubs-faq-intro {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 120px);
}

.ubs-faq-intro h2 {
	text-wrap: balance;
}

/* Accordion (core/details): numbered cards, the open one lifts and gets an accent edge. */
.ubs-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
	counter-reset: ubs-faq;
}

.ubs-faq > .wp-block-details {
	position: relative;
	margin: 0;
	background: var(--wp--preset--color--snow);
	border: 1px solid var(--wp--preset--color--line);
	counter-increment: ubs-faq;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	interpolate-size: allow-keywords;
}

.ubs-faq > .wp-block-details::before {
	content: "";
	position: absolute;
	inset: -1px auto -1px -1px;
	width: 3px;
	background: var(--wp--preset--color--primary);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.3s ease;
}

.ubs-faq > .wp-block-details:hover {
	border-color: var(--wp--preset--color--accent);
}

.ubs-faq > .wp-block-details[open] {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--line);
	box-shadow: 0 18px 40px rgba(11, 22, 24, 0.08);
}

.ubs-faq > .wp-block-details[open]::before {
	transform: scaleY(1);
}

.ubs-faq summary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	padding: 20px 22px;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--ubs-heading);
}

.ubs-faq summary::-webkit-details-marker {
	display: none;
}

.ubs-faq summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.ubs-faq summary::before {
	content: counter(ubs-faq, decimal-leading-zero);
	min-width: 2ch;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	transition: color 0.25s ease;
}

.ubs-faq details[open] > summary::before {
	color: var(--wp--preset--color--primary);
}

/* Plus icon in a circle that turns into a minus. */
.ubs-faq summary::after {
	content: "";
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--line);
	background:
		linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) center / 12px 2px no-repeat,
		linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) center / 2px 12px no-repeat,
		var(--wp--preset--color--base);
	transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.ubs-faq details[open] > summary::after {
	transform: rotate(180deg);
	border-color: var(--wp--preset--color--primary);
	background:
		linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base)) center / 12px 2px no-repeat,
		var(--wp--preset--color--primary);
}

.ubs-faq details > :not(summary) {
	margin: 0;
	padding: 0 22px 24px calc(22px + 2ch + 18px);
	max-width: 700px;
	font-size: 16px;
	line-height: 1.7;
}

/* Smooth open/close where the browser supports it. */
.ubs-faq details::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
}

.ubs-faq details[open]::details-content {
	block-size: auto;
}

@media (max-width: 900px) {
	.ubs-faq-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ubs-faq-intro {
		position: static;
	}
}

@media (max-width: 600px) {
	.ubs-faq summary {
		gap: 12px;
		padding: 18px 16px;
		font-size: 16px;
	}

	.ubs-faq summary::after {
		width: 30px;
		height: 30px;
	}

	.ubs-faq details > :not(summary) {
		padding: 0 16px 20px;
		font-size: 15.5px;
	}
}

.ubs-measure a {
	border-bottom: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   13. Contact info + quote form
   -------------------------------------------------------------------------- */
/* Contact details: two by two. */
/* Email and hours get a little more room than phone and office. */
.ubs-info {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 26px 32px;
	margin-top: 34px !important;
}

.ubs-info > * {
	margin: 0 !important;
}

.ubs-info__row {
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding-top: 18px;
	border-top: 1px solid var(--ubs-rule);
}

.ubs-info__row > * {
	margin: 0;
}

.ubs-info .ubs-info__label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ubs-eyebrow);
}

/* Long values (the email) wrap instead of pushing the page wider. */
.ubs-info .ubs-info__value {
	min-width: 0;
	font-size: 16px;
	line-height: 1.5;
	color: #eaf1f2;
	overflow-wrap: anywhere;
}

.ubs-info__value a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}

@media (max-width: 420px) {
	.ubs-info {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

/* Office map with a chamfered frame and a directions link below. */
/* The left column stretches to the form card; the map fills what is left,
   so its bottom edge lines up with the bottom of the form. */
.ubs-split > .ubs-contact-info {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.ubs-contact-map {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	margin-top: 34px !important;
}

.ubs-contact-map__frame {
	position: relative;
	flex: 1 1 auto;
	min-height: 180px;
	background: var(--wp--preset--color--primary-dark);
	clip-path: polygon(0 0, calc(100% - var(--wp--custom--chamfer--large)) 0, 100% var(--wp--custom--chamfer--large), 100% 100%, 0 100%);
}

.ubs-contact-map__frame iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: saturate(0.75) contrast(1.05);
}

html:root .ubs-contact-map__directions {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 10px;
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(143, 194, 206, 0.5);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.ubs-contact-map__directions::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--accent);
	-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

html:root .ubs-contact-map__directions:hover,
html:root .ubs-contact-map__directions:focus-visible {
	color: var(--wp--preset--color--accent);
	border-color: currentColor;
}

@media (max-width: 781px) {
	.ubs-contact-map__frame {
		flex: none;
		height: 260px;
	}
}

.ubs-form-card {
	padding: 38px 34px 42px;
	color: var(--wp--preset--color--ink);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--wp--custom--chamfer--large)), calc(100% - var(--wp--custom--chamfer--large)) 100%, 0 100%);
}

.ubs-form-card > h3 {
	margin: 0 0 26px;
	font-size: 22px;
	font-weight: 700;
}

.ubs-form-card > * {
	margin-top: 0;
}

.ubs-form {
	position: relative;
}

/* Without this the padding is added to the 100% width below, so every text
   field overflows its column and runs into the next one and the card edge. */
.ubs-form :where(input, select, textarea, button) {
	box-sizing: border-box;
}

.ubs-form__grid {
	display: grid;
	/* Always two per row (one on phones): auto-fit made the count depend on how
	   wide the card happened to be, which changed the layout mid-breakpoint. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 18px;
}

@media (max-width: 600px) {
	.ubs-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ubs-form label {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #5a6c70;
}

.ubs-form .is-full {
	grid-column: 1 / -1;
}

.ubs-form :is(input, select, textarea) {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid #d5dfe1;
	border-radius: 0;
	background: #f8fafa;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--ink);
	transition: border-color var(--wp--custom--transition);
}

.ubs-form textarea {
	resize: vertical;
}

.ubs-form :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}

.ubs-form .ubs-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ubs-form__submit {
	width: 100%;
	margin-top: 24px;
	padding: 19px 24px;
	border: 0;
	cursor: pointer;
	font-size: 14px;
}

.ubs-form .ubs-form__legal {
	margin: 16px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #6c7c7f;
}

.ubs-form__legal a {
	border-bottom: 1px solid #b9cbcf;
}

.ubs-form .ubs-form__notice {
	margin: 0 0 18px;
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 400;
}

.ubs-form .ubs-form__notice.is-success {
	background: #e6f2ee;
	color: #1f5e4b;
}

.ubs-form .ubs-form__notice.is-error {
	background: #fbeaea;
	color: #8a2a2a;
}

/* --------------------------------------------------------------------------
   14. Blog band, CTA banner, page hero
   -------------------------------------------------------------------------- */
.ubs-blog {
	border-block: 1px solid var(--wp--preset--color--line);
}

.ubs-cta h2 {
	margin: 0 0 16px;
	font-size: clamp(28px, 3.4vw, 46px);
	line-height: 1.04;
}

.ubs-cta .wp-block-buttons {
	justify-content: flex-end;
}

.ubs-page-hero .wp-block-heading,
.ubs-page-hero .wp-block-post-title {
	margin-top: 14px;
	font-size: clamp(34px, 4.4vw, 58px);
}

.ubs-page-hero__meta {
	margin-top: 14px;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.ubs-footer {
	padding-top: 64px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ubs-footer__cols {
	padding-bottom: 32px;
}

/* Explore needs less width than the other columns, so the space it was
   wasting goes to the brand and contact columns and to the gaps. */
@media (min-width: 1000px) {
	.ubs-footer .ubs-footer__cols {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.15fr) minmax(0, 0.65fr) minmax(0, 1fr) !important;
		column-gap: 64px !important;
	}
}

.ubs-footer :is(p, li) {
	font-size: 15px;
	color: #9fb2b6;
}

.ubs-footer a:where(:not(.wp-element-button)) {
	color: #dce7e9;
}

.ubs-footer a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--base);
}

/* Column titles with a short accent rule underneath. */
.ubs-footer h4 {
	position: relative;
	margin: 0 0 24px;
	padding-bottom: 12px;
	color: var(--wp--preset--color--base);
}

.ubs-footer h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--accent);
}

.ubs-link-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.5;
}

/* Social icons: outlined circles that fill with the brand colour on hover. */
.ubs-footer__social {
	gap: 10px !important;
	margin-top: 22px !important;
	padding: 0;
}

.ubs-footer__social .wp-social-link {
	background: none !important;
	color: #dce7e9;
	transition: transform var(--wp--custom--transition);
}

.ubs-footer__social .wp-social-link a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: inherit;
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.ubs-footer__social .wp-social-link svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.ubs-footer__social .wp-social-link:hover {
	transform: translateY(-3px);
}

.ubs-footer__social .wp-social-link:hover a {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Contact list with line icons. */
.ubs-footer__contact {
	gap: 14px;
}

.ubs-footer__contact li {
	position: relative;
	padding-left: 30px;
}

.ubs-footer__contact li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 17px;
	height: 17px;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: var(--ubs-icon) center / contain no-repeat;
	mask: var(--ubs-icon) center / contain no-repeat;
}

.ubs-footer__contact .is-phone { --ubs-icon: 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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.ubs-footer__contact .is-email { --ubs-icon: 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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.ubs-footer__contact .is-address { --ubs-icon: 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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); }
.ubs-footer__contact .is-hours { --ubs-icon: 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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E"); }

/* Toll free + local number share one icon. */
.ubs-footer__contact .is-phone + .is-phone {
	margin-top: -10px;
}

.ubs-footer__contact .is-phone + .is-phone::before {
	content: none;
}

.ubs-footer__contact a {
	overflow-wrap: anywhere;
}

/* Explore links with a chevron that slides on hover. */
.ubs-footer__nav li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.ubs-footer__nav li a::before {
	content: "";
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--accent);
	-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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ubs-footer__nav li a:hover {
	transform: translateX(4px);
}

.ubs-footer__map {
	height: 210px;
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.ubs-footer__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(0.4) contrast(1.05);
}

.ubs-footer .ubs-footer__directions {
	margin-top: 14px;
}

.ubs-footer .ubs-footer__directions a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.ubs-footer .ubs-footer__directions a::before {
	content: "";
	width: 15px;
	height: 15px;
	background-color: 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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ubs-footer .ubs-footer__directions a:hover {
	color: var(--wp--preset--color--base);
}

.ubs-footer__bottom {
	gap: 12px 28px;
	margin-top: 0 !important;
	padding-block: 20px 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ubs-footer__bottom p {
	margin: 0;
	font-size: 13.5px;
}

.ubs-footer__bottom a:where(:not(.wp-element-button)) {
	color: #9fb2b6;
}

/* --------------------------------------------------------------------------
   Financing: "parts = one loan" strip + benefits / partners panel
   -------------------------------------------------------------------------- */
.ubs-financing .ubs-section-head.is-center {
	max-width: 1100px;
	margin-bottom: 48px;
}

.ubs-financing .ubs-section-head.is-center > p:not(.is-style-eyebrow) {
	max-width: 640px;
	margin-inline: auto;
}

/* The heading only breaks between whole phrases (phones may wrap inside a
   phrase when it doesn't fit the screen). */
.ubs-nowrap {
	white-space: nowrap;
}

@media (max-width: 1200px) {
	.ubs-nowrap {
		white-space: normal;
	}
}

.ubs-fin-equation {
	align-items: stretch;
	margin-bottom: 40px;
}

.ubs-fin-equation > * {
	margin: 0 !important;
}

.ubs-fin-item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 170px;
	padding: 28px 18px;
	text-align: center;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
}

.ubs-fin-item::before {
	content: "";
	width: 42px;
	height: 42px;
	margin-bottom: 10px;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.ubs-fin-item.is-concrete::before {
	-webkit-mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 13.5 8 9.5h13.5L16 13.5z'/%3E%3Cpath d='M2.5 13.5V17H16v-3.5M16 17l5.5-4V9.5'/%3E%3C/svg%3E");
	mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 13.5 8 9.5h13.5L16 13.5z'/%3E%3Cpath d='M2.5 13.5V17H16v-3.5M16 17l5.5-4V9.5'/%3E%3C/svg%3E");
}

.ubs-fin-item.is-building::before {
	-webkit-mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10.5 12 4l10 6.5'/%3E%3Cpath d='M4 9.2V20h16V9.2'/%3E%3Cpath d='M8 20v-7h8v7'/%3E%3Cpath d='M8 15.5h8M8 18h8'/%3E%3C/svg%3E");
	mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10.5 12 4l10 6.5'/%3E%3Cpath d='M4 9.2V20h16V9.2'/%3E%3Cpath d='M8 20v-7h8v7'/%3E%3Cpath d='M8 15.5h8M8 18h8'/%3E%3C/svg%3E");
}

.ubs-fin-item.is-foam::before {
	-webkit-mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8c1.5-1.6 3-1.6 4.5 0s3 1.6 4.5 0 3-1.6 4.5 0 3 1.6 4.5 0M3 13c1.5-1.6 3-1.6 4.5 0s3 1.6 4.5 0 3-1.6 4.5 0 3 1.6 4.5 0M3 18c1.5-1.6 3-1.6 4.5 0s3 1.6 4.5 0 3-1.6 4.5 0 3 1.6 4.5 0'/%3E%3C/svg%3E");
	mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8c1.5-1.6 3-1.6 4.5 0s3 1.6 4.5 0 3-1.6 4.5 0 3 1.6 4.5 0M3 13c1.5-1.6 3-1.6 4.5 0s3 1.6 4.5 0 3-1.6 4.5 0 3 1.6 4.5 0M3 18c1.5-1.6 3-1.6 4.5 0s3 1.6 4.5 0 3-1.6 4.5 0 3 1.6 4.5 0'/%3E%3C/svg%3E");
}

.ubs-fin-item.is-result::before {
	-webkit-mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9.3c-.6-.9-1.7-1.4-3-1.4-1.7 0-3 .9-3 2.1 0 2.9 6 1.5 6 4.5 0 1.3-1.3 2.1-3 2.1-1.4 0-2.6-.5-3.2-1.5M12 6v12'/%3E%3C/svg%3E");
	mask-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9.3c-.6-.9-1.7-1.4-3-1.4-1.7 0-3 .9-3 2.1 0 2.9 6 1.5 6 4.5 0 1.3-1.3 2.1-3 2.1-1.4 0-2.6-.5-3.2-1.5M12 6v12'/%3E%3C/svg%3E");
}

.ubs-fin-item > * {
	margin: 0 !important;
}

.ubs-financing .ubs-fin-item p {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.ubs-fin-item.is-result {
	border-color: var(--wp--preset--color--primary);
}

.ubs-fin-item.is-result::before {
	background-color: var(--wp--preset--color--accent);
}

.ubs-financing .ubs-fin-item.is-result p {
	font-size: 18px;
	color: var(--wp--preset--color--base);
}

.ubs-financing .ubs-fin-item.is-result .ubs-fin-item__sub {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--on-dark);
}

.ubs-financing .ubs-fin-op {
	flex: 0 0 auto;
	align-self: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 34px;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}

.ubs-fin-panel {
	align-items: center;
	padding: 40px 44px;
	border-top: 4px solid var(--wp--preset--color--primary);
}

.ubs-fin-panel h3 {
	margin: 0 0 18px;
	font-size: 22px;
}

.ubs-fin-panel .is-style-dash {
	margin: 0;
}

.ubs-fin-partners {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 28px 30px 30px;
	text-align: center;
	border: 1px solid var(--wp--preset--color--line);
	clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

.ubs-fin-partners > * {
	margin: 0 !important;
}

.ubs-financing .ubs-fin-partners__label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.ubs-fin-partners__logo {
	width: 100%;
	max-width: 250px;
}

.ubs-fin-partners__logo img {
	display: block;
	width: 100%;
	height: 84px;
	object-fit: contain;
}

.ubs-financing .ubs-fin-partners__note {
	max-width: 300px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--wp--preset--color--body);
}

.ubs-fin-actions {
	margin-top: 28px !important;
}


@media (max-width: 900px) {
	.ubs-fin-equation {
		flex-wrap: wrap !important;
	}

	.ubs-fin-item {
		flex: 1 1 40%;
	}

	.ubs-financing .ubs-fin-op {
		display: none;
	}
}

@media (max-width: 600px) {
	.ubs-fin-item {
		flex-basis: 100%;
		min-height: 0;
	}

	.ubs-fin-panel {
		padding: 28px 22px;
	}
}

/* --------------------------------------------------------------------------
   Call button: pill with a pulsing phone icon (About section)
   -------------------------------------------------------------------------- */
.ubs-about-actions {
	margin-top: 30px !important;
}

.ubs-about-actions > * {
	margin: 0 !important;
}

html:root .ubs-call-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 8px 32px 8px 8px;
	border-radius: 999px;
	background: linear-gradient(135deg, #1f6f85 0%, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--primary-dark) 100%);
	box-shadow: 0 12px 30px rgba(21, 77, 93, 0.55), inset 0 0 0 1px rgba(143, 194, 206, 0.35);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

html:root .ubs-call-btn:hover,
html:root .ubs-call-btn:focus-visible {
	color: var(--wp--preset--color--base);
	transform: translateY(-3px);
	box-shadow: 0 18px 42px rgba(143, 194, 206, 0.35), inset 0 0 0 1px rgba(143, 194, 206, 0.7);
}

.ubs-call-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

.ubs-call-btn__icon {
	position: relative;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14);
}

.ubs-call-btn__icon::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--primary);
	-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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pulsing ring */
.ubs-call-btn__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--accent);
	animation: ubsCallPulse 2s ease-out infinite;
}

/* The phone "rings" on hover */
.ubs-call-btn:hover .ubs-call-btn__icon::before,
.ubs-call-btn:focus-visible .ubs-call-btn__icon::before {
	animation: ubsCallRing 0.6s ease-in-out 2;
}

.ubs-call-btn__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.1;
}

.ubs-call-btn__label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-soft);
}

.ubs-call-btn__number {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 26px;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--base);
	white-space: nowrap;
}

/* Compact version for the header */
html:root .ubs-call-btn.is-compact {
	gap: 10px;
	padding: 5px 22px 5px 5px;
	box-shadow: 0 6px 18px rgba(21, 77, 93, 0.35), inset 0 0 0 1px rgba(143, 194, 206, 0.35);
}

html:root .ubs-call-btn.is-compact:hover,
html:root .ubs-call-btn.is-compact:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(21, 77, 93, 0.45), inset 0 0 0 1px rgba(143, 194, 206, 0.7);
}

.ubs-call-btn.is-compact .ubs-call-btn__icon {
	width: 40px;
	height: 40px;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
}

.ubs-call-btn.is-compact .ubs-call-btn__icon::before {
	width: 18px;
	height: 18px;
}

.ubs-call-btn.is-compact .ubs-call-btn__label {
	font-size: 10px;
	letter-spacing: 0.14em;
}

.ubs-call-btn.is-compact .ubs-call-btn__number {
	font-size: 18px;
}

/* Medium screens and phones: just the phone circle. */
@media (max-width: 1100px) {
	html:root .ubs-call-btn.is-compact {
		padding: 5px;
	}

	.ubs-call-btn.is-compact .ubs-call-btn__text {
		display: none;
	}
}

@keyframes ubsCallPulse {
	0% {
		transform: scale(1);
		opacity: 0.9;
	}

	100% {
		transform: scale(1.6);
		opacity: 0;
	}
}

@keyframes ubsCallRing {
	0%, 100% { transform: rotate(0); }
	20% { transform: rotate(-14deg); }
	40% { transform: rotate(12deg); }
	60% { transform: rotate(-10deg); }
	80% { transform: rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ubs-call-btn__icon::after,
	.ubs-call-btn:hover .ubs-call-btn__icon::before {
		animation: none !important;
	}
}

@media (max-width: 600px) {
	html:root .ubs-call-btn {
		gap: 12px;
		padding-right: 24px;
	}

	.ubs-call-btn__icon {
		width: 50px;
		height: 50px;
	}

	.ubs-call-btn__number {
		font-size: 22px;
	}
}

/* --------------------------------------------------------------------------
   16. Animations
   -------------------------------------------------------------------------- */
@keyframes ubsDraw {
	from { stroke-dashoffset: var(--len); }
	to { stroke-dashoffset: 0; }
}

@keyframes ubsFade {
	0%, 55% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes ubsMarquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes ubsGrow {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes ubsShimmer {
	from { background-position: 50% 0%; }
	to { background-position: 50% 300%; }
}

@media (prefers-reduced-motion: reduce) {
	.ubs-marquee > .ubs-marquee__track,
	.ubs-hero__beam span,
	.ubs-draw,
	.ubs-hero__dimension,
	.ubs-topbar__cta a,
	.ubs-topbar__cta a::after {
		animation: none !important;
	}

	.ubs-hero__dimension {
		opacity: 1;
	}

	.ubs-hero__slides > .wp-block-image {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.ubs-header__inner {
		gap: 20px;
	}

	.ubs-nav {
		font-size: 15.5px;
	}

	.ubs-nav .wp-block-navigation__container {
		gap: 6px 14px;
	}
}

@media (max-width: 900px) {
	.ubs-hero__frame {
		display: none;
	}

	.ubs-hero__beam {
		opacity: 0.35;
	}
}

@media (max-width: 781px) {
	body {
		--wp--custom--section--angle: 26px;
	}

	.ubs-hero__content > * {
		max-width: 100%;
	}

	/* Keep the whole photo (e.g. the team) instead of a tall crop. */
	.ubs-media-badge > .wp-block-image {
		height: auto;
		aspect-ratio: 4 / 3;
		--ubs-cut: 34px;
	}

	.ubs-badge {
		padding: 12px 18px;
	}

	.ubs-badge .ubs-badge__title {
		font-size: 19px;
	}

	.ubs-badge p {
		font-size: 12.5px;
	}

	/* On phones the call-us box would land on the person's face: stack it. */
	.ubs-cutout {
		flex-direction: column;
		align-items: center;
		min-height: 0;
	}

	.ubs-cutout {
		bottom: 0;
	}

	.ubs-cutout::before {
		bottom: 0;
	}

	.ubs-cutout > .wp-block-image {
		position: relative;
		bottom: 0;
		height: 420px;
		min-height: 0;
		max-height: none;
	}

	.ubs-cutout .ubs-callout {
		position: static;
		margin-top: 18px !important;
	}

	.ubs-tall-media {
		height: 360px;
	}

	.ubs-cta .wp-block-buttons {
		justify-content: flex-start;
	}

	.ubs-form-card {
		padding: 30px 22px 36px;
	}
}

@media (max-width: 600px) {
	.ubs-gallery > .wp-block-image {
		grid-column: auto !important;
		height: 240px;
	}

}

/* --------------------------------------------------------------------------
   18. Editor-only adjustments (keep sections editable)
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .ubs-hero > .ubs-hero__slides {
	position: relative;
	z-index: 6;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
	padding: 8px;
	background: rgba(0, 0, 0, 0.35);
}

.editor-styles-wrapper .ubs-hero__slides > .wp-block-image {
	position: relative;
	height: 90px;
	opacity: 1;
}

.editor-styles-wrapper .ubs-marquee > .ubs-marquee__track {
	width: auto;
	flex-wrap: wrap;
	animation: none;
}

.editor-styles-wrapper .ubs-hero__beam span,
.editor-styles-wrapper .ubs-draw {
	animation-iteration-count: 1;
}

/* ==========================================================================
   Interior pages: About, Services, Gallery, Contact, Blog
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero with photo
   -------------------------------------------------------------------------- */
.ubs-page-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(70px, 9vw, 120px) calc(clamp(70px, 9vw, 120px) + var(--wp--custom--section--angle));
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--wp--custom--section--angle)), 0 100%);
}

/* The next section tucks under the slanted bottom edge. */
.ubs-main > .ubs-page-hero + * {
	margin-top: calc(-1 * var(--wp--custom--section--angle)) !important;
}

.ubs-main > .ubs-page-hero + .ubs-section:not([class*="is-style-"]) {
	padding-top: calc(var(--wp--custom--section--padding) + var(--wp--custom--section--angle));
}

.ubs-main > .ubs-page-hero {
	position: relative;
	z-index: 2;
}

.ubs-page-hero > .ubs-page-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0 !important;
	z-index: 0;
}

.ubs-page-hero > .ubs-page-hero__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dark wash so the copy stays readable over any photo. */
.ubs-page-hero.has-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(11, 22, 24, 0.94) 0%, rgba(11, 22, 24, 0.82) 38%, rgba(11, 22, 24, 0.35) 75%, rgba(11, 22, 24, 0.2) 100%),
		linear-gradient(0deg, rgba(21, 77, 93, 0.35), transparent 60%);
}

.ubs-page-hero > .ubs-page-hero__content {
	position: relative;
	z-index: 2;
}

.ubs-page-hero__content > * {
	max-width: 680px;
	margin-block: 0;
}

.ubs-page-hero__content > * + * {
	margin-top: 16px !important;
}

.ubs-page-hero .ubs-page-hero__content .wp-block-heading,
.ubs-page-hero .ubs-page-hero__content .wp-block-post-title,
.ubs-page-hero .ubs-page-hero__content .wp-block-query-title {
	margin-top: 14px !important;
	font-size: clamp(34px, 4.6vw, 62px);
	line-height: 1.02;
	color: var(--wp--preset--color--base);
	text-wrap: balance;
}

.ubs-page-hero .ubs-page-hero__lead {
	max-width: 560px;
	color: #d3e0e3;
}

.ubs-page-hero__actions {
	margin-top: 30px !important;
}

/* --------------------------------------------------------------------------
   Page header: title + breadcrumb band on interior pages
   -------------------------------------------------------------------------- */
.ubs-page-header {
	position: relative;
	overflow: hidden;
	padding-block: clamp(34px, 4.4vw, 56px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Faint blueprint grid on the right, just enough texture. */
.ubs-page-header::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 45%;
	background-image: linear-gradient(rgba(21, 77, 93, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 77, 93, 0.07) 1px, transparent 1px);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(to left, #000, transparent);
	mask-image: linear-gradient(to left, #000, transparent);
	pointer-events: none;
}

.ubs-page-header__inner {
	position: relative;
	z-index: 1;
	gap: 14px 40px;
}

.ubs-page-header__inner > *,
.ubs-page-header__main > * {
	margin-block: 0;
}

.ubs-page-header__main {
	position: relative;
	max-width: 760px;
	padding-left: 20px;
	border-left: 4px solid var(--wp--preset--color--primary);
}

.ubs-page-header .ubs-page-header__title {
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.08;
	color: var(--wp--preset--color--ink);
	text-wrap: balance;
}

.ubs-page-header__main > * + * {
	margin-top: 10px !important;
}

.ubs-page-header .ubs-post-meta,
.ubs-page-header__desc {
	color: var(--wp--preset--color--body);
}

.ubs-breadcrumb {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ubs-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 0;
	margin: 0;
	padding: 10px 16px;
	list-style: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
}

.ubs-breadcrumb li {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	color: var(--wp--preset--color--primary);
}

.ubs-breadcrumb li:first-child a::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	vertical-align: -2px;
	background-color: 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9v11h14V9'/%3E%3Cpath d='M10 20v-6h4v6'/%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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9v11h14V9'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ubs-breadcrumb li + li::before {
	content: "";
	width: 6px;
	height: 6px;
	margin: 0 12px;
	border-top: 1.5px solid var(--wp--preset--color--muted);
	border-right: 1.5px solid var(--wp--preset--color--muted);
	transform: rotate(45deg);
}

/* Long post titles stay on one line in the trail. */
.ubs-breadcrumb [aria-current] {
	display: inline-block;
	max-width: min(34ch, 60vw);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

html:root .ubs-breadcrumb a {
	color: var(--wp--preset--color--body);
}

html:root .ubs-breadcrumb a:hover {
	color: var(--wp--preset--color--primary);
}

.ubs-article__image {
	margin-bottom: 40px !important;
}

.ubs-article__image img {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--wp--custom--chamfer--large)), calc(100% - var(--wp--custom--chamfer--large)) 100%, 0 100%);
}

.ubs-not-found__code {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(80px, 12vw, 150px);
	line-height: 1;
	color: var(--wp--preset--color--mist);
	-webkit-text-stroke: 2px var(--wp--preset--color--primary);
}

@media (max-width: 781px) {
	.ubs-page-header__inner {
		flex-direction: column;
		align-items: flex-start !important;
	}

	.ubs-page-header::after {
		width: 70%;
	}
}

/* --------------------------------------------------------------------------
   Line icons (set by .ubs-icon--name on a card)
   -------------------------------------------------------------------------- */
.ubs-icon--price { --ubs-icon: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
.ubs-icon--building { --ubs-icon: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10.5 12 4l10 6.5'/%3E%3Cpath d='M4 9.2V20h16V9.2'/%3E%3Cpath d='M8 20v-7h8v7'/%3E%3Cpath d='M8 15.5h8M8 18h8'/%3E%3C/svg%3E"); }
.ubs-icon--expert { --ubs-icon: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='5.5'/%3E%3Cpath d='M8.6 13 7 22l5-3 5 3-1.6-9'/%3E%3C/svg%3E"); }
.ubs-icon--key { --ubs-icon: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m10.7 12.3 9.8-9.8M17 6l3 3M14.5 8.5l2 2'/%3E%3C/svg%3E"); }
.ubs-icon--money { --ubs-icon: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M15 9.2c-.6-.9-1.7-1.4-3-1.4-1.7 0-3 .9-3 2.2 0 3 6 1.5 6 4.3 0 1.3-1.3 2.2-3 2.2-1.4 0-2.6-.6-3.2-1.6M12 6v1.8M12 16.5v1.8'/%3E%3C/svg%3E"); }
.ubs-icon--chat { --ubs-icon: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8.5 8.5 0 0 1-12.3 7.6L3.5 21l1.4-4.7A8.5 8.5 0 1 1 21 12z'/%3E%3Cpath d='m8.5 12 2.3 2.3 4.7-4.6'/%3E%3C/svg%3E"); }
.ubs-icon--phone { --ubs-icon: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.ubs-icon--email { --ubs-icon: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.ubs-icon--address { --ubs-icon: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); }
.ubs-icon--cube { --ubs-icon: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.5 8.5 4.8v9.4L12 21.5l-8.5-4.8V7.3z'/%3E%3Cpath d='m3.5 7.3 8.5 4.8 8.5-4.8M12 12.1v9.4'/%3E%3C/svg%3E"); }

.ubs-icon-card {
	position: relative;
	padding: 92px 24px 26px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	transition: border-color var(--wp--custom--transition), transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.ubs-icon-card:hover {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(11, 22, 24, 0.08);
}

/* Icon tile: teal chamfered square with the white line icon on top. */
.ubs-icon-card::before,
.ubs-icon-card::after {
	content: "";
	position: absolute;
	top: 26px;
	left: 24px;
	width: 48px;
	height: 48px;
}

.ubs-icon-card::before {
	background: var(--wp--preset--color--primary);
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
	transition: background-color var(--wp--custom--transition);
}

.ubs-icon-card::after {
	background-color: var(--wp--preset--color--base);
	-webkit-mask: var(--ubs-icon) center / 26px 26px no-repeat;
	mask: var(--ubs-icon) center / 26px 26px no-repeat;
}

.ubs-icon-card:hover::before {
	background: var(--wp--preset--color--ink);
}

.ubs-icon-card > * {
	margin: 0;
}

.ubs-icon-card > * + * {
	margin-top: 8px;
}

.ubs-icon-card h3 {
	font-size: 17px;
	letter-spacing: 0.04em;
}

.ubs-icon-card p {
	font-size: 15px;
	line-height: 1.6;
}

.ubs-icon-card .ubs-icon-card__link {
	margin-top: 16px;
}

html:root .ubs-icon-card__link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.ubs-icon-card__link a::after {
	content: "\2192";
	transition: transform var(--wp--custom--transition);
}

.ubs-icon-card__link a:hover::after {
	transform: translateX(4px);
}

.ubs-icon-card.is-boxed {
	display: flex;
	flex-direction: column;
}

.ubs-icon-card.is-boxed .ubs-icon-card__link {
	margin-top: auto;
	padding-top: 16px;
}

/* --------------------------------------------------------------------------
   About: story, stats, mission + values, team, service area
   -------------------------------------------------------------------------- */
.ubs-story .ubs-split {
	align-items: center;
}

.ubs-story .is-style-lead {
	margin-top: 22px;
	color: var(--wp--preset--color--ink);
}

.ubs-story__list {
	margin-top: 26px !important;
}

.ubs-story__media > .wp-block-image {
	width: 100%;
	height: clamp(360px, 42vw, 540px);
}

.ubs-story__media .ubs-badge {
	left: auto;
	right: 0;
	bottom: 34px;
	max-width: 300px;
	clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
}

.ubs-story__media .ubs-badge .ubs-badge__title {
	font-size: 20px;
}

.ubs-stats-band {
	position: relative;
	z-index: 1;
}

.ubs-stats {
	padding-block: 10px;
}

.ubs-stat {
	padding: 34px 26px;
	text-align: center;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.ubs-stat:first-child {
	border-left: 0;
}

.ubs-stat > * {
	margin: 0;
}

.ubs-stat .ubs-stat__value {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(38px, 4vw, 54px);
	line-height: 1;
	color: var(--wp--preset--color--base);
}

.ubs-stat .ubs-stat__label {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-soft);
}

.ubs-values-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
	gap: 48px 72px;
	align-items: start;
}

.ubs-values-layout > * {
	margin: 0 !important;
}

.ubs-mission {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 120px);
}

.ubs-mission .ubs-mission__quote {
	position: relative;
	margin-top: 18px;
	padding-top: 46px;
	/* The mission runs long, so it sits between a headline and body copy. */
	font-size: clamp(22px, 2.1vw, 29px);
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0;
	text-wrap: balance;
}

.ubs-mission .ubs-mission__quote::before {
	content: "\201C";
	position: absolute;
	top: -14px;
	left: -4px;
	font-size: 96px;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}

.ubs-mission > p:not(.is-style-eyebrow) {
	margin-top: 20px;
}

.ubs-mission .ubs-mission__sign {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 26px;
	padding-left: 16px;
	border-left: 3px solid var(--wp--preset--color--primary);
	font-size: 14.5px;
}

.ubs-mission__sign strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink);
}

/* Team: portrait photo cards. */
.ubs-member {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
}

.ubs-member > * {
	margin: 0 !important;
}

.ubs-member .ubs-member__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	height: auto;
	overflow: hidden;
	background: var(--wp--preset--color--mist);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}

.ubs-member__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.6s ease;
}

.ubs-member:hover .ubs-member__photo img {
	transform: scale(1.04);
}

/* Until a photo is uploaded: initials over a brand gradient with a portrait silhouette. */
.ubs-member__photo.is-placeholder {
	display: grid;
	place-items: center;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Ccircle cx='100' cy='78' r='44' fill='%23ffffff' fill-opacity='.16'/%3E%3Cpath d='M14 220c4-58 40-92 86-92s82 34 86 92z' fill='%23ffffff' fill-opacity='.16'/%3E%3C/svg%3E") center bottom / 78% no-repeat,
		linear-gradient(160deg, #1f6f85 0%, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--primary-dark) 100%);
}

.ubs-member__photo.is-placeholder .ubs-member__initials {
	position: absolute;
	top: 22px;
	left: 24px;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.9);
}

.ubs-member__info {
	padding: 2px 4px 2px 18px;
	border-left: 3px solid var(--wp--preset--color--line);
	margin-top: 18px !important;
	transition: border-color var(--wp--custom--transition);
}

.ubs-member:hover .ubs-member__info {
	border-color: var(--wp--preset--color--primary);
}

.ubs-member__info > * {
	margin: 0;
}

.ubs-member h3 {
	font-size: 20px;
	letter-spacing: 0.02em;
	text-transform: none;
}

.ubs-member .ubs-member__role {
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.ubs-member .ubs-member__tag {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 1;
	padding: 6px 12px;
	background: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}

.ubs-member.is-featured .ubs-member__info {
	border-color: var(--wp--preset--color--primary);
}

.ubs-area__panel {
	padding: 34px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: linear-gradient(180deg, rgba(21, 77, 93, 0.25), rgba(21, 77, 93, 0.05));
}

.ubs-area__panel > * {
	margin: 0 !important;
}

.ubs-area__legend {
	gap: 12px 30px;
	margin-bottom: 26px !important;
}

.ubs-area__legend > * {
	margin: 0 !important;
}

.ubs-area .ubs-area__key {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #c9d6d9;
}

.ubs-area__key::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.ubs-area__key.is-concrete::before {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.ubs-states {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	list-style: none;
}

.ubs-area .ubs-states li {
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 14.5px;
	line-height: 1.2;
	color: #dce7e9;
	transition: border-color var(--wp--custom--transition);
}

.ubs-area .ubs-states li:hover {
	border-color: var(--wp--preset--color--accent);
}

.ubs-area .ubs-states li.is-concrete {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.ubs-area .ubs-area__note {
	margin-top: 26px !important;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 15px;
	color: #afc3c7;
}

/* --------------------------------------------------------------------------
   Services page
   -------------------------------------------------------------------------- */
.ubs-jump {
	gap: 10px;
	margin-bottom: clamp(50px, 6vw, 80px) !important;
}

.ubs-jump > * {
	margin: 0 !important;
}

html:root .ubs-jump__item a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--snow);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.ubs-jump__item a span {
	color: var(--wp--preset--color--muted);
}

html:root .ubs-jump__item a:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.ubs-jump__item a:hover span {
	color: var(--wp--preset--color--accent);
}

.ubs-service-row {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 40px 72px;
	align-items: center;
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 100px);
}

.ubs-service-row + .ubs-service-row {
	margin-top: clamp(70px, 8vw, 120px) !important;
}

.ubs-service-row > * {
	margin: 0 !important;
}

.ubs-service-row.is-reversed > .ubs-service-row__media {
	order: 2;
}

.ubs-service-row__media {
	height: clamp(300px, 34vw, 460px);
}

.ubs-service-row__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ubs-service-row__body > * {
	margin-block: 0;
}

.ubs-service-row__body > * + * {
	margin-top: 16px;
}

.ubs-service-row .ubs-service-row__num {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--primary);
}

.ubs-service-row__num span {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.ubs-service-row__num span::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
}

.ubs-service-row h2 {
	font-size: clamp(30px, 3.2vw, 44px);
}

.ubs-checks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
	margin-top: 24px !important;
	padding: 0;
	list-style: none;
}

.ubs-checks li {
	position: relative;
	padding-left: 30px;
	font-size: 15.5px;
	line-height: 1.5;
}

.ubs-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--primary);
	-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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m7.5 12.3 3 3 6-6.3'/%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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m7.5 12.3 3 3 6-6.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ubs-service-row__actions {
	gap: 14px 28px;
	align-items: center;
	margin-top: 30px !important;
}

.ubs-design .ubs-design__size {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 26px;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--primary);
}

.ubs-design .ubs-card__media {
	height: 230px;
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.ubs-ways-section {
	position: relative;
	z-index: 1;
}

.ubs-hours-bar {
	margin-top: 26px !important;
}

.ubs-hours-bar p {
	margin: 0;
	padding: 12px 22px;
	background: var(--wp--preset--color--mist);
	font-size: 15px;
	text-align: center;
}

.ubs-hours-bar strong {
	margin-right: 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------------------
   Gallery page + lightbox
   -------------------------------------------------------------------------- */
.ubs-gallery.ubs-lightbox > .wp-block-image,
.ubs-customers > .wp-block-image,
.ubs-customer-wall > .wp-block-image,
.ubs-photo-grid > .wp-block-image {
	position: relative;
	height: clamp(220px, 22vw, 320px);
	margin: 0;
	overflow: hidden;
	cursor: zoom-in;
}

.ubs-gallery.ubs-lightbox > .wp-block-image img,
.ubs-customers > .wp-block-image img,
.ubs-customer-wall > .wp-block-image img,
.ubs-photo-grid > .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.ubs-gallery.ubs-lightbox > .wp-block-image::after,
.ubs-customers > .wp-block-image::after,
.ubs-customer-wall > .wp-block-image::after,
.ubs-photo-grid > .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(11, 22, 24, 0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 46px no-repeat;
	opacity: 0;
	transition: opacity var(--wp--custom--transition);
	pointer-events: none;
}

.ubs-gallery.ubs-lightbox > .wp-block-image:hover img,
.ubs-customers > .wp-block-image:hover img,
.ubs-customer-wall > .wp-block-image:hover img,
.ubs-photo-grid > .wp-block-image:hover img {
	transform: scale(1.05);
}

.ubs-gallery.ubs-lightbox > .wp-block-image:hover::after,
.ubs-customers > .wp-block-image:hover::after,
.ubs-customer-wall > .wp-block-image:hover::after,
.ubs-photo-grid > .wp-block-image:hover::after {
	opacity: 1;
}

.ubs-gallery.ubs-lightbox > .wp-block-image:focus-visible,
.ubs-customers > .wp-block-image:focus-visible,
.ubs-customer-wall > .wp-block-image:focus-visible,
.ubs-photo-grid > .wp-block-image:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Gallery page: one shape for every shot, so the grid reads as a grid. */
.ubs-photo-grid {
	margin-top: clamp(24px, 2.4vw, 34px) !important;
}

.ubs-photo-grid > .wp-block-image {
	height: auto;
	aspect-ratio: 4 / 3;
}

.ubs-photo-grid > [hidden] {
	display: none !important;
}

/* Filter buttons above the gallery grid. */
.ubs-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: clamp(26px, 2.6vw, 36px);
}

.ubs-filter {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;
	border: 1.5px solid var(--wp--preset--color--line);
	background: transparent;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.ubs-filter span {
	font-size: 11.5px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}

.ubs-filter:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.ubs-filter.is-active {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.ubs-filter.is-active span {
	color: rgba(255, 255, 255, 0.72);
}

.ubs-filter:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.ubs-filters__empty {
	margin-top: 40px !important;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 600px) {
	.ubs-filter {
		padding: 9px 14px;
		font-size: 12px;
	}
}

/* Our customers: a wider head than the 760px content width, so the title sits
   on one line and the intro the owner wrote reads in two centered lines. */
.ubs-customers-section .ubs-section-head.is-center {
	max-width: min(1080px, 100%);
}

.ubs-customers-section .ubs-section-head.is-center > p:not(.is-style-eyebrow) {
	max-width: 100%;
	text-wrap: balance;
}

/* Video band: a full-width strip of silent looping footage between sections.
   The clip is 16:9, so at these proportions only its middle slice shows. */
.ubs-video-band {
	--ubs-video-band-height: 60vh;
	position: relative;
	height: var(--ubs-video-band-height);
	overflow: hidden;
	background: var(--wp--preset--color--ink);
	/* Decoration only: clicks and taps pass straight through. */
	pointer-events: none;
}

/* Cover the band with a 16:9 clip: whichever side comes up short is grown and
   the overflow is cropped, so the video never letterboxes inside the frame. */
.ubs-video-band__frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, calc(var(--ubs-video-band-height) * 16 / 9));
	height: max(var(--ubs-video-band-height), calc(100vw * 9 / 16));
	border: 0;
	transform: translate(-50%, -50%);
}

/* Customers page: the same square tiles as the About carousel, laid out as a
   wall so every photo is on screen at once. */
.ubs-customer-wall {
	margin-top: clamp(24px, 2.4vw, 34px) !important;
}

.ubs-customer-wall > .wp-block-image {
	height: auto;
	aspect-ratio: 1;
}

.ubs-customer-wall__note {
	margin-top: clamp(28px, 3vw, 40px) !important;
	font-size: 16.5px;
	color: var(--wp--preset--color--muted);
}

/* Our customers: square tiles so portrait and landscape shots share one line. */
.ubs-customers {
	--ubs-per-view: 4;
	--ubs-gap: 18px;
	margin-top: clamp(30px, 3vw, 44px) !important;
}

.ubs-customers > .wp-block-image {
	height: auto;
	aspect-ratio: 1;
}

@media (max-width: 1100px) {
	.ubs-customers {
		--ubs-per-view: 3;
	}
}

@media (max-width: 782px) {
	.ubs-customers {
		--ubs-per-view: 2;
		--ubs-gap: 14px;
	}
}

@media (max-width: 560px) {
	.ubs-customers {
		--ubs-per-view: 1.25;
	}
}

.ubs-lightbox-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 60px 70px;
	background: rgba(6, 12, 14, 0.94);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.ubs-lightbox-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.ubs-lightbox-modal figure {
	margin: 0;
	max-width: min(1200px, 100%);
	text-align: center;
}

.ubs-lightbox-modal img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 170px);
	margin: 0 auto;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.ubs-lightbox-modal figcaption {
	margin-top: 16px;
	font-size: 15px;
	color: #c9d6d9;
}

.ubs-lightbox-modal button {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	background: rgba(11, 22, 24, 0.6);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.ubs-lightbox-modal button:hover,
.ubs-lightbox-modal button:focus-visible {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--accent);
	outline: none;
}

.ubs-lightbox-modal svg {
	width: 22px;
	height: 22px;
}

.ubs-lightbox-modal .is-close {
	top: 18px;
	right: 18px;
}

.ubs-lightbox-modal .is-prev {
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
}

.ubs-lightbox-modal .is-next {
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
}

.ubs-lightbox-modal .ubs-lightbox__count {
	position: absolute;
	top: 30px;
	left: 26px;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	letter-spacing: 0.14em;
	color: #c9d6d9;
}

@media (max-width: 600px) {
	.ubs-lightbox-modal {
		padding: 70px 12px;
	}

	.ubs-lightbox-modal .is-prev,
	.ubs-lightbox-modal .is-next {
		top: auto;
		bottom: 14px;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Blog: pagination, article, author box
   -------------------------------------------------------------------------- */
.ubs-pagination {
	gap: 8px;
	margin-top: 50px !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ubs-pagination .page-numbers,
.ubs-pagination .wp-block-query-pagination-previous,
.ubs-pagination .wp-block-query-pagination-next {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
}

.ubs-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.ubs-pagination a:hover {
	border-color: var(--wp--preset--color--primary);
}

.ubs-prose {
	font-size: 18px;
	line-height: 1.8;
}

.ubs-prose > * + * {
	margin-top: 1.2em;
}

.ubs-prose :is(h2, h3, h4) {
	margin-top: 1.8em;
	margin-bottom: 0.5em;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
}

.ubs-prose h2 {
	font-size: clamp(26px, 2.6vw, 34px);
}

.ubs-prose h3 {
	font-size: 22px;
}

.ubs-prose > h1:first-child {
	display: none;
}

.ubs-prose :is(ul, ol) {
	padding-left: 1.3em;
}

.ubs-prose li + li {
	margin-top: 0.4em;
}

.ubs-prose li::marker {
	color: var(--wp--preset--color--primary);
}

.ubs-prose a {
	border-bottom: 1px solid currentColor;
}

.ubs-prose blockquote {
	margin-inline: 0;
	padding: 6px 0 6px 24px;
	border-left: 3px solid var(--wp--preset--color--primary);
	font-size: 20px;
	color: var(--wp--preset--color--ink);
}

.ubs-prose img {
	height: auto;
}

.ubs-author-box {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-top: 56px !important;
	padding: 26px 28px;
	border-left: 3px solid var(--wp--preset--color--primary);
}

.ubs-author-box > * {
	margin: 0 !important;
}

.ubs-author-box .ubs-author-box__avatar {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--base);
}

.ubs-author-box p {
	margin: 0;
	font-size: 15.5px;
}

.ubs-author-box .ubs-author-box__name {
	margin-bottom: 6px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink);
}

.ubs-author-box a {
	border-bottom: 1px solid currentColor;
}

.ubs-post-nav {
	gap: 20px;
	margin-top: 36px !important;
	padding-top: 26px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.ubs-post-nav > * {
	max-width: 48%;
	margin: 0 !important;
}

.ubs-post-nav a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
}

.ubs-post-nav .post-navigation-link__label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.ubs-post-nav .post-navigation-link-next {
	margin-left: auto !important;
	text-align: right;
}

/* --------------------------------------------------------------------------
   Interior pages — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
	.ubs-values-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ubs-mission {
		position: static;
	}
}

@media (max-width: 900px) {
	.ubs-service-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.ubs-service-row.is-reversed > .ubs-service-row__media {
		order: 0;
	}

	.ubs-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.ubs-stat:nth-child(odd) {
		border-left: 0;
	}

	.ubs-stat:nth-child(n + 3) {
		border-top: 1px solid rgba(255, 255, 255, 0.16);
	}
}

@media (max-width: 600px) {
	.ubs-page-hero.has-photo::before {
		background: linear-gradient(90deg, rgba(11, 22, 24, 0.92), rgba(11, 22, 24, 0.7));
	}

	.ubs-checks {
		grid-template-columns: minmax(0, 1fr);
	}

	.ubs-area__panel {
		padding: 22px 18px;
	}

	.ubs-stat {
		padding: 24px 12px;
	}

	.ubs-post-nav > * {
		max-width: 100%;
	}
}

/* Main menu: current page. */
.ubs-nav .current-menu-item > .wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--primary);
}

.ubs-nav .current-menu-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--wp--preset--color--primary);
}

.ubs-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content::after {
	right: auto;
	width: 28px;
}

/* Search field in the search results header. */
.ubs-search {
	max-width: 520px;
	margin-top: 26px !important;
}

.ubs-search .wp-block-search__input {
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

.ubs-search .wp-block-search__button {
	margin-left: 8px;
	padding: 0 24px;
	border: 0;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Team on phones: two portraits per row. */
@media (max-width: 600px) {
	.ubs-team {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 26px 14px !important;
	}

	.ubs-member .ubs-member__photo {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
	}

	.ubs-member__info {
		margin-top: 12px !important;
		padding-left: 10px;
	}

	.ubs-member h3 {
		font-size: 15px;
	}

	.ubs-member .ubs-member__role {
		font-size: 10px;
		letter-spacing: 0.1em;
	}

	.ubs-member__photo.is-placeholder .ubs-member__initials {
		top: 12px;
		left: 14px;
		font-size: 16px;
	}

	.ubs-member .ubs-member__tag {
		top: 10px;
		right: 10px;
		padding: 4px 8px;
		font-size: 9px;
	}
}

/* --------------------------------------------------------------------------
   Single service
   -------------------------------------------------------------------------- */
.ubs-service-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(0, 0.85fr);
	gap: 48px 64px;
	align-items: start;
}

.ubs-service-layout > * {
	margin: 0 !important;
}

.ubs-service-main > * {
	margin-block: 0;
}

.ubs-service-main > * + * {
	margin-top: 28px;
}

.ubs-service-main .ubs-article__image {
	margin-bottom: 0 !important;
}

.ubs-service-lead {
	color: var(--wp--preset--color--ink);
}

.ubs-service-highlights {
	padding: 26px 28px;
	background: var(--wp--preset--color--snow);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--primary);
}

.ubs-service-highlights > * {
	margin: 0;
}

.ubs-service-highlights .ubs-checks {
	margin-top: 16px !important;
}

.ubs-service-note {
	padding: 16px 20px;
	background: var(--wp--preset--color--mist);
	font-size: 15.5px;
}

.ubs-service-note strong {
	color: var(--wp--preset--color--primary);
}

.ubs-service-content {
	padding-top: 8px;
}

.ubs-service-content > :first-child {
	margin-top: 0;
}

.ubs-service-aside {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ubs-service-aside > * {
	margin: 0 !important;
}

.ubs-quote-card {
	padding: 30px 28px;
	clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}

.ubs-quote-card > * {
	margin: 0;
}

.ubs-quote-card > * + * {
	margin-top: 12px;
}

.ubs-quote-card h3 {
	font-size: 22px;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0.01em;
}

.ubs-quote-card p {
	font-size: 15px;
}

.ubs-quote-card .ubs-quote-card__buttons {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin-top: 22px;
}

.ubs-quote-card__buttons .wp-block-button,
.ubs-quote-card__buttons .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.ubs-quote-card .ubs-quote-card__phone {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 14.5px;
	line-height: 1.6;
}

.ubs-quote-card__phone a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 17px;
}

.ubs-quote-card__phone span {
	color: #9fb2b6;
	font-size: 13.5px;
}

.ubs-other-services {
	padding: 24px 26px;
	border: 1px solid var(--wp--preset--color--line);
}

.ubs-other-services > * {
	margin: 0;
}

.ubs-other-services__list {
	margin-top: 12px !important;
	padding: 0;
	list-style: none;
}

.ubs-other-services__list li + li {
	border-top: 1px solid var(--wp--preset--color--line);
}

html:root .ubs-other-services__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 15px;
	color: var(--wp--preset--color--ink);
}

.ubs-other-services__list a::after {
	content: "\2192";
	color: var(--wp--preset--color--primary);
	transition: transform var(--wp--custom--transition);
}

html:root .ubs-other-services__list a:hover {
	color: var(--wp--preset--color--primary);
}

.ubs-other-services__list a:hover::after {
	transform: translateX(4px);
}

.ubs-page-header .ubs-page-header__tagline {
	margin-top: 8px !important;
}

html:root .ubs-service-row h2 a {
	color: inherit;
}

html:root .ubs-service-row h2 a:hover {
	color: var(--wp--preset--color--primary);
}

@media (max-width: 1000px) {
	.ubs-service-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ubs-service-aside {
		position: static;
	}
}

/* Our team: extra room below, since Service area's angled top overlaps it. */
.ubs-section.ubs-team-section {
	padding-bottom: calc(var(--wp--custom--section--padding) + var(--wp--custom--section--angle) + clamp(30px, 4vw, 60px));
}

.ubs-page-hero__actions.ubs-about-actions {
	margin-top: 30px !important;
}

/* Top bar on small laptops: the larger address/email need the room, so the
   message column steps aside (the 3D designer house button stays). */
@media (min-width: 1101px) and (max-width: 1400px) {
	.ubs-topbar .ubs-topbar__msg {
		display: none;
	}

	.ubs-topbar__inner {
		grid-template-columns: auto 1fr auto;
	}
}

/* Photo section with torn-paper edges top and bottom (About). The top edge
   matches the Mist section above, the bottom one the white section below. */
.ubs-section.ubs-page-hero.has-torn-edges {
	--ubs-torn: clamp(60px, 8vw, 130px);
	clip-path: none;
	padding-block: calc(var(--ubs-torn) + clamp(56px, 7vw, 100px));
}

.ubs-page-hero.has-torn-edges::after {
	content: "";
	position: absolute;
	inset: -1px 0;
	z-index: 1;
	background:
		url("../images/torn-edge-top-mist.svg") center top / 100% var(--ubs-torn) no-repeat,
		url("../images/torn-edge.svg") center bottom / 100% var(--ubs-torn) no-repeat;
	pointer-events: none;
}

.ubs-main > .ubs-page-hero.has-torn-edges + * {
	margin-top: 0 !important;
}

.ubs-main > .ubs-page-hero.has-torn-edges + .ubs-section:not([class*="is-style-"]) {
	padding-top: var(--wp--custom--section--padding);
}

/* Contact page: large map beside the quote form, same height. */
.ubs-map-form__grid {
	display: grid;
	/* The form holds two fields per row, so it gets the wider half. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 32px;
	align-items: stretch;
}

.ubs-map-form__grid > * {
	margin: 0 !important;
}

.ubs-map-form__map {
	position: relative;
	min-height: 480px;
	background: var(--wp--preset--color--primary-dark);
	box-shadow: 0 24px 50px rgba(11, 22, 24, 0.3);
	clip-path: polygon(0 0, calc(100% - var(--wp--custom--chamfer--large)) 0, 100% var(--wp--custom--chamfer--large), 100% 100%, 0 100%);
}

.ubs-map-form__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: saturate(0.8) contrast(1.05);
}

@media (max-width: 900px) {
	.ubs-map-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ubs-map-form__map {
		min-height: 360px;
	}
}

/* Single post: article + right column. */
.ubs-article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(0, 0.85fr);
	gap: 48px 64px;
	align-items: start;
}

.ubs-article-layout > * {
	margin: 0 !important;
}

.ubs-article-main > :first-child {
	margin-top: 0;
}

.ubs-article-aside {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ubs-article-aside > * {
	margin: 0 !important;
}

/* Long article titles in the side list: two lines at most. */
.ubs-article-aside .ubs-other-services__list a {
	line-height: 1.35;
}

@media (max-width: 1000px) {
	.ubs-article-layout {
		grid-template-columns: minmax(0, 1fr);
	}

}

/* Facebook feed box. */
.ubs-fb-feed {
	padding: 20px 20px 22px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
}

.ubs-fb-feed > * {
	margin: 0 !important;
}

.ubs-fb-feed__head {
	align-items: center;
	gap: 12px;
	margin-bottom: 16px !important;
}

.ubs-fb-feed__head > * {
	margin: 0 !important;
}

.ubs-fb-feed .ubs-fb-feed__title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.ubs-fb-feed__title::before {
	content: "";
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #1877f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M14 8h2.5V4.5H14c-2.5 0-4 1.6-4 4V10H8v3.5h2V22h3.5v-8.5H16l.5-3.5h-3V8.7c0-.4.3-.7.5-.7z'/%3E%3C/svg%3E") center / 14px no-repeat;
}

html:root .ubs-fb-feed__follow a {
	padding: 6px 12px;
	background: #1877f2;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}

html:root .ubs-fb-feed__follow a:hover {
	background: #0f5fcc;
	color: #fff;
}

.ubs-fb-feed__embed {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background: var(--wp--preset--color--snow);
}

.ubs-fb-feed__embed iframe {
	display: block;
	max-width: 100%;
	border: 0;
	overflow: hidden;
}

html:root .ubs-fb-feed__fallback {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 14px;
	color: var(--wp--preset--color--primary);
}


/* Recent articles with thumbnails (blog side column). */
.ubs-recent-posts__list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.ubs-recent-posts__list li + li {
	border-top: 1px solid var(--wp--preset--color--line);
}

html:root .ubs-recent-posts__list a {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding: 14px 0;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ubs-recent-posts__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--mist);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.ubs-recent-posts__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

html:root .ubs-recent-posts__list a:hover .ubs-recent-posts__thumb img {
	transform: scale(1.06);
}

.ubs-recent-posts__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	transition: color var(--wp--custom--transition);
}

html:root .ubs-recent-posts__list a:hover .ubs-recent-posts__title {
	color: var(--wp--preset--color--primary);
}

.ubs-recent-posts__date {
	display: block;
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Blog side column follows the scroll; theme.js sets --ubs-sticky-top so a
   column taller than the screen sticks by its bottom edge. */
@media (min-width: 1001px) {
	.ubs-article-aside,
	.ubs-service-aside {
		position: sticky;
		top: var(--ubs-sticky-top, 110px);
	}
}

/* Main menu: uppercase heading font, and the Services dropdown. */
.ubs-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 16.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ubs-nav .wp-block-navigation__container {
	gap: 6px 30px;
}

.ubs-nav .wp-block-navigation__submenu-icon {
	margin-left: 5px;
	width: 11px;
	height: 11px;
}

.ubs-nav .wp-block-navigation__submenu-icon svg {
	stroke-width: 2px;
}

.ubs-nav .wp-block-navigation__submenu-container {
	min-width: 272px !important;
	padding: 10px 0 !important;
	border: 0 !important;
	border-top: 3px solid var(--wp--preset--color--primary) !important;
	background: var(--wp--preset--color--base) !important;
	box-shadow: 0 22px 44px rgba(11, 22, 24, 0.14);
	top: calc(100% + 14px) !important;
}

/* The dropdown grows to the longest service name instead of wrapping it. */
@media (min-width: 1101px) {
	.ubs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		white-space: nowrap;
	}
}

/* Keeps the dropdown open while the pointer crosses the gap. */
.ubs-nav .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -17px;
	height: 17px;
}

.ubs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 22px !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--wp--preset--color--ink);
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.ubs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: "\2192";
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--wp--custom--transition), transform var(--wp--custom--transition);
	color: var(--wp--preset--color--primary);
}

.ubs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--snow);
	color: var(--wp--preset--color--primary);
}

.ubs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after {
	opacity: 1;
	transform: none;
}

.ubs-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

.ubs-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content::after {
	position: static;
	height: auto;
	background: none;
	opacity: 1;
	transform: none;
}

/* Mobile overlay: sub-items listed under Services, smaller. */
.ubs-nav .is-menu-open .wp-block-navigation__submenu-container {
	border-top: 0 !important;
	box-shadow: none;
	padding: 6px 0 0 14px !important;
}

.ubs-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 6px 0 !important;
	font-size: 16px;
}

@media (max-width: 1100px) {
	.ubs-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-size: 14px;
		letter-spacing: 0.05em;
	}

	.ubs-nav .wp-block-navigation__container {
		gap: 6px 18px;
	}
}

@media (min-width: 1101px) and (max-width: 1300px) {
	.ubs-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-size: 15px;
	}

	.ubs-nav .wp-block-navigation__container {
		gap: 6px 22px;
	}
}

/* Seven menu items: they only fit at their full size on wide screens. */
@media (min-width: 1101px) and (max-width: 1430px) {
	.ubs-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-size: 13.5px;
		letter-spacing: 0.03em;
	}

	.ubs-nav .wp-block-navigation__container {
		gap: 6px 14px;
	}

	.ubs-header__inner {
		gap: 20px;
	}
}

/* Mobile menu overlay: larger top-level items. */
.ubs-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 20px;
}

/* --------------------------------------------------------------------------
   Designer section: moving strip of structure types
   -------------------------------------------------------------------------- */
.ubs-structures {
	margin-top: clamp(64px, 7vw, 100px) !important;
	padding-top: clamp(44px, 5vw, 64px);
	border-top: 1px solid #d3dfe2;
}

.ubs-structures > * {
	margin-block: 0;
}

.ubs-structures .ubs-section-head {
	margin-bottom: 32px;
}

.ubs-structures .ubs-structures__title {
	margin-top: 12px;
	font-size: clamp(26px, 2.6vw, 36px);
}

/* Full-bleed strip that drifts slowly; pauses on hover. */
.ubs-structure-marquee {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	padding-block: 14px 30px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ubs-structure-marquee__track {
	display: flex;
	gap: 24px;
	width: max-content;
	animation: ubsStructures 60s linear infinite;
}

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

@keyframes ubsStructures {
	to {
		transform: translateX(calc(-50% - 12px));
	}
}

html:root .ubs-structure__link {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: clamp(250px, 26vw, 360px);
	padding: 30px 24px 26px;
	border: 1px solid #d6e1e4;
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	text-align: center;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

html:root .ubs-structure__link:hover,
html:root .ubs-structure__link:focus-visible {
	transform: translateY(-6px);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 20px 40px rgba(21, 77, 93, 0.16);
	color: var(--wp--preset--color--primary);
}

.ubs-structure__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.ubs-structure__media {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 16 / 10;
}

.ubs-structure__media img {
	display: block;
	width: 90%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.5s ease;
}

.ubs-structure__link:hover .ubs-structure__media img {
	transform: scale(1.05);
}

.ubs-structure__label {
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(16px, 1.4vw, 20px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ubs-structure__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	transition: color var(--wp--custom--transition);
}

.ubs-structure__cta::after {
	content: "\2192";
	transition: transform var(--wp--custom--transition);
}

.ubs-structure__link:hover .ubs-structure__cta {
	color: var(--wp--preset--color--primary);
}

.ubs-structure__link:hover .ubs-structure__cta::after {
	transform: translateX(4px);
}

/* No animation wanted: the strip becomes a normal horizontal scroll. */
@media (prefers-reduced-motion: reduce) {
	.ubs-structure-marquee {
		overflow-x: auto;
	}

	.ubs-structure-marquee__track {
		animation: none;
	}
}

/* Home gallery keeps its mosaic heights while using the lightbox hover. */
.ubs-gallery.ubs-lightbox > .wp-block-image {
	height: 215px;
}

.ubs-gallery.ubs-lightbox > .is-tall {
	height: 300px;
}

/* --------------------------------------------------------------------------
   Button motion: sheen on fill buttons, wipe on outline, sliding underline
   -------------------------------------------------------------------------- */
.wp-block-button__link,
.ubs-form__submit {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), transform 0.3s ease, box-shadow 0.3s ease;
}

/* Light sweep crossing the button. */
.wp-block-button__link::before,
.ubs-form__submit::before {
	content: "";
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: -40%;
	width: 36%;
	z-index: -1;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: translateX(-160%) skewX(-18deg);
	transition: transform 0.75s ease;
	pointer-events: none;
}

.wp-block-button__link:hover::before,
.wp-block-button__link:focus-visible::before,
.ubs-form__submit:hover::before,
.ubs-form__submit:focus-visible::before {
	transform: translateX(420%) skewX(-18deg);
}

.wp-block-button:not(.is-style-underline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-underline) > .wp-block-button__link:focus-visible,
.ubs-form__submit:hover,
.ubs-form__submit:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(11, 22, 24, 0.22);
}

.wp-block-button:not(.is-style-underline) > .wp-block-button__link:active,
.ubs-form__submit:active {
	transform: translateY(-1px);
	box-shadow: 0 8px 16px rgba(11, 22, 24, 0.18);
}

/* Outline buttons fill from the left instead of switching colour. */
.wp-block-button.is-style-outline > .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.28, 1);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover::after,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible::after {
	transform: scaleX(1);
}

:is(.has-ink-background-color, .has-primary-background-color, .has-primary-dark-background-color) .wp-block-button.is-style-outline > .wp-block-button__link::after {
	background: var(--wp--preset--color--base);
}

/* The white fill needs dark text, or the label disappears. */
:is(.has-ink-background-color, .has-primary-background-color, .has-primary-dark-background-color) .wp-block-button.is-style-outline > .wp-block-button__link:hover,
:is(.has-ink-background-color, .has-primary-background-color, .has-primary-dark-background-color) .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--ink);
}

/* Underline links: the rule slides in and an arrow appears. */
.wp-block-button.is-style-underline > .wp-block-button__link {
	overflow: visible;
	border-bottom-color: transparent;
	padding-right: 22px;
	transition: color var(--wp--custom--transition), padding-right 0.3s ease;
}

.wp-block-button.is-style-underline > .wp-block-button__link::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	top: auto;
	width: auto;
	height: 2px;
	background: var(--ubs-underline);
	transform: scaleX(1);
	transform-origin: left center;
	transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.28, 1);
}

.wp-block-button.is-style-underline > .wp-block-button__link::after {
	content: "\2192";
	position: absolute;
	right: 0;
	bottom: 2px;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.wp-block-button.is-style-underline > .wp-block-button__link:hover::before,
.wp-block-button.is-style-underline > .wp-block-button__link:focus-visible::before {
	transform: scaleX(0.82);
}

.wp-block-button.is-style-underline > .wp-block-button__link:hover::after,
.wp-block-button.is-style-underline > .wp-block-button__link:focus-visible::after {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   Reveal on scroll (added by theme.js; without JS everything stays visible)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.ubs-reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.7, 0.28, 1);
		transition-delay: var(--ubs-reveal-delay, 0s);
	}

	.ubs-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Hero: entrance animation (the beams keep their own animation)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	/* Dark curtain that lifts as the page opens. */
	.ubs-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 4;
		background: var(--wp--preset--color--ink);
		animation: ubsHeroCurtain 1.1s cubic-bezier(0.4, 0, 0.2, 1) both;
		pointer-events: none;
	}

	.ubs-hero__overlay {
		animation: ubsHeroWash 1.6s ease 0.2s both;
	}

	.ubs-hero__content > * {
		animation: ubsHeroIn 0.9s cubic-bezier(0.22, 0.7, 0.28, 1) both;
	}

	.ubs-hero__content > .is-style-eyebrow {
		animation-delay: 0.35s;
	}

	.ubs-hero__content > .wp-block-heading {
		animation-delay: 0.5s;
	}

	.ubs-hero__content > .is-style-lead {
		animation-delay: 0.68s;
	}

	.ubs-hero__content > .wp-block-buttons {
		animation-delay: 0.84s;
	}

	.ubs-hero__content > .ubs-hero__dots {
		animation-delay: 1.05s;
	}

	/* The accent half of the headline lights up after the line lands. */
	.ubs-hero__content .wp-block-heading mark {
		animation: ubsHeroMark 1.2s ease 0.95s both;
	}
}

@keyframes ubsHeroCurtain {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes ubsHeroWash {
	from {
		opacity: 0.35;
	}

	to {
		opacity: 1;
	}
}

@keyframes ubsHeroIn {
	from {
		opacity: 0;
		transform: translateY(26px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ubsHeroMark {
	from {
		color: var(--wp--preset--color--base);
		text-shadow: none;
	}

	60% {
		text-shadow: 0 0 26px rgba(143, 194, 206, 0.55);
	}

	to {
		color: var(--wp--preset--color--accent);
		text-shadow: none;
	}
}

/* --------------------------------------------------------------------------
   Quote form: file attachments
   -------------------------------------------------------------------------- */
.ubs-upload {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ubs-upload__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #5a6c70;
}

.ubs-upload__title em {
	font-style: normal;
	text-transform: none;
	letter-spacing: 0.02em;
	color: #8d9b9f;
}

/* It is a <label>, so the column direction from .ubs-form label is reset. */
.ubs-form .ubs-upload__drop {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 12px;
	padding: 16px 18px;
	border: 1.5px dashed #c3d0d3;
	background: #f8fafa;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

.ubs-upload__drop:hover,
.ubs-upload__drop.is-dragging,
.ubs-upload__drop:focus-within {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--mist);
}

.ubs-upload__icon {
	width: 26px;
	height: 26px;
	background-color: var(--wp--preset--color--primary);
	-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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.1 12.3 20.2a5 5 0 0 1-7.1-7.1l9.2-9.2a3.4 3.4 0 0 1 4.8 4.8l-9.2 9.2a1.7 1.7 0 0 1-2.4-2.4l8.5-8.5'/%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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.1 12.3 20.2a5 5 0 0 1-7.1-7.1l9.2-9.2a3.4 3.4 0 0 1 4.8 4.8l-9.2 9.2a1.7 1.7 0 0 1-2.4-2.4l8.5-8.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ubs-form .ubs-upload__text {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 300;
	letter-spacing: normal;
	text-transform: none;
	color: #4a5a5d;
}

.ubs-upload__text strong {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.ubs-form .ubs-upload__hint {
	flex-basis: 100%;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12.5px;
	font-weight: 300;
	letter-spacing: normal;
	text-transform: none;
	color: #8d9b9f;
}

/* The real input covers the box so clicking anywhere opens the file picker. */
.ubs-form .ubs-upload__drop input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.ubs-upload__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ubs-upload__list:empty::before {
	content: attr(data-empty);
	font-size: 13px;
	color: #9aa8ab;
}

.ubs-upload__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	background: #f1f5f5;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
}

.ubs-upload__list li::before {
	content: "";
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	background-color: var(--wp--preset--color--primary);
	-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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.1 12.3 20.2a5 5 0 0 1-7.1-7.1l9.2-9.2a3.4 3.4 0 0 1 4.8 4.8l-9.2 9.2a1.7 1.7 0 0 1-2.4-2.4l8.5-8.5'/%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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.1 12.3 20.2a5 5 0 0 1-7.1-7.1l9.2-9.2a3.4 3.4 0 0 1 4.8 4.8l-9.2 9.2a1.7 1.7 0 0 1-2.4-2.4l8.5-8.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ubs-upload__list li span {
	margin-left: auto;
	font-size: 12.5px;
	color: #7d8c90;
}

.ubs-upload__list li.is-too-big {
	background: #fbeaea;
	color: #8a2a2a;
}

/* Steel buildings: the photo is 4:3 and the card is wide, so the crop is
   nudged up to keep the roof and the open bay inside the frame. */
.ubs-service--steel-buildings img,
.single-ubs_service .ubs-article__image img {
	object-position: center 32%;
}

/* --------------------------------------------------------------------------
   Financing: Lyon Financial banner, apply button, Home block and page
   -------------------------------------------------------------------------- */
.ubs-fin-banner {
	display: block;
	max-width: 520px;
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ubs-fin-banner:hover,
.ubs-fin-banner:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.36);
}

.ubs-fin-banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* Big external button that opens the Lyon Financial application. */
html:root .ubs-apply-btn {
	box-sizing: border-box;
	max-width: 100%;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 16px 30px 16px 20px;
	background: linear-gradient(135deg, #1f6f85 0%, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--primary-dark) 100%);
	box-shadow: 0 14px 32px rgba(21, 77, 93, 0.45);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	clip-path: polygon(var(--wp--custom--chamfer--medium) 0, 100% 0, 100% calc(100% - var(--wp--custom--chamfer--medium)), calc(100% - var(--wp--custom--chamfer--medium)) 100%, 0 100%, 0 var(--wp--custom--chamfer--medium));
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

html:root .ubs-apply-btn:hover,
html:root .ubs-apply-btn:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 20px 44px rgba(21, 77, 93, 0.55);
	color: var(--wp--preset--color--base);
}

.ubs-apply-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

.ubs-apply-btn__icon {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / 20px no-repeat;
	transition: transform 0.3s ease;
}

.ubs-apply-btn:hover .ubs-apply-btn__icon {
	transform: translateX(4px);
}

.ubs-apply-btn__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(16px, 1.6vw, 20px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.1;
}

.ubs-apply-btn__text span {
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: none;
	color: var(--wp--preset--color--accent-soft);
}

/* On a primary background the button flips to white. */
html:root .ubs-apply-btn.is-light {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
}

.ubs-apply-btn.is-light .ubs-apply-btn__icon {
	background-color: rgba(21, 77, 93, 0.12);
	-webkit-mask: none;
	mask: none;
}

.ubs-apply-btn.is-light .ubs-apply-btn__text span {
	color: var(--wp--preset--color--primary);
}

/* Home: apply panel under the equation strip. */
.ubs-fin-apply {
	display: grid;
	/* The banner column gets a little more room than the copy. */
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: 32px 48px;
	align-items: center;
	margin-top: clamp(40px, 5vw, 64px) !important;
	padding: clamp(24px, 2.4vw, 34px);
	clip-path: polygon(0 0, calc(100% - var(--wp--custom--chamfer--large)) 0, 100% var(--wp--custom--chamfer--large), 100% 100%, 0 100%);
}

.ubs-fin-apply > *,
.ubs-fin-apply__body > * {
	margin-block: 0 !important;
}

/* Left column: the banner with the secondary link under it. */
.ubs-fin-apply__media {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.ubs-fin-apply__media > * {
	margin: 0 !important;
}

.ubs-fin-apply__media .ubs-fin-banner {
	width: 100%;
}

.ubs-fin-apply .ubs-fin-banner {
	max-width: none;
	width: 100%;
}

.ubs-fin-apply__secondary {
	align-self: center;
}

.ubs-fin-apply h3 {
	font-size: clamp(22px, 2.3vw, 30px);
	line-height: 1.12;
	text-wrap: wrap;
}

.ubs-fin-points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 22px;
	margin-top: 18px !important;
	padding: 0;
	list-style: none;
}

.ubs-fin-points li {
	position: relative;
	padding-left: 28px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--base);
}

.ubs-fin-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 18px;
	height: 18px;
	background-color: var(--wp--preset--color--accent);
	-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ubs-fin-apply__actions {
	margin-top: 22px !important;
}

.ubs-fin-apply__actions > * {
	margin: 0 !important;
}

/* Financing page: centred intro over the dark band. */
.ubs-fin-intro {
	text-align: center;
	padding-bottom: clamp(44px, 5vw, 70px);
}

.ubs-fin-intro__copy {
	max-width: 820px;
	margin-inline: auto !important;
}

.ubs-fin-intro__copy > * {
	margin-block: 0 !important;
}

.ubs-fin-intro h2 {
	margin-top: 14px !important;
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1.05;
	text-wrap: balance;
}

.ubs-fin-intro .is-style-lead {
	margin-top: 18px !important;
	color: #d3e0e3;
}

.ubs-fin-intro__actions {
	margin-top: 32px !important;
}

.ubs-fin-intro__actions > * {
	margin: 0 !important;
}

.ubs-fin-intro .ubs-fin-intro__note {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 16px;
	color: var(--wp--preset--color--base);
}

.ubs-fin-intro__note span {
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8fa3a8;
}

/* The Lyon banner gets its own strip, edge to edge. */
.ubs-fin-strip {
	margin-block: 0 !important;
	background: #0030bc;
}

.ubs-fin-banner.is-strip {
	max-width: none;
	width: 100%;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

.ubs-fin-banner.is-strip:hover,
.ubs-fin-banner.is-strip:focus-visible {
	transform: none;
	box-shadow: none;
}

/* Full width, nothing cropped; very wide screens keep the blue band around it. */
.ubs-fin-banner.is-strip img {
	display: block;
	width: 100%;
	max-width: 1600px;
	height: auto;
	margin-inline: auto;
}

/* Timeline: numbered steps joined by a line. */
.ubs-fin-flow .ubs-flow {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin-top: 8px !important;
}

.ubs-flow__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 0 24px;
	text-align: center;
}

.ubs-flow__step > * {
	margin: 0 !important;
}

/* The line joins the circles and passes behind them. */
.ubs-flow__step::before {
	content: "";
	position: absolute;
	top: 27px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--wp--preset--color--line);
}

.ubs-flow__step:first-child::before {
	left: 50%;
}

.ubs-flow__step:last-child::before {
	right: 50%;
}

.ubs-flow .ubs-flow__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 8px var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--base);
	transition: transform var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

.ubs-flow__step:hover .ubs-flow__num {
	transform: translateY(-4px);
	background: var(--wp--preset--color--ink);
}

.ubs-flow__step h3 {
	font-size: 18px;
	letter-spacing: 0.04em;
}

.ubs-flow__step p {
	font-size: 15px;
	line-height: 1.6;
}

@media (max-width: 900px) {
	/* On phones the timeline runs down the left side. */
	.ubs-fin-flow .ubs-flow {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.ubs-flow__step {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 6px 20px;
		padding: 0;
		text-align: left;
	}

	.ubs-flow .ubs-flow__num {
		grid-row: span 2;
		box-shadow: none;
	}

	.ubs-flow__step::before {
		top: 56px;
		bottom: -30px;
		left: 27px;
		right: auto;
		width: 2px;
		height: auto;
	}

	.ubs-flow__step:first-child::before,
	.ubs-flow__step:last-child::before {
		left: 27px;
		right: auto;
	}

	.ubs-flow__step:last-child::before {
		display: none;
	}

	.ubs-flow__step h3 {
		align-self: center;
	}
}

/* Financing page: closing band. */
.ubs-fin-cta .ubs-fin-cta__actions {
	margin-top: 34px !important;
}

.ubs-fin-cta .ubs-fin-cta__actions > * {
	margin: 0 !important;
}

.ubs-fin-legal-wrap {
	margin-top: 40px !important;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.ubs-fin-legal {
	margin: 0 auto !important;
	max-width: 900px;
	font-size: 12.5px;
	line-height: 1.6;
	text-align: center;
	color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 900px) {
	.ubs-fin-apply,
	.ubs-fin-intro__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.ubs-fin-apply .ubs-fin-banner {
		order: -1;
	}
}

@media (max-width: 600px) {
	.ubs-fin-points {
		grid-template-columns: minmax(0, 1fr);
	}

	html:root .ubs-apply-btn {
		width: 100%;
		gap: 12px;
		padding: 14px 16px;
	}

	.ubs-apply-btn__text {
		font-size: 15px;
		letter-spacing: 0.06em;
	}

	.ubs-apply-btn__text span {
		font-size: 11px;
		letter-spacing: 0.04em;
	}
}

/* Financing page: QR + photo band. */
.ubs-fin-qr__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px 56px;
	align-items: center;
}

.ubs-fin-qr__grid > * {
	margin: 0 !important;
}

.ubs-fin-qr__photo {
	height: clamp(260px, 30vw, 380px);
}

.ubs-fin-qr__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ubs-fin-qr__body > * {
	margin-block: 0 !important;
}

.ubs-fin-qr__body > * + * {
	margin-top: 16px !important;
}

.ubs-fin-qr__card {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 24px !important;
	padding: 20px 24px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.ubs-fin-qr__card > * {
	margin: 0 !important;
}

.ubs-fin-qr__card img {
	display: block;
	width: 132px;
	height: 132px;
}

.ubs-fin-qr__card p {
	font-size: 15px;
	line-height: 1.55;
}

.ubs-fin-qr__card strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 900px) {
	.ubs-fin-qr__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.ubs-fin-qr__card {
		flex-direction: column;
		text-align: center;
	}
}