/* ============================================================================
   UW — Global Utility CSS
   Every value below resolves from Tools ▸ Colors / Typography / Spacing through
   the --uw-* custom properties. Nothing here hard-codes a colour, font or
   measure, so changing a token changes the whole site.

   Structural rules this file enforces site-wide:
     · one page background            → var(--uw-page)
     · one corner radius              → var(--uw-radius)
     · one button, two colours        → .uw-btn / .uw-btn--inv
     · no hover motion on cards/media → borders and shadows live in rest state
     · one section starter            → hairline + eyebrow-left / heading-right
   ========================================================================== */

/* ---------------------------------------------------------------- 1. BASE
   A boxed Elementor container puts its flex layout on the inner wrapper, not
   on the element that carries the class, so every row rule in this file is
   written for both. `html body` outranks the theme's own body rule. */
html { scroll-behavior: auto; }
html body {
	background: var(--uw-page) !important;
	color: var(--uw-body);
	font-family: var(--uw-body-family);
	font-size: var(--uw-body-size);
	font-weight: var(--uw-body-weight);
	line-height: var(--uw-body-lh);
	letter-spacing: var(--uw-body-ls);
	-webkit-font-smoothing: antialiased;
}
::selection { background: var(--uw-accent); color: var(--uw-on-accent); }

/* The whole document sits on one colour. Elementor's own wrappers are cleared
   so no white band can appear between sections. */
.elementor,
.elementor-section-wrap,
#content, .site-main, .page-content,
.elementor-location-single, .elementor-location-archive { background: transparent; }

:root { --uw-ease: cubic-bezier(.22,.61,.2,1); }

/* ------------------------------------------------- 2. SECTION RHYTHM */
.uw-section > .e-con-inner,
.uw-section > .elementor-widget-wrap { max-width: var(--uw-content-width); }

/* Vertical rhythm has ONE source: the air above a white line. A section
   carries that space below itself and none above, so a line that opens a new
   section and a line further down the same stack are both exactly
   --uw-starter-space from whatever sits above them. */
.uw-section {
	padding-top: 0 !important;
	padding-bottom: var(--uw-starter-space) !important;
	padding-left: var(--uw-gutter) !important;
	padding-right: var(--uw-gutter) !important;
	background-color: transparent;
}
/* Two exceptions: the first section under the hero, and any section that
   paints its own band — both need their own air at the top. */
.uw-hero + .e-con.uw-section,
.uw-section.uw-on-photo { padding-top: var(--uw-starter-space) !important; }
/* A band keeps its own bottom air inside its ground, so the section that
   follows one has to supply the air above its white line itself. */
.uw-section.uw-on-photo + .e-con.uw-section { padding-top: var(--uw-starter-space) !important; }
.uw-section--hero { padding-top: var(--uw-hero-y) !important; padding-bottom: var(--uw-gutter) !important; }
.uw-section--flush-top    { padding-top: 0 !important; }
/* A section whose content continues in the next section down (the applications
   starter and its stack) hands over on the block gap, not on section air — so
   the heading sits the same distance above its content as everywhere else. */
.uw-section--flush-bottom { padding-bottom: var(--uw-block-gap) !important; }

/* Background modifiers. The dark variants are deliberately neutralised: the
   site now runs on a single page colour, so anything still carrying an old
   modifier keeps flowing instead of punching a black hole in the page. */
.uw-section--tint,
.uw-section--tint-2,
.uw-section--dark,
.uw-section--navy,
.uw-section--brand,
.uw-section--gradient { background-color: transparent; background-image: none; }

/* The site no longer has dark bands, so any text still bound to the "on dark"
   colour would be white on a light page. Redefining the token per scope fixes
   every one of them at once: light sections resolve it to body text, and the
   two places that really do sit on a photograph keep it white. */
.uw-section { --e-global-color-uwondark: var(--uw-body); }
.uw-hero, .uw-on-photo, .uw-on-photo.uw-section { --e-global-color-uwondark: #FFFFFF; }

/* A panel that genuinely needs to read as a card, not a section. */
.uw-section--card {
	background-color: var(--uw-surface);
	border-radius: var(--uw-radius);
}

/* The section inner stack: starter block → content block */
/* Blocks inside a section are spaced by one known value on both the container
   and its inner wrapper (Elementor puts the gap on .e-con-inner when a
   container is boxed), so the air above a white line is never guesswork. */
.uw-stack,
.uw-stack > .e-con-inner { row-gap: var(--uw-block-gap) !important; }

/* --------------------------------------------- 3. THE SECTION STARTER
   Windsor opens every section with a hairline, then the eyebrow hard left and
   the heading hard right on one row. `.uw-head` is that whole starter, so one
   class gives a section its rule, its gap and its alignment. */
.uw-head {
	border-top: 1px solid var(--uw-line-soft);
	padding-top: var(--uw-starter-gap) !important;
	margin-top: calc(var(--uw-starter-space) - var(--uw-block-gap));
	width: 100%;
	/* The line is always on the page measure, whether the starter sits inside a
	   boxed stack or directly in a full-width section. */
	max-width: var(--uw-content-width) !important;
	margin-inline: auto;
}
/* The first starter on a page already has the section's own top padding
   above it. */
.uw-section > .e-con-inner > .uw-head:first-child,
.uw-section > .uw-head:first-child,
.uw-stack > .uw-head:first-child,
.uw-stack > .e-con-inner > .uw-head:first-child { margin-top: 0; }
.uw-head,
.uw-head > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	row-gap: var(--uw-starter-gap) !important;
	column-gap: var(--uw-gutter) !important;
}
/* The heading half sits right and is capped so it wraps the way Windsor's does. */
.uw-head .elementor-widget:last-child,
.uw-head .uw-head-title {
	max-width: var(--uw-head-max) !important;
	text-align: left;
	flex: 0 1 auto;
}
.uw-head .elementor-widget:first-child,
.uw-head .uw-eyebrow { flex: 0 0 auto; }

/* A starter without the rule, for the first block on a page. */
.uw-head--bare { border-top: 0; padding-top: 0 !important; }
/* A starter sitting on a photograph. */
.uw-head--light { border-top-color: rgba(255,255,255,.30); }
.uw-head--light .uw-eyebrow .elementor-heading-title::before { background: var(--uw-on-dark); }

/* A standalone rule, for anywhere a divider is needed on its own. */
.uw-rule { border: 0; border-top: 1px solid var(--uw-line-soft); width: 100%; height: 0; }

/* ------------------------------------------------------------ 4. EYEBROW */
.elementor-widget.uw-eyebrow .elementor-heading-title,
.elementor-widget.uw-eyebrow p, .uw-eyebrow {
	font-family: var(--uw-eyebrow-family);
	font-size: var(--uw-eyebrow-size);
	font-weight: var(--uw-eyebrow-weight);
	line-height: var(--uw-eyebrow-lh);
	letter-spacing: var(--uw-eyebrow-ls);
	text-transform: var(--uw-eyebrow-transform);
	color: var(--uw-eyebrow-color);
}
/* Windsor marks the eyebrow with a small square, not a dot. */
.elementor-widget.uw-eyebrow .elementor-heading-title::before,
.uw-eyebrow > p::before {
	content: "";
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 2px;
	background: var(--uw-accent);
	margin-right: 8px;
	vertical-align: middle;
	transform: translateY(-1px);
}
/* An eyebrow is one line, always: it sizes to its own words rather than to a
   width set on the widget, and never wraps. */
.elementor-widget.uw-eyebrow {
	width: auto !important;
	max-width: 100% !important;
	flex: 0 0 auto;
}
.elementor-widget.uw-eyebrow .elementor-heading-title,
.uw-eyebrow > p { white-space: nowrap; }

.elementor-widget.uw-h2-narrow .elementor-heading-title { max-width: var(--uw-head-max); }

/* =========================================================== 5. THE BUTTON
   One geometry for every button on the site. Two colours only: A and B. The
   default swaps A → B on hover; `--inv` starts on B and swaps to A. Nothing
   else about a button ever changes, so a size or colour edit here reaches
   every button in one move. */
