/* =========================================================
   UMS Super Theme — base stylesheet
   Design tokens are CSS custom properties; the Customizer
   overrides them per-site via an inline <style> in wp_head().

   Breakpoint scale used across this file (documented here since
   plain CSS custom properties can't be read inside @media itself):
     480px  — large mobile / small mobile boundary
     600px  — large mobile upper edge (grid/column collapses)
     782px  — WP admin-bar convention, doubles as our tablet-portrait
              boundary (mobile nav, off-canvas menu, bottom nav)
     960px  — tablet landscape / small desktop boundary
     1440px — large-desktop enhancements (wider grids)
   New responsive work should snap to this scale rather than picking
   a new breakpoint ad hoc.
   ========================================================= */

:root {
	--ust-bottomnav-h: 0px;  /* set to the bottom nav's height on phones */
	--ust-cookie-h: 0px;     /* set by cookie-consent.js while the banner is showing */
	--ust-color-topbar: #0a72d3;
	--ust-color-topbar-text: #ffffff;
	--ust-color-button-bg: #cb4f07;
	--ust-color-button-text: #ffffff;
	--ust-color-header-bg: #ffffff;
	--ust-color-nav-text: #1a1a1a;
	--ust-color-nav-text-hover: #0a72d3;
	--ust-color-link: #0a72d3;
	--ust-color-heading: #0d1b2a;
	--ust-color-body-text: #333333;
	--ust-color-footer-main-bg: #cb4f07;
	--ust-color-footer-main-text: #ffffff;
	--ust-color-footer-bottom-bg: #1f41c6;
	--ust-color-footer-bottom-text: #ffffff;
	--ust-color-page-title-bg: #f4f6f8;
	--ust-color-page-title-text: #0d1b2a;

	/* Status/alert accent colors (Customizer: Alert / Status Colors).
	   Defaults declared here too (not just in the Customizer's dynamic
	   <style>) so the block editor iframe — which loads this file via
	   add_editor_style() but never sees the frontend-only Customizer
	   output — still renders alert/notice previews correctly. */
	--ust-status-success: #1e8e3e;
	--ust-status-warning: #d99000;
	--ust-status-error: #d93025;
	--ust-status-info: #0a72d3;

	/* Page-chrome default — the plain area behind everything that isn't
	   inside a Customizer-colored band (header/footer/page-title above
	   are brand colors and intentionally never flip; this one does). */
	--ust-color-body-bg: #ffffff;

	--ust-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ust-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ust-font-size-base: 16px;

	--ust-container-width: 1600px;
	--ust-radius: 4px;

	/* Radius scale, all derived from the single Customizer-controlled
	   --ust-radius above so "Global Border Radius" actually reshapes
	   every corner on the site proportionally, not just the ones that
	   happened to reference --ust-radius directly. */
	--ust-radius-sm: calc(var(--ust-radius) * 0.5);
	--ust-radius-md: var(--ust-radius);
	--ust-radius-lg: calc(var(--ust-radius) * 2);
	--ust-radius-pill: 999px;

	/* Spacing scale — the standard for new components going forward.
	   Existing hardcoded paddings are intentionally left as they are:
	   retrofitting ~50 already-shipped, unreviewed components onto a new
	   scale risks visual regressions with no way to check them visually
	   here; new work should use these instead of another one-off value. */
	--ust-space-xs: 8px;
	--ust-space-sm: 16px;
	--ust-space-md: 24px;
	--ust-space-lg: 40px;
	--ust-space-xl: 64px;

	/* Shadow / elevation presets, all built on the one surface-shadow
	   color so dark mode (which already redefines that color) darkens
	   every elevation level automatically instead of needing three more
	   dark-mode overrides. */
	--ust-fixed-dark: #0d1b2a; /* dark panels that keep white text in BOTH light and dark mode */
	--ust-shadow-sm: 0 1px 2px var(--ust-surface-shadow);
	--ust-shadow-md: 0 4px 12px var(--ust-surface-shadow);
	--ust-shadow-lg: 0 12px 32px var(--ust-surface-shadow);

	/* Surface tokens for theme-owned components (cards, grids, tabs, sliders,
	   dropdown/mobile menus, modals). Kept separate from the Customizer brand
	   colors above so enabling dark mode can never fight a site owner's
	   chosen brand palette. */
	--ust-surface: #ffffff;
	--ust-surface-2: #f4f6f8;
	--ust-surface-border: #e6e6e6;
	--ust-surface-text: #1a1a1a;
	--ust-surface-text-muted: #5a6371; /* >= 4.5:1 on white AND on the light grey surface */
	--ust-surface-shadow: rgba(0, 0, 0, .08);
}

/*
 * Dark mode, three states (see inc/dark-mode.php):
 *   1. No class on <html> at all → this media query alone decides, from
 *      the visitor's own OS setting.
 *   2. html.ust-light → forces the light values above even on a dark OS
 *      (the ":not(.ust-light)" guard below is what makes that work).
 *   3. html.ust-dark → forces these dark values even on a light OS.
 * Case 3 is a plain, unguarded rule below: it has no media query to lose
 * to, so it always wins regardless of the visitor's OS setting.
 */
@media (prefers-color-scheme: dark) {
	:root:not(.ust-light) {
		--ust-surface: #1b1f27;
		--ust-surface-2: #242933;
		--ust-surface-border: #333944;
		--ust-surface-text: #f0f2f5;
		--ust-surface-text-muted: #aab0bb;
		--ust-surface-shadow: rgba(0, 0, 0, .5);
		--ust-color-body-bg: #12151b;
		--ust-color-body-text: #dfe3ea;
		--ust-color-heading: #f0f2f5;
		--ust-color-header-bg: var(--ust-surface);
		--ust-color-nav-text: #f0f2f5;
		--ust-color-nav-text-hover: #7fb8ff;
		--ust-color-link: #7fb8ff;
		--ust-color-page-title-bg: var(--ust-surface-2);
		--ust-color-page-title-text: #f0f2f5;
	}
}

:root.ust-dark {
	--ust-surface: #1b1f27;
	--ust-surface-2: #242933;
	--ust-surface-border: #333944;
	--ust-surface-text: #f0f2f5;
	--ust-surface-text-muted: #aab0bb;
	--ust-surface-shadow: rgba(0, 0, 0, .5);
	--ust-color-body-bg: #12151b;
	--ust-color-body-text: #dfe3ea;
	--ust-color-heading: #f0f2f5;
	--ust-color-header-bg: var(--ust-surface);
	--ust-color-nav-text: #f0f2f5;
	--ust-color-nav-text-hover: #7fb8ff;
	--ust-color-link: #7fb8ff;
	--ust-color-page-title-bg: var(--ust-surface-2);
	--ust-color-page-title-text: #f0f2f5;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }
html.ust-light { color-scheme: light; }
html.ust-dark { color-scheme: dark; }
body {
	margin: 0;
	font-family: var(--ust-font-body);
	font-size: var(--ust-font-size-base);
	line-height: 1.65;
	color: var(--ust-color-body-text);
	background: var(--ust-color-body-bg);
}
img { max-width: 100%; height: auto; display: block; }
video, iframe, embed, object, svg { max-width: 100%; }
/* Long unbroken words/URLs must wrap instead of forcing sideways scrolling on phones. */
body { overflow-wrap: break-word; word-wrap: break-word; }
pre { max-width: 100%; overflow-x: auto; }
table { max-width: 100%; }
.wp-block-table, .wp-block-code { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
a { color: var(--ust-color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ust-font-heading);
	color: var(--ust-color-heading);
	line-height: 1.25;
	margin: 0 0 .6em;
	font-weight: 700;
}
/* Fluid fallback scale — components with their own heading size (hero,
   page-title, cards, etc.) override this; this covers everything else
   (post/page content, tabs, sidebars) so nothing relies on the browser
   default between breakpoints. */
h1 { font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .75vw, 1.75rem); }
h4 { font-size: clamp(1.125rem, 1.02rem + .5vw, 1.375rem); }
h5 { font-size: clamp(1rem, .95rem + .25vw, 1.15rem); }
h6 { font-size: clamp(.9rem, .87rem + .15vw, 1rem); }
p { margin: 0 0 1.4em; }
ul, ol { padding-left: 1.4em; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }
:focus-visible { outline: 3px solid var(--ust-color-topbar); outline-offset: 2px; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0,0,0,0); border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--ust-surface); color: var(--ust-surface-text); padding: 10px 16px; }
.skip-link:focus { left: 10px; top: 10px; }