.elementor-widget.uw-btn .elementor-button,
a.uw-btn-raw,
.uw-btn-raw {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	width: fit-content;
	align-items: center;
	justify-content: space-between;
	gap: var(--uw-tight-gap);
	min-width: min(var(--uw-btn-w), 100%);
	height: var(--uw-btn-h);
	min-height: var(--uw-btn-h);
	padding: 0 22px !important;
	border: 0;
	/* Square on three corners with the bottom-right corner cut away on the
	   diagonal — the shape on the reference button. */
	border-radius: 0 !important;
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--uw-btn-cut)),
		calc(100% - var(--uw-btn-cut)) 100%,
		0 100%
	);
	background-color: var(--uw-btn-a);
	color: var(--uw-btn-b);
	font-family: var(--uw-button-family);
	font-size: var(--uw-button-size);
	font-weight: var(--uw-button-weight);
	line-height: 1;
	letter-spacing: var(--uw-button-ls);
	text-transform: var(--uw-button-transform);
	text-decoration: none;
	transition: color .38s var(--uw-ease), border-color .38s var(--uw-ease);
}
/* The colour swap is a wipe, so the two colours are always the only two. */
.elementor-widget.uw-btn .elementor-button::before,
a.uw-btn-raw::before,
.uw-btn-raw::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--uw-btn-b);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .38s var(--uw-ease);
	z-index: 0;
}
.elementor-widget.uw-btn .elementor-button:hover::before,
.elementor-widget.uw-btn .elementor-button:focus-visible::before,
a.uw-btn-raw:hover::before,
.uw-btn-raw:hover::before { transform: scaleX(1); }

.elementor-widget.uw-btn .elementor-button:hover,
.elementor-widget.uw-btn .elementor-button:focus-visible,
a.uw-btn-raw:hover,
.uw-btn-raw:hover { color: var(--uw-btn-a); background-color: var(--uw-btn-a); }

/* Inverse: the same button, colours started the other way round. Use it on a
   dark or photographic background. */
.elementor-widget.uw-btn--inv .elementor-button,
a.uw-btn-raw.uw-btn--inv {
	background-color: var(--uw-btn-b);
	color: var(--uw-btn-a);
}
.elementor-widget.uw-btn--inv .elementor-button::before,
a.uw-btn-raw.uw-btn--inv::before { background: var(--uw-btn-a); }
.elementor-widget.uw-btn--inv .elementor-button:hover,
.elementor-widget.uw-btn--inv .elementor-button:focus-visible,
a.uw-btn-raw.uw-btn--inv:hover { color: var(--uw-btn-b); background-color: var(--uw-btn-b); }

/* Content row inside the button — text left, arrow right, always visible. */
.elementor-widget.uw-btn .elementor-button-content-wrapper {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--uw-tight-gap);
}
/* The arrow is always last, whatever the widget's own icon-position setting
   says — one button, one arrangement. */
.elementor-widget.uw-btn .elementor-button-content-wrapper { flex-direction: row !important; }
.elementor-widget.uw-btn .elementor-button-text { flex: 1 1 auto; text-align: left; order: 1; }
.elementor-widget.uw-btn .elementor-button-icon { order: 2; }
.elementor-widget.uw-btn .elementor-button-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px; height: 16px;
	flex: 0 0 16px;
	overflow: hidden;
	opacity: 1;
	color: inherit;
}
.elementor-widget.uw-btn .elementor-button-icon svg,
.elementor-widget.uw-btn .elementor-button-icon i {
	width: 16px; height: 16px;
	display: block;
	fill: currentColor;
	color: inherit;
}
.elementor-widget.uw-btn .elementor-button:hover .elementor-button-icon svg,
.elementor-widget.uw-btn .elementor-button:hover .elementor-button-icon i { animation: uw-arrow-through .42s var(--uw-ease); }
@keyframes uw-arrow-through {
	0%   { transform: translateX(0); }
	49%  { transform: translateX(180%); }
	50%  { transform: translateX(-180%); }
	100% { transform: translateX(0); }
}

/* Width modifiers only — never a different height, padding or colour. */
.elementor-widget.uw-btn--block .elementor-button { width: 100%; min-width: 100%; }
.elementor-widget.uw-btn--auto .elementor-button  { min-width: 0; }

/* Legacy variant names kept as aliases so no page renders an unstyled button. */
.elementor-widget.uw-btn--ghost .elementor-button,
.elementor-widget.uw-btn--light .elementor-button,
.elementor-widget.uw-btn--surface .elementor-button {
	background-color: var(--uw-btn-b);
	color: var(--uw-btn-a);
}
.elementor-widget.uw-btn--ghost .elementor-button::before,
.elementor-widget.uw-btn--light .elementor-button::before,
.elementor-widget.uw-btn--surface .elementor-button::before { background: var(--uw-btn-a); }
.elementor-widget.uw-btn--ghost .elementor-button:hover,
.elementor-widget.uw-btn--light .elementor-button:hover,
.elementor-widget.uw-btn--surface .elementor-button:hover { color: var(--uw-btn-b); background-color: var(--uw-btn-b); }
.elementor-widget.uw-btn--sm .elementor-button,
.elementor-widget.uw-btn--tile .elementor-button {
	height: var(--uw-btn-h);
	min-height: var(--uw-btn-h);
	min-width: min(var(--uw-btn-w), 100%);
	padding: 0 22px !important;
	font-size: var(--uw-button-size);
}

/* A form's submit button is the same button as everywhere else. */
.elementor-form .elementor-button[type="submit"],
.elementor-field-type-submit .elementor-button {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--uw-tight-gap);
	min-width: min(var(--uw-btn-w), 100%);
	height: var(--uw-btn-h);
	min-height: var(--uw-btn-h);
	padding: 0 22px !important;
	border: 0;
	border-radius: 0 !important;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--uw-btn-cut)), calc(100% - var(--uw-btn-cut)) 100%, 0 100%);
	background-color: var(--uw-btn-a) !important;
	color: var(--uw-btn-b) !important;
	font-family: var(--uw-button-family);
	font-size: var(--uw-button-size);
	font-weight: var(--uw-button-weight);
	letter-spacing: var(--uw-button-ls);
	text-transform: none;
	transition: color .38s var(--uw-ease);
}
.elementor-form .elementor-button[type="submit"]::before,
.elementor-field-type-submit .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--uw-btn-b);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .38s var(--uw-ease);
	z-index: 0;
}
.elementor-form .elementor-button[type="submit"]:hover::before,
.elementor-field-type-submit .elementor-button:hover::before { transform: scaleX(1); }
.elementor-form .elementor-button[type="submit"]:hover,
.elementor-field-type-submit .elementor-button:hover { color: var(--uw-btn-a) !important; }
.elementor-form .elementor-button[type="submit"] > *,
.elementor-field-type-submit .elementor-button > * { position: relative; z-index: 1; }
/* Form fields pick up the site's radius and hairline. */
.elementor-field-group .elementor-field-textual {
	border-radius: var(--uw-radius) !important;
	border: 1px solid var(--uw-line) !important;
	background: var(--uw-surface);
	min-height: 48px;
}

/* Text link with a rule under it. */
.elementor-widget.uw-link .elementor-button {
	background: none !important;
	color: var(--uw-primary);
	padding: 0 !important;
	height: auto;
	min-height: 0;
	min-width: 0;
	border: 0;
	border-bottom: 1px solid var(--uw-line);
	border-radius: 0 !important;
}
.elementor-widget.uw-link .elementor-button::before { display: none; }
.elementor-widget.uw-link .elementor-button:hover { color: var(--uw-accent); border-color: var(--uw-accent); background: none; }

/* Category filter — not a button. A quiet row of chips in the navigation
   voice: surface plate, hairline, ink label; the one you are looking at is
   filled. No cut corner, no wipe, no shadow. */