.ust-container {
	max-width: var(--ust-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Page Options > Content width: Full width — no site max-width, so
   alignwide/alignfull blocks can span the viewport; normal blocks still
   respect the theme.json content size via .is-layout-constrained. */
.ust-content-area--full {
	padding-left: 24px;
	padding-right: 24px;
}

/* Display conditions, device rule, Customizer/post-preview only (see
   ust_condition_render_block()) — display:contents keeps this wrapper out
   of the block's own layout (flex/grid children, alignfull, etc.) while
   still letting it hide/show at the theme's mobile breakpoint. */
.ums-cond-preview,
.ums-rfs { display: contents; }
.ums-cond-preview--mobile-only { display: none; }
@media (max-width: 782px) {
	.ums-cond-preview--mobile-only { display: contents; }
	.ums-cond-preview--desktop-only { display: none; }
}

/* ---------- Buttons (shared) ---------- */
.ust-btn, .wp-block-button__link {
	display: inline-block;
	background: var(--ust-color-button-bg);
	color: var(--ust-color-button-text);
	padding: .7em 1.6em;
	border-radius: var(--ust-radius);
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: opacity .15s ease;
}
.ust-btn:hover, .wp-block-button__link:hover { opacity: .88; color: var(--ust-color-button-text); text-decoration: none; }

/* ---------- Top utility bar ---------- */
.ust-topbar {
	background: var(--ust-color-topbar);
	color: var(--ust-color-topbar-text);
	/* WordPress's Customizer edit-shortcut pencil is absolutely positioned
	   relative to the nearest positioned ancestor — without this, it
	   anchors to whatever happens to be positioned further up the page
	   instead of this row, and ends up rendered somewhere else entirely. */
	position: relative;
}
/* WP core anchors the pencil's 1x1px marker to the top-LEFT corner of the
   hovered element (margin: -1px 0 0 -1px), then positions the visible
   button 30px further left of *that* (left: -30px). This row spans the
   full viewport width starting at x:0, so the combined effect pushes the
   pencil out of the preview iframe entirely, into the Customizer's own
   sidebar, where it's never reachable. Anchor the marker 29px in from the row's
   top-LEFT corner instead — the button's own -30px offset from its
   marker then lands it just inside the visible row. (Top-left, not
   top-right: the right edge belongs to the "add a column" + control,
   assets/css/header-preview-dragdrop.css.) */
.ust-topbar .customize-partial-edit-shortcut {
	left: 0;
	right: auto;
	margin: -1px 0 0 29px;
}
.ust-topbar .ust-container {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	min-height: 40px;
	padding-top: 6px;
	padding-bottom: 6px;
}
/* Deliberately NO min-height/min-width here for an empty zone — a real
   visitor never drags or drops anything, so an empty zone reserving a
   24×24 hit area on the live front end was pure wasted, unexplained
   blank space: a gap with nothing visibly there and no reason for a
   visitor to see one. That hit area only actually matters inside the
   Customizer preview, where it's needed so an empty zone is still a
   real, droppable target — see the matching rule (customizer-preview-only)
   in header-preview-dragdrop.css, the one place this should apply. */
/* A row with nothing in any of its zones for the current device (e.g. no
   footer widgets assigned yet, every assigned element rendered nothing, or
   every element was dragged/removed off it — see the floating toolbar's
   Remove action in assets/js/header-preview-dragdrop.js) still exists as a
   drop target — the zones above keep their min-height — but shouldn't show its
   background/padding/border to a real visitor as a stray colored strip of
   nothing. This needs to win even over an admin-set background/border from
   the Row Style Controls (inc/row-style-controls.php), which also uses
   !important and prints later in wp_head than this stylesheet — an empty
   row showing its configured color with literally nothing on it reads as
   broken, not as the deliberate design that background was chosen for, so
   the class is doubled here to out-specificity that single-class selector
   (0,2,0 vs 0,1,0) regardless of source order. */
.ust-row-empty.ust-row-empty {
	background: none !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border: 0 !important;
}
/* The header rows' own vertical padding actually lives on the *nested*
   .ust-container (.ust-topbar .ust-container/.ust-header .ust-container/
   .ust-header-lower .ust-container above and below), not the row div the
   .ust-row-empty class above lands on — zeroing only the row's own padding
   left this padding in place, so an "empty" row was still ~100px tall: noticeably, confusingly blank
   space that reads as a stray duplicate row. !important is enough to win
   here regardless of source order/specificity against the plain (non-
   !important) rules that set these — footer rows don't need this, their
   padding is already on the row element itself. */
.ust-row-empty .ust-container {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	min-height: 0 !important;
	gap: 0 !important;
}
/* An earlier version of this rule switched an empty row's container from
   grid to a plain wrapping flex row, to stop its zones' drop-target
   placeholders reading as two stacked bands (a real concern back when an
   empty row/zone still reserved visible height at rest — see 1.59.0).
   flex doesn't know about grid-template-columns' 1fr/auto/1fr split
   though, so with no justify-content set it packed all the placeholders
   into the top-left corner instead of where their zone actually is —
   trading one confusing look for another. Now that an empty zone reserves
   no space at all at rest (style.css no longer gives it any min-height/
   width — see header-preview-dragdrop.css, Customizer-preview-only, for
   where that moved), the two-stacked-bands concern this was solving is
   far less of a problem — it only ever shows on hover/drag now, briefly,
   and genuinely does reflect where left/center/right actually are. Left as the theme's normal grid
   layout — no override needed here any more. */
/* justify-self positions the zone's own box within the row's grid;
   justify-content (missing until now) is what actually aligns an
   element's content *within* that box once the box is wider than its
   content — without it, content just sits flush left inside a wide zone
   regardless of the zone's own left/center/right identity. Each zone's
   default justify-content matches its name; the Column Alignment control
   (inc/row-style-controls.php) can override it per row/zone. */
/* Links in the top bar (contact, account, etc.) follow the bar's own text color; the
   site link color is often the very color the bar is painted with. */
.ust-topbar a:not(.ust-btn):not(.wp-block-button__link) { color: var(--ust-color-topbar-text); }
/* Header buttons never break mid-label ("Get a / Quote"); compact on phones. Contact links stay on one line. */
.ust-header-zone .ust-btn { white-space: nowrap; }
.ust-topbar .ust-contact-quick-links { flex-wrap: nowrap; gap: 14px; }
@media (max-width: 600px) {
	.ust-header-zone .ust-btn { padding: .55em 1em; font-size: .9rem; min-height: 40px; }
	.ust-topbar .ust-contact-quick-links a { font-size: .8rem; }
}
.ust-topbar-left { display: flex; align-items: center; justify-content: flex-start; gap: 12px; justify-self: start; }
.ust-topbar-center { display: flex; align-items: center; justify-content: center; gap: 12px; justify-self: center; }
.ust-topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; justify-self: end; }

/* Per-element vertical alignment (the floating toolbar's Top/Middle/Bottom
   buttons — assets/js/header-preview-dragdrop.js) — every zone above is a
   flex container with align-items: center as its own default, this just
   overrides that for one specific element rather than the whole zone. */
.ust-header-el--valign-top { align-self: flex-start; }
.ust-header-el--valign-bottom { align-self: flex-end; }

/* Per-element horizontal alignment inside its column (the toolbar's Left/
   Center/Right buttons). Auto margins take up the column's free space, so the
   zone has to span the whole column when any element in it uses one. */
.ust-zone-has-halign { justify-self: stretch !important; width: 100%; }
.ust-header-el--halign-left { margin-right: auto; }
.ust-header-el--halign-center { margin-left: auto; margin-right: auto; }
.ust-header-el--halign-right { margin-left: auto; }

/* A per-element, per-device "Hide on this device" (the floating toolbar) —
   gone entirely for a real visitor; header-preview-dragdrop.css overrides
   this back to visible-but-ghosted inside the Customizer preview only, so
   the same toolbar action can un-hide it again. */
.ust-hel-hidden-device { display: none; }

/* Top Bar Builder (inc/topbar-builder.php) renders one variant per
   device; only the one matching the current viewport is shown. Same
   782/960px breakpoints used for "mobile"/"tablet" everywhere else in
   this stylesheet. */
.ust-topbar--tablet, .ust-topbar--mobile { display: none; }
@media (max-width: 960px) {
	.ust-topbar--desktop { display: none; }
	.ust-topbar--tablet { display: block; }
}
@media (max-width: 782px) {
	.ust-topbar--desktop, .ust-topbar--tablet { display: none; }
	.ust-topbar--mobile { display: block; }
}
.ust-topbar .ust-btn { padding: .4em 1.2em; font-size: .9rem; }
.ust-topbar-search-toggle {
	background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem;
	width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Search bar (always-visible, unlike the icon toggle above) ---------- */
.ust-header-searchbar {
	display: flex; align-items: center; gap: 0;
	background: rgba(127,127,127,.08); border: 1px solid rgba(127,127,127,.25); border-radius: var(--ust-radius-pill);
	overflow: hidden;
}
.ust-header-searchbar__input {
	border: 0; background: none; padding: 8px 14px; font-size: .9rem; color: inherit; width: 180px; max-width: 40vw;
}
.ust-header-searchbar__input:focus { outline: none; }
.ust-header-searchbar__submit {
	background: none; border: none; color: inherit; cursor: pointer;
	width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- WhatsApp button ---------- */
.ust-whatsapp-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: #25d366; color: #fff; padding: .5em 1.1em; border-radius: var(--ust-radius-pill);
	font-size: .9rem; font-weight: 600; text-decoration: none;
}
.ust-whatsapp-btn:hover { opacity: .88; color: #fff; text-decoration: none; }

/* ---------- Generic icon+label link elements (Find Jobs, My Account,
   Donate, Support, Book Appointment, Downloads) ---------- */
.ust-el-link {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: .9rem; font-weight: 600; text-decoration: none; color: inherit;
	white-space: nowrap;
}
.ust-el-link:hover { opacity: .8; color: inherit; text-decoration: none; }

/* ---------- Divider (a plain visual separator between neighboring
   elements in the same zone) and the footer-placed Back to Top button
   (assets/js/navigation.js handles its click; the pre-existing floating
   one — inc/footer-builder.php — is a separate, unrelated feature) ---------- */
.ust-el-divider { display: inline-block; width: 1px; align-self: stretch; min-height: 1.4em; background: currentColor; opacity: .25; }
.ust-el-backtotop { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }

/* ---------- Trust & Social Proof elements (inc/template-tags.php
   ust_trust_badges()/ust_payment_icons()/ust_countdown_timer()/
   ust_rating_badge()/ust_address_block()/ust_custom_badge()) — none of
   these read from another plugin/system, unlike most other header/footer
   elements, so their styling doesn't need to accommodate any markup but
   this theme's own. ---------- */
.ust-trust-badges-el {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
	list-style: none; margin: 0; padding: 0;
}
.ust-trust-badges-el li { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.ust-trust-badges-el svg { flex: none; color: var(--ust-status-success); }

.ust-payment-icons-el { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ust-payment-icon {
	display: inline-flex; align-items: center; justify-content: center;
	height: 22px; padding: 0 8px; border-radius: 4px;
	background: rgba(127, 127, 127, .14);
	font-size: .68rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}

.ust-countdown-el { display: inline-flex; align-items: center; gap: 10px; font-size: .85rem; }
.ust-countdown-el__label { font-weight: 600; white-space: nowrap; }
.ust-countdown-el__digits {
	font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .02em;
	white-space: nowrap; min-width: 1px; /* avoids a layout jump once JS fills it in */
}

.ust-rating-el { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; white-space: nowrap; }
.ust-rating-el__stars { display: inline-flex; gap: 1px; }
.ust-rating-el__stars .is-filled { color: #f5a623; }
.ust-rating-el__stars .is-empty { color: currentColor; opacity: .25; }
.ust-rating-el__stars svg { display: block; }
.ust-rating-el__value { font-weight: 700; }
.ust-rating-el__caption { opacity: .75; }

.ust-address-el { display: inline-flex; align-items: flex-start; gap: 7px; font-size: .9rem; font-weight: 600; line-height: 1.35; }
.ust-address-el svg { flex: none; margin-top: .2em; }

.ust-badge-el { display: inline-flex; }
.ust-badge-el img { display: block; max-height: 48px; width: auto; }

/* ---------- Cart link (assets/js/header-preview-dragdrop.js 'cart' case,
   echoes [ust_cart_link] from inc/store-booster.php) ---------- */
.ust-cart-link { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; position: relative; }
.ust-cart-link:hover { color: inherit; opacity: .8; }
.ust-cart-link-count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
	background: var(--ust-color-button-bg); color: var(--ust-color-button-text);
	font-size: .7rem; font-weight: 700; line-height: 1;
}

/* ---------- Dark mode toggle ---------- */
.ust-dark-toggle {
	background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem; padding: 4px;
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
}
.ust-dark-toggle__icon { display: flex; }
.ust-dark-toggle__icon--sun { display: none; }
:root.ust-dark .ust-dark-toggle__icon--moon { display: none; }
:root.ust-dark .ust-dark-toggle__icon--sun { display: flex; }
@media (prefers-color-scheme: dark) {
	:root:not(.ust-light) .ust-dark-toggle__icon--moon { display: none; }
	:root:not(.ust-light) .ust-dark-toggle__icon--sun { display: flex; }
}
.ust-social-icons { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ust-social-icons a {
	color: var(--ust-color-topbar-text);
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	font-size: .85rem;
}
.ust-social-icons a {
	/* A visible round button in the row's own text colour (it was a bare 16px glyph, easy to miss). */
	background: color-mix(in srgb, currentColor 14%, transparent);
	transition: background-color .15s ease, transform .15s ease;
}
.ust-social-icons a svg { width: 18px; height: 18px; }
.ust-social-icons a:hover, .ust-social-icons a:focus-visible { background: color-mix(in srgb, currentColor 26%, transparent); text-decoration: none; transform: translateY(-1px); }
.ust-site-footer .ust-social-icons a { color: inherit; }
@media (prefers-reduced-motion: reduce) { .ust-social-icons a { transition: none; } .ust-social-icons a:hover { transform: none; } }

/* Contact Info quick links (header/footer element — inc/template-tags.php
   ust_contact_quick_links()) and the Footer Menu element
   (inc/footer-layout-builder.php) — both plain inline lists, inheriting
   whichever row's text/link color they're dragged into rather than
   hardcoding one. */
.ust-contact-quick-links { display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.ust-contact-quick-links a { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; white-space: nowrap; }
.ust-contact-quick-links a svg { flex-shrink: 0; }
.ust-footer-menu { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.ust-footer-menu a { font-size: .9rem; }

.ust-topbar-search {
	display: none;
	background: rgba(0,0,0,.08);
}
.ust-topbar-search.is-open { display: block; }
.ust-topbar-search form {
	display: flex;
	max-width: var(--ust-container-width);
	margin: 0 auto;
	padding: 10px 24px;
}
.ust-topbar-search input[type="search"] {
	flex: 1;
	padding: .5em .8em;
	border: none;
	border-radius: var(--ust-radius) 0 0 var(--ust-radius);
}
.ust-topbar-search button {
	border: none;
	background: var(--ust-color-button-bg);
	color: var(--ust-color-button-text);
	padding: 0 1.2em;
	border-radius: 0 var(--ust-radius) var(--ust-radius) 0;
	cursor: pointer;
}

/* ---------- Main header ---------- */
.ust-header {
	background: var(--ust-color-header-bg);
	border-bottom: 1px solid rgba(0,0,0,.06);
	position: relative; /* required for the Customizer's edit-shortcut pencil to anchor correctly, same as .ust-topbar/.ust-header-lower below */
}
.ust-header .customize-partial-edit-shortcut {
	left: 0;
	right: auto;
	margin: -1px 0 0 29px;
}
.ust-header .ust-container,
.ust-header-lower .ust-container {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding-top: 14px;
	padding-bottom: 14px;
}
.ust-header-left, .ust-header-lower-left { justify-self: start; display: flex; align-items: center; justify-content: flex-start; gap: 14px; }
.ust-header-center, .ust-header-lower-center { justify-self: center; display: flex; align-items: center; justify-content: center; gap: 14px; }
.ust-header-right, .ust-header-lower-right { justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }

.ust-header-lower {
	background: var(--ust-color-header-bg);
	border-bottom: 1px solid rgba(0,0,0,.06);
	position: relative; /* required for the Customizer's edit-shortcut pencil to anchor correctly, same as .ust-topbar below */
}
/* Phones/tablets: an empty centre zone shouldn't cost two 24px gaps, and a long
   site name must shrink or wrap rather than push the menu button off-screen. */
@media (max-width: 960px) {
	.ust-header .ust-container, .ust-header-lower .ust-container { grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; }
	.ust-header-left, .ust-header-lower-left { min-width: 0; }
	.ust-header .ust-branding, .ust-header .ust-branding-text { min-width: 0; }
	.ust-header .ust-site-title, .ust-header .ust-site-tagline { white-space: normal !important; overflow-wrap: anywhere; }
	.ust-header-zone.ust-zone-empty { display: none; }
}

.ust-header-lower .customize-partial-edit-shortcut {
	left: 0;
	right: auto;
	margin: -1px 0 0 29px;
}
.ust-header-lower--tablet, .ust-header-lower--mobile,
.ust-header--tablet, .ust-header--mobile { display: none; }
@media (max-width: 960px) {
	.ust-header-lower--desktop, .ust-header--desktop { display: none; }
	.ust-header-lower--tablet, .ust-header--tablet { display: block; }
}
@media (max-width: 782px) {
	.ust-header-lower--desktop, .ust-header-lower--tablet,
	.ust-header--desktop, .ust-header--tablet { display: none; }
	.ust-header-lower--mobile, .ust-header--mobile { display: block; }
}
.ust-branding { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ust-branding img.ust-logo { max-width: 64px; width: 100%; height: auto; flex-shrink: 0; }
/* Desktop/tablet/mobile independently — inc/customizer.php ust_dynamic_css()
   sets all three custom properties unconditionally, this picks which one
   actually applies at the current viewport width, matching the same
   782px/960px breakpoints every other device-specific rule in this file
   uses. Previously a single --ust-logo-width applied everywhere no matter
   which device was being previewed or actually viewing the site — sizing
   the logo for a wide desktop header could just as easily crowd a narrow
   phone screen, with no way to fix just that without also changing
   desktop. */
.ust-logo-wrap img { width: var(--ust-logo-width-desktop, 200px); max-width: 100%; height: auto; flex-shrink: 0; }
/* Logo for dark backgrounds (inc/logo-variants.php): same three states as dark mode itself. */
.ust-logo-wrap .ust-logo-dark-mode { display: none; }
:root.ust-dark .ust-logo-wrap .ust-logo-dark-mode { display: inline-block; }
:root.ust-dark .ust-logo-wrap .ust-logo-dark-mode ~ .custom-logo-link,
:root.ust-dark .ust-logo-wrap .custom-logo-link:has(~ .ust-logo-dark-mode) { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not(.ust-light) .ust-logo-wrap .ust-logo-dark-mode { display: inline-block; }
	:root:not(.ust-light) .ust-logo-wrap .custom-logo-link:has(~ .ust-logo-dark-mode) { display: none; }
}
@media (max-width: 960px) {
	.ust-logo-wrap img { width: var(--ust-logo-width-tablet, 200px); }
}
@media (max-width: 782px) {
	.ust-logo-wrap img { width: var(--ust-logo-width-mobile, 200px); }
}
/* The branding column can end up much narrower than the title needs
   (e.g. an equal-thirds header row layout, a long site name) — the
   global `overflow-wrap: break-word` (body rule above) then has to
   split a word that doesn't fit on its own line, but does so silently,
   with no hyphen, reading as a typo ("Internati-onal") rather than an
   intentional break. */
.ust-branding-text { min-width: 0; hyphens: auto; }
.ust-site-title { font-size: var(--ust-site-title-size-desktop, 1.4rem); margin: 0; line-height: 1.2; overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* --ust-color-site-title/--ust-color-tagline (inc/customizer.php
   ust_dynamic_css()) are only ever written when an admin has explicitly
   set one — otherwise undefined, so var()'s own fallback correctly picks
   up whatever Heading Color/Body Text Color currently is, live, without
   this rule needing to know or care which. Previously these used
   --ust-color-heading/--ust-color-body-text directly and unconditionally,
   so the Site Title and Tagline were never actually independent of every
   other heading/paragraph on the site — this is what makes them so now. */
.ust-site-title a { color: var(--ust-color-site-title, var(--ust-color-heading)); text-decoration: none; }
.ust-site-tagline { margin: 2px 0 0; font-size: var(--ust-tagline-size-desktop, .85rem); color: var(--ust-color-tagline, var(--ust-color-body-text)); letter-spacing: .02em; }
/* Site Title / Tagline size per device — inc/customizer.php sets all six
   variables, this picks per viewport with the same breakpoints as the logo. */
@media (max-width: 960px) {
	.ust-site-title { font-size: var(--ust-site-title-size-tablet, 1.4rem); }
	.ust-site-tagline { font-size: var(--ust-tagline-size-tablet, .85rem); }
}
@media (max-width: 782px) {
	.ust-site-title { font-size: var(--ust-site-title-size-mobile, 1.4rem); }
	.ust-site-tagline { font-size: var(--ust-tagline-size-mobile, .85rem); }
}

/* ---------- Primary nav ---------- */
.ust-primary-nav { display: flex; }
.ust-menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
}
.ust-menu li { position: relative; }
/* Desktop: a parent item's link and its submenu arrow stay on one line (the block-level link pushed the
   arrow onto a second line whenever the menu shared its row with a long logo/title). */
@media (min-width: 961px) {
	.ust-menu > li { flex-shrink: 0; }
	.ust-menu > li.menu-item-has-children { display: flex; align-items: center; flex-wrap: nowrap; }
}
.ust-menu a {
	display: block;
	padding: 10px 14px;
	color: var(--ust-color-nav-text);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	white-space: nowrap;
}
.ust-menu > li > a:hover, .ust-menu > li.current-menu-item > a { color: var(--ust-color-nav-text-hover); }
.ust-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%; left: 0;
	background: var(--ust-surface);
	min-width: 220px;
	box-shadow: 0 10px 30px var(--ust-surface-shadow);
	border-radius: var(--ust-radius);
	padding: 8px 0;
	z-index: 50;
	list-style: none;
	margin: 0;
}
.ust-menu li.ust-submenu-open > .sub-menu { display: block; }
/* Hover and keyboard focus open dropdowns on desktop only; on touch screens "hover" sticks after a tap. */
@media (hover: hover) and (min-width: 783px) {
	.ust-menu li:hover > .sub-menu { display: block; }
}
@media (min-width: 783px) {
	.ust-menu li:focus-within > .sub-menu { display: block; }
}
.ust-menu .sub-menu a { padding: 8px 18px; color: var(--ust-surface-text); font-weight: 500; }
/* Dropdown items: a clear highlight under the pointer (and for keyboard focus and the current page). */
.ust-menu .sub-menu { padding: 6px; }
.ust-menu .sub-menu a {
	display: flex; align-items: center; position: relative; border-radius: calc(var(--ust-radius) + 2px);
	transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}
.ust-menu .sub-menu a::before {
	content: ""; position: absolute; left: 6px; top: 50%; width: 3px; height: 0; margin-top: 0; border-radius: 2px;
	background: var(--ust-color-nav-text-hover); transition: height .15s ease, margin-top .15s ease;
}
.ust-menu .sub-menu a:hover,
.ust-menu .sub-menu a:focus-visible,
.ust-menu .sub-menu .current-menu-item > a {
	background: color-mix(in srgb, var(--ust-color-nav-text-hover) 10%, var(--ust-surface));
	color: var(--ust-color-nav-text-hover);
	padding-left: 24px;
	text-decoration: none;
}
.ust-menu .sub-menu a:hover::before,
.ust-menu .sub-menu a:focus-visible::before,
.ust-menu .sub-menu .current-menu-item > a::before { height: 18px; margin-top: -9px; }
.ust-menu .sub-menu a:focus-visible { outline: 2px solid var(--ust-color-nav-text-hover); outline-offset: -2px; }
/* A parent stays highlighted while its dropdown is open or one of its pages is current. */
.ust-menu > li:hover > a, .ust-menu > li.ust-submenu-open > a, .ust-menu > li.current-menu-ancestor > a { color: var(--ust-color-nav-text-hover); }
@media (prefers-reduced-motion: reduce) { .ust-menu .sub-menu a, .ust-menu .sub-menu a::before { transition: none; } }
/* Parent link + its own toggle button sit side by side. */
.ust-menu .menu-item-has-children { display: flex; align-items: center; flex-wrap: wrap; }
.ust-submenu-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; min-height: 44px; margin-inline-start: -10px; padding: 0;
	background: none; border: 0; color: var(--ust-color-nav-text); cursor: pointer;
}
.ust-submenu-toggle svg { transition: transform .2s ease; }
.ust-menu li.ust-submenu-open > .ust-submenu-toggle svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ust-submenu-toggle svg { transition: none; } }
/* Keep right-hand dropdowns from overflowing the viewport edge. */
.ust-menu > li:nth-last-child(-n+2):not(.ust-mega-menu) > .sub-menu { left: auto; right: 0; }

.ust-mobile-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: 2px solid var(--ust-color-nav-text);
	color: var(--ust-color-nav-text);
	border-radius: var(--ust-radius);
	padding: 8px 12px;
	font-size: 1.1rem;
	cursor: pointer;
}
.ust-mobile-toggle-icon--close { display: none; }
.ust-mobile-toggle[aria-expanded="true"] .ust-mobile-toggle-icon--open { display: none; }
.ust-mobile-toggle[aria-expanded="true"] .ust-mobile-toggle-icon--close { display: inline-flex; }

.ust-primary-nav-mobile-cta { display: none; }

/* Scroll lock while the off-canvas/dropdown mobile menu is open. */
body.ust-nav-open { overflow: hidden; }

/* ---------- Page title / banner ---------- */
/* Height is always a MIN-height (a long title grows the band, never clips).
   Site-wide per-device values: --ust-title-band-h-* (plain) and
   --ust-cover-h-* (cover), written by ust_dynamic_css(); a post's own
   override arrives as element-level --ust-pt-h-* / --ust-pt-justify
   (inc/page-cover.php → ust_title_band_attributes()). Plain default 0px =
   the band's natural height, exactly as before these settings existed. */
.ust-page-title {
	background: var(--ust-color-page-title-bg);
	padding: 26px 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: var(--ust-pt-justify, var(--ust-title-band-justify, center));
	min-height: var(--ust-pt-h-desktop, var(--ust-title-band-h-desktop, 0px));
}
.ust-page-title > .ust-container { width: 100%; }
@media (max-width: 960px) {
	.ust-page-title { min-height: var(--ust-pt-h-tablet, var(--ust-title-band-h-tablet, 0px)); }
	.ust-page-title.ust-page-title--cover { min-height: var(--ust-pt-h-tablet, var(--ust-cover-h-tablet, 320px)); }
}
@media (max-width: 782px) {
	.ust-page-title { min-height: var(--ust-pt-h-mobile, var(--ust-title-band-h-mobile, 0px)); }
	.ust-page-title.ust-page-title--cover { min-height: var(--ust-pt-h-mobile, var(--ust-cover-h-mobile, 320px)); }
}
/* Full screen: the viewport below whatever sits above the band (the inline
   script in page-title.php measures --ust-pt-offset). 100svh where
   supported — the small viewport, so it never jumps as mobile browser
   bars show/hide; older browsers drop that line and keep 100vh. */
.ust-page-title.ust-page-title--full,
.ust-page-title.ust-page-title--cover.ust-page-title--full {
	min-height: calc(100vh - var(--ust-pt-offset, 0px));
	min-height: calc(100svh - var(--ust-pt-offset, 0px));
}
.ust-page-title h1, .ust-page-title__text { margin: 0; font-weight: 700; line-height: 1.25; font-family: var(--ust-font-heading); font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem); color: var(--ust-color-page-title-text); }

/* Page/Post Cover (inc/page-cover.php) — the same banner, with a
   background image, a darkening overlay for text legibility, and
   light-on-dark text instead of the plain band's default colors. */
.ust-page-title--cover {
	position: relative;
	min-height: var(--ust-pt-h-desktop, var(--ust-cover-h-desktop, 320px));
	background-size: cover;
	background-position: center;
	padding: 48px 0;
}
.ust-page-title__overlay {
	position: absolute;
	inset: 0;
}
.ust-page-title--cover .ust-container {
	position: relative;
	z-index: 1;
	width: 100%;
}
.ust-page-title--cover .ust-page-title__text {
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.ust-page-title--cover .ust-breadcrumbs a,
.ust-page-title--cover .ust-breadcrumbs span { color: rgba(255, 255, 255, .85); }
.ust-page-title__excerpt {
	margin-top: 12px;
	color: rgba(255, 255, 255, .92);
	font-size: 1.05rem;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}

/* ---------- Colored section banner (block style for core Group) ---------- */
.is-style-ust-banner {
	padding: 22px 24px;
	text-align: center;
}
.is-style-ust-banner h1, .is-style-ust-banner h2, .is-style-ust-banner h3,
.is-style-ust-banner p { color: #fff; margin: 0; }

/* ---------- Logo / card grid (block style for core Gallery/Columns) ---------- */
.is-style-ust-logo-grid.wp-block-gallery {
	gap: 16px;
}
.is-style-ust-logo-grid .wp-block-image {
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: var(--ust-surface);
}
.is-style-ust-logo-grid .wp-block-image img { object-fit: contain; max-height: 110px; width: auto; margin: 0 auto; }

/* ---------- Pill buttons (block style for core Button/Buttons) ---------- */
.is-style-ust-pill .wp-block-button__link,
.wp-block-button.is-style-ust-pill .wp-block-button__link { border-radius: 999px; }

/* ---------- Hard shadow button (block style for core Button) ---------- */
.is-style-ust-hard-shadow .wp-block-button__link {
	box-shadow: 5px 5px 0 var(--ust-color-heading);
	transition: transform .15s ease, box-shadow .15s ease;
}
.is-style-ust-hard-shadow .wp-block-button__link:hover {
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 var(--ust-color-heading);
}

/* ---------- Framed image (block style for core Image) ---------- */
.is-style-ust-framed img {
	border: 8px solid #fff;
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* ---------- Underline accent heading (block style for core Heading) ---------- */
.is-style-ust-underline-accent {
	display: inline-block;
	padding-bottom: .3em;
	border-bottom: 4px solid var(--ust-color-button-bg);
}

/* ---------- Card quote (block style for core Quote) ---------- */
.is-style-ust-card.wp-block-quote {
	background: var(--ust-surface-2);
	color: var(--ust-surface-text);
	border: none;
	border-left: 4px solid var(--ust-color-topbar);
	border-radius: var(--ust-radius);
	padding: 1.4em 1.8em;
	margin: 0 0 1.6em;
}

/* ---------- Card columns (block style for core Columns) ---------- */
.is-style-ust-card-columns.wp-block-columns > .wp-block-column {
	background: var(--ust-surface);
	color: var(--ust-surface-text);
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius);
	padding: 1.6em;
	box-shadow: 0 1px 3px var(--ust-surface-shadow);
}
@media (max-width: 600px) {
	.is-style-ust-card-columns.wp-block-columns > .wp-block-column { padding: 1.2em; }
}

/* ---------- Post grid / carousel (replacement for essential-blocks/post-grid) ---------- */
.ust-post-grid { margin: 0 0 1.6em; }
.ust-post-grid__track {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
@media (max-width: 782px) { .ust-post-grid__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .ust-post-grid__track { grid-template-columns: 1fr; } }

/* Carousel layout: .eb-slider-init (shared class) switches the track to a
   flex row that assets/js/legacy-interactive-blocks.js's generic carousel
   engine slides — same engine the image Slider block already uses. */
.ust-post-grid.eb-slider-wrapper .eb-slider-init {
	display: flex;
	gap: 20px;
}
.ust-post-grid.eb-slider-wrapper .ust-post-grid__item.eb-slider-item {
	display: flex;
	flex-direction: column;
}
.ust-post-grid.eb-slider-wrapper .ust-post-grid__thumb { flex-shrink: 0; }

.ust-post-grid__item {
	display: block;
	background: var(--ust-surface);
	border-radius: var(--ust-radius);
	overflow: hidden;
	box-shadow: 0 1px 3px var(--ust-surface-shadow);
	transition: box-shadow .2s ease, transform .2s ease;
}
.ust-post-grid__item:hover { box-shadow: 0 6px 16px var(--ust-surface-shadow); transform: translateY(-2px); text-decoration: none; }
.ust-post-grid__thumb { aspect-ratio: 16/10; overflow: hidden; }
.ust-post-grid__thumb img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.ust-post-grid__body { padding: 16px 18px 20px; }
.ust-post-grid__title { font-size: 1.05rem; margin: 0 0 .4em; color: var(--ust-surface-text); }
.ust-post-grid__meta { font-size: .85rem; color: var(--ust-surface-text-muted); }

/* ---------- Legacy tabs/slider behaviour (assets/js/legacy-interactive-blocks.js) ---------- */
.eb-tabs-nav ul.tabTitles { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.eb-tabs-nav ul.tabTitles li { cursor: pointer; }
.ust-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,.45);
	color: #fff;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ust-slider-arrow:hover { background: rgba(0,0,0,.7); }
.ust-slider-arrow--prev { left: 10px; }
.ust-slider-arrow--next { right: 10px; }
@media (max-width: 600px) {
	.ust-slider-arrow { width: 44px; height: 44px; font-size: 1.5rem; }
}

/* ---------- Google map (replacement for uagb/google-map) ---------- */
.ust-google-map { position: relative; width: 100%; aspect-ratio: 16/9; }
.ust-google-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Scroll entrance animations (assets/js/scroll-animations.js) ---------- */
.ust-animate { transition-property: opacity, transform; transition-timing-function: ease-out; }
.ust-animate--fade-in { opacity: 0; }
.ust-animate--slide-up { opacity: 0; transform: translateY(40px); }
.ust-animate--slide-left { opacity: 0; transform: translateX(40px); }
.ust-animate--slide-right { opacity: 0; transform: translateX(-40px); }
.ust-animate--zoom-in { opacity: 0; transform: scale(.9); }
.ust-animate.ust-animate-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.ust-animate { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- Industry-pattern entrance animations (inc/patterns/pattern-builders.php) ----------
   Pure CSS, plays once on load — deliberately not wired into the
   IntersectionObserver system above: that system is driven by a custom
   gpAnimation block attribute added only via the editor's JS filter
   (assets/js/scroll-animations-editor.js), and hand-authoring that
   attribute into generated pattern HTML would risk a block-validation
   mismatch the next time someone opens the page in the block editor.
   Plain CSS classes carry no such risk (same mechanism the ust-pill
   button style already relies on) and add zero JS. */
.ust-anim-fade-in,
.ust-anim-slide-up,
.ust-anim-zoom-in { animation-duration: .7s; animation-timing-function: ease-out; animation-fill-mode: both; }
.ust-anim-fade-in { animation-name: ust-pattern-fade-in; }
.ust-anim-slide-up { animation-name: ust-pattern-slide-up; }
.ust-anim-zoom-in { animation-name: ust-pattern-zoom-in; animation-duration: .6s; }
@keyframes ust-pattern-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ust-pattern-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ust-pattern-zoom-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.ust-anim-fade-in, .ust-anim-slide-up, .ust-anim-zoom-in { animation: none; }
}

/* ---------- Video facade (assets/js/video-facade.js) ---------- */
.ust-video-facade {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	background: #000;
	cursor: pointer;
	overflow: hidden;
	border-radius: var(--ust-radius);
}
.ust-video-facade__thumb { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; opacity: .85; }
.ust-video-facade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,.6);
	color: #fff;
	font-size: 1.4rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 4px;
}
.ust-video-facade__play:hover { background: var(--ust-color-topbar); }
.ust-video-facade__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Client logo grid ([ust_clients]) ---------- */
.ust-client-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 40px 0;
}
.ust-client-logo {
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius);
	background: var(--ust-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	min-height: 110px;
}
.ust-client-logo img { max-height: 90px; width: auto; object-fit: contain; }

/* ---------- Photo galleries ([ust_photo_galleries]) ---------- */
.ust-gallery-section { margin-bottom: 0; }
.ust-gallery-banner { padding: 22px 24px; text-align: center; }
.ust-gallery-banner h2 { color: #fff; margin: 0; font-size: 1.4rem; }
.ust-gallery-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	background: var(--ust-surface-2);
}
.ust-gallery-row img { width: 100%; height: 260px; object-fit: cover; }

/* Masonry: CSS multi-column instead of a fixed-height grid, so each
   photo keeps its own natural aspect ratio and packs tightly - no JS
   layout library needed for this. */
.ust-gallery-row--masonry {
	display: block; column-count: 4; column-gap: 4px;
}
.ust-gallery-row--masonry a { display: block; break-inside: avoid; margin-bottom: 4px; }
.ust-gallery-row--masonry img { width: 100%; height: auto; display: block; }
@media (max-width: 960px) { .ust-gallery-row--masonry { column-count: 2; } }
@media (max-width: 600px) { .ust-gallery-row--masonry { column-count: 1; } }

/* ---------- Video grid ([ust_videos]) ---------- */
.ust-video-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	padding: 40px 0;
}
.ust-video-item h3 { margin-bottom: 12px; }
/* wp_oembed_get() (inc/custom-post-types.php ust_shortcode_videos()) returns
   the provider's raw iframe with explicit width/height HTML attributes
   (e.g. 1200x675) — those map to a presentational height hint this rule's
   own `aspect-ratio` doesn't automatically beat, so without an explicit
   `height: auto` the iframe stayed pinned at its attribute height (e.g.
   675px) at every container width instead of scaling down with it. */
.ust-video-item iframe, .ust-video-item .wp-embed-responsive .wp-block-embed__wrapper { width: 100%; height: auto; aspect-ratio: 16/9; }
.ust-video-item iframe { border: 0; border-radius: var(--ust-radius); }

@media (max-width: 960px) {
	.ust-client-grid { grid-template-columns: repeat(3, 1fr); }
	.ust-gallery-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ust-client-grid { grid-template-columns: repeat(2, 1fr); }
	.ust-gallery-row { grid-template-columns: 1fr; }
	.ust-video-grid { grid-template-columns: 1fr; }
}

/* ---------- Hero slider ---------- */
.ust-hero-slider { position: relative; overflow: hidden; background: #0d1b2a; min-height: min(var(--ust-hero-height-desktop, 500px), 90vh); }
@media (max-width: 960px) {
	.ust-hero-slider { min-height: min(var(--ust-hero-height-tablet, 420px), 90vh); }
}
@media (max-width: 782px) {
	.ust-hero-slider { min-height: min(var(--ust-hero-height-mobile, 360px), 90vh); }
}
.ust-hero-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	transition: opacity 1s ease;
}
.ust-hero-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
/* The outgoing slide, while the incoming one fades in on top of it —
   JS (hero-slider.js) adds this instead of just letting the slide fall
   back to the base (hidden) rule above, and removes it again once the
   crossfade has finished. Kept fully opaque and un-transitioned so the
   incoming slide's own opacity (0→1) is the ONLY thing changing during
   the handoff: without this, both slides faded at once (old 1→0 at the
   same time new went 0→1), which briefly exposed the slider's own dark
   background through both of them together — visible as a flash/dip
   toward black at the midpoint instead of a clean image-to-image
   crossfade. */
.ust-hero-slide.is-leaving { opacity: 1; visibility: visible; z-index: 1; transition: none; }
.ust-hero-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Text Background: Darken (Customizer default) — each of these is now a
   per-slide modifier class on .ust-hero-slide itself (Customizer still
   sets a theme-wide default; a slide only carries its own class when it
   overrides that default — see front-page.php). */
.ust-hero-slide.ust-hero-overlay-dark::after {
	background: linear-gradient(90deg, rgba(0,0,0,var(--ust-hero-overlay-alpha, .65)) 0%, rgba(0,0,0,calc(var(--ust-hero-overlay-alpha, .65) * .6)) 45%, rgba(0,0,0,.05) 80%);
}
.ust-hero-slide.ust-hero-overlay-dark.ust-hero-align-right::after,
.ust-hero-slide.ust-hero-overlay-dark.ust-hero-align-bottom-right::after,
.ust-hero-slide.ust-hero-overlay-dark.ust-hero-align-top-right::after {
	background: linear-gradient(270deg, rgba(0,0,0,var(--ust-hero-overlay-alpha, .65)) 0%, rgba(0,0,0,calc(var(--ust-hero-overlay-alpha, .65) * .6)) 45%, rgba(0,0,0,.05) 80%);
}
.ust-hero-slide.ust-hero-overlay-dark.ust-hero-align-center::after {
	background: radial-gradient(ellipse at center, rgba(0,0,0,var(--ust-hero-overlay-alpha, .65)) 0%, rgba(0,0,0,calc(var(--ust-hero-overlay-alpha, .65) * .45)) 55%, rgba(0,0,0,.05) 85%);
}
/* Top/Bottom Center: the radial focus follows the text to the top or
   bottom of the slide instead of staying pinned to the slide's vertical
   middle regardless of where the text actually is — previously shared
   the plain Center rule above, so moving the text to the top or bottom
   left the gradient visibly behind, still centered on the photo rather
   than behind the text. */
.ust-hero-slide.ust-hero-overlay-dark.ust-hero-align-top-center::after {
	background: radial-gradient(ellipse at center top, rgba(0,0,0,var(--ust-hero-overlay-alpha, .65)) 0%, rgba(0,0,0,calc(var(--ust-hero-overlay-alpha, .65) * .45)) 55%, rgba(0,0,0,.05) 85%);
}
.ust-hero-slide.ust-hero-overlay-dark.ust-hero-align-bottom-center::after {
	background: radial-gradient(ellipse at center bottom, rgba(0,0,0,var(--ust-hero-overlay-alpha, .65)) 0%, rgba(0,0,0,calc(var(--ust-hero-overlay-alpha, .65) * .45)) 55%, rgba(0,0,0,.05) 85%);
}

/* Text Background: Lighten — text switches to a dark color for readability */
.ust-hero-slide.ust-hero-overlay-light::after {
	background: linear-gradient(90deg, rgba(255,255,255,var(--ust-hero-overlay-alpha, .65)) 0%, rgba(255,255,255,calc(var(--ust-hero-overlay-alpha, .65) * .6)) 45%, rgba(255,255,255,.05) 80%);
}
.ust-hero-slide.ust-hero-overlay-light.ust-hero-align-right::after,
.ust-hero-slide.ust-hero-overlay-light.ust-hero-align-bottom-right::after,
.ust-hero-slide.ust-hero-overlay-light.ust-hero-align-top-right::after {
	background: linear-gradient(270deg, rgba(255,255,255,var(--ust-hero-overlay-alpha, .65)) 0%, rgba(255,255,255,calc(var(--ust-hero-overlay-alpha, .65) * .6)) 45%, rgba(255,255,255,.05) 80%);
}
.ust-hero-slide.ust-hero-overlay-light.ust-hero-align-center::after {
	background: radial-gradient(ellipse at center, rgba(255,255,255,var(--ust-hero-overlay-alpha, .65)) 0%, rgba(255,255,255,calc(var(--ust-hero-overlay-alpha, .65) * .45)) 55%, rgba(255,255,255,.05) 85%);
}
.ust-hero-slide.ust-hero-overlay-light.ust-hero-align-top-center::after {
	background: radial-gradient(ellipse at center top, rgba(255,255,255,var(--ust-hero-overlay-alpha, .65)) 0%, rgba(255,255,255,calc(var(--ust-hero-overlay-alpha, .65) * .45)) 55%, rgba(255,255,255,.05) 85%);
}
.ust-hero-slide.ust-hero-overlay-light.ust-hero-align-bottom-center::after {
	background: radial-gradient(ellipse at center bottom, rgba(255,255,255,var(--ust-hero-overlay-alpha, .65)) 0%, rgba(255,255,255,calc(var(--ust-hero-overlay-alpha, .65) * .45)) 55%, rgba(255,255,255,.05) 85%);
}
.ust-hero-slide.ust-hero-overlay-light .ust-hero-slide-inner,
.ust-hero-slide.ust-hero-overlay-light .ust-hero-slide-inner h2,
.ust-hero-slide.ust-hero-overlay-light .ust-hero-slide-inner p { color: #0d1b2a; }

/* Text Background: Colour Fader — uses this slide's own colour, falling
   back to the theme-wide one (front-page.php only sets the custom
   property at all when it differs from the default). */
.ust-hero-slide.ust-hero-overlay-color::after {
	background: linear-gradient(90deg, var(--ust-hero-overlay-color, #0a72d3) 0%, transparent 80%);
	opacity: var(--ust-hero-overlay-alpha, .65);
}
.ust-hero-slide.ust-hero-overlay-color.ust-hero-align-right::after,
.ust-hero-slide.ust-hero-overlay-color.ust-hero-align-bottom-right::after,
.ust-hero-slide.ust-hero-overlay-color.ust-hero-align-top-right::after {
	background: linear-gradient(270deg, var(--ust-hero-overlay-color, #0a72d3) 0%, transparent 80%);
	opacity: var(--ust-hero-overlay-alpha, .65);
}
.ust-hero-slide.ust-hero-overlay-color.ust-hero-align-center::after {
	background: radial-gradient(ellipse at center, var(--ust-hero-overlay-color, #0a72d3) 0%, transparent 85%);
	opacity: var(--ust-hero-overlay-alpha, .65);
}
.ust-hero-slide.ust-hero-overlay-color.ust-hero-align-top-center::after {
	background: radial-gradient(ellipse at center top, var(--ust-hero-overlay-color, #0a72d3) 0%, transparent 85%);
	opacity: var(--ust-hero-overlay-alpha, .65);
}
.ust-hero-slide.ust-hero-overlay-color.ust-hero-align-bottom-center::after {
	background: radial-gradient(ellipse at center bottom, var(--ust-hero-overlay-color, #0a72d3) 0%, transparent 85%);
	opacity: var(--ust-hero-overlay-alpha, .65);
}
/* Text Background: None — no ::after background at all, full photo visible. */
.ust-hero-slide.ust-hero-overlay-none::after { display: none; }

.ust-hero-slide-bg {
	position: absolute;
	inset: 0;
	background-image: var(--ust-hero-bg-desktop);
	background-size: cover;
	background-position: center;
	transition: transform 6s ease-out, opacity 1s ease;
}
@media (max-width: 782px) {
	.ust-hero-slide-bg { background-image: var(--ust-hero-bg-mobile, var(--ust-hero-bg-desktop)); }
}
.ust-hero-slide-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ust-hero-slide > .ust-container { position: relative; z-index: 2; display: flex; width: 100%; }
.ust-hero-slide.ust-hero-align-left > .ust-container,
.ust-hero-slide.ust-hero-align-bottom-left > .ust-container,
.ust-hero-slide.ust-hero-align-top-left > .ust-container { justify-content: flex-start; }
.ust-hero-slide.ust-hero-align-center > .ust-container,
.ust-hero-slide.ust-hero-align-bottom-center > .ust-container,
.ust-hero-slide.ust-hero-align-top-center > .ust-container { justify-content: center; }
.ust-hero-slide.ust-hero-align-right > .ust-container,
.ust-hero-slide.ust-hero-align-bottom-right > .ust-container,
.ust-hero-slide.ust-hero-align-top-right > .ust-container { justify-content: flex-end; }
.ust-hero-slide.ust-hero-align-bottom-left,
.ust-hero-slide.ust-hero-align-bottom-center,
.ust-hero-slide.ust-hero-align-bottom-right { align-items: flex-end; }
/* Plain left/center/right (no prefix) stay vertically centered — the
   slider's own default, unchanged. Top/bottom are per-slide-only
   overrides; there's no theme-wide vertical default to match (see
   ust_hero_text_align in inc/customizer.php). */
.ust-hero-slide.ust-hero-align-top-left,
.ust-hero-slide.ust-hero-align-top-center,
.ust-hero-slide.ust-hero-align-top-right { align-items: flex-start; }
.ust-hero-slide-inner { color: #fff; max-width: 640px; padding: 60px 0; transition: opacity .8s ease .2s, transform .8s ease .2s; }
.ust-hero-slide.ust-hero-width-narrow .ust-hero-slide-inner { max-width: 460px; }
.ust-hero-slide.ust-hero-width-wide .ust-hero-slide-inner { max-width: 820px; }
.ust-hero-slide.ust-hero-align-left .ust-hero-slide-inner,
.ust-hero-slide.ust-hero-align-bottom-left .ust-hero-slide-inner,
.ust-hero-slide.ust-hero-align-top-left .ust-hero-slide-inner { text-align: left; }
.ust-hero-slide.ust-hero-align-center .ust-hero-slide-inner,
.ust-hero-slide.ust-hero-align-bottom-center .ust-hero-slide-inner,
.ust-hero-slide.ust-hero-align-top-center .ust-hero-slide-inner { text-align: center; }
.ust-hero-slide.ust-hero-align-right .ust-hero-slide-inner,
.ust-hero-slide.ust-hero-align-bottom-right .ust-hero-slide-inner,
.ust-hero-slide.ust-hero-align-top-right .ust-hero-slide-inner { text-align: right; }
/* Spacing between the badge/eyebrow/heading/text/buttons stack — a single
   adjustable gap (Customizer: Spacing Between Text Lines) rather than each
   element's own ad-hoc margin (h2/p previously fell back to the sitewide
   heading/paragraph margins — .6em and 1.4em respectively, meant for
   ordinary page content, not a tightly-controlled hero text stack — so
   the gap wasn't even consistent between elements, let alone adjustable). */
.ust-hero-slide-inner h2 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 2.5vw, 2.4rem); margin: 0 0 var(--ust-hero-text-gap, 16px); }
.ust-hero-slide-inner p { color: #f1f1f1; font-size: 1.1rem; margin: 0 0 var(--ust-hero-text-gap, 16px); }
.ust-hero-badge {
	display: inline-block; background: var(--ust-color-button-bg); color: var(--ust-color-button-text);
	font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	padding: .3em .9em; border-radius: 999px; margin-bottom: var(--ust-hero-text-gap, 16px);
}
.ust-hero-eyebrow {
	margin: 0 0 var(--ust-hero-text-gap, 16px); font-size: .95rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; color: inherit; opacity: .85;
}
.ust-hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.ust-hero-slide.ust-hero-align-center .ust-hero-buttons,
.ust-hero-slide.ust-hero-align-bottom-center .ust-hero-buttons,
.ust-hero-slide.ust-hero-align-top-center .ust-hero-buttons { justify-content: center; }
.ust-hero-slide.ust-hero-align-right .ust-hero-buttons,
.ust-hero-slide.ust-hero-align-bottom-right .ust-hero-buttons,
.ust-hero-slide.ust-hero-align-top-right .ust-hero-buttons { justify-content: flex-end; }
.ust-btn-secondary { background: transparent; border: 2px solid currentColor; color: inherit; }

/* Transition styles (Customizer: Transition Style) */
.ust-bg-anim-fade .ust-hero-slide-bg { transform: none; transition: opacity 1s ease; }
.ust-bg-anim-blend .ust-hero-slide-bg { transform: scale(1); transition: transform 8s ease-out, opacity 1.2s ease; }
.ust-bg-anim-blend .ust-hero-slide.is-active .ust-hero-slide-bg { transform: scale(1.04); }
.ust-bg-anim-zoom .ust-hero-slide-bg,
.ust-bg-anim-slide-zoom .ust-hero-slide-bg { transform: scale(1); }
.ust-bg-anim-zoom .ust-hero-slide.is-active .ust-hero-slide-bg,
.ust-bg-anim-slide-zoom .ust-hero-slide.is-active .ust-hero-slide-bg { transform: scale(1.12); }
.ust-bg-anim-none .ust-hero-slide-bg { transition: none; }

/* Slide (carousel push) transition styles: JS drives translateX on
   .ust-hero-slide directly, so every slide stays visible/in-place and
   .ust-hero-slider's overflow:hidden clips whichever ones are parked
   off-canvas — no opacity crossfade needed for these two variants. */
.ust-bg-anim-slide .ust-hero-slide,
.ust-bg-anim-slide-zoom .ust-hero-slide {
	opacity: 1;
	visibility: visible;
	transition: transform .9s cubic-bezier(.45,0,.2,1);
}
.ust-bg-anim-slide .ust-hero-slide.is-active,
.ust-bg-anim-slide-zoom .ust-hero-slide.is-active {
	z-index: 2;
}

/* Text animation variants (Customizer: Text Animation) — start slightly
   after the background so both move in sync but stay visually distinct. */
.ust-text-anim-fade-up .ust-hero-slide:not(.is-active) .ust-hero-slide-inner { opacity: 0; transform: translateY(26px); }
.ust-text-anim-fade-in .ust-hero-slide:not(.is-active) .ust-hero-slide-inner { opacity: 0; }
.ust-text-anim-slide-left .ust-hero-slide:not(.is-active) .ust-hero-slide-inner { opacity: 0; transform: translateX(40px); }
.ust-text-anim-slide-right .ust-hero-slide:not(.is-active) .ust-hero-slide-inner { opacity: 0; transform: translateX(-40px); }
.ust-text-anim-zoom .ust-hero-slide:not(.is-active) .ust-hero-slide-inner { opacity: 0; transform: scale(.85); }
.ust-text-anim-none .ust-hero-slide-inner { transition: none; }
.ust-hero-slide.is-active .ust-hero-slide-inner { opacity: 1; transform: none; }
.ust-hero-dots { position: absolute; z-index: 3; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.ust-hero-dots button {
	/* Visual dot size is adjustable (Customizer: Slide Indicator (Dot)
	   Size — background-clip: content-box keeps the fill inside it);
	   the invisible padding grows the actual tap target by ~14px on
	   every side regardless of the visible dot's own size, so it never
	   drops below a comfortable tap target even at the smallest setting.
	   box-sizing: content-box overrides this theme's global
	   *{box-sizing:border-box} reset (style.css, near the top) just for
	   this button: under border-box, "width" includes the padding, so a
	   10px width with 14px padding on each side (28px) is smaller than
	   its own padding — the browser has to clamp the actual visible
	   (content-box-clipped) area to 0, making the dot invisible at every
	   size the slider could be set to. content-box makes "width" mean
	   the visible dot alone, exactly as the padding comment above
	   intends, independent of however many tap-target pixels surround it. */
	box-sizing: content-box;
	width: var(--ust-hero-dot-size, 10px); height: var(--ust-hero-dot-size, 10px); padding: 14px;
	border-radius: 50%; background-clip: content-box;
	border: none; background-color: rgba(255,255,255,.5); cursor: pointer;
}
/* background-color, not the background shorthand: the shorthand resets
   every background-* sub-property it doesn't mention back to its
   default, including background-clip — silently overriding the base
   rule's content-box clip back to border-box just for the active dot,
   so it painted across its whole ~35px padded tap target instead of
   just its small visible circle like the other dots. */
.ust-hero-dots button.is-active { background-color: #fff; }
.ust-hero-arrow {
	position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
	background: rgba(0,0,0,.35); color: #fff; border: none;
	width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.1rem;
}
.ust-hero-arrow.is-prev { left: 16px; }
.ust-hero-arrow.is-next { right: 16px; }
.ust-hero-playpause {
	position: absolute; z-index: 3; bottom: 16px; right: 16px;
	background: rgba(0,0,0,.35); color: #fff; border: none;
	width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: .8rem;
	display: flex; align-items: center; justify-content: center;
}
.ust-hero-playpause:hover { background: rgba(0,0,0,.55); }

@media (prefers-reduced-motion: reduce) {
	/* Kill the animated hand-off, but leave positioning transforms alone —
	   in the "slide" transition styles, transform is what parks slides
	   on/off screen, not just decoration. */
	.ust-hero-slide,
	.ust-hero-slide-bg,
	.ust-hero-slide-inner {
		transition: none !important;
	}
	.ust-bg-anim-zoom .ust-hero-slide-bg,
	.ust-bg-anim-blend .ust-hero-slide-bg,
	.ust-bg-anim-slide-zoom .ust-hero-slide-bg {
		transform: none !important;
	}
}

/* ---------- Quick action strip (below hero) ---------- */
.ust-quick-actions { position: relative; z-index: 4; margin-top: var(--ust-space-lg); margin-bottom: var(--ust-space-lg); }
/* Float the strip up over the hero's bottom edge, but only when a hero
   actually precedes it — otherwise (hero disabled) it sits in normal flow
   and would overlap the header above it instead. */
.ust-hero-slider + .ust-quick-actions { margin-top: -32px; }
.ust-quick-actions-track {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	background: var(--ust-surface);
	border-radius: var(--ust-radius-lg);
	box-shadow: var(--ust-shadow-lg);
	padding: 20px;
}
.ust-quick-action-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	border-radius: var(--ust-radius);
	color: var(--ust-surface-text);
	transition: background .15s ease;
}
.ust-quick-action-card:hover, .ust-quick-action-card:focus-visible { background: var(--ust-surface-2); text-decoration: none; }
.ust-quick-action-icon {
	flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--ust-color-topbar);
	color: #fff;
}
.ust-quick-action-body { display: flex; flex-direction: column; min-width: 0; }
.ust-quick-action-label { font-weight: 700; }
.ust-quick-action-desc { font-size: .875rem; color: var(--ust-surface-text-muted); }

@media (max-width: 960px) {
	.ust-quick-actions { margin-top: 0; }
	.ust-quick-actions-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ust-quick-actions-track { grid-template-columns: 1fr; gap: 4px; padding: 12px; }
	.ust-quick-action-card { min-height: 64px; }
}

/* ---------- Contact page band ---------- */
.ust-contact-band { background: var(--ust-color-footer-bottom-bg); color: #fff; padding: 50px 0; margin-top: 20px; }
.ust-contact-band h2 { color: #fff; }
.ust-contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.ust-contact-map iframe { width: 100%; height: 360px; border: 0; border-radius: var(--ust-radius); }
.ust-contact-info a { color: #fff; text-decoration: underline; }
@media (max-width: 782px) {
	.ust-contact-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
/* Footer Layout Builder (inc/footer-layout-builder.php): three rows (upper/
   main/lower), each a left/center/right zone grid — same drag-and-drop
   system as the header's rows (assets/js/header-preview-dragdrop.js), just
   scoped "footer". auto/1fr/auto (not the header's 1fr/auto/1fr) so the
   center zone — where wide content like the widget columns lives by
   default — gets all the room, while narrow side zones (copyright, social,
   logo) shrink to fit instead of being squeezed into a fixed fraction. */
.ust-footer-upper .ust-container,
.ust-footer-main .ust-container,
.ust-footer-bottom .ust-container {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
}
.ust-footer-upper-left, .ust-footer-main-left, .ust-footer-bottom-left { justify-self: start; display: flex; align-items: center; justify-content: flex-start; gap: 14px; }
.ust-footer-upper-center, .ust-footer-main-center, .ust-footer-bottom-center { justify-self: center; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; width: 100%; }
/* The width: 100% above is for real content — a footer menu or a row of
   widgets needs the full column to center and wrap multiple items across,
   unlike header's own center zone (no such rule), which only ever holds
   one compact thing (logo, search icon). An EMPTY footer center zone has
   no such need, but was still claiming the same full width: harmless on
   the real front end (0 height either way, nothing visible), but in the
   Customizer preview it stretched the zone's own hover marker AND its "+"
   add button (assets/js/header-preview-dragdrop.js) to a huge dashed
   rectangle spanning nearly the whole row, instead of the small compact
   box every other empty zone gets. Collapsing back to auto width while
   empty fixes that without touching the real-content case at all. */
.ust-zone-empty.ust-footer-upper-center,
.ust-zone-empty.ust-footer-main-center,
.ust-zone-empty.ust-footer-bottom-center {
	width: auto;
}
.ust-footer-upper-right, .ust-footer-main-right, .ust-footer-bottom-right { justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }

.ust-footer-upper, .ust-footer-main, .ust-footer-bottom {
	position: relative; /* required for the Customizer's edit-shortcut pencil to anchor correctly */
}
.ust-footer-upper .customize-partial-edit-shortcut,
.ust-footer-main .customize-partial-edit-shortcut,
.ust-footer-bottom .customize-partial-edit-shortcut {
	left: 0;
	right: auto;
	margin: -1px 0 0 29px;
}
.ust-footer-upper--tablet, .ust-footer-upper--mobile,
.ust-footer-main--tablet, .ust-footer-main--mobile,
.ust-footer-bottom--tablet, .ust-footer-bottom--mobile { display: none; }
@media (max-width: 960px) {
	.ust-footer-upper--desktop, .ust-footer-main--desktop, .ust-footer-bottom--desktop { display: none; }
	.ust-footer-upper--tablet, .ust-footer-main--tablet, .ust-footer-bottom--tablet { display: block; }
}
@media (max-width: 782px) {
	.ust-footer-upper--desktop, .ust-footer-upper--tablet,
	.ust-footer-main--desktop, .ust-footer-main--tablet,
	.ust-footer-bottom--desktop, .ust-footer-bottom--tablet { display: none; }
	.ust-footer-upper--mobile, .ust-footer-main--mobile, .ust-footer-bottom--mobile { display: block; }
}

.ust-footer-upper { padding: var(--ust-footer-pad-upper, 16px) 0; background: var(--ust-color-footer-bottom-bg); color: var(--ust-color-footer-bottom-text); }
.ust-footer-upper a { color: var(--ust-color-footer-bottom-text); }
.ust-footer-main { background: var(--ust-color-footer-main-bg); color: var(--ust-color-footer-main-text); padding: var(--ust-footer-pad-main, 44px) 0; }
.ust-footer-main a { color: var(--ust-color-footer-main-text); }
/* The widgets element's wrapper needs to actually stretch to fill its zone
   (a flex item defaults to content width) for .ust-footer-columns's own
   width:100% below to mean anything. */
.ust-footer-main .ust-header-zone > .ust-header-el[data-ums-el="widgets"] { flex: 1 1 auto; width: 100%; }
.ust-footer-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	width: 100%;
}
.ust-footer-columns h3 { color: var(--ust-color-footer-main-text); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; }
.ust-footer-columns ul { list-style: none; margin: 0; padding: 0; }
.ust-footer-columns li { margin-bottom: 8px; }
.ust-footer-column { min-width: 0; overflow-wrap: anywhere; }
.ust-footer-columns--align-center .ust-footer-column { text-align: center; }
.ust-footer-columns--align-center .ust-footer-column ul { display: inline-block; text-align: left; }
.ust-footer-columns--align-right .ust-footer-column { text-align: right; }
.ust-footer-columns--align-right .ust-footer-column ul { display: inline-block; text-align: right; }
/* A column with no widget assigned yet still needs a real drop target for
   dragging a widget into it (see assets/js/footer-widget-dragdrop.js). */
.ust-footer-column { min-height: 40px; }
.ust-footer-bottom { background: var(--ust-color-footer-bottom-bg); color: var(--ust-color-footer-bottom-text); padding: var(--ust-footer-pad-lower, 14px) 0; font-size: .9rem; }
.ust-footer-bottom a { color: var(--ust-color-footer-bottom-text); text-decoration: underline; }

/* ---------- Blog listing / single ---------- */
.ust-content-area { padding-top: 48px; padding-bottom: 48px; } /* keep the container's side gutters */
/* Block-built pages: sections can run edge to edge, everything else keeps a gutter. */
.ust-content-area--blocks { --ust-gutter: 24px; padding-left: 0; padding-right: 0; }
.ust-content-area--blocks > * { padding-left: var(--ust-gutter); padding-right: var(--ust-gutter); }
/* Full-width blocks break out of the site container to the whole window. They were only as wide
   as the container, which hid the problem while it was wider than the screen (1600px default) but
   left white side gaps once a site used a narrower container, or on a large monitor. */
.ust-content-area--blocks > .alignfull {
	width: auto;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* 100vw includes a classic (Windows) scrollbar: clip that sliver instead of scrolling sideways. */
.ust-site-content { overflow-x: clip; }
.ust-content-area--blocks > .wp-block-cover, .ust-content-area--blocks > .wp-block-image.alignfull { padding-left: 0; padding-right: 0; }
.ust-content-area--blocks > .wp-block-cover .wp-block-cover__inner-container { padding-left: var(--ust-gutter); padding-right: var(--ust-gutter); }
/* A page that opens (or closes) with a full-width section sits flush against the header (or footer) instead of floating in a white gap. */
.ust-content-area--blocks:has(> .alignfull:first-child) { padding-top: 0; }
.ust-content-area--blocks:has(> .alignfull:last-child) { padding-bottom: 0; }
.ust-content-area--blocks > .alignfull:first-child { margin-top: 0; }
.ust-content-area--blocks > .alignfull:last-child { margin-bottom: 0; }
.ust-entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ust-entry-card { border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius); overflow: hidden; background: var(--ust-surface); color: var(--ust-surface-text); }
.ust-entry-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.ust-entry-card-body { padding: 16px; }
.ust-entry-card h2 { font-size: 1.15rem; }

/* ---------- Featured post (blog index sticky post) ---------- */
.ust-entry-card-featured {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 32px;
	align-items: center;
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--ust-surface-border);
}
.ust-entry-card-featured__media { display: block; border-radius: var(--ust-radius-lg); overflow: hidden; aspect-ratio: 16/10; }
.ust-entry-card-featured__media img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.ust-entry-card-featured__badge {
	display: inline-block; background: var(--ust-color-button-bg); color: var(--ust-color-button-text);
	font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	padding: .3em .9em; border-radius: 999px; margin-bottom: 10px;
}
.ust-entry-card-featured__body h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); margin: 0 0 8px; }
@media (max-width: 782px) {
	.ust-entry-card-featured { grid-template-columns: 1fr; }
}
.ust-entry-meta { color: var(--ust-surface-text-muted); font-size: .875rem; margin-bottom: 10px; }
.ust-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.ust-pagination { flex-wrap: wrap; }
.ust-pagination a, .ust-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius); }

.ust-single-entry { max-width: 860px; margin: 0 auto; }
.ust-single-entry .ust-entry-meta { margin-bottom: 20px; }
.ust-single-entry img { border-radius: var(--ust-radius); }
.ust-single-entry .wp-block-image { margin: 1.6em 0; }

.ust-entry-categories { margin: 0 0 20px; }
.ust-entry-category-pill {
	display: inline-block; background: var(--ust-surface-2); color: var(--ust-surface-text);
	border-radius: 999px; padding: .3em 1em; font-size: .8rem; font-weight: 600; margin-right: 6px;
}
.ust-entry-category-pill:hover { background: var(--ust-color-topbar); color: #fff; text-decoration: none; }

.ust-entry-share { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ust-surface-border); }
.ust-entry-share-label { font-weight: 700; font-size: .85rem; }
.ust-entry-share a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--ust-surface-2); color: var(--ust-surface-text);
}
.ust-entry-share a:hover { background: var(--ust-color-topbar); color: #fff; text-decoration: none; }
.ust-entry-share-email { width: auto !important; padding: 0 1em; font-size: .8rem; font-weight: 700; }

.ust-post-navigation { display: flex; justify-content: space-between; gap: 20px; max-width: 860px; margin: 32px auto 0; }
.ust-post-nav-prev, .ust-post-nav-next { flex: 1 1 0; min-width: 0; }
.ust-post-nav-next { text-align: right; }
.ust-post-navigation a { display: block; font-weight: 700; }
@media (max-width: 600px) {
	.ust-post-navigation { flex-direction: column; }
	.ust-post-nav-next { text-align: left; }
}

/* ---------- Comments ---------- */
.ust-comments { max-width: 860px; margin: 40px auto 0; }
.ust-comments ol.comment-list { list-style: none; margin: 0; padding: 0; }
.ust-comments .comment-body { border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius); padding: 16px; margin-bottom: 16px; }
.ust-comments .comment-form input:not([type="checkbox"]):not([type="submit"]),
.ust-comments .comment-form textarea { width: 100%; padding: .7em .8em; min-height: 44px; border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius); margin-bottom: 12px; background: var(--ust-surface); color: var(--ust-surface-text); }
.ust-comments .comment-form input[type="checkbox"] { width: 24px; height: 24px; margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--ust-color-button-bg); }
.ust-comments .comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 4px; }
.ust-comments .comment-form input[type="submit"] { min-height: 44px; padding: .6em 1.6em; background: var(--ust-color-button-bg); color: var(--ust-color-button-text); border: 0; border-radius: var(--ust-radius); font-weight: 600; cursor: pointer; }

/* ---------- Forms ---------- */
.ust-search-form { display: flex; gap: 8px; }
.ust-search-form input[type="search"] { flex: 1; min-width: 0; min-height: 44px; padding: .6em .8em; border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius); background: var(--ust-surface); color: var(--ust-surface-text); }
.ust-search-form .ust-btn, .ust-search-form button { min-height: 44px; }

/* ---------- WhatsApp floating button ---------- */
.ust-whatsapp-button {
	position: fixed;
	bottom: 20px;
	z-index: 9000;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.ust-whatsapp-button:hover { opacity: .92; text-decoration: none; }
.ust-whatsapp-button.is-right { right: 20px; }
.ust-whatsapp-button.is-left { left: 20px; }

/* ---------- Mobile bottom navigation ---------- */
.ust-bottom-nav {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 8000;
	background: var(--ust-surface);
	border-top: 1px solid var(--ust-surface-border);
	box-shadow: 0 -4px 16px var(--ust-surface-shadow);
}
.ust-bottom-nav a {
	flex: 1;
	justify-content: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 4px 10px;
	color: var(--ust-color-nav-text);
	text-decoration: none;
	font-size: .68rem;
	font-weight: 600;
}
.ust-bottom-nav a:hover { color: var(--ust-color-nav-text-hover); text-decoration: none; }
/* Bottom nav only exists on phones, so its spacing must only apply there too. */
@media (max-width: 782px) { body.ust-has-bottom-nav { --ust-bottomnav-h: calc(68px + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--ust-bottomnav-h); } }

/* ---------- Downloads list ---------- */
.ust-downloads-list { list-style: none; margin: 0; padding: 0; }
.ust-downloads-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius);
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.ust-download-btn { padding: .4em 1.2em; font-size: .9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 782px) {
	.ust-bottom-nav { display: flex; }
	.ust-whatsapp-button { bottom: 74px; width: 50px; height: 50px; }
}

@media (max-width: 960px) {
	.ust-footer-columns { grid-template-columns: 1fr 1fr; }
	.ust-entry-grid { grid-template-columns: repeat(2, 1fr); }
}

/* The menu collapses into the menu button on tablets as well as phones (≤960px, the tablet header's
   range): a full menu rarely fits there and made the whole page scroll sideways. */
@media (max-width: 960px) {
	.ust-mobile-toggle { display: inline-flex; align-items: center; gap: 8px; }
	.ust-primary-nav {
		display: none;
		position: absolute;
		left: 0; right: 0; top: 100%;
		background: var(--ust-surface);
		box-shadow: 0 12px 24px var(--ust-surface-shadow);
		z-index: 60;
	}
	.ust-primary-nav.is-open { display: block; }
	.ust-header .ust-container { position: relative; flex-wrap: wrap; }
	.ust-menu { flex-direction: column; align-items: stretch; padding: 10px 0; }
	.ust-menu .sub-menu { position: static; box-shadow: none; display: none; padding-left: 14px; }
	.ust-menu li.ust-submenu-open > .sub-menu { display: block; }
	.ust-menu a { padding: 12px 20px; min-height: 44px; display: flex; align-items: center; }
	.ust-menu .menu-item-has-children > a { flex: 1 1 0; }
	.ust-menu .ust-submenu-toggle { width: 56px; min-height: 48px; margin: 0; border-inline-start: 1px solid var(--ust-surface-border); }
	.ust-menu .menu-item-has-children > .sub-menu { flex-basis: 100%; }
	.ust-primary-nav.is-open { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
	.ust-primary-nav-mobile-cta { display: block; padding: 16px 20px 4px; }
	.ust-primary-nav-mobile-cta .ust-btn { display: block; text-align: center; min-height: 44px; }
}
@media (max-width: 782px) {
	.ust-footer-main--desktop .ust-footer-columns { grid-template-columns: 1fr; }
}
/* Small laptops: tighter menu items so a full menu fits beside the logo. */
@media (min-width: 961px) and (max-width: 1200px) {
	.ust-menu > li > a { padding-left: 9px; padding-right: 9px; }
}

/* =========================================================
   Header Builder
   ========================================================= */
.ust-header-sticky #ust-masthead { position: sticky; top: 0; z-index: 200; }
.ust-header-transparent:not(.ust-scrolled) #ust-masthead {
	position: absolute;
	left: 0; right: 0; top: 0;
	background: transparent;
	border-bottom-color: transparent;
}
.ust-header-transparent:not(.ust-scrolled) .ust-header { background: transparent; border-bottom-color: transparent; }
.ust-header-transparent:not(.ust-scrolled) .ust-site-title a,
.ust-header-transparent:not(.ust-scrolled) .ust-menu a,
.ust-header-transparent:not(.ust-scrolled) .ust-mobile-toggle { color: #fff; border-color: #fff; }
.ust-header-transparent.ust-scrolled #ust-masthead { position: relative; }

.ust-header-hide-on-scroll #ust-masthead { position: sticky; top: 0; z-index: 200; transition: transform .25s ease; }
.ust-header-hide-on-scroll.ust-header-hidden #ust-masthead { transform: translateY(-100%); }

/* Off-canvas mobile menu — reuses the exact same .is-open toggle the
   dropdown style already relies on (assets/js/navigation.js); only the
   panel's own position/size/transition differ, so no JS changes needed
   for this to work correctly. */
@media (max-width: 960px) {
	.ust-mobile-menu-offcanvas .ust-primary-nav {
		display: block; position: fixed; top: 0; right: 0; bottom: 0; left: auto;
		width: 300px; max-width: 85vw; box-shadow: -8px 0 24px rgba(0,0,0,.2);
		transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
		background: var(--ust-surface); padding: 70px 20px 20px;
	}
	.ust-mobile-menu-offcanvas .ust-primary-nav.is-open { transform: translateX(0); }
	.ust-mobile-menu-offcanvas .ust-menu { flex-direction: column; align-items: stretch; padding: 0; }
}

/* =========================================================
   Menu Booster — mega menu
   ========================================================= */
.ust-menu li.ust-mega-menu > .sub-menu {
	display: none;
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	width: max-content;
	min-width: 480px;
	max-width: min(96vw, var(--ust-container-width));
	padding: 20px;
	gap: 8px 24px;
}
.ust-menu li.ust-mega-menu.ust-submenu-open > .sub-menu { display: grid; }
@media (hover: hover) and (min-width: 783px) { .ust-menu li.ust-mega-menu:hover > .sub-menu { display: grid; } }
@media (min-width: 783px) { .ust-menu li.ust-mega-menu:focus-within > .sub-menu { display: grid; } }
.ust-menu a[data-mega-columns="2"] + .sub-menu { grid-template-columns: repeat(2, 1fr); }
.ust-menu a[data-mega-columns="3"] + .sub-menu { grid-template-columns: repeat(3, 1fr); }
.ust-menu a[data-mega-columns="4"] + .sub-menu { grid-template-columns: repeat(4, 1fr); }
.ust-menu a[data-mega-columns="5"] + .sub-menu { grid-template-columns: repeat(5, 1fr); }
.ust-menu li.ust-mega-menu .sub-menu li { width: 100%; }
@media (max-width: 782px) {
	.ust-menu li.ust-mega-menu > .sub-menu { display: none; position: static; transform: none; grid-template-columns: 1fr !important; min-width: 0; padding-left: 14px; }
	.ust-menu li.ust-mega-menu.ust-submenu-open > .sub-menu { display: grid; }
}

/* =========================================================
   Breadcrumbs
   ========================================================= */
.ust-breadcrumbs { margin-bottom: 10px; font-size: .85rem; }
.ust-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ust-breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.ust-breadcrumbs a { color: var(--ust-color-page-title-text); opacity: .7; }
.ust-breadcrumbs a:hover { opacity: 1; }
.ust-breadcrumbs [aria-current="page"] { opacity: .9; }
.ust-breadcrumb-sep { opacity: .5; }

/* =========================================================
   Blog Booster
   ========================================================= */
.ust-entry-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ust-entry-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ust-entry-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.ust-entry-grid--list { grid-template-columns: 1fr; }
.ust-entry-grid--list .ust-entry-card { display: grid; grid-template-columns: 240px 1fr; gap: 20px; }
.ust-entry-grid--list .ust-entry-card img { height: 100%; aspect-ratio: auto; }
/* Responsive collapse for the column modifiers above. It must come AFTER them:
   equal-specificity rules win by source order, and the modifiers used to sit
   later in this file than the media queries, so grids never collapsed. */
.ust-entry-grid > * { min-width: 0; }
@media (max-width: 960px) {
	.ust-entry-grid--cols-3, .ust-entry-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ust-entry-grid, .ust-entry-grid--cols-2, .ust-entry-grid--cols-3, .ust-entry-grid--cols-4 { grid-template-columns: 1fr; }
}
.ust-entry-author { margin-left: 6px; }
.ust-entry-author::before { content: "·"; margin-right: 6px; }
.ust-entry-categories { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ust-color-topbar); margin: 0 0 6px; }

.ust-related-posts { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--ust-surface-border); }
.ust-related-posts h2 { text-align: center; margin-bottom: 24px; }

.ust-author-box {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	max-width: 860px;
	margin: 30px auto 0;
	padding: 20px;
	background: var(--ust-surface-2);
	border-radius: var(--ust-radius);
}
.ust-author-box img { border-radius: 50%; flex-shrink: 0; }
.ust-author-box-name { font-weight: 700; margin: 0 0 6px; color: var(--ust-color-heading); }
.ust-author-box-bio { margin: 0; color: var(--ust-surface-text-muted); font-size: .92rem; }

@media (max-width: 600px) {
	.ust-entry-grid--list .ust-entry-card { grid-template-columns: 1fr; }
}

/* =========================================================
   Footer Builder
   ========================================================= */
.ust-footer-columns--1 { grid-template-columns: 1fr; }
.ust-footer-columns--2 { grid-template-columns: repeat(2, 1fr); }
.ust-footer-columns--3 { grid-template-columns: repeat(3, 1fr); }
.ust-footer-columns--4 { grid-template-columns: repeat(4, 1fr); }
.ust-footer-columns--5 { grid-template-columns: repeat(5, 1fr); }
.ust-footer-columns--6 { grid-template-columns: repeat(6, 1fr); }
.ust-footer-columns--boxed .ust-footer-column {
	background: rgba(255,255,255,.06);
	border-radius: var(--ust-radius);
	padding: 20px;
}

.ust-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 8500;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: var(--ust-color-topbar);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.ust-back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
/* Desktop: keep the last footer row's right-hand links clear of the floating back-to-top button. */
@media (min-width: 783px) { .ust-footer-bottom--desktop .ust-container { padding-right: 76px; } }
@media (max-width: 782px) {
	.ust-back-to-top { bottom: 74px; }
	/* Room under the last footer line so the floating buttons never cover its links. */
	.ust-footer-bottom--mobile { padding-bottom: 72px; }
}

/* =========================================================
   Store (UMS Commerce)
   ========================================================= */
.umc-product-grid { display: grid; gap: 28px; margin: 0 0 40px; }
.umc-product-card {
	position: relative;
	background: var(--ust-surface);
	color: var(--ust-surface-text);
	border-radius: var(--ust-radius);
	overflow: hidden;
	box-shadow: 0 1px 3px var(--ust-surface-shadow);
	padding: 0 0 16px;
}
.umc-product-card__link { display: block; }
.umc-product-card__image img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 0; }
.umc-product-card__title, .umc-product-card__price { padding: 0 16px; overflow-wrap: anywhere; }
.umc-product-card__title { margin-top: 12px; }
.umc-product-card .umc-add-to-cart { margin: 4px 16px 0; min-height: 44px; }
.umc-add-to-cart, .umc-checkout__submit {
	background: var(--ust-color-button-bg);
	color: var(--ust-color-button-text);
	min-height: 44px;
	border-radius: var(--ust-radius);
}
.umc-add-to-cart:disabled { opacity: .55; }
.umc-cart__table { display: block; max-width: 100%; overflow-x: auto; }
.umc-checkout__form input, .umc-checkout__form textarea, .umc-checkout__form select { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; }
.umc-checkout__gateways label { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.umc-single-product { margin-top: 24px; }
.umc-single-product select { min-height: 44px; max-width: 100%; }

.ust-cart-link { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: inherit; }
.ust-cart-link-count {
	position: absolute; top: 2px; right: 0;
	min-width: 18px; padding: 0 5px; border-radius: 999px;
	background: var(--ust-color-button-bg); color: var(--ust-color-button-text);
	font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center;
}

.ust-wishlist-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.92);
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.ust-wishlist-btn.is-active { color: #c3164a; }
.ust-wishlist-btn.is-active svg { fill: currentColor; }
.ust-wishlist-btn:hover { background: #fff; }

.ust-sticky-cart {
	position: fixed;
	left: 0; right: 0; bottom: calc(var(--ust-bottomnav-h) + var(--ust-cookie-h));
	z-index: 8200;
	background: var(--ust-surface);
	border-top: 1px solid var(--ust-surface-border);
	box-shadow: 0 -4px 16px var(--ust-surface-shadow);
}
.ust-sticky-cart-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; }
.ust-sticky-cart-name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
	.ust-sticky-cart-name { display: none; }
	.umc-product-grid { gap: 16px; }
}

/* =========================================================
   Particles & Animated Backgrounds
   ========================================================= */
.ust-particles-fixed {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}
.ust-particles-canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	display: block;
}
/* Hero already has position:relative + overflow:hidden (see Hero slider
   rules above), so the canvas just needs to sit above the dark overlay
   (z-index 1) and below the slide text (z-index 2). */

@keyframes ustGradientShift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
body.ust-bg-effect-animated-gradient.ust-bg-location-site-wide {
	background: linear-gradient(120deg, var(--ust-bg-color-1, #fff), var(--ust-bg-color-2, #0a72d3), var(--ust-bg-color-1, #fff));
	background-size: 200% 200%;
	animation: ustGradientShift var(--ust-bg-speed, 10s) ease infinite;
}
body.ust-bg-effect-animated-gradient.ust-bg-location-hero .ust-hero-slider {
	background: linear-gradient(120deg, var(--ust-bg-color-1, #fff), var(--ust-bg-color-2, #0a72d3), var(--ust-bg-color-1, #fff));
	background-size: 200% 200%;
	animation: ustGradientShift var(--ust-bg-speed, 10s) ease infinite;
}
@media (prefers-reduced-motion: reduce) {
	body.ust-bg-effect-animated-gradient { animation: none; background-position: 0 0; }
	body.ust-bg-effect-animated-gradient .ust-hero-slider { animation: none; background-position: 0 0; }
}

/* =========================================================
   Jobs Board ([ust_jobs_grid], [ust_job_ads], single job)
   ========================================================= */
.ust-page-intro { margin-bottom: 30px; }

.ust-job-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.ust-job-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.ust-job-search-form input[type="search"] {
	flex: 1 1 240px;
	min-height: 44px;
	padding: .6em .9em;
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius);
	background: var(--ust-surface);
	color: var(--ust-surface-text);
	font-size: 1rem;
}
.ust-job-search-form select {
	min-height: 44px;
	padding: .5em .8em;
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius);
	background: var(--ust-surface);
	color: var(--ust-surface-text);
	font-size: 1rem;
}
.ust-job-search-form .ust-btn { min-height: 44px; }

.ust-job-filters-toggle {
	display: none;
	width: 100%;
	min-height: 44px;
	margin-bottom: 12px;
	padding: .6em 1em;
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius);
	background: var(--ust-surface);
	color: var(--ust-surface-text);
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}
.ust-job-filters-toggle::after { content: "\25BE"; float: right; }
.ust-job-filters-toggle[aria-expanded="true"]::after { content: "\25B4"; }

.ust-job-filters-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 20px; }
.ust-job-filter-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ust-job-sort-label { font-size: .85rem; font-weight: 700; color: var(--ust-surface-text-muted); }
.ust-job-filter {
	padding: .5em 1.2em;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: var(--ust-surface-2);
	color: var(--ust-surface-text);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
}
.ust-job-filter:hover { background: var(--ust-color-topbar); color: #fff; text-decoration: none; }
.ust-job-filter.is-active { background: var(--ust-color-topbar); color: #fff; }
.ust-job-filter-clear {
	font-size: .85rem;
	font-weight: 700;
	color: var(--ust-color-topbar);
	text-decoration: underline;
	margin-left: auto;
}
.ust-job-result-count { font-size: .9rem; color: var(--ust-surface-text-muted); margin: 0 0 16px; }
.ust-job-empty-state { text-align: center; padding: 40px 20px; background: var(--ust-surface-2); border-radius: var(--ust-radius); }
.ust-job-empty-state p { margin-bottom: 16px; }

.ust-job-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 30px;
}
.ust-job-card {
	display: flex;
	flex-direction: column;
	position: relative;
	background: var(--ust-fixed-dark);
	border-radius: var(--ust-radius);
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 6px 18px var(--ust-surface-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}
.ust-job-card:hover, .ust-job-card:focus-visible { text-decoration: none; opacity: 1; transform: translateY(-3px); box-shadow: 0 10px 26px var(--ust-surface-shadow); }
.ust-job-card img { width: 100%; height: 190px; object-fit: cover; }
.ust-job-card.is-closed { opacity: .65; }
.ust-job-card.is-closed:hover { transform: none; }

.ust-job-card-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 1; }
.ust-job-badge {
	display: inline-block;
	padding: .3em .8em;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	background: var(--ust-surface);
	color: var(--ust-surface-text);
}
.ust-job-badge.is-urgent { background: #d63b3b; color: #fff; }
.ust-job-badge.is-featured { background: var(--ust-color-button-bg); color: var(--ust-color-button-text); }
.ust-job-badge.is-new { background: #1f8b4c; color: #fff; }
.ust-job-badge.is-closing-soon { background: #c97a12; color: #fff; }
.ust-job-badge.is-closed { background: #555; color: #fff; }

.ust-job-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ust-job-card-title { display: block; font-weight: 700; color: #fff; font-size: 1.05rem; line-height: 1.35; }
.ust-job-card-employer { color: rgba(255,255,255,.75); font-size: .85rem; font-weight: 600; }
.ust-job-card-meta { color: rgba(255,255,255,.75); font-size: .85rem; }
.ust-job-card-salary { color: #fff; font-size: .9rem; font-weight: 700; }
.ust-job-card-deadline { color: rgba(255,255,255,.75); font-size: .8rem; }
.ust-job-card-deadline.is-closed-label { color: #f2b8b8; font-weight: 700; }
.ust-job-card-cta { margin-top: auto; padding-top: 10px; font-size: .85rem; font-weight: 700; color: var(--ust-color-button-bg); }

.ust-job-single-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 32px; align-items: start; }
.ust-job-meta, .ust-job-categories { margin-bottom: 10px; }
.ust-job-single-badges { position: static; margin-bottom: 16px; }
.ust-job-meta-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
	gap: 12px 20px;
	margin: 0 0 24px;
	padding: 18px 20px;
	background: var(--ust-surface-2);
	border-radius: var(--ust-radius);
}
.ust-job-meta-item dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ust-surface-text-muted); margin: 0 0 2px; }
.ust-job-meta-item dd { margin: 0; font-weight: 600; }
.ust-job-category-pill {
	display: inline-block;
	background: var(--ust-surface-2);
	border-radius: 999px;
	padding: .3em 1em;
	font-size: .8rem;
	font-weight: 600;
	margin-right: 6px;
}
.ust-job-print-link { font-size: .85rem; }
.ust-job-is-closed .ust-job-apply-closed { text-align: center; }

/* ---------- Case studies ---------- */
.ust-case-study-grid {
	display: grid;
	/* At most three across: wide screens fitted five, leaving lone cards on the last row. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(280px, calc((100% - 2 * var(--ust-space-md)) / 3))), 1fr));
	gap: var(--ust-space-md);
	padding: var(--ust-space-md) 0;
}
.ust-case-study-card {
	display: block; text-decoration: none; color: var(--ust-surface-text);
	background: var(--ust-surface); border-radius: var(--ust-radius-lg);
	overflow: hidden; box-shadow: var(--ust-shadow-md);
}
.ust-case-study-card:hover { text-decoration: none; }
/* Client logo / monogram box: logos of any shape sit in the same fixed-height white panel. */
.ust-case-study-card__brand {
	display: flex; align-items: center; justify-content: center; height: 140px; padding: 20px 28px;
	background: #fff; border-bottom: 1px solid var(--ust-surface-border);
}
.ust-case-study-card__logo { max-height: 100px; max-width: 100%; width: auto; height: auto; object-fit: contain; margin: 0; }
.ust-case-study-card__monogram {
	display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 22px;
	background: linear-gradient(135deg, var(--ust-color-topbar), var(--ust-color-button-bg));
	color: #fff; font-size: 2rem; font-weight: 800; letter-spacing: .02em;
}
.ust-case-study-archive-intro { max-width: 46rem; margin: 0 auto var(--ust-space-sm); text-align: center; font-size: 1.1rem; color: var(--ust-surface-text-muted); }
.ust-case-study-card__image { aspect-ratio: 4/3; overflow: hidden; background: var(--ust-surface-2); }
.ust-case-study-card__image img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.ust-case-study-card__body { padding: var(--ust-space-sm); }
.ust-case-study-card__client { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ust-color-topbar); margin-bottom: 4px; }
.ust-case-study-card__title { margin: 0 0 6px; font-size: 1.15rem; }
.ust-case-study-card__excerpt { margin: 0; font-size: .9rem; color: var(--ust-surface-text-muted); }

.ust-case-study-meta { margin-bottom: var(--ust-space-sm); }
.ust-case-study-industry-pill {
	display: inline-block; background: var(--ust-surface-2); border-radius: 999px;
	padding: .3em 1em; font-size: .8rem; font-weight: 600; margin-left: 8px;
}
.ust-case-study-hero { margin-bottom: var(--ust-space-md); border-radius: var(--ust-radius-lg); overflow: hidden; }
.ust-case-study-hero img { width: 100%; margin: 0; }
.ust-case-study-stats {
	display: flex; flex-wrap: wrap; gap: var(--ust-space-md);
	background: var(--ust-surface-2); border-radius: var(--ust-radius-lg);
	padding: var(--ust-space-md); margin-bottom: var(--ust-space-md);
}
.ust-case-study-stat { flex: 1 1 120px; text-align: center; }
.ust-case-study-stat__number { font-size: 2rem; font-weight: 800; color: var(--ust-color-topbar); }
.ust-case-study-stat__label { color: var(--ust-surface-text-muted); font-size: .9rem; }
.ust-job-description { margin-bottom: 30px; }

/* ---------- Knowledge base ---------- */
.ust-kb-search { display: flex; gap: 10px; margin-bottom: var(--ust-space-lg); max-width: 520px; }
.ust-kb-search input[type="search"] {
	flex: 1; padding: .7em 1em; border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius-pill); background: var(--ust-surface); color: var(--ust-surface-text); font-size: 1rem;
}
.ust-kb-search button {
	padding: .7em 1.6em; border: none; border-radius: var(--ust-radius-pill);
	background: var(--ust-color-button-bg); color: var(--ust-color-button-text); font-weight: 600; cursor: pointer;
}
.ust-kb-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--ust-space-md); margin-bottom: var(--ust-space-lg); }
.ust-kb-category-tile {
	display: block; text-decoration: none; color: var(--ust-surface-text);
	background: var(--ust-surface); border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius-lg);
	padding: var(--ust-space-md); box-shadow: var(--ust-shadow-sm);
}
.ust-kb-category-tile:hover { text-decoration: none; box-shadow: var(--ust-shadow-md); }
.ust-kb-category-tile__name { margin: 0 0 6px; font-size: 1.1rem; }
.ust-kb-category-tile__desc { margin: 0 0 10px; font-size: .9rem; color: var(--ust-surface-text-muted); }
.ust-kb-category-tile__count { font-size: .8rem; font-weight: 600; color: var(--ust-color-topbar); }

.ust-kb-all-heading { margin-top: 0; }
.ust-kb-article-list { list-style: none; margin: 0; padding: 0; }
.ust-kb-article-list li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	padding: 12px 0; border-bottom: 1px solid var(--ust-surface-border);
}
.ust-kb-article-list__category { font-size: .8rem; color: var(--ust-surface-text-muted); white-space: nowrap; }

.ust-kb-single-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: var(--ust-space-lg); }
.ust-kb-article-categories { margin-bottom: var(--ust-space-sm); }
.ust-kb-category-pill {
	display: inline-block; background: var(--ust-surface-2); border-radius: 999px;
	padding: .3em 1em; font-size: .8rem; font-weight: 600; margin-right: 6px; text-decoration: none; color: var(--ust-surface-text);
}
.ust-kb-single-sidebar h2 { font-size: 1.1rem; }
.ust-kb-related-list { list-style: none; margin: 0; padding: 0; }
.ust-kb-related-list li { padding: 8px 0; border-bottom: 1px solid var(--ust-surface-border); }
@media (max-width: 782px) {
	.ust-kb-single-grid { grid-template-columns: 1fr; }
}

.ust-job-apply { background: var(--ust-surface-2); border-radius: var(--ust-radius); padding: 30px; }
.ust-job-apply-form p { margin-bottom: 16px; }
.ust-job-apply-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.ust-job-apply-form input[type="text"],
.ust-job-apply-form input[type="email"],
.ust-job-apply-form input[type="tel"],
.ust-job-apply-form input[type="file"],
.ust-job-apply-form textarea {
	width: 100%;
	padding: .7em .9em;
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius);
	background: var(--ust-surface);
	color: var(--ust-surface-text);
	font-family: inherit;
	font-size: 1rem;
}
.ust-job-apply-form .ust-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ust-form-notice { padding: 14px 18px; border-radius: var(--ust-radius); margin-bottom: 20px; font-weight: 600; }
.ust-form-notice.is-success { background: color-mix(in srgb, var(--ust-status-success) 12%, var(--ust-surface)); color: color-mix(in srgb, var(--ust-status-success) 55%, var(--ust-surface-text)); }
.ust-form-notice.is-error { background: color-mix(in srgb, var(--ust-status-error) 12%, var(--ust-surface)); color: color-mix(in srgb, var(--ust-status-error) 55%, var(--ust-surface-text)); }

/* Inline field validation (assets/js/form-validation.js) */
.ust-field-error {
	display: block;
	margin-top: 4px;
	font-size: .85rem;
	font-weight: 700;
	color: var(--ust-status-error, #a02323);
}
.ust-field-error:empty { display: none; }
.ust-field-invalid { border-color: var(--ust-status-error, #a02323) !important; }

/* ---------- Contact Form block ---------- */
.ust-contact-form p { margin-bottom: 16px; }
.ust-contact-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.ust-contact-form input[type="text"],
.ust-contact-form input[type="email"],
.ust-contact-form input[type="tel"],
.ust-contact-form textarea {
	width: 100%;
	padding: .7em .9em;
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius);
	background: var(--ust-surface);
	color: var(--ust-surface-text);
	font-family: inherit;
	font-size: 1rem;
}
.ust-contact-form input[type="url"],
.ust-contact-form input[type="number"],
.ust-contact-form input[type="date"],
.ust-contact-form input[type="time"],
.ust-contact-form select {
	width: 100%;
	padding: .7em .9em;
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius);
	background: var(--ust-surface);
	color: var(--ust-surface-text);
	font-family: inherit;
	font-size: 1rem;
}
/* Half-width fields pair up two per row from tablet width up. */
.ust-contact-form__fields { display: flex; flex-wrap: wrap; column-gap: 16px; }
.ust-contact-form__fields > .ust-cf-field { flex: 1 1 100%; min-width: 0; }
@media (min-width: 640px) {
	.ust-contact-form__fields > .ust-cf-field--half { flex-basis: calc(50% - 8px); }
}
.ust-cf-field--choices { border: 0; padding: 0; margin: 0 0 16px; }
.ust-cf-field--choices legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
/* Short options (all 24 characters or fewer) flow side by side; longer ones stack. */
.ust-cf-choices--inline { display: flex; flex-wrap: wrap; gap: 8px; }
.ust-cf-choices--inline .ust-cf-choice { margin: 0; }
/* Short options as tappable chips: the whole 44px pill is the target, the chosen one is highlighted. */
.ust-cf-choices--inline .ust-cf-choice {
	min-height: 44px; padding: 8px 14px; box-sizing: border-box;
	border: 1px solid var(--ust-surface-border); border-radius: 999px; background: var(--ust-surface);
	transition: border-color .15s ease, background-color .15s ease;
}
.ust-cf-choices--inline .ust-cf-choice:hover { border-color: var(--ust-color-button-bg); }
.ust-cf-choices--inline .ust-cf-choice:has(input:checked) {
	border-color: var(--ust-color-button-bg);
	background: color-mix(in srgb, var(--ust-color-button-bg) 10%, var(--ust-surface));
	font-weight: 600;
}
.ust-cf-choices--inline .ust-cf-choice:has(input:focus-visible) { outline: 2px solid var(--ust-color-topbar); outline-offset: 2px; }
/* Stacked (long) options: still a full-row 44px target. */
.ust-cf-choices:not(.ust-cf-choices--inline) .ust-cf-choice { min-height: 44px; }
.ust-cf-consent__label { align-items: flex-start; min-height: 44px; font-size: .92rem; line-height: 1.5; }
.ust-cf-consent__label input { margin-top: .2em; flex-shrink: 0; }
.ust-cf-choice { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0 0 6px; cursor: pointer; }
.ust-cf-choice input { width: 1.1em; height: 1.1em; margin: 0; accent-color: var(--ust-color-button-bg); }
.ust-contact-form .ust-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ust-cf-field-editor { border-top: 1px solid var(--ust-surface-border); padding-top: 10px; margin-top: 10px; }
.ust-cf-field-editor:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.ust-job-ads { display: flex; flex-direction: column; gap: 4px; }
.ust-job-ad {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--ust-color-topbar);
	color: #fff;
	text-decoration: none;
	padding: 14px;
}
.ust-job-ad img { width: 70px; height: 70px; object-fit: cover; border-radius: var(--ust-radius); flex-shrink: 0; }
.ust-job-ad span { font-weight: 700; }
.ust-job-ad:hover { opacity: .9; text-decoration: none; color: #fff; }
.ust-job-ad.is-closed { opacity: .6; }
.ust-job-ad-closed { font-weight: 600 !important; font-size: .75rem; text-transform: uppercase; margin-left: auto; }

/* Sticky mobile "Apply Now" bar — single job page only, hidden on desktop
   where the in-page application form is already visible without scrolling far. */
.ust-job-sticky-apply {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	align-items: center;
	gap: 12px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--ust-surface);
	border-top: 1px solid var(--ust-surface-border);
	box-shadow: 0 -6px 18px rgba(0,0,0,.12);
}
.ust-job-sticky-apply-title { flex: 1; font-size: .85rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ust-job-sticky-apply .ust-btn { flex-shrink: 0; min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 960px) {
	.ust-job-grid { grid-template-columns: repeat(2, 1fr); }
	.ust-job-single-grid { grid-template-columns: 1fr; }
	.ust-job-sticky-apply { display: flex; }
	.ust-job-single-main { padding-bottom: 70px; }
}
@media (max-width: 600px) {
	.ust-job-grid { grid-template-columns: 1fr; }
	.ust-job-filter-clear { margin-left: 0; }
	.ust-job-filters-toggle { display: block; }
	.ust-job-filter-groups { display: none; }
	.ust-job-filter-groups.is-open { display: block; }
	.ust-job-search-form select { flex: 1 1 100%; }
}
@media (min-width: 1440px) {
	.ust-job-grid { grid-template-columns: repeat(4, 1fr); }
}

@media print {
	.ust-header, .ust-footer, .ust-job-sticky-apply, .ust-job-apply,
	.ust-job-single-sidebar, .ust-job-print-link, .ust-mobile-toggle,
	.ust-topbar { display: none !important; }
	.ust-job-single-grid { grid-template-columns: 1fr; display: block; }
}

/* =========================================================
   Services Tabs / two-column layout (also used by Management)
   ========================================================= */
.ust-services-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.ust-services-sidebar { position: sticky; top: 20px; }
.ust-services-sidebar h2 { font-size: 1.1rem; margin-bottom: 16px; }

.ust-services-tabs { display: grid; grid-template-columns: 220px 1fr; background: var(--ust-surface-2); border-radius: var(--ust-radius); overflow: hidden; }
.ust-services-nav { display: flex; flex-direction: column; background: var(--ust-fixed-dark); }
.ust-services-tab {
	appearance: none;
	border: 0;
	background: transparent;
	color: #fff;
	text-align: left;
	padding: 16px 20px;
	font-weight: 700;
	letter-spacing: .03em;
	cursor: pointer;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.ust-services-tab:hover { background: rgba(255,255,255,.06); }
.ust-services-tab.is-active { background: var(--ust-color-topbar); }
.ust-services-panels { padding: 30px; }
.ust-services-panel h2 { margin-top: 0; color: var(--ust-color-button-bg); }

@media (max-width: 960px) {
	.ust-services-layout { grid-template-columns: 1fr; }
	.ust-services-sidebar { position: static; }
}
@media (max-width: 700px) {
	.ust-services-tabs { grid-template-columns: 1fr; }
	.ust-services-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Services grid (icon cards) ---------- */
.ust-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 30px;
}
.ust-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	background: var(--ust-surface);
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius-lg);
	padding: 28px 24px;
	text-align: left;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ust-service-card:hover, .ust-service-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--ust-shadow-md);
	border-color: transparent;
}
.ust-service-card.is-featured { border-color: var(--ust-color-button-bg); background: var(--ust-surface-2); }
.ust-service-card-badge {
	position: absolute; top: 16px; right: 16px;
	background: var(--ust-color-button-bg); color: var(--ust-color-button-text);
	font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
	padding: .3em .8em; border-radius: 999px;
}
.ust-service-card-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--ust-color-topbar);
	color: #fff;
}
.ust-service-card-title { margin: 0; font-size: 1.15rem; }
.ust-service-card-excerpt { margin: 0; color: var(--ust-surface-text-muted); font-size: .92rem; }
.ust-service-card-link {
	margin-top: auto;
	padding-top: 6px;
	font-weight: 700;
	color: var(--ust-color-topbar);
	display: inline-flex; align-items: center; gap: 6px;
}
.ust-service-card-link:hover { text-decoration: none; gap: 10px; }