.uw-chiprow { display: flex; flex-wrap: wrap; gap: var(--uw-pill-gap); }
.elementor-widget.uw-cat-chip .elementor-button {
	min-width: 0 !important;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 9px 16px !important;
	border: 1px solid var(--uw-line-soft) !important;
	border-radius: var(--uw-radius) !important;
	clip-path: none !important;
	box-shadow: none !important;
	background-color: var(--uw-surface);
	color: var(--uw-ink);
	font-family: var(--uw-nav-family);
	font-size: var(--uw-body-sm-size);
	font-weight: var(--uw-nav-weight);
	line-height: 1.2;
	letter-spacing: var(--uw-nav-ls);
	text-transform: none;
	justify-content: center;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.elementor-widget.uw-cat-chip .elementor-button::before { content: none; }
.elementor-widget.uw-cat-chip .elementor-button:hover {
	background-color: var(--uw-tint-1);
	color: var(--uw-primary);
	border-color: var(--uw-tint-1) !important;
}
/* The grid loads the next page as you reach the foot of it, so the only thing
   under the cards is a quiet spinner and its message. */
/* The anchor Elementor prints is an empty div; a zero-area element never
   reports an intersection, so it is given a hair of height to watch. */
.e-load-more-anchor { display: block; height: 1px; }
.elementor-widget-loop-grid .e-load-more-spinner {
	display: none !important;
	padding-top: var(--uw-block-gap);
	color: var(--uw-primary);
}
.elementor-widget-loop-grid.uw-loading .e-load-more-spinner { display: flex !important; }
.elementor-widget-loop-grid .e-load-more-spinner svg { animation: uw-spin 1s linear infinite; }
@keyframes uw-spin { to { transform: rotate(360deg); } }
.elementor-widget-loop-grid .e-load-more-message {
	padding-top: var(--uw-block-gap);
	font-family: var(--uw-body-sm-family);
	font-size: var(--uw-body-sm-size);
	letter-spacing: var(--uw-body-sm-ls);
	color: var(--uw-steel);
	text-align: center;
}

/* The category being shown. */
.elementor-widget.uw-cat-chip.uw-cat-chip--on .elementor-button,
.elementor-widget.uw-cat-chip .elementor-button[aria-current="page"] {
	background-color: var(--uw-ink);
	color: var(--uw-surface);
	border-color: var(--uw-ink) !important;
}

/* =================================================== 6. CARDS AND MEDIA
   No hover motion anywhere. The border and the shadow that used to appear on
   hover are now the resting state, so a card never moves, lifts or pulses. */
.uw-card {
	background-color: var(--uw-surface);
	border: 1px solid var(--uw-line-soft);
	border-radius: var(--uw-radius);
	box-shadow: 0 18px 44px -34px rgba(5,58,100,.30);
	padding: var(--uw-card-pad) !important;
	transition: none;
}
.uw-card--tint  { background-color: var(--uw-tint-2); }
.uw-card--tint1 { background-color: var(--uw-tint-1); }
.uw-card--dark  { background-color: var(--uw-surface); }
.uw-card--outline { background: var(--uw-surface); }
.uw-card--panel { padding: var(--uw-panel-pad) !important; }
.uw-card--flat  { box-shadow: none; }

/* Hover effects are switched off globally — belt and braces, because Elementor
   widgets can carry their own hover controls. */
.uw-card:hover, .uw-card--lift:hover,
.uw-media:hover, .uw-media--zoom:hover,
.e-loop-item:hover > .e-con,
.uw-card:hover .elementor-widget-image img {
	transform: none !important;
	box-shadow: 0 18px 44px -34px rgba(5,58,100,.30);
}
.uw-card--flat:hover { box-shadow: none; }

.uw-media { border-radius: var(--uw-radius); overflow: hidden; }
.uw-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--uw-radius);
	transition: none !important;
}
.uw-media:hover img, .uw-media--zoom:hover img { transform: none !important; }
.uw-round img, .uw-round { border-radius: var(--uw-radius); overflow: hidden; }

/* Anything Elementor renders as an image keeps still. */
.elementor-widget-image img,
.elementor-widget-image-box img,
.e-loop-item img { transition: none !important; }
.elementor-widget-image:hover img,
.elementor-widget-image-box:hover img,
.e-loop-item:hover img { transform: none !important; }

.uw-chip {
	width: 40px; height: 40px;
	border-radius: var(--uw-radius);
	background: var(--uw-chip);
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 40px;
}
.uw-chip .elementor-icon { color: var(--uw-primary); font-size: 16px; }
.uw-hr { border: 0; border-top: 1px solid var(--uw-line); width: 100%; }

/* Stat blocks */
.uw-stat .elementor-heading-title,
.uw-stat .elementor-counter-number-wrapper {
	font-family: var(--uw-stat-family);
	font-size: var(--uw-stat-size);
	font-weight: var(--uw-stat-weight);
	line-height: var(--uw-stat-lh);
	letter-spacing: var(--uw-stat-ls);
	color: var(--uw-stat-color);
}
.uw-stat-row { border-top: 1px solid var(--uw-line); padding-top: 12px !important; }

/* ============================================ 7. WINDSOR SERVICE CARD
   Title and number share one row — title left in accent, number right in the
   muted tint — over a white-to-blue gradient. */
.uw-svc-card {
	background-color: transparent;
	background-image: linear-gradient(180deg, var(--uw-card-top) 0%, var(--uw-card-bottom) 100%);
	border: 1px solid var(--uw-line-soft);
	border-radius: var(--uw-radius);
	padding: var(--uw-panel-pad) !important;
	row-gap: var(--uw-stack) !important;
	height: 100%;
	box-shadow: none;
	transition: none;
}
.uw-svc-card:hover { transform: none !important; box-shadow: none; }
.uw-svc-head, .uw-svc-head > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	column-gap: 10px !important;
	width: 100%;
}
.uw-svc-head .elementor-widget:first-child { flex: 1 1 auto; }
.uw-svc-head .elementor-widget:last-child  { flex: 0 0 auto; }
.elementor-widget.uw-svc-title .elementor-heading-title {
	font-family: var(--uw-h3-family);
	font-size: var(--uw-h3-size);
	font-weight: var(--uw-h3-weight);
	line-height: var(--uw-h3-lh);
	letter-spacing: var(--uw-h3-ls);
	color: var(--uw-accent);
}
.elementor-widget.uw-num .elementor-heading-title {
	font-family: var(--uw-number-family);
	font-size: var(--uw-number-size);
	font-weight: var(--uw-number-weight);
	line-height: var(--uw-number-lh);
	letter-spacing: var(--uw-number-ls);
	color: var(--uw-tint-3);
}
.uw-svc-card p, .uw-svc-card .elementor-widget-text-editor { color: var(--uw-primary); }
/* Every service card reads the same: the title occupies exactly two lines and
   the sentence under it exactly two, so the six cards line up whatever the
   wording. The boxes are reserved in type units, so they follow the tokens. */
.elementor-widget.uw-svc-title .elementor-heading-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: calc(var(--uw-h3-size) * var(--uw-h3-lh) * 2);
}
.uw-svc-card .elementor-widget-text-editor,
.uw-svc-card .elementor-widget-text-editor p {
	font-family: var(--uw-body-sm-family);
	font-size: var(--uw-body-sm-size);
	font-weight: var(--uw-body-sm-weight);
	line-height: var(--uw-body-sm-lh);
	letter-spacing: var(--uw-body-sm-ls);
}
.uw-svc-card .elementor-widget-text-editor p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: calc(var(--uw-body-sm-size) * var(--uw-body-sm-lh) * 2);
	margin: 0;
}

/* ============================================ 8. HERO (Sonido structure)
   A full-bleed picture inside a 10px inset frame, the wordmark bottom-left at
   display size, a glass card top-right, and the brand marquee along the foot. */
.uw-hero {
	position: relative;
	min-height: 100svh;
	padding: var(--uw-hero-inset) !important;
	overflow: hidden;
}
/* The picture is softened the way Sonido's is, and scaled a little so the
   blur has no soft edge inside the frame. */
.uw-hero-frame {
	position: absolute;
	inset: var(--uw-hero-inset);
	width: auto !important;
	max-width: none !important;
	border-radius: var(--uw-radius);
	overflow: hidden;
	z-index: 0;
}
/* A copy of the same picture, bled past every edge so the blur has nothing to
   feather against, painted over the sharp original. */
/* Elementor gives every container's ::before a width/height of 100%, which
   pinned this copy to the frame's own width and left a sharp, unblurred strip
   down the right edge. The inset defines the box here, so both are cleared. */
.uw-hero-frame::before {
	content: "";
	position: absolute;
	inset: calc(var(--uw-hero-blur) * -6);
	width: auto !important;
	height: auto !important;
	background: inherit;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	filter: blur(var(--uw-hero-blur)) saturate(1.06);
}
.uw-hero-frame img,
.uw-hero-frame video {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: var(--uw-radius);
}
/* The gradient that lets the wordmark and the marquee read over the photo. */
.uw-hero-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--uw-radius);
	background:
		linear-gradient(180deg, rgba(3,31,37,.46) 0%, rgba(3,31,37,0) 34%),
		linear-gradient(0deg, rgba(3,31,37,.76) 0%, rgba(3,31,37,.10) 52%);
}
.uw-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: calc(100svh - (var(--uw-hero-inset) * 2));
	justify-content: space-between !important;
	padding: calc(var(--uw-header-h) + var(--uw-gutter)) var(--uw-gutter) var(--uw-gutter) !important;
}
/* Top band: glass card pinned right. */
.uw-hero-top, .uw-hero-top > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	justify-content: flex-end !important;
	align-items: flex-start !important;
	width: 100%;
}
.uw-glass {
	background: rgba(255,255,255,.06);
	-webkit-backdrop-filter: blur(28px) saturate(140%);
	backdrop-filter: blur(28px) saturate(140%);
	border: 1px solid rgba(255,255,255,.20);
	border-radius: var(--uw-radius);
	padding: var(--uw-card-pad) !important;
	box-shadow: none;
}
.uw-glass, .uw-glass p, .uw-glass li { color: var(--uw-on-dark); }
.uw-glass h1, .uw-glass h2, .uw-glass h3, .uw-glass h4, .uw-glass h5, .uw-glass h6 { color: var(--uw-on-dark); }
.uw-glass:hover { transform: none !important; }

/* The word. */
.uw-hero-word, .uw-hero-word > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-end !important;
	justify-content: flex-start !important;
	column-gap: 14px !important;
	width: 100%;
}
.elementor-widget.uw-display .elementor-heading-title {
	font-family: var(--uw-display-family);
	font-size: var(--uw-display-size);
	font-weight: var(--uw-display-weight);
	line-height: var(--uw-display-lh);
	letter-spacing: var(--uw-display-ls);
	text-transform: var(--uw-display-transform);
	color: var(--uw-display-color);
	white-space: nowrap;
}
.elementor-widget.uw-display-sm .elementor-heading-title {
	font-family: var(--uw-display-sm-family);
	font-size: var(--uw-display-sm-size);
	font-weight: var(--uw-display-sm-weight);
	line-height: var(--uw-display-sm-lh);
	letter-spacing: var(--uw-display-sm-ls);
	text-transform: var(--uw-display-sm-transform);
	color: var(--uw-display-sm-color);
	white-space: nowrap;
}
.uw-hero-copy { max-width: 460px !important; }
.uw-hero-copy p, .uw-hero-lede p { color: var(--uw-on-dark); }
.uw-hero-bottom { width: 100%; row-gap: var(--uw-stack) !important; }
.uw-hero-cta { flex-wrap: nowrap !important; }
/* The brand strip runs the full width of the hero frame, edge to edge, and
   fades out at both ends so names appear and disappear rather than being cut. */
.uw-hero-brands {
	position: absolute;
	left: var(--uw-hero-inset);
	right: var(--uw-hero-inset);
	bottom: var(--uw-hero-inset);
	z-index: 3;
	width: auto !important;
	max-width: none !important;
	padding: 18px 0 !important;
	overflow: hidden;
	border-bottom-left-radius: var(--uw-radius);
	border-bottom-right-radius: var(--uw-radius);
}
.uw-hero-brands, .uw-hero-brands > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	column-gap: 0 !important;
	max-width: none !important;
}
.uw-hero-brands .uw-marquee-mask {
	flex: 1 1 auto;
	min-width: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
/* Room under the wordmark for the strip. */
.uw-hero-inner { padding-bottom: calc(var(--uw-gutter) + 64px) !important; }
.uw-hero-brands .uw-eyebrow .elementor-heading-title,
.uw-hero-brands .uw-eyebrow p { color: var(--uw-on-dark); }
.uw-hero-brands .uw-eyebrow .elementor-heading-title::before { background: var(--uw-on-dark); }
.uw-hero .uw-marquee .elementor-icon-list-text,
.uw-hero .uw-marquee-brands .elementor-icon-list-text { color: rgba(255,255,255,.82); }

/* ================================ 9. PAGE HERO — every inner page (Windsor)
   Big title left, short line under it, one picture right. Same page colour as
   the rest of the site: no band, no black. */
.uw-page-hero {
	background-color: transparent !important;
	background-image: none !important;
	padding-top: calc(var(--uw-header-h) + var(--uw-hero-y)) !important;
	padding-bottom: var(--uw-section-y) !important;
	padding-left: var(--uw-gutter) !important;
	padding-right: var(--uw-gutter) !important;
}
.uw-page-hero, .uw-page-hero p { color: var(--uw-body); }
.uw-page-hero h1, .uw-page-hero h2 { color: var(--uw-ink); }
.uw-page-hero .uw-eyebrow .elementor-heading-title { color: var(--uw-eyebrow-color); }
.uw-phero-row, .uw-phero-row > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	column-gap: var(--uw-stack) !important;
	row-gap: var(--uw-stack) !important;
	width: 100%;
}
.elementor-widget.uw-page-title .elementor-heading-title {
	font-family: var(--uw-page-title-family);
	font-size: var(--uw-page-title-size);
	font-weight: var(--uw-page-title-weight);
	line-height: var(--uw-page-title-lh);
	letter-spacing: var(--uw-page-title-ls);
	color: var(--uw-page-title-color);
}
.uw-phero-copy { max-width: 460px; }
.uw-phero-media { border-radius: var(--uw-radius); overflow: hidden; }
.uw-phero-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 11 / 7; border-radius: var(--uw-radius); }
/* A product shot keeps its whole subject inside the same box. */
.uw-phero-media--contain { background: var(--uw-surface); border-radius: var(--uw-radius); }
.uw-phero-media--contain img { object-fit: cover; background: var(--uw-surface); }

/* ====================== 10. STACKING ROWS — Applications (Anode structure)
   Each row pins to the top of the viewport and the next row slides over it.
   Pure CSS: the parent is a plain column, each row is sticky at top 0. */
/* The stack sits on the same measure as every other section, and each row is
   a card of --uw-stack-h pinned centrally in the viewport, so the page ground
   shows above and below it while the next card slides over. */
.uw-stackwrap {
	row-gap: 0 !important; --gap: 0px !important; gap: 0 !important;
	max-width: calc(var(--uw-content-width) + (var(--uw-gutter) * 2)) !important;
	margin-inline: auto !important;
	padding: 0 var(--uw-gutter) !important;
	/* The stack closes like any other section: the same air below the last
	   card as there is above every white line, so the band that follows does
	   not touch it. Margin, not padding — padding would extend the sticky
	   range of the last card. */
	margin-bottom: var(--uw-starter-space);
}
.uw-stackrow {
	position: sticky;
	top: calc((100svh - var(--uw-stack-h)) / 2);
	min-height: var(--uw-stack-h);
	height: var(--uw-stack-h);
	overflow: hidden;
	border-radius: var(--uw-radius);
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	--gap: 0px !important;
	gap: 0 !important;
	column-gap: 0 !important;
	padding: 0 !important;
	background-color: var(--uw-page);
}
.uw-stackrow > .e-con-inner { max-width: none; width: 100%; height: 100%; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0 !important; }
.uw-stack-media {
	position: relative;
	overflow: hidden;
	padding: 0 !important;
	min-height: 100%;
}
.uw-stack-media .elementor-widget-image,
.uw-stack-media .elementor-widget-container,
.uw-stack-media figure { height: 100%; margin: 0; }
.uw-stack-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
}
.uw-stack-panel {
	background-color: var(--uw-surface);
	padding: var(--uw-panel-pad) !important;
	justify-content: center !important;
	row-gap: var(--uw-stack) !important;
	min-height: 100%;
}
.uw-stack-panel h1, .uw-stack-panel h2, .uw-stack-panel h3 { color: var(--uw-primary); }