.ust-services-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ust-services-grid--cols-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ust-services-grid--cols-4 .ust-service-card { padding: 24px 20px; }
@media (max-width: 1100px) { .ust-services-grid--cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) { .ust-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ust-services-grid { grid-template-columns: 1fr; } }

/* ---------- Block styles: Card, Checkmarks, Eyebrow (inc/blocks.php) ---------- */
/* Card (core/group): a surface-colored panel that follows dark mode; a lone card in a column fills its height so a row of cards lines up. */
.wp-block-group.is-style-ust-card {
	background: var(--ust-surface);
	color: var(--ust-surface-text);
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius-lg);
	padding: 28px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.wp-block-group.is-style-ust-card:hover { transform: translateY(-3px); box-shadow: var(--ust-shadow-md); }
.wp-block-group.is-style-ust-card > :first-child { margin-top: 0; }
.wp-block-group.is-style-ust-card > :last-child { margin-bottom: 0; }
.wp-block-column > .wp-block-group.is-style-ust-card:only-child,
.wp-block-column > .ust-price:only-child { height: 100%; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .wp-block-group.is-style-ust-card:hover { transform: none; } }
/* Checkmarks (core/list). */
.wp-block-list.is-style-ust-checklist { list-style: none; padding-left: 0; }
.wp-block-list.is-style-ust-checklist li { position: relative; padding-left: 1.75em; margin: .45em 0; }
.wp-block-list.is-style-ust-checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--ust-color-button-bg); }
/* Eyebrow / kicker (core/paragraph): small uppercase label above a heading. */
p.is-style-ust-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700; margin-bottom: .5em; }