/* ------------------------------------------------------- 11. MARQUEE BANDS */
.uw-marquee-mask { overflow: hidden; width: 100%; max-width: 100%; }
.uw-marquee {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: max-content !important;
	max-width: none !important;
	animation: uw-marquee-scroll var(--uw-marquee-speed, 42s) linear infinite;
	will-change: transform;
}
.uw-marquee-mask:hover .uw-marquee { animation-play-state: paused; }
@keyframes uw-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.uw-marquee--reverse { animation-direction: reverse; }
.uw-marquee .elementor-icon-list-items { flex-wrap: nowrap !important; }
.uw-marquee .elementor-icon-list-item { white-space: nowrap; }
.elementor-widget.uw-marquee-brands .elementor-icon-list-text {
	font-family: var(--uw-h5-family);
	font-size: var(--uw-h5-size);
	font-weight: var(--uw-h5-weight);
	letter-spacing: var(--uw-h5-ls);
	color: var(--uw-primary);
	white-space: nowrap;
}
.uw-logo-pill {
	background: var(--uw-surface);
	border-radius: var(--uw-radius);
	padding: 18px 28px !important;
	min-width: 180px;
}

/* ------------------------------------------------------- 12. ACCORDION/FAQ */
.uw-faq .elementor-accordion-item,
.uw-faq .e-n-accordion-item {
	border: 0 !important;
	border-bottom: 1px solid var(--uw-line) !important;
	background: none;
}
.uw-faq .elementor-tab-title,
.uw-faq summary {
	font-family: var(--uw-h5-family);
	font-size: var(--uw-h5-size);
	font-weight: var(--uw-h5-weight);
	letter-spacing: var(--uw-h5-ls);
	color: var(--uw-heading);
	padding: 22px 0 !important;
	background: none !important;
}
.uw-faq .elementor-tab-content { border: 0 !important; padding: 0 0 22px !important; background: none !important; }

/* ============================================================ 13. HEADER */
/* The header rides on top of the hero and scrolls away with the page — it does
   not stick. Absolute rather than static so the hero keeps its full height and
   every top-padding measurement below still holds. */
.uw-header-shell {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 99;
	width: 100%;
	padding: 14px var(--uw-gutter);
	background: transparent;
}

/* Three plates on one row: brand hard left, menu dead centre, the single
   contact item hard right. The outer two take equal share of the leftover
   space, which is what keeps the menu centred rather than merely between. */
.uw-header-inner > .e-con-inner {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: var(--uw-tight-gap);
	width: 100%;
	/* The bar keeps the page's measure: logo on the left edge of the text
	   column, menu dead centre, contact on the right edge. */
	max-width: var(--uw-content-width);
	margin-inline: auto;
}
.uw-header-brand   { justify-self: start; justify-content: flex-start !important; }
.uw-header-nav     { justify-self: center; }
.uw-header-actions { justify-self: end; justify-content: flex-end !important; }
.uw-header-actions {
	width: auto !important;
	max-width: none !important;
	background: var(--uw-surface);
	border-radius: var(--uw-radius);
	padding: 5px !important;
	align-items: center !important;
}

/* Contact is a menu item that happens to carry an arrow: the same plate, the
   same padding, the same type and the same hover as the links in the middle. */
.elementor-widget.uw-header-cta .elementor-button {
	min-width: 0 !important;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 8px 20px !important;
	border: 0;
	border-radius: var(--uw-radius) !important;
	clip-path: none !important;
	gap: 10px;
	background-color: transparent;
	color: var(--uw-ink);
	font-family: var(--uw-nav-family);
	font-size: var(--uw-nav-size);
	font-weight: var(--uw-nav-weight);
	line-height: var(--uw-nav-lh);
	letter-spacing: var(--uw-nav-ls);
	text-transform: none;
	transition: background-color .3s ease, color .3s ease;
}
.elementor-widget.uw-header-cta .elementor-button::before { content: none; }
.elementor-widget.uw-header-cta .elementor-button:hover {
	background-color: var(--uw-tint-1);
	color: var(--uw-primary);
}
.elementor-widget.uw-header-cta .elementor-button-content-wrapper { width: auto; gap: 10px; }
.elementor-widget.uw-header-cta .elementor-button-icon svg,
.elementor-widget.uw-header-cta .elementor-button-icon i {
	width: 14px;
	height: 14px;
	display: block;
	fill: currentColor;
	color: inherit;
}
.elementor-widget.uw-header-cta .elementor-button-text { flex: 0 0 auto; }

.uw-header-group {
	background: var(--uw-surface);
	border-radius: var(--uw-radius);
	padding: 5px !important;
	box-shadow: none;
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto;
}
/* Desktop only: the plate holds one row. On a phone the same list becomes the
   dropdown under the toggle and must be free to stack. */
@media (min-width: 1025px) {
	.uw-header-nav .hfe-nav-menu, .uw-header-nav ul.hfe-nav-menu { flex-wrap: nowrap !important; }
	.uw-header-nav .hfe-nav-menu .menu-item { white-space: nowrap; }
	/* Menu plate and contact plate are exactly the same height. */
	.uw-header-group { height: var(--uw-header-plate); align-items: center !important; }
}
.uw-nav-pill .hfe-nav-menu .menu-item > a,
.uw-nav-pill .elementor-nav-menu a {
	border-radius: var(--uw-radius);
	padding: 8px 20px !important;
	font-family: var(--uw-nav-family);
	font-size: var(--uw-nav-size);
	font-weight: var(--uw-nav-weight);
	letter-spacing: var(--uw-nav-ls);
	transition: background-color .3s ease, color .3s ease;
}
.uw-nav-pill .hfe-nav-menu .menu-item > a:hover,
.uw-nav-pill .elementor-nav-menu a:hover { background-color: var(--uw-tint-1); color: var(--uw-primary); }
.uw-nav-pill .hfe-nav-menu .menu-item.current-menu-item > a,
.uw-nav-pill .elementor-nav-menu .current-menu-item a { background-color: var(--uw-tint-1); color: var(--uw-primary); }

.elementor-widget.uw-wordmark .elementor-heading-title,
.elementor-widget.uw-wordmark .elementor-heading-title a {
	font-family: var(--uw-wordmark-family);
	font-size: var(--uw-wordmark-size);
	font-weight: var(--uw-wordmark-weight);
	line-height: var(--uw-wordmark-lh);
	letter-spacing: var(--uw-wordmark-ls);
	text-transform: var(--uw-wordmark-transform);
	color: var(--uw-wordmark-color);
	text-decoration: none;
	transition: color .4s ease;
}

/* The logo stands on its own — no plate behind it. The artwork is a
   transparent PNG, so it sits straight on the photograph. */
.uw-header-brand {
	background: none !important;
	border-radius: 0;
	padding: 0 !important;
	width: auto !important;
	flex: 0 0 auto;
}
.uw-header-logo img { max-height: 48px; width: auto; display: block; }
/* Only the home page puts the header over a photograph. There the mark reads
   as a white silhouette with a soft shadow behind it; on the light inner pages
   it keeps its own colours. */
body.home .uw-header-logo img {
	filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(3, 31, 37, .55));
}
.uw-header-logo .elementor-widget-container { line-height: 0; }
.uw-footer-logo img { max-height: 56px; }

/* The toggle is two rules, not three, and it takes the colour of whatever it
   sits on: white over the home hero photograph, ink on every light page. */
.uw-header-nav .hfe-nav-menu__toggle { color: var(--uw-ink); }
body.home .uw-header-nav .hfe-nav-menu__toggle { color: var(--uw-on-dark); }
.uw-header-nav .hfe-nav-menu__toggle .hfe-nav-menu-icon {
	position: relative;
	display: block;
	width: 26px;
	height: 18px;
	color: inherit !important;
}
.uw-header-nav .hfe-nav-menu__toggle .hfe-nav-menu-icon svg,
.uw-header-nav .hfe-nav-menu__toggle .hfe-nav-menu-icon i { display: none !important; }
.uw-header-nav .hfe-nav-menu__toggle .hfe-nav-menu-icon::before,
.uw-header-nav .hfe-nav-menu__toggle .hfe-nav-menu-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .3s var(--uw-ease), top .3s var(--uw-ease);
}
.uw-header-nav .hfe-nav-menu__toggle .hfe-nav-menu-icon::before { top: 4px; }
.uw-header-nav .hfe-nav-menu__toggle .hfe-nav-menu-icon::after  { top: 12px; }
/* Open: the two rules cross. */
.uw-header-nav .hfe-nav-menu__toggle[aria-expanded="true"] .hfe-nav-menu-icon::before { top: 8px; transform: rotate(45deg); }
.uw-header-nav .hfe-nav-menu__toggle[aria-expanded="true"] .hfe-nav-menu-icon::after  { top: 8px; transform: rotate(-45deg); }
.uw-header-nav .hfe-nav-menu__layout-horizontal .sub-menu,
.uw-header-nav nav.hfe-nav-menu__layout-horizontal.menu-is-active {
	background: var(--uw-surface);
	border-radius: var(--uw-radius);
	box-shadow: 0 30px 70px -30px rgba(5,58,100,.4);
}

/* ============================================================ 14. FOOTER
   Windsor's footer: two white cards on the page colour. The left card holds
   the brand, the tagline, the links and the credit; the right card holds the
   social row and the newsletter. */
/* The footer sits on its own dark ground so the white cards read as panels
   laid on it. */
.uw-footer-shell {
	background-color: var(--uw-footer-bg);
	padding: var(--uw-section-y) var(--uw-gutter) !important;
	row-gap: var(--uw-stack) !important;
	/* The footer closes the page: it carries the estimate CTA at the top, the
	   cards in the middle and the legal line at the foot, over a full band. */
	min-height: var(--uw-footer-h);
	justify-content: space-between !important;
}
.uw-footer-cta,
.uw-footer-cta > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	column-gap: var(--uw-gutter) !important;
	row-gap: var(--uw-stack) !important;
	width: 100%;
}
.elementor-widget.uw-footer-cta-title { max-width: 620px !important; flex: 1 1 380px; }
.uw-footer-cta-text p { color: rgba(255, 255, 255, .78) !important; }
.uw-footer-shell .uw-legal p,
.uw-footer-shell .uw-legal .elementor-heading-title,
.uw-footer-shell > .uw-legal p a,
.uw-footer-shell > .e-con-inner > .uw-legal p { color: rgba(255,255,255,.72) !important; }
.uw-footer-shell .uw-legal a { color: var(--uw-on-dark) !important; text-decoration: none; }
.uw-footer-shell .uw-legal a:hover { text-decoration: underline; }
/* Inside the white cards the text stays dark. */
.uw-footer-card .uw-legal p, .uw-footer-card .uw-legal a { color: var(--uw-body) !important; }
.uw-footer-row,
.uw-footer-row > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	column-gap: var(--uw-tight-gap) !important;
	row-gap: var(--uw-tight-gap) !important;
	width: 100%;
}
/* The brand card takes whatever is left; the contact card keeps a fixed
   measure. Percentages plus a gap always overflow by a pixel or two. */
.uw-footer-row .uw-footer-card:first-child {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
}
.uw-footer-row .uw-footer-card:last-child {
	flex: 0 0 340px !important;
	width: 340px !important;
	min-width: 0 !important;
}
.uw-footer-card {
	background: var(--uw-surface);
	border: 1px solid var(--uw-line-soft);
	border-radius: var(--uw-radius);
	padding: var(--uw-card-pad) !important;
	box-shadow: none;
}
.uw-footer-brandrow, .uw-footer-brandrow > .e-con-inner,
.uw-footer-linkrow,  .uw-footer-linkrow > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;
	align-items: flex-end !important;
}
/* The mark sits on the first line of the tagline beside it, not below it. */
.uw-footer-brandrow, .uw-footer-brandrow > .e-con-inner {
	align-items: flex-start !important;
	column-gap: var(--uw-gutter) !important;
	row-gap: var(--uw-tight-gap) !important;
	width: 100%;
}
.uw-footer-brandrow .uw-footer-tagline { flex: 0 1 420px; max-width: 420px !important; }
.uw-footer-brandrow .uw-footer-logo { flex: 0 0 auto; }
.uw-footer-linkrow .uw-footer-menu { flex: 1 1 auto; min-width: 0; }
.uw-footer-linkrow .uw-legal { flex: 0 1 auto; }
.uw-footer-logo img { max-height: 46px; width: auto; display: block; }
.uw-footer-menu .elementor-nav-menu a,
.uw-footer-menu .hfe-nav-menu .menu-item > a {
	border-radius: var(--uw-radius);
	padding: 8px 18px !important;
	font-family: var(--uw-nav-family);
	font-size: var(--uw-nav-size);
	font-weight: var(--uw-nav-weight);
	letter-spacing: var(--uw-nav-ls);
	color: var(--uw-primary);
	background: var(--uw-tint-1);
	margin: 0 8px 8px 0;
}
.uw-footer-menu .elementor-nav-menu a:hover,
.uw-footer-menu .hfe-nav-menu .menu-item > a:hover { background: var(--uw-tint-2); }
.uw-footer-social .elementor-grid-item .elementor-social-icon,
.uw-footer-social .elementor-social-icon {
	background-color: var(--uw-tint-1);
	color: var(--uw-primary);
	border-radius: var(--uw-radius);
	width: 40px; height: 40px;
	transition: background-color .3s ease, color .3s ease;
}
.uw-footer-social .elementor-social-icon:hover { background-color: var(--uw-btn-a); color: var(--uw-btn-b); transform: none !important; }
.uw-legal p, .uw-legal .elementor-heading-title {
	font-family: var(--uw-body-sm-family);
	font-size: var(--uw-body-sm-size);
	color: var(--uw-body);
}

/* ====================================== 15. NUMBERS, SPEC LISTS, PRODUCTS */
.elementor-widget.uw-marquee-word .elementor-heading-title {
	font-family: var(--uw-marquee-family);
	font-size: var(--uw-marquee-size);
	font-weight: var(--uw-marquee-weight);
	line-height: var(--uw-marquee-lh);
	letter-spacing: var(--uw-marquee-ls);
	text-transform: var(--uw-marquee-transform);
	color: var(--uw-marquee-color);
	white-space: nowrap;
}
.uw-spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.uw-spec-list li {
	position: relative;
	padding-left: 22px;
	font-family: var(--uw-body-family);
	font-size: var(--uw-body-size);
	font-weight: var(--uw-body-weight);
	line-height: var(--uw-body-lh);
	letter-spacing: var(--uw-body-ls);
	color: var(--uw-body);
}
.uw-spec-list li::before {
	content: "";
	position: absolute;
	left: 0; top: .55em;
	width: 7px; height: 7px;
	border-radius: 2px;
	background: var(--uw-accent);
}
/* Every picture on the site fills its frame. */
.uw-product-card .uw-media img,
.uw-product-card .elementor-widget-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center center;
	background: var(--uw-surface);
	width: 100%;
}
.uw-product-card .elementor-widget-button { margin-top: auto; }
.elementor-widget.uw-badge .elementor-heading-title {
	display: inline-block;
	background: var(--uw-tint-1);
	color: var(--uw-primary);
	border: 1px solid var(--uw-line-soft);
	border-radius: var(--uw-radius);
	padding: 6px 14px;
	font-family: var(--uw-body-sm-family);
	font-size: var(--uw-body-sm-size);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.uw-quote .elementor-heading-title::before { content: "\201C"; }
.uw-quote .elementor-heading-title::after  { content: "\201D"; }
.uw-contact-row .elementor-icon-list-item { align-items: flex-start; }
.uw-contact-row .elementor-icon-list-text {
	font-family: var(--uw-body-family);
	font-size: var(--uw-body-size);
	line-height: var(--uw-body-lh);
	color: var(--uw-body);
}

/* ================================= 16. LOOP GRIDS AND CARD CONTENT ALIGN
   Card content lines up with the card's left edge — no stray inner padding. */
.uw-section .elementor-loop-container.elementor-grid {
	gap: var(--uw-grid-gap) !important;
	grid-column-gap: var(--uw-grid-gap) !important;
	grid-row-gap: var(--uw-grid-gap) !important;
}
.uw-section .elementor-loop-container .e-loop-item > .e-con,
.uw-section .elementor-loop-container .e-loop-item { height: 100%; }
/* A grid cell must be allowed to shrink below the intrinsic width of what is
   inside it, or one wide button pushes the whole grid past the page. */
.elementor-loop-container .e-loop-item,
.elementor-loop-container .e-loop-item > .e-con { min-width: 0 !important; }
/* In a loop card the button fills the card rather than holding its own
   measure, which is what pushed the grid past the page. */
.e-loop-item .elementor-widget-button .elementor-button { min-width: 100% !important; width: 100%; }

.uw-card > .e-con-inner > .elementor-widget,
.uw-card > .elementor-widget,
.uw-card .elementor-widget-container { padding-left: 0 !important; padding-right: 0 !important; }
.uw-card .elementor-widget-heading .elementor-heading-title,
.uw-card .elementor-widget-text-editor,
.uw-card .elementor-widget-icon-list { text-align: left; margin-left: 0; }
.uw-card .elementor-widget-icon .elementor-icon-wrapper,
.uw-card .elementor-widget-image,
.uw-card .elementor-widget-button { text-align: left; }
.uw-card .elementor-widget-icon .elementor-icon-wrapper { display: block; }

/* ---------------------------------------- 17. SPLIT ROWS AND LIGHT PANELS */
.uw-split { --gap: 0px !important; gap: 0 !important; column-gap: 0 !important; row-gap: 0 !important; }
.uw-panel-light,
.uw-panel-light p,
.uw-panel-light li,
.uw-panel-light .uw-spec-list li { color: var(--uw-body); }
.uw-panel-light h1, .uw-panel-light h2, .uw-panel-light h3,
.uw-panel-light h4, .uw-panel-light h5, .uw-panel-light h6 { color: var(--uw-primary); }
.uw-panel-light .uw-eyebrow .elementor-heading-title { color: var(--uw-eyebrow-color); }
.uw-panel-light .uw-hr { border-color: var(--uw-line); }

/* --------------------------------------------------- 18. SCROLL REVEAL */
html.uw-motion .uw-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s var(--uw-ease), transform .7s var(--uw-ease);
}
html.uw-motion .uw-reveal.uw-in { opacity: 1; transform: none; }
html.uw-motion .uw-fade { opacity: 0; transition: opacity .8s var(--uw-ease); }
html.uw-motion .uw-fade.uw-in { opacity: 1; }