/* ---------- Page-building blocks (inc/layout-blocks.php) ---------- */
/* Buttons in theme styles (UMS Buttons, Hero). */
.ust-button-group { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6rem 0 0; }
.ust-button-group--center { justify-content: center; }
.ust-button-group--right { justify-content: flex-end; }
.ust-btn.ust-btn--primary { background: var(--ust-color-button-bg); color: var(--ust-color-button-text); }
.ust-btn.ust-btn--secondary { background: var(--ust-color-topbar); color: var(--ust-color-topbar-text); }
.ust-btn.ust-btn--outline { background: transparent; color: var(--ust-color-topbar); box-shadow: inset 0 0 0 2px currentColor; }
.ust-btn.ust-btn--outline-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.ust-btn.ust-btn--outline:hover, .ust-btn.ust-btn--outline-light:hover { opacity: 1; background: rgba(127,127,127,.12); }

/* Light / dark text tone for a colored band (Section, Hero) — set automatically from its background. */
.ust-tone-light { color: #fff; }
.ust-tone-light :is(h1, h2, h3, h4, h5, h6) { color: #fff; }
.ust-tone-light .ust-text-tone--muted, .ust-tone-light .ust-section-heading__text { color: rgba(255,255,255,.82); }
.ust-tone-light a:not(.ust-btn):not(.ust-icon-box__link) { color: color-mix(in srgb, var(--ust-color-button-bg) 45%, #fff); }
.ust-tone-light :is(.ust-section-heading__eyebrow, .ust-hero__eyebrow) { color: var(--ust-accent, color-mix(in srgb, var(--ust-color-button-bg) 55%, #fff)); }
.ust-tone-dark { color: var(--ust-surface-text); }

/* Section */
.ust-section { box-sizing: border-box; margin-top: 0; margin-bottom: 0; padding: var(--ust-sec-pt, 88px) 24px var(--ust-sec-pb, 88px); }
.ust-content-area--blocks > .ust-section { padding-left: 24px; padding-right: 24px; }
.ust-section__inner { max-width: var(--ust-sec-w, 1140px); margin: 0 auto; }
.ust-section--full .ust-section__inner { max-width: none; }
/* Scoped through .ust-section so these beat each block's own margin reset
   (.ust-text / .ust-heading { margin-top: 0 } come later at equal specificity). */
.ust-section .ust-section__inner > * { margin-top: 0; margin-bottom: 0; }
.ust-section .ust-section__inner > * + * { margin-top: 1.5rem; }
.ust-section .ust-section__inner > .ust-section-heading + * { margin-top: 0; }
.ust-section .ust-section__inner > .ust-section-heading { margin-bottom: 2.5rem; }
@media (max-width: 960px) { .ust-section { padding-top: var(--ust-sec-pt-t, 64px); padding-bottom: var(--ust-sec-pt-t, 64px); } }
@media (max-width: 600px) { .ust-section { padding-top: var(--ust-sec-pt-m, 48px); padding-bottom: var(--ust-sec-pt-m, 48px); } }

/* Section Heading */
.ust-section-heading { max-width: 820px; margin: 0 auto 2.5rem; text-align: center; }
.ust-section-heading--left { margin-left: 0; text-align: left; }
.ust-section-heading--right { margin-right: 0; text-align: right; }
.ust-section-heading__eyebrow, .ust-hero__eyebrow { margin: 0 0 .65rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ust-accent, var(--ust-color-button-bg)); }
.ust-section-heading__title { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; }
.ust-section-heading__text { margin: .9rem 0 0; font-size: 1.1rem; line-height: 1.6; color: var(--ust-surface-text-muted); }

/* Icon Box */
.ust-icon-box { display: flex; flex-direction: column; box-sizing: border-box; height: 100%; }
.ust-icon-box--card { background: var(--ust-surface); color: var(--ust-surface-text); border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius-lg); padding: 28px; transition: transform .2s ease, box-shadow .2s ease; }
.ust-icon-box--card:hover { transform: translateY(-3px); box-shadow: var(--ust-shadow-md); }
.ust-icon-box--tinted { background: color-mix(in srgb, var(--ust-color-button-bg) 8%, var(--ust-surface)); color: var(--ust-surface-text); border-radius: var(--ust-radius-lg); padding: 28px; }
.ust-icon-box--card :is(h2, h3, h4, h5), .ust-icon-box--tinted :is(h2, h3, h4, h5) { color: var(--ust-color-heading); }
.ust-icon-box--inline { flex-direction: row; align-items: flex-start; gap: 16px; }
.ust-icon-box--inline > .ust-icon-block { margin: 0; }
.ust-icon-box--align-center { align-items: center; text-align: center; }
.ust-icon-box__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ust-icon-box__title { margin: 0 0 .5rem; font-size: 1.2rem; line-height: 1.3; }
.ust-icon-box__text { margin: 0; color: var(--ust-surface-text-muted); line-height: 1.6; }
.ust-tone-light .ust-icon-box--plain .ust-icon-box__text { color: rgba(255,255,255,.82); }
.ust-icon-box__link { margin-top: auto; padding-top: 6px; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ust-accent, var(--ust-color-button-bg)); text-decoration: none; }
.ust-icon-box__link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .ust-icon-box--card:hover { transform: none; } }

/* Hero */
.ust-hero { box-sizing: border-box; margin-top: 0; margin-bottom: 0; padding: 120px 24px; }
.ust-content-area--blocks > .ust-hero { padding-left: 24px; padding-right: 24px; }
.ust-hero--medium { padding-top: 96px; padding-bottom: 96px; }
.ust-hero--compact { padding-top: 72px; padding-bottom: 72px; }
.ust-hero__inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.ust-hero--compact .ust-hero__title { max-width: 24ch; }
@media (min-width: 900px) { .ust-hero--with-panel .ust-hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.ust-hero__title { margin: 0 0 1.1rem; font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.08; font-weight: 800; }
.ust-hero--compact .ust-hero__title, .ust-hero--medium .ust-hero__title { font-size: clamp(2rem, 4.2vw, 3rem); }
.ust-hero__text { margin: 0; max-width: 40rem; font-size: 1.2rem; line-height: 1.6; opacity: .9; }
.ust-hero__note { margin: 1.1rem 0 0; font-size: .95rem; opacity: .9; }
.ust-hero__panel { border-radius: 18px; padding: 32px; background: var(--ust-surface-2); }
.ust-tone-light .ust-hero__panel { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.ust-hero__panel-title { margin: 0 0 .8rem; font-weight: 700; color: var(--ust-accent, var(--ust-color-button-bg)); }
.ust-tone-light .ust-hero__panel-title { color: var(--ust-accent, color-mix(in srgb, var(--ust-color-button-bg) 55%, #fff)); }
.ust-hero__panel-list { list-style: none; margin: 0; padding: 0; }
.ust-hero__panel-list li { position: relative; padding: .4rem 0 .4rem 1.75rem; }
.ust-hero__panel-list li::before { content: "\2713"; position: absolute; left: 0; font-weight: 800; color: var(--ust-color-button-bg); }
.ust-hero .ust-hero__panel-list a { color: inherit; text-decoration: none; }
.ust-hero .ust-hero__panel-list a:hover { text-decoration: underline; }
@media (max-width: 600px) { .ust-hero { padding-top: 64px; padding-bottom: 64px; } }

/* Hero background slideshow + Ken Burns (ust/hero "slides"). */
.ust-hero--slides { position: relative; overflow: hidden; isolation: isolate; background-color: var(--ust-color-footer-main-bg, #0b1f33); }
.ust-hero__slides { position: absolute; inset: 0; z-index: -2; }
.ust-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; overflow: hidden; }
.ust-hero__slide.is-active { opacity: 1; }
.ust-hero__slide-img { width: 100%; height: 100%; object-fit: cover; margin: 0; max-width: none; }
/* Brand-tinted scrim so headline and buttons stay readable over any photo. */
.ust-hero--slides::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(105deg, color-mix(in srgb, var(--ust-color-footer-main-bg, #0b1f33) 92%, transparent) 0%, color-mix(in srgb, var(--ust-color-footer-main-bg, #0b1f33) 78%, transparent) 45%, color-mix(in srgb, var(--ust-color-topbar) 45%, transparent) 100%);
}
@media (max-width: 782px) {
	.ust-hero--slides::before { background: color-mix(in srgb, var(--ust-color-footer-main-bg, #0b1f33) 82%, transparent); }
}
.ust-hero--kenburns .ust-hero__slide.is-active .ust-hero__slide-img { animation: ust-kenburns 14s ease-out both; }
.ust-hero--kenburns .ust-hero__slide:nth-child(2n).is-active .ust-hero__slide-img { animation-name: ust-kenburns-alt; }
@keyframes ust-kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
@keyframes ust-kenburns-alt { from { transform: scale(1.14) translate(2%, 1%); } to { transform: scale(1) translate(0, 0); } }
.ust-hero__dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 4px; z-index: 1; }
.ust-hero__dot { width: 32px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.ust-hero__dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(255,255,255,.5); transition: width .2s ease, background .2s ease; }
.ust-hero__dot.is-active::after { width: 22px; margin-left: -11px; border-radius: 4px; background: #fff; }
.ust-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
	.ust-hero--kenburns .ust-hero__slide.is-active .ust-hero__slide-img { animation: none; }
	.ust-hero__slide { transition: none; }
}

/* UMS Heading / UMS Text */
.ust-heading { margin-top: 0; margin-bottom: .6em; }
.ust-heading--small { font-size: 1.15rem; }
.ust-heading--large { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.15; }
.ust-heading--display { font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.05; }
.ust-heading--underline::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; margin-top: .45em; background: var(--ust-accent, var(--ust-color-button-bg)); }
.ust-heading--underline.has-text-align-center::after { margin-left: auto; margin-right: auto; }
.ust-heading--underline.has-text-align-right::after { margin-left: auto; }
.ust-text { margin-top: 0; margin-bottom: 1em; line-height: 1.7; }
.ust-text--lead { font-size: 1.2rem; line-height: 1.6; }
.ust-text--small { font-size: .9rem; }
.ust-text--capped.has-text-align-center { margin-left: auto; margin-right: auto; }
.ust-text-tone--muted { color: var(--ust-surface-text-muted); }
.ust-text-tone--accent { color: var(--ust-color-button-bg); }
.ust-text-tone--brand { color: var(--ust-color-topbar); }

/* ---------- Icon block (inc/icon-block.php) ---------- */
.ust-icon-block { display: flex; margin: 0 0 16px; }
.ust-icon-block--align-center { justify-content: center; }
.ust-icon-block--align-right { justify-content: flex-end; }
.ust-icon-block__badge {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: var(--ust-icon-size, 56px); height: var(--ust-icon-size, 56px);
	color: var(--ust-icon-color, var(--ust-color-button-bg));
	background: var(--ust-icon-bg, color-mix(in srgb, var(--ust-icon-color, var(--ust-color-button-bg)) 14%, transparent));
	border-radius: 14px;
}
.ust-icon-block--circle .ust-icon-block__badge { border-radius: 50%; }
.ust-icon-block--square .ust-icon-block__badge { border-radius: 0; }
.ust-icon-block--none .ust-icon-block__badge { background: none; width: auto; height: auto; }
.ust-icon-block__link { display: inline-flex; text-decoration: none; }
.ust-icon-block__badge svg { display: block; }

/* ---------- Single service ---------- */
.ust-service-single-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.ust-service-single-hero { margin-bottom: var(--ust-space-md); border-radius: var(--ust-radius-lg); overflow: hidden; }
.ust-service-single-hero img { width: 100%; margin: 0; }
@media (max-width: 960px) {
	.ust-service-single-grid { grid-template-columns: 1fr; }
}
.ust-service-card-price { margin: 0; font-weight: 700; color: var(--ust-heading-color, inherit); font-size: .95rem; }
.ust-service-single-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 24px; }
.ust-service-single-sidebar h2 { font-size: 1.1rem; margin: 0 0 12px; }
.ust-service-nav ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius-lg); overflow: hidden; }
.ust-service-nav li + li { border-top: 1px solid var(--ust-surface-border); }
.ust-service-nav a { display: block; padding: 12px 16px; color: inherit; text-decoration: none; font-weight: 600; }
.ust-service-nav a:hover { background: var(--ust-surface-2); }
.ust-service-nav a[aria-current="page"] { background: var(--ust-surface-2); box-shadow: inset 4px 0 0 var(--ust-color-button-bg); }
.ust-service-cta-box { background: var(--ust-surface-2); border-radius: var(--ust-radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.ust-service-cta-box p { margin: 0 0 6px; color: var(--ust-surface-text-muted); }
.ust-btn--whatsapp, .ust-btn.ust-btn--whatsapp { background: #0E7A3F; color: #fff; }
.ust-btn--whatsapp:hover { color: #fff; }
.ust-service-others { padding: 56px 0 24px; background: var(--ust-surface-2); }
.ust-service-others__title { margin: 0 0 24px; }
.ust-service-cta-band { padding: 56px 0; text-align: center; background: var(--ust-color-footer-main-bg); color: var(--ust-color-footer-main-text); }
.ust-service-cta-band h2 { color: inherit; margin: 0 0 10px; }
.ust-service-cta-band p { margin: 0 auto 20px; max-width: 640px; opacity: .9; }
.ust-service-cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 960px) { .ust-service-single-sidebar { position: static; } }

/* =========================================================
   Team / Management ([ust_team])
   ========================================================= */
.ust-team-grid { display: flex; flex-direction: column; gap: 4px; }
.ust-team-member {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 40px;
	background: var(--ust-fixed-dark);
	color: #fff;
	padding: 40px;
	border-radius: var(--ust-radius);
}
.ust-team-member-photo img { width: 100%; border-radius: var(--ust-radius); object-fit: cover; }
.ust-team-member-position { text-transform: uppercase; letter-spacing: .05em; color: var(--ust-color-button-bg); font-weight: 700; margin-bottom: 4px; }
.ust-team-member-name { margin-top: 0; color: #fff; }
.ust-team-member-bio { color: rgba(255,255,255,.85); }
.ust-team-member-bio ul { padding-left: 20px; }

@media (max-width: 782px) {
	.ust-team-member { grid-template-columns: 1fr; }
}

/* =========================================================
   Generic content carousel ([ust_carousel])
   ========================================================= */
.ust-carousel { position: relative; padding-bottom: 10px; }
.ust-carousel-title { text-align: center; margin-bottom: 20px; }
.ust-carousel-viewport { position: relative; }
.ust-carousel-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease; }
.ust-carousel-slide.is-active { position: relative; opacity: 1; visibility: visible; }
.ust-carousel-card {
	background: var(--ust-surface);
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius);
	overflow: hidden;
	box-shadow: 0 6px 18px var(--ust-surface-shadow);
}
.ust-carousel-card-image img { width: 100%; height: 200px; object-fit: cover; display: block; }
.ust-carousel-card-body { padding: 20px; text-align: center; }
.ust-carousel-card-body h3 { margin: 0 0 8px; font-size: 1.1rem; }
.ust-carousel-card-date { color: var(--ust-surface-text-muted); font-size: .85rem; margin-bottom: 16px; }
.ust-carousel-card-meta { color: var(--ust-surface-text-muted); font-size: .85rem; margin: 0 0 16px; }
.ust-carousel-card-body .ust-job-card-badges { position: static; justify-content: center; margin-bottom: 10px; }
.ust-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--ust-surface-border);
	background: var(--ust-surface);
	color: var(--ust-surface-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
}
.ust-carousel-arrow.is-prev { left: -6px; }
.ust-carousel-arrow.is-next { right: -6px; }
.ust-carousel-arrow:hover { background: var(--ust-color-topbar); color: #fff; border-color: transparent; }
/* The -6px overhang above is fine on desktop, where there's page margin
   around the carousel to absorb it; on mobile and tablet the carousel
   commonly renders edge-to-edge (confirmed causing real horizontal page
   scroll at 820px, not just a clipped-looking screenshot), so the same
   overhang pushes past the viewport. Keep the arrows fully on-screen at
   or below the theme's standard tablet breakpoint, not just the phone
   one — a narrower 782px cutoff left a real gap between it and tablet
   widths where this was still broken. */
@media (max-width: 960px) {
	.ust-carousel-arrow.is-prev { left: 4px; }
	.ust-carousel-arrow.is-next { right: 4px; }
}
.ust-carousel-view-all { text-align: center; margin: 20px 0 0; }
.ust-carousel-view-all a { font-weight: 700; }

/* ---------- Locations ---------- */
.ust-location-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--ust-space-md); padding: var(--ust-space-md) 0; }
.ust-location-card {
	background: var(--ust-surface); border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius-lg);
	padding: var(--ust-space-md); box-shadow: var(--ust-shadow-sm);
}
.ust-location-card__name { margin: 0 0 8px; font-size: 1.15rem; }
.ust-location-card__name a { color: var(--ust-surface-text); text-decoration: none; }
.ust-location-card p { margin: 0 0 6px; font-size: .92rem; color: var(--ust-surface-text-muted); }
.ust-location-card__phone a, .ust-location-card__email a { color: var(--ust-color-topbar); text-decoration: none; }
.ust-location-card__map { margin-top: var(--ust-space-sm); border-radius: var(--ust-radius); overflow: hidden; aspect-ratio: 16/9; }
.ust-location-card__map iframe { width: 100%; height: 100%; border: 0; }
.ust-location-single-content { margin-top: var(--ust-space-lg); }

/* ---------- Finder ---------- */
.ust-finder__filters {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	margin-bottom: var(--ust-space-md); padding: var(--ust-space-sm); background: var(--ust-surface-2); border-radius: var(--ust-radius-lg);
}
.ust-finder__filters input[type="search"], .ust-finder__filters select {
	padding: .6em .9em; border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius);
	background: var(--ust-surface); color: var(--ust-surface-text); font-size: .95rem; font-family: inherit;
}
.ust-finder__filters input[type="search"] { flex: 1 1 200px; }
.ust-finder__clear { font-size: .85rem; color: var(--ust-surface-text-muted); text-decoration: underline; }
.ust-finder__results { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--ust-space-md); }
.ust-finder__no-results { color: var(--ust-surface-text-muted); padding: var(--ust-space-lg) 0; text-align: center; }
.ust-finder-card {
	display: block; text-decoration: none; color: var(--ust-surface-text);
	background: var(--ust-surface); border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius-lg);
	overflow: hidden; box-shadow: var(--ust-shadow-sm);
}
.ust-finder-card:hover { text-decoration: none; box-shadow: var(--ust-shadow-md); }
.ust-finder-card__image { aspect-ratio: 4/3; background: var(--ust-surface-2); overflow: hidden; }
.ust-finder-card__image img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.ust-finder-card__body { padding: var(--ust-space-sm); }
.ust-finder-card__title { margin: 0 0 6px; font-size: 1.1rem; }
.ust-finder-card__excerpt { margin: 0; font-size: .9rem; color: var(--ust-surface-text-muted); }
.ust-finder--loading .ust-finder__results { opacity: .5; transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) {
	.ust-finder--loading .ust-finder__results { transition: none; }
}

/* ---------- Booking form ---------- */
.ust-booking-form-wrap {
	background: var(--ust-surface); border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius-lg);
	padding: var(--ust-space-md); box-shadow: var(--ust-shadow-sm); max-width: 480px;
}
.ust-booking-form__title { margin: 0 0 var(--ust-space-sm); }
.ust-booking-form p { margin-bottom: var(--ust-space-sm); }
.ust-booking-form label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .9rem; }
.ust-booking-form input[type="text"],
.ust-booking-form input[type="email"],
.ust-booking-form input[type="tel"],
.ust-booking-form input[type="date"],
.ust-booking-form input[type="time"],
.ust-booking-form select,
.ust-booking-form textarea {
	width: 100%; padding: .6em .8em; border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius);
	background: var(--ust-surface); color: var(--ust-surface-text); font-size: 1rem; font-family: inherit;
}
.ust-booking-form .ust-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ust-booking-form__disclaimer { font-size: .82rem; color: var(--ust-surface-text-muted); font-style: italic; }
.ust-booking-service-editor { border-top: 1px solid var(--ust-surface-border); padding-top: 8px; margin-top: 8px; }
.ust-booking-service-editor:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* ---------- Account portal ---------- */
.ust-portal { display: flex; flex-direction: column; gap: var(--ust-space-md); max-width: 640px; }
.ust-portal--login { max-width: 360px; }
.ust-portal-section {
	background: var(--ust-surface); border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius-lg);
	padding: var(--ust-space-md); box-shadow: var(--ust-shadow-sm);
}
.ust-portal-section h2 { margin: 0 0 var(--ust-space-sm); font-size: 1.15rem; }
.ust-portal-profile p { margin: 0 0 var(--ust-space-sm); }
.ust-portal-edit-link { margin-right: var(--ust-space-sm); font-size: .9rem; }
.ust-portal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ust-portal-table { width: 100%; min-width: 360px; border-collapse: collapse; }
.ust-portal-table td { padding: 10px 0; border-bottom: 1px solid var(--ust-surface-border); vertical-align: middle; }
.ust-portal-table tr:last-child td { border-bottom: none; }
.ust-portal-table td:last-child { text-align: right; white-space: nowrap; }
.ust-portal-table__meta { font-size: .85rem; color: var(--ust-surface-text-muted); }
.ust-portal-empty { color: var(--ust-surface-text-muted); }
.ust-portal-updates { list-style: none; margin: 0; padding: 0; }
.ust-portal-updates li { padding: 8px 0; border-bottom: 1px solid var(--ust-surface-border); font-size: .92rem; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ust-portal-updates li:last-child { border-bottom: none; }

/* ---------- Support ticket form ---------- */
.ust-support-ticket-form-wrap {
	background: var(--ust-surface); border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius-lg);
	padding: var(--ust-space-md); box-shadow: var(--ust-shadow-sm); max-width: 480px;
}
.ust-support-ticket-form p { margin-bottom: var(--ust-space-sm); }
.ust-support-ticket-form label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .9rem; }
.ust-support-ticket-form input[type="text"], .ust-support-ticket-form input[type="email"], .ust-support-ticket-form textarea {
	width: 100%; padding: .6em .8em; border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius);
	background: var(--ust-surface); color: var(--ust-surface-text); font-family: inherit; font-size: 1rem;
}
.ust-support-ticket-form .ust-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ust-portal-section--staff { border-color: var(--ust-color-topbar); }
.ust-status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.ust-status-pill--success { background: #e9f7ee; color: #146c2e; }
.ust-status-pill--warning { background: #fff6e5; color: #8a6100; }
.ust-status-pill--error { background: #fdecea; color: #a02323; }
.ust-status-pill--idle { background: var(--ust-surface-2); color: var(--ust-surface-text-muted); }
.ust-portal--login form p { margin-bottom: var(--ust-space-sm); }
.ust-portal--login input[type="text"], .ust-portal--login input[type="password"] {
	width: 100%; padding: .6em .8em; border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius);
	background: var(--ust-surface); color: var(--ust-surface-text);
}

/* ---------- Donation form ---------- */
.ust-donation-form-wrap {
	background: var(--ust-surface); border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius-lg);
	padding: var(--ust-space-md); box-shadow: var(--ust-shadow-sm); max-width: 480px;
}
.ust-donation-form p { margin-bottom: var(--ust-space-sm); }
.ust-donation-form label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .9rem; }
.ust-donation-form input[type="text"], .ust-donation-form input[type="email"], .ust-donation-form input[type="number"], .ust-donation-form textarea {
	width: 100%; padding: .6em .8em; border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius);
	background: var(--ust-surface); color: var(--ust-surface-text); font-family: inherit; font-size: 1rem;
}
.ust-donation-form .ust-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Press & Media ---------- */
.ust-press-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--ust-space-md);
	list-style: none; margin: 0; padding: 0;
}
.ust-press-card {
	display: block; background: var(--ust-surface); border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius-lg);
	overflow: hidden; box-shadow: var(--ust-shadow-sm); color: inherit;
}
.ust-press-card:hover { text-decoration: none; }
.ust-press-card__logo { aspect-ratio: 16/9; overflow: hidden; background: var(--ust-surface-2); display: flex; align-items: center; justify-content: center; }
.ust-press-card__logo img { width: 100%; height: 100%; object-fit: contain; margin: 0; padding: var(--ust-space-sm); }
.ust-press-card__body { padding: var(--ust-space-sm); }
.ust-press-card__source { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ust-color-topbar); margin-bottom: 4px; }
.ust-press-card__title { margin: 0 0 6px; font-size: 1.1rem; }
.ust-press-card__excerpt { margin: 0 0 8px; font-size: .9rem; color: var(--ust-surface-text-muted); font-style: italic; }
.ust-press-card__date { font-size: .8rem; color: var(--ust-surface-text-muted); }