html.uw-motion .uw-head > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--uw-ease), transform .7s var(--uw-ease);
}
html.uw-motion .uw-head.uw-in > * { opacity: 1; transform: none; }
html.uw-motion .uw-head.uw-in > *:nth-child(2) { transition-delay: .09s; }

html.uw-motion .uw-stagger > * {
	opacity: 0;
	transform: translateY(38px);
	transition: opacity .6s var(--uw-ease), transform .6s var(--uw-ease);
}
html.uw-motion .uw-stagger.uw-in > * { opacity: 1; transform: none; }
html.uw-motion .uw-stagger.uw-in > *:nth-child(1) { transition-delay: 0s; }
html.uw-motion .uw-stagger.uw-in > *:nth-child(2) { transition-delay: .06s; }
html.uw-motion .uw-stagger.uw-in > *:nth-child(3) { transition-delay: .12s; }
html.uw-motion .uw-stagger.uw-in > *:nth-child(4) { transition-delay: .18s; }
html.uw-motion .uw-stagger.uw-in > *:nth-child(5) { transition-delay: .24s; }
html.uw-motion .uw-stagger.uw-in > *:nth-child(6) { transition-delay: .30s; }
html.uw-motion .uw-stagger.uw-in > *:nth-child(7) { transition-delay: .36s; }
html.uw-motion .uw-stagger.uw-in > *:nth-child(8) { transition-delay: .42s; }

/* Hero word-split scaffolding */
.uw-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.uw-word-i { display: inline-block; }

/* Sticky helpers */
.uw-sticky-head { position: sticky; top: var(--uw-sticky-top); z-index: 2; }

/* ------------------------------------------------- 19. REASON CARD (hover
   image reveal). The image sits behind the card and fades in — the card itself
   never moves, so this stays inside the no-motion rule. */
/* The card carries its picture as its own background. A solid pane covers it at
   rest and fades away on hover, so the picture appears without the card
   itself ever moving. */
.uw-reason {
	position: relative;
	overflow: hidden;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	border: 1px solid var(--uw-line-soft);
	border-radius: var(--uw-radius);
	padding: var(--uw-panel-pad) !important;
	box-shadow: none;
	transition: none;
}
.uw-reason::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--uw-surface);
	opacity: 1;
	transition: opacity .5s var(--uw-ease);
	z-index: 0;
}
.uw-reason::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(3,31,37,.86) 0%, rgba(3,31,37,.44) 100%);
	opacity: 0;
	transition: opacity .5s var(--uw-ease);
	z-index: 0;
}
.uw-reason:hover::before { opacity: 0; }
.uw-reason:hover::after  { opacity: 1; }
.uw-reason > *, .uw-reason > .e-con-inner > * { position: relative; z-index: 1; }
.uw-reason:hover { transform: none !important; }
.uw-reason .elementor-heading-title,
.uw-reason p, .uw-reason .elementor-widget-text-editor { transition: color .5s var(--uw-ease); }
.uw-reason:hover .elementor-heading-title,
.uw-reason:hover p,
.uw-reason:hover .elementor-widget-text-editor { color: var(--uw-on-dark) !important; }
.uw-reason:hover .uw-num .elementor-heading-title { color: rgba(255,255,255,.66) !important; }

/* =========================================================== 20. DETAIL POPUP
   One dialog serves every product and every application. It is deliberately
   quiet: the picture on one side, the facts on the other, set in the same
   card surface, radius and type roles as the rest of the site. */
.uw-modal {
	width: min(920px, calc(100vw - (var(--uw-gutter) * 2)));
	max-width: none;
	max-height: min(86svh, 840px);
	padding: 0;
	border: 0;
	border-radius: var(--uw-radius);
	background: var(--uw-surface);
	color: var(--uw-body);
	overflow: visible;
	box-shadow: 0 30px 80px rgba(3, 31, 37, .28);
}
.uw-modal::backdrop { background: rgba(3, 31, 37, .62); }
.uw-modal-content {
	max-height: min(86svh, 840px);
	overflow-y: auto;
	padding: var(--uw-panel-pad);
	border-radius: var(--uw-radius);
}
/* The theme paints every button, so the close control states its own case. */
dialog.uw-modal button.uw-modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 34px;
	height: 34px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	border: 0 !important;
	border-radius: var(--uw-radius) !important;
	background: var(--uw-tint-2) !important;
	color: var(--uw-body) !important;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background .3s var(--uw-ease);
}
dialog.uw-modal button.uw-modal-close:hover { background: var(--uw-tint-3) !important; }
/* The dialog focuses this button when it opens; only a keyboard user needs to
   see that. */
dialog.uw-modal button.uw-modal-close:focus { outline: none; }
dialog.uw-modal button.uw-modal-close:focus-visible { outline: 2px solid var(--uw-accent); outline-offset: 2px; }
.uw-modal-grid {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	column-gap: var(--uw-stack);
}
.uw-modal-media { flex: 0 0 38%; max-width: 38%; }
.uw-modal-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--uw-radius);
}
.uw-modal-media--contain .uw-modal-img {
	background: var(--uw-tint-2);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center center;
}
/* The theme puts a 16px bottom margin under every paragraph, which doubled
   every gap in here. The column is spaced once, by its own row gap. */
.uw-modal-detail {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	row-gap: var(--uw-tight-gap);
}
.uw-modal-detail > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.uw-modal-detail > .uw-modal-cta { margin-top: 8px !important; }
.uw-modal-eyebrow {
	margin: 0;
	font-family: var(--uw-eyebrow-family);
	font-size: var(--uw-eyebrow-size);
	font-weight: var(--uw-eyebrow-weight);
	letter-spacing: var(--uw-eyebrow-ls);
	text-transform: var(--uw-eyebrow-transform);
	color: var(--uw-primary);
}
.uw-modal-title {
	margin: 0;
	font-family: var(--uw-h4-family);
	font-size: var(--uw-h4-size);
	font-weight: var(--uw-h4-weight);
	line-height: var(--uw-h4-lh);
	letter-spacing: var(--uw-h4-ls);
	color: var(--uw-heading);
}
.uw-modal-rating {
	margin: 0;
	font-family: var(--uw-body-sm-family);
	font-size: var(--uw-body-sm-size);
	letter-spacing: var(--uw-body-sm-ls);
	color: var(--uw-accent);
}
.uw-modal-copy p { margin: 0 0 10px; }
.uw-modal-copy p:last-child { margin-bottom: 0; }
.uw-modal-label {
	margin: 6px 0 0;
	font-family: var(--uw-eyebrow-family);
	font-size: var(--uw-eyebrow-size);
	font-weight: var(--uw-eyebrow-weight);
	letter-spacing: var(--uw-eyebrow-ls);
	text-transform: var(--uw-eyebrow-transform);
	color: var(--uw-steel);
}
.uw-modal-detail .uw-spec-list { margin: 0; }
.uw-modal-cta { align-self: flex-start; margin-top: 6px; }
.uw-modal-arrow { font-size: 16px; line-height: 1; }
.uw-modal-wait {
	margin: 0;
	font-family: var(--uw-body-sm-family);
	font-size: var(--uw-body-sm-size);
	color: var(--uw-steel);
}
html:has(dialog.uw-modal[open]) { overflow: hidden; }

/* ====================================================== 21. PAGE TRANSITION
   Twenty vertical blocks wipe across in the page colour, the mark draws on
   that ground, and the next page wipes back open from the other side. */
.uw-pt {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
}
.uw-pt-blocks {
	position: absolute;
	inset: 0;
	display: flex;
}
.uw-pt-block {
	flex: 1 1 auto;
	height: 100%;
	background: var(--uw-page);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}
.uw-pt--anim .uw-pt-block { transition: transform .26s cubic-bezier(.65, 0, .35, 1); }
.uw-pt-logo {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--uw-page);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s var(--uw-ease), visibility 0s linear .25s;
}
.uw-pt--logo .uw-pt-logo { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.uw-pt-logo-box { width: min(280px, 56vw); }
.uw-pt-mark { display: block; width: 100%; height: auto; }
.uw-pt-mark .uw-pt-bands { opacity: 0; transition: opacity .3s var(--uw-ease); }
.uw-pt--fill .uw-pt-mark .uw-pt-bands { opacity: 1; }
.uw-pt-draw { stroke-dashoffset: var(--uw-pt-len, 0); stroke-dasharray: var(--uw-pt-len, 0); }
.uw-pt--draw .uw-pt-draw { transition: stroke-dashoffset .5s cubic-bezier(.4, 0, .2, 1); stroke-dashoffset: 0; }
/* Failsafe: if the script stops after covering the page, the curtain clears
   itself rather than leaving a blank screen. */
@keyframes uw-pt-failsafe { to { transform: scaleX(0); } }
html.uw-pt-cover .uw-pt-block { transform: scaleX(1); animation: uw-pt-failsafe 0s linear 2.5s forwards; }
@media (prefers-reduced-motion: reduce) {
	.uw-pt { display: none; }
}

/* --------------------------------------------------------- 22. RESPONSIVE */
@media (max-width: 1024px) {
	.uw-sticky-head { position: static; top: auto; }
	/* Header: brand left, menu toggle right, one row that never wraps. */
	.uw-header-inner > .e-con-inner, .uw-header-inner {
		display: flex !important;
		grid-template-columns: none;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
	.uw-header-inner > .e-con-inner { column-gap: var(--uw-tight-gap) !important; }
	/* Logo on the left, contact and the menu toggle together on the right. */
	.uw-header-brand   { order: 1; width: auto !important; flex: 0 0 auto; }
	.uw-header-actions { order: 2; width: auto !important; flex: 0 0 auto; margin-left: auto !important; }
	.uw-header-nav     { order: 3; width: auto !important; flex: 0 0 auto !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
	/* Collapsed to the toggle, the menu must shrink-wrap it — otherwise it
	   keeps the width of the hidden link list and eats the row. */
	.uw-header-nav > .elementor-widget,
	.uw-header-nav .elementor-widget-container,
	.uw-header-nav .hfe-nav-menu { width: auto !important; flex: 0 0 auto !important; }
	/* The collapsed panel is only hidden, not removed, so it keeps the width of
	   the whole link list and eats the row. Take it out of flow: the bar then
	   shrinks to the toggle and the menu opens as a card beneath it. */
	.uw-header-nav .hfe-nav-menu { justify-content: flex-end !important; }
	/* Anchored to the header shell, so it drops under the bar at the page
	   gutter whatever the toggle's own width. */
	.uw-header-nav nav.hfe-nav-menu__layout-horizontal {
		position: absolute !important;
		top: calc(100% + 14px) !important;
		right: 0 !important;
		left: auto !important;
		width: max-content !important;
		min-width: 220px;
		max-width: calc(100vw - (var(--uw-gutter) * 2)) !important;
		flex-direction: column !important;
		padding: 6px !important;
		z-index: 30;
	}
	.uw-header-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu {
		flex-direction: column !important;
		width: 100% !important;
		align-items: stretch !important;
	}
	.uw-header-nav nav.hfe-nav-menu__layout-horizontal .menu-item { width: 100%; }
	.uw-head { column-gap: var(--uw-tight-gap) !important; }
	.uw-head > .elementor-widget-heading { max-width: 100%; }
	/* The cards keep stacking on a phone and a tablet: the row stays sticky and
	   keeps its height, but turns into a column — picture on top, panel under
	   it — so the whole card still fits one screen. */
	.uw-stackrow,
	.uw-stackrow > .e-con-inner {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
	}
	.uw-stack-media {
		flex: 0 0 42% !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0;
	}
	.uw-stack-panel {
		flex: 1 1 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0;
		overflow: hidden;
		row-gap: var(--uw-block-gap) !important;
	}
	.uw-footer-row, .uw-footer-row > .e-con-inner { flex-wrap: wrap !important; }
	.uw-footer-row .uw-footer-card:last-child { flex: 1 1 100% !important; width: 100% !important; }

	.elementor-widget.uw-display .elementor-heading-title { white-space: normal; }
}
@media (max-width: 767px) {
	.uw-header-actions { display: none; }
	.uw-header-nav .menu-item > a { padding: 14px 18px !important; }
	.elementor-widget.uw-btn .elementor-button, a.uw-btn-raw { min-width: 100%; }
	.elementor-widget.uw-btn, .elementor-widget.uw-cat-chip { width: 100%; }
	.uw-chiprow .elementor-widget.uw-cat-chip { width: auto; }
	.elementor-widget.uw-cat-chip .elementor-button { min-width: 0; }
	.uw-head { flex-direction: column !important; }
	.uw-hero-word, .uw-hero-word > .e-con-inner { flex-wrap: wrap !important; column-gap: 8px !important; align-items: baseline !important; }
	.uw-phero-row, .uw-phero-row > .e-con-inner { flex-direction: column !important; }
	.uw-hero-cta, .uw-hero-cta > .e-con-inner { flex-wrap: wrap !important; width: 100% !important; }
	.uw-hero-inner { padding-bottom: calc(var(--uw-gutter) + 56px) !important; }
	/* The hero card is a desktop and tablet flourish; on a phone it competes
	   with the wordmark for the little height there is, so it stands down. */
	.uw-glass { display: none !important; }
	/* A phone gives the panel more of the card than a tablet does. */
	.uw-stack-media { flex-basis: 38% !important; }
	.uw-footer-brandrow .uw-footer-tagline { flex: 1 1 100%; max-width: 100% !important; }
	/* Thumb-sized targets: a line of text is not a button on a phone. */
	.uw-footer-shell .elementor-icon-list-item { padding-block: 9px; }
	.uw-footer-shell .uw-legal a { display: inline-block; padding-block: 8px; }
	.uw-modal-grid { flex-direction: column; row-gap: var(--uw-tight-gap); }
	.uw-modal-media { flex: 1 1 auto; max-width: 100%; width: 100%; }
	.uw-modal-content { padding: var(--uw-card-pad); }
	/* Nothing keeps a fixed measure on a phone: any widget carrying a desktop
	   width would push the page sideways. */
	.uw-section .elementor-widget,
	.uw-head .elementor-widget:last-child,
	.elementor-widget.uw-h2-narrow,
	.uw-phero-copy, .uw-hero-copy { max-width: 100% !important; }
}

/* ----------------------------------------------------- 21. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
	.uw-marquee { animation: none; }
	html.uw-motion .uw-reveal, html.uw-motion .uw-fade,
	html.uw-motion .uw-head > *, html.uw-motion .uw-stagger > * {
		opacity: 1 !important;
		transform: none !important;
	}
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}