/* ---------- Cookie consent ---------- */
.ust-cookie-consent {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500;
	background: var(--ust-surface); border-top: 1px solid var(--ust-surface-border); box-shadow: var(--ust-shadow-lg);
}
.ust-cookie-consent[hidden] { display: none; }
.ust-cookie-consent__inner {
	max-width: var(--ust-container-width); margin: 0 auto; padding: var(--ust-space-sm) var(--ust-space-md);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ust-space-sm);
}
.ust-cookie-consent__message { margin: 0; color: var(--ust-surface-text); font-size: .92rem; flex: 1 1 320px; }
.ust-cookie-consent__message a { margin-left: 6px; text-decoration: underline; }
.ust-cookie-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 600px) { .ust-cookie-consent__actions .ust-btn { flex: 1 1 0; } }

/* ---------- Maintenance mode ---------- */
.ust-maintenance-mode {
	margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
	background: var(--ust-color-body-bg); color: var(--ust-color-body-text); font-family: var(--ust-font-body); text-align: center; padding: 40px 24px;
}
.ust-maintenance-mode__panel { max-width: 480px; }
.ust-maintenance-mode__panel h1 { color: var(--ust-color-heading); margin: 0 0 .5em; }

/* ---------- Events ---------- */
.ust-event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--ust-space-md); padding: var(--ust-space-md) 0; }
.ust-event-card {
	display: block; text-decoration: none; color: var(--ust-surface-text);
	background: var(--ust-surface); border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius-lg);
	overflow: hidden; box-shadow: var(--ust-shadow-sm);
}
.ust-event-card:hover { text-decoration: none; box-shadow: var(--ust-shadow-md); }
.ust-event-card__image { aspect-ratio: 4/3; background: var(--ust-surface-2); overflow: hidden; }
.ust-event-card__image img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.ust-event-card__body { padding: var(--ust-space-sm); }
.ust-event-card__date { font-size: .8rem; font-weight: 700; color: var(--ust-color-topbar); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.ust-event-card__title { margin: 0 0 4px; font-size: 1.1rem; }
.ust-event-card__location { font-size: .88rem; color: var(--ust-surface-text-muted); }
.ust-event-single-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--ust-space-lg); }
.ust-event-meta { font-size: 1rem; margin-bottom: var(--ust-space-sm); }
.ust-event-hero { margin-bottom: var(--ust-space-md); border-radius: var(--ust-radius-lg); overflow: hidden; }
.ust-event-hero img { width: 100%; margin: 0; }
.ust-event-rsvp {
	background: var(--ust-surface); border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius-lg);
	padding: var(--ust-space-md); box-shadow: var(--ust-shadow-sm);
}
.ust-event-rsvp__spots { font-weight: 700; color: var(--ust-color-topbar); margin: 0 0 var(--ust-space-sm); }
.ust-event-rsvp-form p { margin-bottom: var(--ust-space-sm); }
.ust-event-rsvp-form label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .9rem; }
.ust-event-rsvp-form input[type="text"], .ust-event-rsvp-form input[type="email"] {
	width: 100%; padding: .6em .8em; border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius);
	background: var(--ust-surface); color: var(--ust-surface-text); font-family: inherit; font-size: 1rem;
}
.ust-event-rsvp-form .ust-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 782px) {
	.ust-event-single-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Mobile usability & accessibility pass
   - 44px minimum touch targets (WCAG 2.2 AA asks for 24px; 44px is comfortable)
   - readable text sizes, sensible form defaults that follow dark mode
   ========================================================= */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="range"]):not([type="file"]), select, textarea) {
	background: var(--ust-surface);
	color: var(--ust-surface-text);
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius);
	padding: .6em .8em;
	max-width: 100%;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not(.ust-hp-field), select { min-height: 44px; }
textarea { min-height: 120px; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--ust-color-button-bg); }
::placeholder { color: var(--ust-surface-text-muted); opacity: 1; }
.ust-btn, .wp-block-button__link, button.ust-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.ust-breadcrumbs { font-size: .9rem; }
.ust-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.ust-entry-category-pill, .ust-job-category-pill, .ust-kb-category-pill { font-size: .875rem; }
.ust-entry-share-label { font-size: .9rem; }
.ust-entry-categories { font-size: .8125rem; }
.ust-cookie-consent .ust-btn, .ust-cookie-consent button { min-height: 44px; }

@media (max-width: 782px) {
	.ust-topbar-search-toggle { width: 44px; height: 44px; }
	.ust-social-icons a { width: 44px; height: 44px; }
	.ust-entry-category-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1em; margin-bottom: 6px; }
	.ust-entry-share a { width: 44px; height: 44px; }
	.ust-entry-share-email { min-height: 44px; }
	.ust-entry-share { flex-wrap: wrap; }
	.ust-job-filter { min-height: 44px; }
	.ust-post-nav-prev a, .ust-post-nav-next a { display: flex; align-items: center; min-height: 44px; }
	.ust-services-tab { min-height: 48px; }
	.ust-hero-arrow, .ust-hero-playpause { width: 44px; height: 44px; }
	.ust-carousel-arrow, .ust-slider-arrow { width: 44px; height: 44px; }
	/* The arrows are fixed-position (16px inset, 44px wide → cover the
	   outer 16-60px of each edge) and don't reserve any layout space, so
	   a heading wide enough to reach .ust-container's 24px padding gets
	   covered. This extra 44px clears a 44px-wide arrow sitting 16px
	   from the edge, on top of that 24px. */
	.ust-hero-slide-inner { padding-left: 44px; padding-right: 44px; }
}
@media (max-width: 600px) {
	.ust-team-member { padding: 24px; gap: 20px; }
	.ust-author-box { flex-direction: column; }
	.ust-page-title { padding: 20px 0; }
	.ust-footer-bottom { padding: 16px 0; }
	.ust-contact-band { padding: 32px 0; }
	.ust-portal-section { padding: var(--ust-space-sm); }
}
/* Hover lifts feel like stuck states on touch screens, so only apply them where hovering exists. */
@media (hover: none) {
	.ust-post-grid__item:hover, .ust-job-card:hover, .ust-service-card:hover, .ust-team-member:hover { transform: none; }
}

/* Floating UI stack (bottom to top): bottom nav → cookie banner → WhatsApp → back-to-top.
   Each piece measures what is beneath it, so nothing overlaps at any width. */
:root { --ust-stickybar-h: 0px; }
@media (max-width: 960px) { body.single-ust_job { --ust-stickybar-h: 68px; } } /* the job page's own sticky "Apply" bar */
.ust-job-sticky-apply { bottom: var(--ust-bottomnav-h); min-height: 68px; box-sizing: border-box; z-index: 8100; }
.ust-cookie-consent { bottom: calc(var(--ust-bottomnav-h) + var(--ust-stickybar-h)); }
.ust-whatsapp-button, .ust-back-to-top { bottom: calc(var(--ust-bottomnav-h) + var(--ust-stickybar-h) + var(--ust-cookie-h) + 20px); }
body.ust-whatsapp-right .ust-back-to-top { bottom: calc(var(--ust-bottomnav-h) + var(--ust-stickybar-h) + var(--ust-cookie-h) + 88px); }
/* Floating helpers (WhatsApp, back-to-top, chat widgets) step aside while the phone menu is open,
   so they never cover menu items. */
body.ust-nav-open .ust-whatsapp-button,
body.ust-nav-open .ust-back-to-top,
body.ust-nav-open .umschat { opacity: 0; visibility: hidden; pointer-events: none; }
.ust-cookie-consent__inner { padding-bottom: calc(var(--ust-space-sm) + env(safe-area-inset-bottom, 0px)); }
.ust-bottom-nav { height: var(--ust-bottomnav-h); box-sizing: border-box; padding-bottom: env(safe-area-inset-bottom, 0px); }
.ust-bottom-nav a { font-size: .75rem; }

/* Footer columns collapse. These rules are deliberately LAST: the .ust-footer-columns--N
   modifiers above have the same specificity, so whichever comes later wins. */
.ust-footer-columns > * { min-width: 0; }
/* Only the desktop row's grid collapses here. The tablet and mobile rows are
   rendered with their own Customizer column counts (ust_footer_columns_count_tablet
   / _mobile) — a blanket collapse silently overrode those settings. */
@media (max-width: 960px) {
	.ust-footer-main--desktop .ust-footer-columns--3, .ust-footer-main--desktop .ust-footer-columns--4 { grid-template-columns: repeat(2, 1fr); }
	.ust-footer-main--desktop .ust-footer-columns--5, .ust-footer-main--desktop .ust-footer-columns--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.ust-footer-main--desktop .ust-footer-columns { grid-template-columns: 1fr; }
	.ust-footer-columns { gap: 24px; }
}

/* Phone header: keep the top bar to one row and let only the main header stay stuck. */
.ust-primary-nav-mobile-social { display: none; }
@media (max-width: 782px) {
	.ust-topbar .ust-container { min-height: 56px; }
	.ust-primary-nav-mobile-social { display: block; padding: 8px 20px 16px; }
	.ust-primary-nav-mobile-social .ust-social-icons { justify-content: flex-start; flex-wrap: wrap; }
	.ust-primary-nav-mobile-social .ust-social-icons a { color: var(--ust-color-nav-text); background: var(--ust-surface-2); }
	/* The slim top bar scrolls away; the logo/menu row is what stays visible. */
	.ust-header-sticky #ust-masthead, .ust-header-hide-on-scroll #ust-masthead { top: -56px; }
}

/* Buttons and submit inputs must never be wider than their container (large text sizes, long labels). */
button, input[type="submit"], input[type="button"], input[type="reset"] { max-width: 100%; white-space: normal; box-sizing: border-box; }

/* List and card links: whole row is the tap target, not just the text line. */
.ust-kb-article-list a, .ust-location-card__name a, .ust-finder-card__title, .ust-press-card__title { display: inline-block; padding: 10px 0; min-height: 44px; }
.ust-service-card-link { min-height: 44px; align-items: center; }
.ust-job-badge, .ust-hero-badge, .ust-service-card-badge, .ust-entry-card-featured__badge { font-size: .75rem; }

/* Respect the visitor's reduced-motion setting everywhere, including animations this file does not know about. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Removes the tap delay and double-tap-to-zoom on controls. */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* In-page anchors should not hide under a sticky header. */
:target, [id] { scroll-margin-top: 80px; }

.ust-entry-category-pill, .ust-job-category-pill, .ust-kb-category-pill, .ust-status-pill, .ust-job-badge { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }

/* 200% text zoom: bottom-nav labels must shrink/truncate instead of widening the page. */
.ust-bottom-nav a { min-width: 0; overflow: hidden; }
.ust-bottom-nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Columns 4-6 of a header/footer row (columns 1-3 keep their own left/center/
   right rules above). Placement inside the column comes from the row's
   inline styles (inc/row-style-controls.php). */
.ust-header-zone[data-ums-zone="col4"],
.ust-header-zone[data-ums-zone="col5"],
.ust-header-zone[data-ums-zone="col6"] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }

/* ---------- Phone polish ---------- */
@media (max-width: 782px) {
	/* One floating helper per corner: back-to-top steps aside for the WhatsApp
	   button on phones (a tap on the status bar already scrolls to the top). */
	body.ust-has-whatsapp .ust-back-to-top { display: none; }
	/* Stacked process steps: flex: 1 1 200px became a 200px minimum HEIGHT once
	   the row turned into a column, leaving big gaps. Arrow between steps instead. */
	.ust-process { gap: 0; }
	.ust-process-step { flex: 0 0 auto; }
	.ust-process-step + .ust-process-step::before { content: "\2193"; display: block; margin: .7em auto; color: var(--ust-surface-text-muted); font-size: 1.1rem; line-height: 1; }
	/* Footer contact links: 44px tap targets. */
	.ust-site-footer .ust-contact-quick-links a { min-height: 44px; }
	/* Footer bottom: copyright and links stacked and centered rather than squeezed side by side —
	   unless the designer set this row's own Mobile column count (then their layout is used). */
	.ust-footer-bottom:not(.ust-row-count-set) .ust-container { grid-template-columns: 1fr !important; justify-items: center; text-align: center; row-gap: 6px; }
	.ust-footer-bottom:not(.ust-row-count-set) .ust-header-zone { justify-self: center; justify-content: center; flex-wrap: wrap; max-width: 100%; }
	.ust-footer-bottom .ust-footer-menu { justify-content: center; }
	/* Footer top row (logo + contact links): stacked and centered, logo never squeezed below a legible size. */
	.ust-footer-upper:not(.ust-row-count-set) .ust-container { grid-template-columns: 1fr !important; justify-items: center; text-align: center; row-gap: 8px; }
	.ust-footer-upper:not(.ust-row-count-set) .ust-header-zone { justify-self: center; justify-content: center; flex-wrap: wrap; max-width: 100%; }
	.ust-footer-upper .ust-contact-quick-links { justify-content: center; }
	.ust-site-footer .ust-logo-wrap img { min-width: 64px; }
	.ust-hero--panel-desktop .ust-hero__panel { display: none; }
}
@media (max-width: 600px) {
	/* Full-width buttons on phones — bigger, easier targets. */
	.ust-button-group .ust-btn, .ust-cta__buttons .ust-cta__button { flex: 1 1 100%; justify-content: center; text-align: center; }
	.ust-cta__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
	.ust-icon-box--card, .ust-icon-box--tinted { padding: 22px; }
	.ust-price__button { align-self: stretch; text-align: center; }
	.ust-section-heading { margin-bottom: 2rem; }
	.ust-hero__text { font-size: 1.08rem; }
}

/* ---------- Ad Results Estimator (inc/ad-estimator.php) ---------- */
.ust-ad-estimator { background: var(--ust-surface); color: var(--ust-surface-text); border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius-lg); padding: clamp(18px, 3vw, 32px); box-shadow: var(--ust-shadow-md); }
.ust-ade__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; margin: 0 0 22px; }
.ust-ade__field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ust-ade__field label { font-weight: 700; font-size: .9rem; display: flex; justify-content: space-between; gap: 8px; }
.ust-ade__field select { width: 100%; min-height: 44px; padding: .55em .8em; border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius); background: var(--ust-surface); color: var(--ust-surface-text); font: inherit; }
.ust-ade__field--budget { grid-column: 1 / -1; }
.ust-ade__field--budget output { color: var(--ust-color-button-bg); font-size: 1.15rem; font-weight: 800; }
.ust-ade__field input[type=range] { width: 100%; min-height: 44px; accent-color: var(--ust-color-button-bg); }
.ust-ade__results { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 22px; }
.ust-ade__metric { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: var(--ust-radius-lg); background: color-mix(in srgb, var(--ust-color-topbar) 7%, var(--ust-surface)); }
.ust-ade__value { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 800; color: var(--ust-color-heading); line-height: 1.15; }
.ust-ade__label { font-weight: 700; }
.ust-ade__hint { font-size: .82rem; color: var(--ust-surface-text-muted); }
.ust-ade__title { font-size: 1.1rem; margin: 0 0 10px; }
.ust-ade__creative { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ust-ade__creative .ust-cf-choice { min-height: 40px; padding: 6px 12px; border: 1px solid var(--ust-surface-border); border-radius: 999px; }
.ust-ade__creative .ust-cf-choice:has(input:checked) { border-color: var(--ust-color-button-bg); background: color-mix(in srgb, var(--ust-color-button-bg) 10%, var(--ust-surface)); }
.ust-ade__table { width: 100%; border-collapse: collapse; }
.ust-ade__table th, .ust-ade__table td { padding: 10px 6px; border-bottom: 1px solid var(--ust-surface-border); text-align: left; vertical-align: top; }
.ust-ade__table td { text-align: right; white-space: nowrap; font-weight: 700; }
.ust-ade__table th small { display: block; font-weight: 400; color: var(--ust-surface-text-muted); font-size: .8rem; }
.ust-ade__table tfoot th, .ust-ade__table tfoot td { border-bottom: 0; font-size: 1.1rem; color: var(--ust-color-heading); }
.ust-ade__note { margin: 16px 0 0; font-size: .85rem; color: var(--ust-surface-text-muted); }
.ust-ade__cta { margin: 14px 0 0; }
@media (max-width: 782px) { .ust-ade__controls { grid-template-columns: 1fr; } }
/* Ad Results Table (sheets/PDFs) */
.ust-ad-results-table { overflow-x: auto; }
.ust-ad-results-table table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ust-ad-results-table th, .ust-ad-results-table td { padding: 8px 10px; border-bottom: 1px solid var(--ust-surface-border); text-align: right; white-space: nowrap; }
.ust-ad-results-table thead th { background: var(--ust-color-footer-main-bg, #0b1f33); color: #fff; font-weight: 700; }
.ust-ad-results-table thead th:first-child, .ust-ad-results-table thead th:nth-child(2), .ust-ad-results-table tbody th, .ust-art__metric { text-align: left; }
.ust-ad-results-table tbody th { white-space: normal; font-weight: 700; vertical-align: top; background: color-mix(in srgb, var(--ust-color-topbar) 6%, var(--ust-surface)); }
.ust-ad-results-table tbody th small { display: block; font-weight: 400; color: var(--ust-surface-text-muted); }
.ust-ad-results-table tr.is-group-start td, .ust-ad-results-table tr.is-group-start th { border-top: 2px solid var(--ust-surface-border); }
.ust-ad-results-table td:not(.ust-art__metric) { font-weight: 700; color: var(--ust-color-heading); }
.ust-ad-results-table.is-compact table { font-size: .82rem; }
.ust-ad-results-table.is-compact th, .ust-ad-results-table.is-compact td { padding: 5px 7px; }
.ust-art__note { font-size: .8rem; color: var(--ust-surface-text-muted); margin: 8px 0 0; }
/* ---------- Printable Sheet template (page-templates/template-sheet.php) ---------- */
body.ust-sheet-page { background: #e9edf2; margin: 0; }
.ust-sheet { width: 210mm; min-height: 297mm; margin: 24px auto; background: #fff; color: #1f2937; box-shadow: 0 10px 40px rgba(0,0,0,.15); display: flex; flex-direction: column; box-sizing: border-box; }
.ust-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10mm 12mm 6mm; border-bottom: 3px solid var(--ust-color-button-bg); }
.ust-sheet__brand .custom-logo { width: 34mm; height: auto; display: block; }
.ust-sheet__contact { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 10pt; color: #374151; font-weight: 600; }
.ust-sheet__body { flex: 1 1 auto; padding: 4mm 12mm 3mm; font-size: 10.5pt; line-height: 1.45; }
.ust-sheet__body > * { margin-top: 0; }
.ust-sheet__body .ust-section { padding: 5mm 0 !important; background: none !important; }
.ust-sheet__body .ust-section__inner { max-width: none; }
.ust-sheet__body .ust-section-heading { margin-bottom: 4mm; }
.ust-sheet__body .ust-section-heading__title { font-size: 17pt; }
.ust-sheet__body .ust-hero { padding: 7mm 8mm !important; border-radius: 4mm; margin-bottom: 4mm; }
.ust-sheet__body .ust-hero__title { font-size: 22pt; margin-bottom: 2mm; }
.ust-sheet__body .ust-hero__text { font-size: 11pt; }
.ust-sheet__body .ust-price { padding: 5mm 4mm; transform: none; }
.ust-sheet__body .ust-price__amount { font-size: 18pt; }
.ust-sheet__body .ust-price__features li { padding: 1mm 0; }
.ust-sheet__foot { display: flex; justify-content: space-between; gap: 12px; padding: 5mm 12mm; background: var(--ust-color-footer-main-bg, #0b1f33); color: #fff; font-size: 9.5pt; }
.ust-sheet__foot a { color: #fff; font-weight: 700; }
.ust-sheet__body > .ust-heading, .ust-sheet__body > h3 { font-size: 12.5pt; margin: 3mm 0 2mm; }
.ust-sheet__body .ust-hero { padding: 5mm 7mm !important; min-height: 0 !important; }
.ust-sheet__body .ust-hero__title, .ust-sheet__body .ust-hero h1 { font-size: 19pt; line-height: 1.15; }
.ust-sheet__body .ust-hero p { font-size: 10pt; margin-bottom: 0; }
.ust-sheet__body .ust-hero * { max-width: none !important; }
.ust-sheet__body .ust-hero__inner, .ust-sheet__body .ust-hero__content { padding: 0 !important; min-height: 0 !important; gap: 1.5mm !important; }
.ust-sheet__body .ust-hero__eyebrow { margin-bottom: 1mm !important; font-size: 8pt; }
.ust-sheet .ust-ad-results-table table { font-size: 8.6pt; }
.ust-sheet .ust-ad-results-table th, .ust-sheet .ust-ad-results-table td { padding: 1.1mm 2mm; line-height: 1.25; }
.ust-sheet .ust-ad-results-table tbody th small { display: inline; font-size: 7.6pt; }
.ust-sheet .ust-ad-results-table tbody th small::before { content: " · "; }
.ust-sheet .ust-art__note { font-size: 7.8pt; margin: 1.5mm 0 3mm; }
.ust-sheet .ust-columns { --ust-columns-gap: 4mm !important; }
.ust-sheet .ust-price-list.is-boxed { padding: 3mm 4mm; border-radius: 3mm; }
.ust-sheet .ust-price-list__title { font-size: 11pt; margin-bottom: 1mm; }
.ust-sheet .ust-price-list__row { padding: 1.1mm 0; font-size: 9pt; gap: 3mm; }
.ust-sheet .ust-price-list__row small { font-size: 7.6pt; line-height: 1.3; margin-top: 0; }
.ust-sheet .ust-price-list__note { font-size: 7.8pt; margin-top: 1.5mm; line-height: 1.35; }
.ust-sheet__body > .ust-text, .ust-sheet__body > p { font-size: 8.8pt; line-height: 1.45; margin: 3mm 0 0; }
.ust-sheet__head { padding: 7mm 12mm 4mm; }
.ust-sheet__brand .custom-logo { width: 28mm; }
.ust-sheet__contact { font-size: 9pt; }
.ust-sheet__foot { padding: 4mm 12mm; font-size: 8.5pt; }
body.ust-sheet-page .umschat, body.ust-sheet-page .ust-whatsapp-button, body.ust-sheet-page .ust-back-to-top, body.ust-sheet-page #ust-cookie-consent { display: none !important; }
@media screen and (max-width: 230mm) {
	.ust-sheet { width: auto; min-height: 0; margin: 0; box-shadow: none; }
	/* Viewed on a phone or tablet rather than printed: readable sizes, tappable links. */
	.ust-sheet .ust-ad-results-table table, .ust-sheet .ust-price-list__row, .ust-sheet__body > .ust-text, .ust-sheet__body > p { font-size: 13px; }
	.ust-sheet .ust-ad-results-table tbody th small, .ust-sheet .ust-price-list__row small, .ust-sheet .ust-art__note, .ust-sheet .ust-price-list__note { font-size: 12px; }
	.ust-sheet__head, .ust-sheet__body, .ust-sheet__foot { padding-left: 16px; padding-right: 16px; }
	.ust-sheet__foot { flex-direction: column; font-size: 13px; }
	.ust-sheet__foot a { display: inline-block; padding: 12px 0; }
}
@page { size: A4; margin: 0; }
@media print {
	body.ust-sheet-page { background: #fff; }
	.ust-sheet { margin: 0; box-shadow: none; width: 210mm; min-height: 297mm; }
	.ust-sheet [data-ust-animate] { opacity: 1 !important; transform: none !important; }
	.ust-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.ust-sheet .ust-section, .ust-sheet .ust-ad-results-table tr, .ust-sheet .ust-price { break-inside: avoid; }
}
/* ---------- Price List block (ust/price-list) ---------- */
.ust-price-list { margin: 0; }
.ust-price-list.is-boxed { background: #fff; border: 1px solid rgba(15,23,42,.1); border-radius: 14px; padding: 20px 22px; }
.ust-price-list__title { font-size: 1.1rem; margin: 0 0 .6rem; }
.ust-price-list__items { margin: 0; }
.ust-price-list__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: .55rem 0; border-bottom: 1px dashed rgba(15,23,42,.15); }
.ust-price-list__row:last-child { border-bottom: 0; }
.ust-price-list__row dt, .ust-price-list__dt { margin: 0; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.ust-price-list__row small { display: block; font-weight: 400; font-size: .85em; color: #4B5563; margin-top: 2px; }
.ust-price-list__row dd, .ust-price-list__dd { margin: 0; font-weight: 700; white-space: nowrap; text-align: right; color: var(--ust-color-heading, #14213D); }
.ust-price-list__row.is-total { border-top: 2px solid currentColor; border-bottom: 0; margin-top: .3rem; padding-top: .7rem; font-size: 1.05em; }
.ust-price-list__row.is-total dd, .ust-price-list__row.is-total .ust-price-list__dd { color: var(--ust-color-button-bg, #F47B4C); }
.ust-price-list__note { font-size: .85rem; color: #4B5563; margin: .6rem 0 0; }
.ust-price-list__tools { display: inline-flex; flex: 0 0 auto; }
.ust-price-list__add { margin-top: 8px; }
@media (max-width: 420px) { .ust-price-list__row dd { white-space: normal; } }
.ust-ade__min { font-size: .9rem; color: #4B5563; background: #FFF8E6; border-left: 3px solid #FEB041; padding: 8px 12px; border-radius: 6px; }
.ust-ade__min[hidden] { display: none; }