/*
 * Rotex Glass, site-wide styles.
 *
 * Loaded on every page. Sections add their rules below their own heading;
 * shortcode and widget styles stay in front.css and load only where used.
 *
 * Every colour below is sampled from the Rotex logo. Nothing else is a
 * brand colour. Change them here and nowhere else.
 */

:root {
	/* Sampled from the logo file: red #AD0A04, black #000101, grey #5E5E5D. */
	--rotex-red: #ad0a04;
	--rotex-red-dark: #8c0803;   /* darkened for hover, same hue */
	--rotex-ink: #000101;
	--rotex-grey: #5e5e5d;
	--rotex-paper: #ffffff;

	/* Neutral surfaces, mixed from the logo grey so sections separate by
	   tone rather than by borders. */
	--rotex-surface: #f5f5f4;
	--rotex-surface-deep: #ebebea;

	/* Body text sits slightly lighter than pure logo black for reading
	   comfort; it still passes AA on every surface above. */
	--rotex-text: #1c1c1b;
	--rotex-text-muted: #5e5e5d;

	--rotex-whatsapp: #25d366;
	--rotex-radius: 999px;
	--rotex-measure: 68ch;
}

/* ---------------------------------------------------------------------
 * WhatsApp button (includes/sections/whatsapp-button.php)
 * ------------------------------------------------------------------- */

.rotex-whatsapp {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9000;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px 12px 14px;
	background: var(--rotex-whatsapp);
	color: #fff;
	text-decoration: none;
	font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	border-radius: var(--rotex-radius);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.rotex-whatsapp:hover,
.rotex-whatsapp:focus-visible {
	color: #fff;
	background: #1ebe5a;
	outline: none;
}

.rotex-whatsapp svg {
	width: 22px;
	height: 22px;
	flex: none;
	fill: currentColor;
}

@media (max-width: 600px) {
	.rotex-whatsapp span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.rotex-whatsapp {
		padding: 14px;
	}
}

/* ---------------------------------------------------------------------
 * Contact details, showrooms and the next step
 * (includes/frontend/class-rotex-contact.php)
 *
 * These live in core.css rather than front.css because the header and the
 * footer carry them, which means every page does. Loading them on demand
 * would mean loading them always, at the cost of an extra request.
 *
 * No borders anywhere below: separation is spacing and background tone.
 * ------------------------------------------------------------------- */

.rotex-contact {
	color: inherit;
	text-decoration: none;
}

.rotex-contact:hover,
.rotex-contact:focus-visible {
	color: var(--rotex-red);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.rotex-contact-places {
	display: flex;
	flex-wrap: wrap;
	gap: 28px 56px;
}

.rotex-contact-places.rotex-places-stacked {
	flex-direction: column;
	gap: 18px;
}

/* Footer link lists. The block editor's "none" list style is not a thing
   every theme registers, so the rule lives here where it is guaranteed. */

.rotex-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rotex-footer-links a {
	text-decoration: none;
}

.rotex-footer-links a:hover,
.rotex-footer-links a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.rotex-contact-place {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 12rem;
}

.rotex-contact-place-city {
	font-weight: 700;
}

.rotex-contact-place-address {
	/* Not a fixed grey. This block sits on white in one place and on the black
	   footer in another, and a single grey cannot pass contrast on both.
	   Fading the inherited colour does, whichever ground it lands on. */
	color: inherit;
	opacity: 0.72;
}

.rotex-contact-place-phone {
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.rotex-contact-place-phone:hover,
.rotex-contact-place-phone:focus-visible {
	color: var(--rotex-red);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* The buttons. One shape, three tones. */

.rotex-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 26px;
	min-height: 48px;          /* a thumb needs 48px; smaller is a missed tap */
	border: 0;                 /* themes and builders like to add one; rule 5 says no */
	border-radius: var(--rotex-radius);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.rotex-button-icon {
	flex: 0 0 auto;
	margin-top: -1px;
}

/* The theme and Elementor both colour links site-wide, and their selectors
   carry more weight than a bare class. :root lifts these to match without
   reaching for !important, which would only move the fight somewhere else. */

:root .rotex-button-primary,
:root .rotex-button-primary:hover,
:root .rotex-button-primary:focus-visible {
	color: var(--rotex-paper);
}

:root .rotex-button-quiet {
	color: var(--rotex-text);
}

:root .rotex-button-quiet:hover,
:root .rotex-button-quiet:focus-visible {
	color: var(--rotex-paper);
}

:root .rotex-button-whatsapp,
:root .rotex-button-whatsapp:hover,
:root .rotex-button-whatsapp:focus-visible {
	color: #0b2b16;
}

:root .rotex-button {
	border: 0;
}

.rotex-button-primary {
	background: var(--rotex-red);
	color: var(--rotex-paper);
}

.rotex-button-primary:hover,
.rotex-button-primary:focus-visible {
	background: var(--rotex-red-dark);
	color: var(--rotex-paper);
}

.rotex-button-quiet {
	/* A tint rather than a fixed grey. This button appears on white, on
	   Surface and on Surface deep, and any single grey is invisible on one of
	   them: it disappeared entirely on the grey call to action band, where it
	   happened to match the ground exactly. A translucent ink darkens whatever
	   is behind it, so it always reads. */
	background: rgba(0, 1, 1, 0.08);
	color: var(--rotex-text);
}

.rotex-button-quiet:hover,
.rotex-button-quiet:focus-visible {
	background: var(--rotex-ink);
	color: var(--rotex-paper);
}

.rotex-button-whatsapp {
	background: var(--rotex-whatsapp);
	color: #0b2b16;
}

.rotex-button-whatsapp:hover,
.rotex-button-whatsapp:focus-visible {
	background: #1ebe5a;
	color: #0b2b16;
}

.rotex-button:focus-visible {
	outline: 3px solid var(--rotex-ink);
	outline-offset: 3px;
}

/* The next step. */

.rotex-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	padding: 40px clamp(20px, 5vw, 56px);
	border-radius: 20px;
}

.rotex-cta-surface {
	background: var(--rotex-surface);
}

.rotex-cta-plain {
	padding-left: 0;
	padding-right: 0;
}

.rotex-cta-words {
	flex: 1 1 22rem;
}

/* The panel tone.
 *
 * The same widget, turned into a block of colour with everything stacked and
 * centred: heading, one line under it, both buttons below. It is the closing
 * step on a long page, where a quiet band beside a column of text is too easy
 * to read past.
 *
 * The ground is the brand red, so the primary button inverts to white with red
 * on it. A red button on red would disappear, and a grey one would be the same
 * mistake made three times already: no interactive element on this site gets a
 * fixed grey. The second button is white at sixteen per cent, which takes its
 * colour from whatever it sits on and cannot go invisible.
 */
.rotex-cta-panel {
	display: block;
	text-align: center;
	/* The footer band runs the full width of the screen. The panel inside it
	 * holds the same measure as everything else on the page, so it lines up
	 * with the section above it instead of reaching past it. */
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	background: var(--rotex-red);
	padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 64px);
	border-radius: 28px;
}

.rotex-cta-panel .rotex-cta-words {
	max-width: none;
}

/* The heading gets the full measure so it holds one line on a desk. It is the
   line that has to be read at a glance, and a two line heading over a two line
   paragraph is four lines of centred text, which nobody reads. The paragraph
   under it keeps the short measure, because that is what makes it readable. */
.rotex-cta-panel .rotex-cta-text {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}

.rotex-cta-panel .rotex-cta-title {
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--rotex-paper);
}

.rotex-cta-panel .rotex-cta-text {
	margin-top: 14px;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	color: rgba(255, 255, 255, 0.88);
}

.rotex-cta-panel .rotex-cta-actions {
	justify-content: center;
	margin-top: 32px;
}

.rotex-cta-panel .rotex-button-primary {
	background: var(--rotex-paper);
	color: var(--rotex-red);
}

/* The panel on a phone --------------------------------------------------
 *
 * The clamp floors were set for a tablet and are too heavy at 375px: the
 * heading took three lines and the call button's own number wrapped. Sized
 * down here so the heading holds two lines and the number stays on one,
 * which is the line somebody is actually going to press.
 * ------------------------------------------------------------------- */
@media (max-width: 480px) {

	.rotex-cta-panel {
		padding: 34px 20px 36px;
		border-radius: 20px;
	}

	.rotex-cta-panel .rotex-cta-title {
		font-size: 1.45rem;
		line-height: 1.2;
	}

	.rotex-cta-panel .rotex-cta-text {
		margin-top: 10px;
		font-size: 0.95rem;
		line-height: 1.55;
	}

	.rotex-cta-panel .rotex-cta-actions {
		margin-top: 22px;
	}

	.rotex-cta-panel .rotex-button {
		font-size: 0.95rem;
		padding-inline: 20px;
	}
}

.rotex-cta-panel .rotex-button-primary:hover,
.rotex-cta-panel .rotex-button-primary:focus-visible {
	background: var(--rotex-surface);
	color: var(--rotex-red-dark);
}

/* The call button on the red panel.
 *
 * White at sixteen per cent was too polite: on red it read as a slightly
 * lighter red, and half the people who would rather telephone than fill in a
 * form never saw it. Solid ink is unmistakable against the red, it is a colour
 * the brand already owns, and it stays clearly the second choice beside the
 * white one without disappearing. */
:root .rotex-cta-panel .rotex-button-quiet {
	background: var(--rotex-ink);
	color: var(--rotex-paper);
}

:root .rotex-cta-panel .rotex-button-quiet:hover,
:root .rotex-cta-panel .rotex-button-quiet:focus-visible {
	background: var(--rotex-paper);
	color: var(--rotex-ink);
}

/* Both buttons lift on hover. On a solid block of colour a change of shade is
   easy to miss; movement is not, and it tells a visitor the thing under the
   cursor is a control before they click it. */
.rotex-cta-panel .rotex-button:hover,
.rotex-cta-panel .rotex-button:focus-visible {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.rotex-cta-panel .rotex-button:hover,
	.rotex-cta-panel .rotex-button:focus-visible {
		transform: none;
	}
}

.rotex-cta-panel .rotex-button:focus-visible {
	outline-color: var(--rotex-paper);
}

.rotex-cta-title {
	margin: 0;
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--rotex-ink);
}

.rotex-cta-text {
	margin: 8px 0 0;
	color: var(--rotex-text-muted);
}

.rotex-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 600px) {
	.rotex-cta-actions {
		width: 100%;
	}

	.rotex-cta-actions .rotex-button {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rotex-button {
		transition: none;
	}
}

/* Showrooms shown as cards rather than lines. Used where the block has to
   carry visual weight of its own, opposite a column of text. */

.rotex-contact-places.rotex-places-cards {
	gap: 20px;
}

.rotex-places-cards .rotex-contact-place {
	flex: 1 1 13rem;
	gap: 6px;
	padding: 26px 28px;
	border-radius: 16px;
	background: var(--rotex-surface);
}

.rotex-places-cards .rotex-contact-place-city {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.rotex-places-cards .rotex-contact-place-phone {
	margin-top: 6px;
	font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Short rules between the fact columns
 *
 * Drawn from the first widget in each column rather than from the column
 * itself, because Elementor quietly ignores a CSS class set on an inner
 * container while honouring one set on a widget. The line lives in the gap
 * between two columns, so it separates rather than boxes, and the first
 * column does not carry one because there is nothing to its left.
 * ------------------------------------------------------------------- */

.rotex-fact-rule::before {
	content: "";
	position: absolute;
	left: -24px;
	top: 2px;
	width: 1px;
	height: 46px;
	background: rgba(255, 255, 255, 0.22);
}

/* Two across on a tablet: a line would fall through the middle of the block
   rather than between the columns, so it goes. */
@media (min-width: 768px) and (max-width: 1024px) {
	.rotex-fact-rule::before {
		display: none;
	}
}

/* Stacked on a phone, so the rule turns and sits above each fact instead. */
@media (max-width: 767px) {
	.rotex-fact-rule::before {
		left: 0;
		right: 0;
		top: -22px;
		width: auto;
		height: 1px;
	}
}

/* ---------------------------------------------------------------------
 * The header on a phone
 *
 * The sticky header has to stay short, because whatever it takes it takes
 * from every screen of every page. The showroom sentence and the email
 * address are useful on a wide screen and are the first things to go on a
 * narrow one: the phone number is the action a visitor on a phone actually
 * takes, so it is the one that stays.
 * ------------------------------------------------------------------- */

@media (max-width: 900px) {
	/* The showroom sentence and the email are useful on a wide screen and are
	   the first things to go on a narrow one. What is left is the phone
	   number, centred and given a real tap target, because on a phone that is
	   the action a visitor actually takes. The bar becomes one line. */

	.rotex-utility-note,
	.rotex-utility .rotex-contact-email {
		display: none;
	}

	.rotex-utility {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* The number goes to the end of the bar rather than the middle of it. The
	   quote button below is what should hold the centre line; two things
	   centred one above the other read as one stacked block and the eye stops
	   telling them apart. */
	.rotex-utility > .wp-block-group {
		justify-content: flex-end;
		gap: 0;
	}

	.rotex-utility .wp-block-group .wp-block-group {
		gap: 0;
	}

	.rotex-utility .rotex-contact-phone {
		display: block;
		padding: 11px 12px;
		font-weight: 700;
		letter-spacing: 0.01em;
	}

	.rotex-utility .rotex-contact-phone:hover,
	.rotex-utility .rotex-contact-phone:focus-visible {
		color: inherit;
		text-decoration: underline;
	}

	.rotex-sticky-nav {
		padding-top: 0.7rem !important;
		padding-bottom: 0.7rem !important;
	}

	.rotex-sticky-nav .wp-block-button__link {
		padding: 11px 18px;
		font-size: 0.9rem;
	}

	.rotex-sticky-nav .wp-block-site-title {
		font-size: 1.2rem;
	}
}

/* ---------------------------------------------------------------------
 * The navigation overlay on a phone
 *
 * Colour comes from the navigation block itself (overlay background and text
 * are block attributes, and they beat a stylesheet, which is why setting them
 * in CSS did nothing). What is left to do here is the spacing.
 *
 * The overlay takes its padding from the theme's root padding, and that is
 * zero on this site so a full width hero can reach the edge of the screen.
 * The side effect is menu items pressed against the left edge of the phone,
 * so the padding is put back explicitly. The selector is more specific than
 * the block's own rule so it wins wherever the stylesheets load.
 * ------------------------------------------------------------------- */

.wp-site-blocks .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: 20px;
	padding-right: 26px;
	padding-bottom: 48px;
	padding-left: 26px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	padding-top: 40px;
}

/* Everything in the open menu starts at the same left edge: the search field,
   the headings, and the children under an open heading. The theme centres the
   list, which puts every item on a different left edge and gives the eye
   nothing to run down. A menu is read as a column, not as a poster. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	gap: 2px;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 14px 0;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	text-decoration: none;
}

/*
 * Focus in the overlay, without drawing a box
 *
 * This used to be an outline, and an outline round one word in a full screen
 * list is a rectangle sitting in the middle of the menu. Rule 5 rules that
 * out, and on the phone it read as a mistake rather than as a state.
 *
 * It cannot simply be deleted. Opening the menu moves focus into it, and
 * anybody navigating by keyboard has nothing else to go on. So focus is shown
 * in the language the current item already uses: a red bar down the left and
 * a rule under the word. Two marks rather than one, so focus stays
 * distinguishable from the page you are already on.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:focus,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:focus-visible {
	outline: none;
	box-shadow: none;
	border: 0;
	background: transparent;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:focus-visible {
	position: relative;
	padding-left: 16px;
	text-decoration: underline;
	text-decoration-color: var(--rotex-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:focus-visible::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	bottom: 18px;
	width: 3px;
	background: var(--rotex-red);
	border-radius: 3px;
}

.wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* ---------------------------------------------------------------------
 * Where you are in the navigation
 *
 * A short rule under the word, in the Rotex red, set below the text rather
 * than around it. Rule 5 rules out a box or a pill here, and a box would be
 * wrong anyway: the eye should find the current section without the menu
 * gaining a second kind of object.
 *
 * The rule is drawn on a pseudo element with a fixed height rather than a
 * text-decoration, so it keeps its weight whatever the font is doing, and it
 * is drawn on the item rather than the link so it does not move when a link
 * is focused.
 *
 * Both class names are listed. WordPress writes current-menu-item when the
 * menu points at exactly the page being viewed, and Rotex_Nav writes
 * rotex-current when the visitor is deeper inside that section, for instance
 * reading one product under Products.
 * ------------------------------------------------------------------- */

.rotex-sticky-nav .wp-block-navigation-item {
	position: relative;
}

.rotex-sticky-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.rotex-sticky-nav .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.rotex-sticky-nav .wp-block-navigation-item.rotex-current > .wp-block-navigation-item__content {
	color: var(--rotex-red);
	font-weight: 700;
}

.rotex-sticky-nav .wp-block-navigation-item.current-menu-item::after,
.rotex-sticky-nav .wp-block-navigation-item.current-menu-ancestor::after,
.rotex-sticky-nav .wp-block-navigation-item.rotex-current::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 2px;
	background: var(--rotex-red);
	border-radius: 2px;
}

/* A submenu item marks itself in colour only. Underlining inside an open
 * dropdown would draw a line across a panel it does not belong to. */
.rotex-sticky-nav .wp-block-navigation__submenu-container .wp-block-navigation-item::after {
	display: none;
}

.rotex-sticky-nav .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.rotex-sticky-nav .wp-block-navigation__submenu-container .wp-block-navigation-item.rotex-current > .wp-block-navigation-item__content {
	color: var(--rotex-red);
}

/* On a phone the menu is a full screen list, where a rule under one line
 * reads as a divider between two. The mark there is a short bar down the
 * left of the word, in the space the padding already provides. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::after {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.rotex-current > .wp-block-navigation-item__content {
	position: relative;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.rotex-current > .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	/* In the gutter, not in the row.
	 *
	 * The mark used to be paid for with sixteen pixels of padding on the item
	 * itself, which pushed the word right. On a page under Portfolio, that
	 * made Portfolio sit further in than the four headings beside it and read
	 * as a child of Products rather than as the section you are in. The bar
	 * now hangs in the overlay's own left margin, so every heading keeps the
	 * same left edge whichever page you are on. */
	left: -14px;
	top: 18px;
	bottom: 18px;
	width: 3px;
	background: var(--rotex-red);
	border-radius: 3px;
}

/* The desktop colour rule reaches inside the open overlay, because the
 * overlay is part of the same header. Red on the dark overlay would be hard
 * to read, so inside it the current item keeps the overlay's own white and is
 * marked by the bar alone. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.rotex-current > .wp-block-navigation-item__content {
	color: inherit;
}

/* ---------------------------------------------------------------------
 * Dropdowns that open under the pointer
 *
 * WordPress opens a submenu on hover already. What it does not do is give
 * the pointer time, and that is what makes a hover menu feel cheap: it flies
 * open when the mouse merely crosses a word on its way somewhere else, and it
 * snaps shut in the gap between the word and the panel below it.
 *
 * Two corrections. Opening waits a moment, closing does not, which is the
 * pairing that reads as deliberate rather than twitchy. And the panel is
 * pulled up so its top edge meets the item, with a transparent strip above it
 * to carry the pointer across, so travelling down to the panel never crosses
 * dead space.
 *
 * Click and keyboard still work untouched, which matters: this is the only
 * way in on a touch screen, and the only way in for anybody navigating by
 * keyboard.
 * ------------------------------------------------------------------- */

.rotex-sticky-nav .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
	transition: opacity 160ms ease, visibility 0s linear 260ms;
	transition-delay: 220ms, 220ms;
	opacity: 0;
}

.rotex-sticky-nav .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.rotex-sticky-nav .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.rotex-sticky-nav .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
	transition-delay: 220ms, 0s;
}

/* The strip that carries the pointer from the word down into the panel. */
.rotex-sticky-nav .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}

.rotex-sticky-nav .wp-block-navigation__submenu-container {
	background: var(--rotex-paper);
	padding: 10px 0;
	min-width: 240px;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(0, 1, 1, 0.13);
}

.rotex-sticky-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 22px;
	color: var(--rotex-text);
	white-space: nowrap;
}

.rotex-sticky-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--rotex-surface);
	color: var(--rotex-red);
}

@media (prefers-reduced-motion: reduce) {
	.rotex-sticky-nav .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * The search field in the header
 *
 * Sized to sit between the menu and the quote button without competing with
 * either. It is a filled field rather than an outlined one, because rule 5
 * rules out the outline and because a tinted field reads as somewhere to type
 * without drawing a rectangle on the header.
 *
 * Below the menu breakpoint it moves into the overlay and takes the full
 * width, where it is the first thing under the menu items.
 * ------------------------------------------------------------------- */

.rotex-header-search {
	max-width: 230px;
	margin: 0;
}

.rotex-header-search .wp-block-search__inside-wrapper {
	background: var(--rotex-surface);
	border: 0;
	border-radius: 999px;
	padding: 2px 4px 2px 6px;
}

.rotex-header-search .wp-block-search__input {
	background: transparent;
	border: 0;
	padding: 8px 10px;
	font-size: 0.86rem;
	color: var(--rotex-text);
	min-width: 0;
}

.rotex-header-search .wp-block-search__input::placeholder {
	color: var(--rotex-grey);
	opacity: 1;
}

.rotex-header-search .wp-block-search__input:focus {
	outline: 2px solid var(--rotex-red);
	outline-offset: 2px;
	border-radius: 999px;
}

.rotex-header-search .wp-block-search__button {
	background: transparent;
	border: 0;
	padding: 6px 8px;
	color: var(--rotex-grey);
	cursor: pointer;
}

.rotex-header-search .wp-block-search__button:hover {
	color: var(--rotex-red);
}

.rotex-header-search .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

@media (max-width: 900px) {
	.rotex-header-search {
		max-width: none;
		width: 100%;
	}

	.rotex-header-search .wp-block-search__inside-wrapper {
		background: rgba(255, 255, 255, 0.12);
	}

	.rotex-header-search .wp-block-search__input,
	.rotex-header-search .wp-block-search__button {
		color: inherit;
	}
}

/* ---------------------------------------------------------------------
 * The dropdown panel is white
 *
 * Twenty Twenty-Five paints a submenu with the theme's own background and
 * text colours, and the header sets those dark, so the panel came down dark
 * as well. It is a panel floating over the page rather than part of the dark
 * bar, so it takes the page's colours: white ground, ink text, red on hover.
 *
 * The selectors are written against the block's own element and repeated for
 * the theme's colour classes, because those classes set the colour inline on
 * the same element and a plainer rule loses to them.
 * ------------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container.has-background,
.wp-site-blocks .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--rotex-paper);
	color: var(--rotex-text);
	border: 0;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:visited,
.wp-site-blocks .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--rotex-text);
	background-color: transparent;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: var(--rotex-red);
	background-color: var(--rotex-surface);
}

/* Inside the phone overlay the menu is one dark full screen list and a white
 * panel dropped into the middle of it would be a hole, so there the submenu
 * stays part of the list. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.wp-site-blocks .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent;
	color: inherit;
	box-shadow: none;
	padding: 0;
	min-width: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-site-blocks .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: inherit;
	font-size: 1.05rem;
	font-weight: 500;
	padding-left: 16px;
}

/* ---------------------------------------------------------------------
 * The dropdown is white, and here is why this needs !important
 *
 * The navigation block paints the dropdown panel with the same two colours
 * it paints the phone overlay with, because WordPress treats them as one
 * setting. The overlay wants dark. The dropdown wants white. There is no
 * block attribute that says both, so one of the two has to be corrected in
 * CSS, and the classes WordPress writes for a preset colour carry !important
 * of their own, which nothing without it can beat.
 *
 * So: !important, narrowly. Only the panel, only its links, and only when
 * the responsive container is not open, so the phone overlay keeps the dark
 * it is supposed to have.
 * ------------------------------------------------------------------- */

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container.has-background {
	background-color: var(--rotex-paper) !important;
	color: var(--rotex-text) !important;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:visited {
	color: var(--rotex-text) !important;
	background-color: transparent !important;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: var(--rotex-red) !important;
	background-color: var(--rotex-surface) !important;
}

/* ---------------------------------------------------------------------
 * The header on a phone: two rows, not four
 *
 * The header is one flex row of two things: the site title, and a group
 * holding the menu, the search field and the quote button. On a wide screen
 * that is right. On a phone the row runs out of width and every item drops
 * onto a line of its own, so the header became four stacked rows and pushed
 * the page itself off the first screen.
 *
 * The fix is to stop treating the second group as one object. display:contents
 * dissolves it, so the menu button, the search and the quote button become
 * direct children of the header row and can be placed individually. Then a
 * two by two grid puts the title and the menu button on the first row, and the
 * search and the quote button on the second.
 *
 * A grid rather than wrapping, because wrapping would depend on how wide the
 * site title happens to be, and the title is going to be replaced by the logo.
 * The grid holds whatever the title's width turns out to be.
 * ------------------------------------------------------------------- */

@media (max-width: 900px) {

	.rotex-sticky-nav > .wp-block-group {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 14px 16px;
	}

	/* Dissolve the wrapper so its three children can be placed one by one. */
	.rotex-sticky-nav > .wp-block-group > .wp-block-group {
		display: contents;
	}

	.rotex-sticky-nav .wp-block-site-title,
	.rotex-sticky-nav .wp-block-site-logo {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	.rotex-sticky-nav .wp-block-navigation {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	.rotex-sticky-nav .rotex-header-search {
		grid-column: 1;
		grid-row: 2;
		min-width: 0;
	}

	.rotex-sticky-nav .wp-block-buttons {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
		margin: 0;
	}

	/* The quote button gives up some of its padding so the search keeps a
	 * usable width on a narrow phone. */
	.rotex-sticky-nav .wp-block-buttons .wp-block-button__link {
		padding-left: 20px;
		padding-right: 20px;
		white-space: nowrap;
	}

	/* The overlay is fixed to the viewport, so once it is open it must not be
	 * a grid cell in the header row. */
	.rotex-sticky-nav .wp-block-navigation__responsive-container.is-menu-open {
		grid-column: 1 / -1;
		grid-row: 1;
	}
}

/* Under about 380px the two second row items stop fitting side by side, so the
 * search takes the width and the button sits under it. */
@media (max-width: 380px) {

	.rotex-sticky-nav .rotex-header-search {
		grid-column: 1 / -1;
	}

	.rotex-sticky-nav .wp-block-buttons {
		grid-column: 1 / -1;
		grid-row: 3;
		justify-self: stretch;
	}

	.rotex-sticky-nav .wp-block-buttons .wp-block-button,
	.rotex-sticky-nav .wp-block-buttons .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* ---------------------------------------------------------------------
 * The menu on a phone: closed until asked
 *
 * WordPress shows every submenu at once inside the overlay, which turned
 * four menu items into eighteen and made the phone menu a scrolling list
 * that hid the very grouping the menu was built to give.
 *
 * Collapsing them needs no script. WordPress already ships a toggle button
 * beside each parent and already flips its aria-expanded when tapped, in
 * hover mode as well as click mode. All that was missing was a rule saying
 * that a closed submenu is closed.
 *
 * The whole row toggles, not just the little chevron, because a chevron is a
 * small target and a customer's thumb aims at the word. The parent link is
 * covered on the phone as a result, and nothing is lost by it: every
 * submenu's first entry is the parent's own page, which is exactly what a
 * person tapping the parent was looking for.
 * ------------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	display: grid;
	grid-template-columns: 1fr;
	position: relative;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	grid-row: 1;
	grid-column: 1;
}

/* The toggle sits in the same cell as the label and covers it, so a tap
 * anywhere along the row opens the group. The chevron rides at the far end. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
	grid-row: 1;
	grid-column: 1;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
	width: 18px;
	height: 18px;
	transition: transform 160ms ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Closed. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	grid-row: 2;
	grid-column: 1;
	display: none;
	padding: 4px 0 14px;
}

/* Open. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
	display: block;
}

/* The children sit in from their parent, so the grouping is visible without
 * a line being drawn between anything. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-top: 11px;
	padding-bottom: 11px;
	padding-left: 18px;
	font-size: 1.05rem;
	font-weight: 500;
	opacity: 0.88;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * The search field once it is inside the menu
 *
 * core.js moves the one search form into the overlay when the menu opens.
 * Here it is the first thing under the close button, full width, on a
 * translucent ground that reads against the dark overlay.
 * ------------------------------------------------------------------- */

.rotex-header-search.rotex-search-in-menu {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0 0 26px;
}

.rotex-header-search.rotex-search-in-menu .wp-block-search__inside-wrapper {
	background: rgba(255, 255, 255, 0.14);
	padding: 4px 6px 4px 10px;
}

.rotex-header-search.rotex-search-in-menu .wp-block-search__input {
	padding: 12px 10px;
	font-size: 1rem;
	color: inherit;
}

.rotex-header-search.rotex-search-in-menu .wp-block-search__input::placeholder {
	color: inherit;
	opacity: 0.6;
}

.rotex-header-search.rotex-search-in-menu .wp-block-search__button {
	color: inherit;
	opacity: 0.85;
}

/* With the search inside, the header keeps only the title, the menu button
 * and the quote button, which fit on one row again. */
@media (max-width: 900px) {

	.rotex-sticky-nav .rotex-header-search.rotex-search-in-menu {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

/* ---------------------------------------------------------------------
 * The menu wording
 *
 * The navigation block was set to the theme's "small" size, which put the
 * menu at around 14 pixels. That is a caption size, and it was being asked to
 * carry the most used links on the site, on a white bar, in a light weight.
 *
 * Three changes, all of them legibility rather than decoration. A size that
 * holds its own beside the site title. A heavier weight, because a horizontal
 * menu is read in single glances rather than in sentences and weight is what
 * makes a word findable at a glance. And a little more letter spacing, since
 * Manrope's default fit is tight at this size.
 *
 * The submenu is set separately and slightly smaller, so a panel of six items
 * reads as a list rather than as six more headlines.
 * ------------------------------------------------------------------- */

.rotex-sticky-nav .wp-block-navigation,
.rotex-sticky-nav .wp-block-navigation .wp-block-navigation-item__content {
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: 0.005em;
}

.rotex-sticky-nav .wp-block-navigation {
	line-height: 1.2;
}

/* Enough space between the words that the underline under the current one
 * belongs to a single item rather than floating between two. */
.rotex-sticky-nav .wp-block-navigation > .wp-block-navigation__container,
.rotex-sticky-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	gap: 1.75rem;
}

.rotex-sticky-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.97rem;
	font-weight: 500;
	letter-spacing: 0;
}

/* The chevron grows with the word it belongs to. */
.rotex-sticky-nav .wp-block-navigation__submenu-icon svg {
	width: 13px;
	height: 13px;
}

/* Between the menu breakpoint and a small laptop there is not room for five
 * items at full size beside a search field, so the wording steps down rather
 * than wrapping onto a second line. */
@media (min-width: 901px) and (max-width: 1180px) {

	.rotex-sticky-nav .wp-block-navigation,
	.rotex-sticky-nav .wp-block-navigation .wp-block-navigation-item__content {
		font-size: 0.94rem;
	}

	.rotex-sticky-nav .wp-block-navigation > .wp-block-navigation__container {
		gap: 1.25rem;
	}

	.rotex-header-search {
		max-width: 180px;
	}
}

/* ---------------------------------------------------------------------
 * The phone header, and the accordion beneath it
 *
 * Closed, the bar carries three things and no more: the name, the quote
 * button, and the menu. The search is not one of them. A search field on a
 * phone header is a wide, low value target that pushes the two controls that
 * actually earn money off the row, and it has somewhere better to be: core.js
 * moves it into the menu, where it is the first thing under the close button.
 *
 * Open, the menu shows the four headings and nothing else until one is
 * tapped, and tapping a second closes the first. That is core.js again; what
 * is here is the appearance of it.
 * ------------------------------------------------------------------- */

@media (max-width: 900px) {

	.rotex-sticky-nav > .wp-block-group {
		grid-template-columns: 1fr auto auto;
		gap: 0 12px;
		align-items: center;
	}

	.rotex-sticky-nav .wp-block-site-title,
	.rotex-sticky-nav .wp-block-site-logo {
		grid-column: 1;
		grid-row: 1;
	}

	/* Shorter than a full size button and centred against the name and the
	   menu beside it. At fifty four pixels it was taller than both and dragged
	   the whole bar down with it; the tap target is still comfortably over the
	   forty that a thumb needs. */
	.rotex-sticky-nav .wp-block-buttons {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		align-self: center;
	}

	.rotex-sticky-nav .wp-block-buttons .wp-block-button__link {
		min-height: 0;
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 0.95rem;
		line-height: 1.2;
	}

	/* Its own column at the end of the row. Sharing the button's column put
	   the two on top of each other, which on a phone means one of them cannot
	   be tapped at all. */
	.rotex-sticky-nav .wp-block-navigation {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		align-self: center;
	}


	/* Out of the header. It reappears inside the menu, where core.js puts it
	 * and where .rotex-search-in-menu shows it again. */
	.rotex-sticky-nav > .wp-block-group > .wp-block-group > .rotex-header-search {
		display: none;
	}

	.rotex-sticky-nav .wp-block-buttons .wp-block-button__link {
		padding-left: 16px;
		padding-right: 16px;
		font-size: 0.85rem;
	}

	/* A menu button worth aiming at. */
	.rotex-sticky-nav .wp-block-navigation__responsive-container-open {
		padding: 6px;
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.rotex-sticky-nav .wp-block-navigation__responsive-container-open svg {
		width: 26px;
		height: 26px;
	}
}

/* The section that is open is the one carrying the class core.js sets. That
 * is deliberately not aria-expanded: WordPress owns that attribute and
 * rewrites it, and a stylesheet keyed on it would flicker. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.rotex-open > .wp-block-navigation__submenu-container {
	display: block;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.rotex-open > .wp-block-navigation-submenu__toggle svg {
	transform: rotate(180deg);
}

/* Without the script nothing can be tapped open, so every group is shown
 * rather than every group being unreachable. */
.no-js .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	display: block;
}

/* The heading of an open group is marked with the red bar rather than red
 * wording. The overlay is near black, and the Rotex red on near black is hard
 * to read; the bar carries the colour without the text having to. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.rotex-open > .wp-block-navigation-item__content {
	position: relative;
	padding-left: 16px;
	font-weight: 800;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.rotex-open > .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	left: 0;
	top: 16px;
	bottom: 16px;
	width: 3px;
	background: var(--rotex-red);
	border-radius: 3px;
}

/* ---------------------------------------------------------------------
 * Pictures beside words: the height has to be decided, not inherited
 *
 * This is the imbalance that kept coming back. Almost every Rotex photograph
 * is portrait, shot on a phone: 1080 by 1920, which is nine by sixteen. Put
 * one in a column half a page wide and it renders about a thousand pixels
 * tall. The paragraphs beside it are three hundred. So the section became a
 * tall picture with a small block of text floating in the middle of the empty
 * space next to it, on page after page, and no amount of rewriting the words
 * was going to fix it.
 *
 * The answer is to decide the height rather than let the file's own
 * proportions decide it. Each picture is given a height in a range tied to the
 * viewport and cropped to fill it. Cropping is safe here because these are
 * photographs of rooms, factories and buildings rather than diagrams: the
 * subject is in the middle and the top and bottom are ceiling and floor.
 *
 * object-position sits slightly above centre because in this set the subject,
 * a person working or a window in a wall, is almost always in the upper half.
 *
 * A picture that genuinely needs its full proportions can opt out with
 * rotex-image-full.
 * ------------------------------------------------------------------- */

.elementor .elementor-widget-image img,
.elementor-widget-image img {
	width: 100%;
	height: clamp(300px, 34vw, 470px);
	object-fit: cover;
	object-position: center 42%;
	display: block;
}

.elementor .elementor-widget-image.rotex-image-full img {
	height: auto;
	object-fit: fill;
}

/* On a phone the columns are stacked, so a picture is as wide as the screen
 * and needs less height, not more, or it pushes the words off the screen. */
@media (max-width: 767px) {

	.elementor .elementor-widget-image img,
	.elementor-widget-image img {
		height: clamp(220px, 58vw, 300px);
	}
}

/* The hero picture is allowed to be a little taller, because it sits beside a
 * headline and an opening paragraph rather than beside body copy. */
.elementor .rotex-hero-image img {
	height: clamp(340px, 40vw, 540px);
}

/* ---------------------------------------------------------------------
 * The menu item, focused: a rule under the word, not a box round it
 *
 * The overlay was fixed earlier and the desktop bar was left with the
 * browser's own focus rectangle, which is exactly the boxed outline rule 5
 * rules out, drawn tight around one word in the middle of the header.
 *
 * The same treatment as everywhere else on this site: the current section
 * already marks itself with a short red rule underneath, so focus uses the
 * same language at a different weight. Nothing is removed without something
 * legible replacing it, because a menu with no visible focus is unusable by
 * keyboard.
 *
 * The chevron is dealt with at the same time. It was sitting outside the
 * word and slightly below its baseline, because the toggle is a separate
 * button from the link and nothing was aligning the two. They now share a
 * flex line and the arrow is sized and nudged to sit on the text's optical
 * centre rather than its box centre.
 * ------------------------------------------------------------------- */

.rotex-sticky-nav .wp-block-navigation-item__content:focus,
.rotex-sticky-nav .wp-block-navigation-item__content:focus-visible,
.rotex-sticky-nav .wp-block-navigation-submenu__toggle:focus,
.rotex-sticky-nav .wp-block-navigation-submenu__toggle:focus-visible,
.rotex-sticky-nav .wp-block-navigation__submenu-icon:focus,
.rotex-sticky-nav .wp-block-navigation__submenu-icon:focus-visible {
	outline: none;
	box-shadow: none;
	border: 0;
	background: transparent;
}

.rotex-sticky-nav .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	color: var(--rotex-red);
}

.rotex-sticky-nav .wp-block-navigation-item:focus-within::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 2px;
	background: var(--rotex-red);
	border-radius: 2px;
}

/* Inside the dropdown panel there is no room under a row for a rule, so a
 * focused child marks itself by taking the ground colour instead. */
.rotex-sticky-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within::after {
	display: none;
}

.rotex-sticky-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--rotex-surface) !important;
	color: var(--rotex-red) !important;
}

/* The word and its arrow on one line, vertically centred together. */
.rotex-sticky-nav .wp-block-navigation-item.has-child {
	display: flex;
	align-items: center;
	gap: 5px;
}

.rotex-sticky-nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	height: 1em;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.rotex-sticky-nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon svg {
	width: 12px;
	height: 12px;
	/* The glyph's own box has room beneath the stroke, so it reads low against
	 * a capital letter unless it is lifted. */
	margin-top: -1px;
}

/* ---------------------------------------------------------------------
 * The mark above a card heading
 *
 * A short red rule, set above the heading rather than beside it. It does three
 * things at once: it groups the heading with the paragraph beneath it, it
 * gives a row of cards a rhythm the eye can follow across, and it puts the
 * brand colour on the page in a place that costs nothing. It is a mark, not a
 * border: nothing is enclosed.
 * ------------------------------------------------------------------- */

.rotex-card-mark .elementor-heading-title,
.rotex-card-mark h1,
.rotex-card-mark h2,
.rotex-card-mark h3 {
	position: relative;
	padding-top: 20px;
}

.rotex-card-mark .elementor-heading-title::before,
.rotex-card-mark h1::before,
.rotex-card-mark h2::before,
.rotex-card-mark h3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: 3px;
	background: var(--rotex-red);
	border-radius: 3px;
}

/* On the ink and red grounds the red mark disappears into the background, so
 * it takes the paper colour instead. */
.elementor-element[style*="rgb(0, 1, 1)"] .rotex-card-mark h3::before,
.rotex-on-dark .rotex-card-mark h3::before {
	background: var(--rotex-paper);
}

/* ---------------------------------------------------------------------
 * The red band
 *
 * Used at most once on a page, and only under a short line. Red carries a
 * sentence well and a paragraph badly, so the rules below assume the former:
 * generous type, white text, and buttons that read against it.
 *
 * The quiet button in particular has to change here. Its usual translucent ink
 * on red goes muddy, so on red it becomes a solid white button with red
 * wording, which is the one combination that keeps both buttons legible
 * without introducing a colour that is not in the palette.
 * ------------------------------------------------------------------- */

.elementor-element[style*="background-color:#AD0A04"] .rotex-button-quiet,
.elementor-element[style*="background-color: #AD0A04"] .rotex-button-quiet,
.rotex-on-red .rotex-button-quiet {
	background: var(--rotex-paper);
	color: var(--rotex-red);
}

.rotex-on-red .rotex-button-quiet:hover,
.rotex-on-red .rotex-button-quiet:focus-visible {
	background: var(--rotex-ink);
	color: var(--rotex-paper);
}

/* ---------------------------------------------------------------------
 * The video library
 *
 * Each film is a still with a play mark over it and nothing else loaded. The
 * cards line up on a common baseline whatever the length of the title, so a
 * row of six does not step up and down.
 * ------------------------------------------------------------------- */

.rotex-video {
	width: 100%;
}

.rotex-video-frame,
.rotex-video-shell {
	border-radius: 14px;
	overflow: hidden;
}

.rotex-video-poster {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------------------------
 * No pale seams between the bands
 *
 * WordPress puts a block gap between every top level block on the page, so a
 * strip of page background showed between the header and the content, and
 * again between the last section and the footer. Against a black band ending
 * and a grey band beginning, that strip reads as a mistake: two sections that
 * should meet, separated by a thin line of a third colour.
 *
 * The gap is removed rather than reduced, because nothing here needs it. Every
 * Rotex band carries its own top and bottom padding, which is what actually
 * sets the spacing between sections, and the theme's gap was only ever adding
 * an unowned margin on top of that.
 *
 * Scoped to the top level and to the page content. Block gaps inside a
 * section, between a heading and a paragraph for instance, are untouched.
 * ------------------------------------------------------------------- */

.wp-site-blocks > * + *,
.wp-site-blocks > main > * + *,
.wp-site-blocks > main > .wp-block-post-content > * + * {
	margin-block-start: 0;
}

/* Elementor sections are siblings inside the content and must meet exactly. */
.elementor > .e-con + .e-con,
.elementor-element > .e-con + .e-con {
	margin-block-start: 0;
}

/* The theme also gives the content wrapper its own vertical padding, which
 * shows as the same pale strip at the top and bottom of the page. */
.wp-site-blocks > main {
	margin-block-start: 0;
	padding-block-start: 0;
	padding-block-end: 0;
}

/* Side gutters for the pages the theme draws itself.
 *
 * Search results, the blog and the 404 have no Rotex sections in them, and the
 * theme's own outer padding is switched off site wide, so on a phone the
 * heading and the results were running edge to edge with nothing between the
 * text and the side of the screen. A page built out of Rotex sections keeps
 * its padding from the sections themselves, so it opts out. */
.wp-site-blocks > main {
	padding-inline: 20px;
}

/* Keyed on the body class WordPress writes for a page Elementor built, not on
   finding an Elementor node inside the content: the search results carry
   Elementor markup too, because the things being listed were built with it,
   and that opted the one page that needed the gutters straight back out. */
body.elementor-page .wp-site-blocks > main {
	padding-inline: 0;
}

/* And the last band should sit flush against the footer. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------
 * Four shapes, chosen from a schedule of twenty four
 *
 * A window company's pictures were sitting in plain rounded rectangles, and
 * thirty four of them down a site is monotonous however good the photography
 * is. So each page cuts its pictures to one of two shapes, and two further
 * arrangements hold a pair of photographs where one is not enough.
 *
 *   Round head  a true semicircle: the fanlight, and a window Rotex makes and
 *               names on its own product pages. The frame repeats the product.
 *   Leaf        two opposite corners drawn right out, two left square.
 *               Irregular along a diagonal, so it still sits square in a column.
 *   Casement    two round headed lights side by side, like a double window.
 *   Offset      a main picture with a smaller one lifted over its corner.
 *
 * All four are cut with a border radius rather than a clip path, which is what
 * lets them keep a drop shadow: a clip path cuts the shadow off with the
 * picture. None of them costs an image file, a request or a line of script.
 *
 * The radii are pixels rather than percentages because a percentage radius
 * stretches with the box, and the top of a round head should be a circle
 * whatever proportion the photograph happens to be. At 999px the browser
 * clamps to half the shorter side, which is exactly a semicircle.
 * ------------------------------------------------------------------- */

.elementor .rotex-shape-arch img {
	border-radius: 999px 999px 20px 20px;
}

.elementor .rotex-shape-leaf img {
	border-radius: 150px 24px 150px 24px;
}

/* The plain one. Used for the inset of an offset pair and nowhere else, since
 * a small picture is where a strong cut does most damage to the subject. */
.elementor .rotex-shape-soft img {
	border-radius: 26px;
}

/* Below the stacking breakpoint the pictures are wider and shorter, so the
 * deep cuts would take the subject out. Both are eased. */
@media (max-width: 767px) {

	.elementor .rotex-shape-arch img {
		border-radius: 140px 140px 16px 16px;
	}

	.elementor .rotex-shape-leaf img {
		border-radius: 70px 16px 70px 16px;
	}
}

/* ---------------------------------------------------------------------
 * The casement pair
 *
 * Two round headed lights side by side, for the sections where the two
 * photographs carry equal weight rather than one leading: the sample board
 * and the floor it stands on, the finished rack and the welded corner.
 *
 * Each light is half the width, so the semicircle at its head is half the
 * radius, which is correct: it is still a true semicircle of that light. What
 * does need adjusting is the height. At the full section height two half width
 * pictures come out tall and thin, so they are shortened until the pair reads
 * as one window rather than as two columns.
 * ------------------------------------------------------------------- */

.elementor .rotex-casement img {
	height: clamp(280px, 30vw, 400px);
}

/* The tall variant, for a pair standing beside a long column of words. It is
 * raised only as far as the proportion of a light allows: past about six
 * hundred pixels at half width the picture stops reading as a window and
 * starts reading as a slot. Where the words run longer than that, the answer
 * is to take something out of the column, not to stretch the glass. */
.elementor .rotex-casement-tall img {
	height: clamp(320px, 34vw, 460px);
}

@media (max-width: 767px) {
	.elementor .rotex-casement img,
	.elementor .rotex-casement-tall img {
		height: clamp(200px, 52vw, 280px);
	}
}

/* ---------------------------------------------------------------------
 * Two photographs, one lifted over the corner of the other
 *
 * For the sections where one picture does not say enough. The second sits
 * over the lower corner of the first rather than beside it, so the pair
 * occupies the column a single image had and still reads as one object.
 *
 * The inset is deliberately small and well inside the main image: the eye
 * takes the big picture first and the detail second, which is the order the
 * words beside them are written in.
 *
 * It is lifted by a shadow rather than separated by a rule. A shadow is depth;
 * a rule would be the boxed outline rule 5 rules out.
 * ------------------------------------------------------------------- */

.elementor .elementor-widget-image.rotex-duo-main {
	position: relative;
	z-index: 1;
}

.elementor .elementor-widget-image.rotex-duo-inset {
	position: absolute;
	z-index: 2;
	right: -14px;
	bottom: -28px;
	width: min(46%, 270px);
	margin: 0;
}

.elementor .rotex-duo-inset img {
	height: clamp(150px, 17vw, 215px);
	border-radius: 16px;
	clip-path: none;
	box-shadow: 0 18px 40px rgba(0, 1, 1, 0.28);
}

/* The column has to make room underneath for the part that hangs over. */
.elementor .e-con:has(> .elementor-widget-image.rotex-duo-inset) {
	padding-bottom: 34px;
}

/* On a phone the columns stack and an inset picture would be too small to
 * show anything, so the two become an ordinary pair one above the other. */
@media (max-width: 767px) {

	.elementor .elementor-widget-image.rotex-duo-inset {
		position: static;
		width: 100%;
		max-width: none;
		margin-top: 14px;
	}

	.elementor .rotex-duo-inset img {
		height: clamp(180px, 44vw, 240px);
		box-shadow: none;
	}

	.elementor .e-con:has(> .elementor-widget-image.rotex-duo-inset) {
		padding-bottom: 0;
	}
}

/* ---------------------------------------------------------------------
 * Squared off on a phone
 *
 * The cut shapes are a desktop device. Beside a column of words they break a
 * grid that would otherwise be thirty four identical rectangles. On a phone
 * there is no grid to break: every picture is already full width and stacked,
 * one under the other, so an arch or a leaf stops being a shape and becomes a
 * bite out of the photograph, taken at exactly the width where the subject
 * fills the frame and has least room to spare.
 *
 * So below the stacking breakpoint every picture is a plain rectangle. The
 * corners keep a small radius, which is the site's own softness rather than a
 * shape, and the desktop keeps all four cuts untouched.
 *
 * Last in the file on purpose: it has to win against the shape rules above it,
 * and it does that by order rather than by !important, which would only move
 * the argument somewhere harder to find.
 * ------------------------------------------------------------------- */

@media (max-width: 767px) {

	.elementor .rotex-shape-arch img,
	.elementor .rotex-shape-leaf img,
	.elementor .rotex-shape-soft img,
	.elementor .rotex-casement img,
	.elementor .rotex-casement-tall img,
	.elementor .rotex-duo-main img,
	.elementor .rotex-duo-inset img {
		border-radius: 12px;
	}
}

/* ---------------------------------------------------------------------
 * The testimonial page, at full measure
 *
 * A testimonial is a page in its own right: the quote, who said it, the rating
 * and the pictures of the job. The theme was handing it the narrow reading
 * measure it gives a blog post, which left a column of quote adrift in the
 * middle of the screen with a third of the page empty on either side.
 *
 * It is widened here rather than in the theme so it travels with the plugin,
 * and only on this page: the measure is right for an article and wrong for
 * this.
 * ------------------------------------------------------------------- */

/* The ground the closing panel stands on.
 *
 * The footer band was grey, which put a grey strip between the questions above
 * it and the black footer below and made the red panel look like it had been
 * dropped into a gap. White, and the panel reads the way it does on the home
 * page: colour on paper, then the footer. Set here rather than in the theme
 * because the panel is the plugin's, and the band should follow whatever the
 * panel needs.
 */
.wp-block-group:has(> .rotex-cta-panel) {
	background-color: var(--rotex-paper, #fff) !important;
}

.wp-block-post-content:has(.rotex-testimonial-page) {
	max-width: none;
}

.wp-block-post-content:has(.rotex-testimonial-page) > * {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* The pictures of the job take that full width. The words do not: a line of
   text 1240 pixels wide cannot be read, because the eye loses its place on the
   way back to the start of the next line. The quote keeps a reading measure and
   is centred in the page, so the space around it is even on both sides and
   reads as margin rather than as a column that failed to fill. */
.wp-block-post-content:has(.rotex-testimonial-page) > .rotex-testimonial-page {
	max-width: 46rem;
}


/* ---------------------------------------------------------------------
 * Three lines, not two
 *
 * The theme draws its menu button as two bars, which is a hamburger with the
 * patty missing: at a glance it reads as a list or a pair of dividers rather
 * than as the thing you press to get the menu. Three is what everybody has
 * been taught to recognise, and recognition is the whole job of that icon.
 *
 * The middle bar is the button's own background, the outer two are its
 * pseudo elements, so the theme's SVG can be switched off and nothing has to
 * be fetched to replace it. It takes its colour from the text around it, so
 * it stays correct on the white bar and inside the open overlay.
 * ------------------------------------------------------------------- */

.wp-block-navigation__responsive-container-open svg {
	display: none;
}

/* The three bars are the same length and the two gaps are the same height.
 * The middle bar is the button's own background, centred by the browser; the
 * outer two are inset from the same two edges, so the icon cannot come out
 * lopsided however the button is sized. The gaps were nine pixels, which read
 * as three separate rules rather than one control; six is close enough to
 * read as a stack. */
.wp-block-navigation__responsive-container-open {
	position: relative;
	width: 30px;
	height: 26px;
	padding: 0;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 26px 2.5px;
	background-position: center;
	background-repeat: no-repeat;
	color: inherit;
}

.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	/* Measured from the middle of the button rather than from its edges. The
	   theme sizes that button to a 44 pixel tap target, which it should keep,
	   but pinning the outer bars to the top and bottom of 44 pixels spread
	   them nine pixels apart and the icon stopped reading as one control. From
	   the centre, the two gaps are equal whatever the button's size. */
	left: 9px;
	right: 9px;
	height: 2.5px;
	background: currentColor;
	border-radius: 2px;
}

.wp-block-navigation__responsive-container-open::before {
	top: calc(50% - 9px);
}

.wp-block-navigation__responsive-container-open::after {
	bottom: calc(50% - 9px);
}

/* ---------------------------------------------------------------------
 * The logo beside the name
 *
 * The header already carries a site logo block in front of the site title, so
 * nothing needs adding to the markup: setting a logo in WordPress is enough
 * for it to appear. What is set here is how it behaves once it is there.
 *
 * Sized by height rather than width, because the mark is wider than it is
 * tall and a width would make a tall mark overhang the bar. It is aligned to
 * the name rather than to the row, so the two read as one lockup.
 *
 * It is dropped on a phone. The row there is already carrying the name, the
 * quote button and the menu, and a mark small enough to fit beside all three
 * would be too small to recognise, which is worse than not showing it.
 * ------------------------------------------------------------------- */

.rotex-sticky-nav > .wp-block-group > .wp-block-group:first-child,
.rotex-sticky-nav .wp-block-site-logo + .wp-block-site-title {
	align-items: center;
}

.rotex-sticky-nav .wp-block-site-logo {
	margin: 0 10px 0 0;
	line-height: 0;
}

.rotex-sticky-nav .wp-block-site-logo img {
	width: auto;
	height: 46px;
	max-width: none;
	display: block;
}

/* Rotex supplied the official logo in September 2026, and the mark already
   carries the name, so printing "Rotex Glass" beside it said it twice. The
   title stays in the markup for screen readers and search, off the screen. */
.rotex-sticky-nav .wp-block-site-logo + .wp-block-site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 900px) {

	.rotex-sticky-nav .wp-block-site-logo img {
		height: 36px;
	}
}

/* The menu button keeps its focus mark for the keyboard and loses the black
   box a tap leaves behind. Same rule the desktop navigation and the questions
   already follow: a mark the site chose, and only when it is useful. */
.wp-block-navigation__responsive-container-open:focus:not(:focus-visible),
.wp-block-navigation__responsive-container-close:focus:not(:focus-visible) {
	outline: none;
}

.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--rotex-red);
	outline-offset: 4px;
	border-radius: 6px;
}

/* ---------------------------------------------------------------------
 * The search results page
 *
 * The theme sets the heading at the size it uses for a page title, which on a
 * phone gives two lines of very large type saying something the visitor
 * already knows, above the field they actually came to use. The heading is
 * brought down and the field and its button with it, so the useful part of
 * the page starts higher up the screen.
 * ------------------------------------------------------------------- */

/* One measure for the whole page.
 *
 * The theme gives the heading its own reading width and the search form
 * another, and the results list a third, so three things that belong together
 * started at three different places down the left. They now share one edge and
 * one width: the heading sits over the field, the field sits over the results,
 * and the eye has a single line to follow down the page. */
body.search .wp-site-blocks > main > * {
	max-width: 54rem;
	margin-left: auto;
	margin-right: auto;
}

body.search .wp-block-search__inside-wrapper {
	width: 100%;
}

body.search .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
}

body.search .wp-site-blocks main h1 {
	font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.1rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

body.search .wp-block-search__input {
	padding: 11px 16px;
	font-size: 1rem;
	min-height: 0;
}

body.search .wp-block-search__button {
	padding: 11px 22px;
	font-size: 0.95rem;
	min-height: 0;
}


/* ---------------------------------------------------------------------
 * Sections that arrive as they are reached
 *
 * A long page that is all there at once is read as a wall. Letting each block
 * rise the last few pixels into place as it is scrolled to gives the page a
 * rhythm and tells the eye where the next thing starts. It is the one piece of
 * motion on this site and it is cheap: opacity and transform only, which the
 * browser can do without touching layout.
 *
 * The hiding is applied by the script, not by the stylesheet. If the script
 * never runs, or the visitor has asked for less motion, every block is simply
 * there, which is the behaviour a stylesheet on its own cannot guarantee.
 * ------------------------------------------------------------------- */

.rotex-motion .rotex-reveal {
	opacity: 0;
	transform: translateY(20px);
}

.rotex-motion .rotex-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 720ms cubic-bezier(0.22, 0.7, 0.28, 1), transform 720ms cubic-bezier(0.22, 0.7, 0.28, 1);
}

/* Staggered, so a heading, its paragraph and its buttons arrive in the order
   somebody reads them rather than all at once. */
.rotex-motion .rotex-reveal-1.is-in { transition-delay: 90ms; }
.rotex-motion .rotex-reveal-2.is-in { transition-delay: 180ms; }
.rotex-motion .rotex-reveal-3.is-in { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {

	.rotex-motion .rotex-reveal,
	.rotex-motion .rotex-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * The picture cards
 *
 * A photograph with the name of the range on the glass, and the whole card
 * clickable. Built from an ordinary picture, heading and line so an editor can
 * change any of the three without touching code; the stylesheet is what turns
 * the three into one object.
 *
 * The link is stretched over the card from the heading rather than wrapping
 * the card in an anchor: a screen reader still reads one link with a sensible
 * name, and the text underneath stays selectable.
 * ------------------------------------------------------------------- */

.elementor .e-con:has(> .e-con-inner > .rotex-figure-title) {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	background: var(--rotex-ink);
}

.elementor .rotex-figure-img {
	margin: 0;
}

.elementor .rotex-figure-img img {
	width: 100%;
	height: clamp(300px, 31vw, 460px);
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform 900ms cubic-bezier(0.22, 0.7, 0.28, 1);
}

.elementor .rotex-figure-tall img {
	height: clamp(320px, 36vw, 520px);
}

/* The scrim. Without it a white heading lands on whatever the photograph
   happens to be doing in that corner, which on a bright frame is nothing. */
.elementor .rotex-figure-img::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 62%;
	background: linear-gradient(to top, rgba(0, 1, 1, 0.82), rgba(0, 1, 1, 0.35) 45%, rgba(0, 1, 1, 0));
	pointer-events: none;
}

.elementor .e-con:has(> .e-con-inner > .rotex-figure-title):hover .rotex-figure-img img {
	transform: scale(1.045);
}

.elementor .rotex-figure-title {
	position: absolute;
	left: clamp(20px, 2.4vw, 34px);
	right: clamp(20px, 2.4vw, 34px);
	bottom: 64px;
	margin: 0;
	z-index: 2;
}

.elementor .rotex-figure-title a {
	color: inherit;
	text-decoration: none;
}

.elementor .rotex-figure-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.elementor .rotex-figure-note {
	position: absolute;
	left: clamp(20px, 2.4vw, 34px);
	right: clamp(20px, 2.4vw, 34px);
	bottom: 24px;
	margin: 0;
	z-index: 2;
}

.elementor .e-con:has(> .e-con-inner > .rotex-figure-title):focus-within {
	outline: 3px solid var(--rotex-red);
	outline-offset: 3px;
}

@media (max-width: 600px) {

	.elementor .rotex-figure-title {
		bottom: 70px;
		font-size: 24px;
	}
}

/* -------------------------------------------------------------------
 * home1
 *
 * The second home page, laid out to the reference Rotex supplied. Every
 * measurement here is that reference's: the 900px hero, the 35px headline,
 * the 46px section titles, the 480px product tiles with the name on the
 * glass, the counter strip, the four columns over a photograph that holds
 * still, the story rows and the short closing form.
 *
 * Everything is keyed off a widget class rather than a section class.
 * Elementor honours a CSS class on a widget and drops it on an inner
 * container, so :has() is what reaches the box a widget sits in. That is
 * also why the tiles are a picture, a heading and a line rather than one
 * card widget: three editable pieces that the stylesheet joins into one.
 * ------------------------------------------------------------------- */

/* Titles -------------------------------------------------------------- */
.elementor .rotex-h1-title .elementor-heading-title {
	line-height: 1.2;
}

.elementor .rotex-h1-sub {
	margin-inline: auto;
	line-height: 1.75;
}

.elementor .rotex-h1-subhead {
	font-weight: 600;
}

/* Hero ----------------------------------------------------------------
 *
 * A shade under three quarters of the screen, not a whole one. A hero that
 * fills the screen exactly hides the fact that there is a page under it; at
 * this height the next band shows at the bottom edge, which is what tells
 * somebody to keep going.
 *
 * The figure is set here rather than in the builder because Elementor can
 * only hold one fixed pixel or viewport number, and a fixed number is wrong
 * on every screen but the one it was measured on. svh rather than vh: on a
 * phone vh is the height with the browser's own bars hidden, so a vh hero is
 * taller than the screen actually is until the visitor scrolls.
 *
 * The words sit in the bottom left corner on every screen: the quietest
 * corner of these photographs, it leaves the view through the window
 * uncovered, and it is where the eye lands last after reading the picture.
 *
 * !important on the alignment and the size: Elementor writes both into its
 * own per page stylesheet, which loads after this file and would otherwise
 * win on load order alone.
 * ------------------------------------------------------------------- */

.elementor .e-con.e-parent:has(.rotex-h1-hero-title) {
	min-height: 70vh !important;
	min-height: 70svh !important;
}

/* The inset below the words. It goes on the inner wrapper, not the section:
   for a boxed container Elementor puts the padding there, so a rule on the
   section sets a value nothing is using. Kept beside the height and the
   alignment, because those three decide together where the block sits. */
.elementor .e-con.e-parent:has(.rotex-h1-hero-title) > .e-con-inner {
	padding-bottom: 48px !important;
}

.elementor .e-con.e-parent:has(.rotex-h1-hero-title),
.elementor .e-con.e-parent:has(.rotex-h1-hero-title) > .e-con-inner {
	justify-content: flex-end !important;
}

.elementor .rotex-h1-hero-title .elementor-heading-title {
	font-size: 44px !important;
	font-weight: 800;
	max-width: 600px;
	line-height: 1.06;
	letter-spacing: -0.025em;
	/* Two shadows, not one: a wide soft halo that lifts the letters off a
	   busy photograph, and a tight dark one that keeps the edges crisp where
	   the picture behind happens to be pale. It does the work a dark panel
	   would otherwise have to do, without covering the photograph. */
	text-shadow: 0 4px 26px rgba(0, 1, 1, 0.38), 0 1px 3px rgba(0, 1, 1, 0.26);
}

/* The headline is white throughout, the accent words included.
   The span is left in the markup rather than taken out of the layout, so
   colouring those two words again later is one line here rather than a
   rebuild of the page. */
.elementor .rotex-h1-hero-title .rotex-h1-accent {
	color: inherit;
}

.elementor .rotex-h1-hero-line {
	font-weight: 600;
	text-shadow: 0 3px 20px rgba(0, 1, 1, 0.4), 0 1px 3px rgba(0, 1, 1, 0.28);
}

@media (max-width: 1024px) {

	.elementor .e-con.e-parent:has(.rotex-h1-hero-title) {
		min-height: 64vh !important;
		min-height: 64svh !important;
	}

	.elementor .e-con.e-parent:has(.rotex-h1-hero-title) > .e-con-inner {
		padding-bottom: 34px !important;
	}

	.elementor .rotex-h1-hero-title .elementor-heading-title {
		font-size: 35px !important;
		max-width: 470px;
	}
}

@media (max-width: 767px) {

	/* On a phone the hero and the figures strip below it together fill the
	   screen exactly, so the first thing under the fold is the next section
	   rather than a band of white. The hero therefore takes what is left of
	   the screen once the header above it and the strip below it have had
	   their share: 162px of header, 120px of strip. */
	.elementor .e-con.e-parent:has(.rotex-h1-hero-title) {
		min-height: var(--rotex-hero-fill, calc(100vh - 282px)) !important;
		min-height: var(--rotex-hero-fill, calc(100svh - 282px)) !important;
	}

	/* Almost nothing under the block on a phone: the words and the two
	   buttons sit right down on the metrics strip, so the strip reads as the
	   floor of the hero rather than as a band with a gap above it. */
	.elementor .e-con.e-parent:has(.rotex-h1-hero-title) > .e-con-inner {
		padding-bottom: 16px !important;
	}

	/* Tighter between the headline, the line and the buttons, so the block
	   holds together as one thing in that corner. */
	.elementor .e-con:has(> .rotex-h1-hero-title) {
		gap: 14px !important;
	}
}

/* The founded band, set in a window -----------------------------------
 *
 * A white pane on the quieter grey ground, divided by a single glazing bar,
 * with the year cut large into the left light and the story in the right.
 *
 * The pane is separated from the band by background contrast rather than an
 * outline, which is what rule 5 asks for, and the one line inside it is a
 * glazing bar between two lights, not a box drawn round anything. It is the
 * only band on the page made of type and a single rule, which is what makes
 * it stand out between two bands of photographs.
 * ------------------------------------------------------------------- */

.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-year) {
	position: relative;
	background: var(--rotex-paper);
	border-radius: 22px;
	padding: 54px 52px;
}

/* The glazing bar. Painted into the pane rather than bordered onto a
   column, so it runs the height of the glass and stops short of the frame
   at both ends, the way a real bar meets its rebate. */
.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-year)::before {
	content: "";
	position: absolute;
	top: 54px;
	bottom: 54px;
	left: 40%;
	right: auto;
	width: 1px;
	background: rgba(0, 1, 1, 0.14);
	z-index: 1;
	pointer-events: none;
}

.elementor .rotex-h1-year .elementor-heading-title {
	line-height: 0.82;
	letter-spacing: -0.055em;
	font-variant-numeric: tabular-nums;
}

.elementor .rotex-h1-founded-title .elementor-heading-title {
	font-weight: 600;
	line-height: 1.35;
}

.elementor .e-con:has(> .rotex-h1-year) {
	padding-right: 44px;
}

.elementor .e-con:has(> .rotex-h1-proof) {
	padding-left: 44px;
}

.elementor .rotex-h1-proof {
	padding-left: 15px;
	border-left: 2px solid var(--rotex-red);
}

.elementor .rotex-h1-proof p {
	margin: 0;
}

@media (max-width: 1024px) {

	.elementor .rotex-h1-year .elementor-heading-title {
		font-size: 78px !important;
	}

	.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-year) {
		padding: 42px 38px;
	}

	.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-year)::before {
		top: 42px;
		bottom: 42px;
	}
}

@media (max-width: 767px) {

	/* One light, stacked. A glazing bar down the middle of a phone would put
	   four words on each side of it. */
	.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-year) {
		padding: 30px 22px;
		border-radius: 16px;
	}

	.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-year)::before {
		display: none;
	}

	.elementor .e-con:has(> .rotex-h1-year),
	.elementor .e-con:has(> .rotex-h1-proof) {
		padding-right: 0;
		padding-left: 0;
	}

	.elementor .rotex-h1-year .elementor-heading-title {
		font-size: 68px !important;
	}

	.elementor .rotex-h1-founded-title .elementor-heading-title {
		font-size: 19px !important;
	}
}

/* The product strip ----------------------------------------------------
 *
 * Five tall photographs running the full width of the screen, each with its
 * name on the glass, the row clipped to a shallow lens so the first and last
 * run off the edges rather than lining up as five boxes. The curve is an
 * elliptical border radius on the row: no mask image, no extra request.
 *
 * On a phone the row becomes a swipeable strip that snaps, with the next
 * tile showing at the edge so it is obvious there is more.
 * ------------------------------------------------------------------- */

.elementor .e-con:has(> .e-con > .rotex-h1-tile-name) {
	position: relative;
	/* A carousel at every width, not a row of six that happens to fit. Six
	   families today and eight next year should not change the shape of the
	   band: the tiles keep their width and the strip scrolls. */
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.elementor .e-con:has(> .e-con > .rotex-h1-tile-name)::-webkit-scrollbar {
	display: none;
}

/* The band curves in: the middle of the strip is shorter than its ends.
 *
 * The two arcs belong to the band, not to the row of tiles inside it. That
 * matters on a phone, where the row is what scrolls: anything positioned
 * inside a scrolling box travels with its contents, so the curve would slide
 * away with the first card. Fixed to the band, it stays over the middle of
 * the screen and whichever card is in the middle wears the shape.
 *
 * A border radius cannot do this. A radius rounds a corner outward, which
 * makes a lens, tallest in the middle, which is the opposite shape. This is
 * two very wide ellipses in the section's own colour, one laid over the top
 * edge and one over the bottom, each dipping into the strip at its centre
 * and tapering away to nothing at the ends. What is left between them is
 * the bowed band.
 *
 * Both are painted in the section background rather than cut out, so the
 * strip keeps a single background behind it and there is no seam.
 * ------------------------------------------------------------------- */

.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-tile-name) {
	position: relative;
	overflow: hidden;
}

.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-tile-name)::before,
.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-tile-name)::after {
	content: "";
	position: absolute;
	left: -6%;
	right: -6%;
	width: auto;
	height: 200px;
	background: var(--rotex-paper);
	border-radius: 50%;
	z-index: 5;
	pointer-events: none;
	transform: none;
	opacity: 1;
}

.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-tile-name)::before {
	top: -158px;
	bottom: auto;
}

.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-tile-name)::after {
	bottom: -158px;
	top: auto;
}

.elementor .e-con:has(> .rotex-h1-tile-name) {
	position: relative;
	overflow: hidden;
	background: var(--rotex-ink);
	min-height: 400px;
	width: 21% !important;
	flex: 0 0 21%;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	/* The bottom bow dips 42px into the strip at its deepest, so everything
	   inside a tile has to sit above that line or the curve cuts through it.
	   Hence the deep bottom padding rather than a z-index: the words belong
	   inside the shape, not floating over it. The right padding clears the
	   arrow, which sits in the opposite corner from the words. */
	padding: 0 76px 62px 22px;
}

.elementor .rotex-h1-tile-img {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.elementor .rotex-h1-tile-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform 900ms cubic-bezier(0.22, 0.7, 0.28, 1);
}

.elementor .rotex-h1-tile-img::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 55%;
	background: linear-gradient(to top, rgba(0, 1, 1, 0.78), rgba(0, 1, 1, 0.28) 50%, rgba(0, 1, 1, 0));
	pointer-events: none;
}

.elementor .e-con:has(> .rotex-h1-tile-name):hover .rotex-h1-tile-img img {
	transform: scale(1.05);
}

.elementor .rotex-h1-tile-name {
	position: relative;
	z-index: 2;
	margin: 0;
}

.elementor .rotex-h1-tile-name .elementor-heading-title {
	/* !important because Elementor writes the size into its own per page
	   stylesheet, which loads after this one. */
	font-size: 17px !important;
	line-height: 1.25;
	text-align: left;
}

.elementor .rotex-h1-tile-name {
	width: 100%;
	text-align: left;
}

.elementor .rotex-h1-tile-name a {
	color: inherit;
	text-decoration: none;
}

.elementor .rotex-h1-tile-name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.elementor .e-con:has(> .rotex-h1-tile-name):focus-within {
	outline: 3px solid var(--rotex-red);
	outline-offset: -3px;
}

/* The arrow that arrives on hover ---------------------------------------
 *
 * A red disc with an arrow in the bottom right corner, which lifts into
 * place when the tile is pointed at. It is a pseudo element rather than a
 * real button: the whole tile is already one link, and a second control
 * inside it would be a second tab stop going to the same place.
 *
 * Where there is no hover, a phone, it simply stays visible: an affordance
 * that only appears on hover is no affordance at all on a touch screen.
 * ------------------------------------------------------------------- */

.elementor .e-con:has(> .rotex-h1-tile-name)::before,
.rotex-grid.rotex-strip .rotex-card::before {
	content: "\2197";
	position: absolute;
	/* top and left reset, not just left unset: Elementor already puts
	   inset: 0 on .e-con::before for its own container overlay, and with all
	   four offsets set the top and left pair wins, which pinned this disc to
	   the opposite corner from the one it is meant to sit in. */
	top: auto;
	left: auto;
	right: 20px;
	bottom: 62px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--rotex-red);
	color: var(--rotex-paper);
	display: grid;
	place-items: center;
	font-size: 20px;
	line-height: 1;
	z-index: 4;
	opacity: 0;
	transform: translateY(10px) scale(0.88);
	transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 0.7, 0.28, 1);
	pointer-events: none;
}

.elementor .e-con:has(> .rotex-h1-tile-name):hover::before,
.elementor .e-con:has(> .rotex-h1-tile-name):focus-within::before,
.rotex-grid.rotex-strip .rotex-card:hover::before,
.rotex-grid.rotex-strip .rotex-card:focus-within::before {
	opacity: 1;
	transform: none;
}

.rotex-grid.rotex-strip .rotex-card {
	position: relative;
	padding-bottom: 52px;
}

@media (hover: none) {

	.elementor .e-con:has(> .rotex-h1-tile-name)::before,
	.rotex-grid.rotex-strip .rotex-card::before {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.elementor .e-con:has(> .rotex-h1-tile-name)::before,
	.rotex-grid.rotex-strip .rotex-card::before {
		transition: opacity 140ms ease;
		transform: none;
	}
}

@media (max-width: 1024px) {

	.elementor .e-con:has(> .rotex-h1-tile-name) {
		min-height: 340px;
		width: 34% !important;
		flex-basis: 34%;
	}
}

@media (max-width: 767px) {

	/* A swipeable strip. The row is already flex, so it only needs to stop
	   wrapping, scroll and snap; each tile is given a width in the same
	   breakpoint because Elementor takes them to 100% on a phone. */
	.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-tile-name)::before,
	.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-tile-name)::after {
		height: 150px;
	}

	.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-tile-name)::before {
		top: -118px;
	}

	.elementor .e-con:has(> .e-con > .e-con > .rotex-h1-tile-name)::after {
		bottom: -118px;
	}

	.elementor .e-con:has(> .e-con > .rotex-h1-tile-name) {
		/* The snapped card lands in the middle of the screen rather than
		   against the left edge, so there is always a sliver of the one
		   before and the one after: the strip reads as something to push
		   left and right rather than a column that happens to be cut off. */
		scroll-snap-align: none;
		scroll-padding-inline: 0;
	}

	.elementor .e-con:has(> .rotex-h1-tile-name) {
		width: 74% !important;
		flex: 0 0 74%;
		min-height: 320px;
		padding: 0 62px 42px 18px;
		scroll-snap-align: center;
	}

	/* the phone bow is shallower, so the arrow sits lower with it */
	.elementor .e-con:has(> .rotex-h1-tile-name)::before {
		bottom: 44px;
	}
}

/* Product tiles --------------------------------------------------------
 *
 * The tile is a photograph with the name written on the glass. Picture,
 * heading and line stay three separate widgets so staff can edit any of
 * them; the stylesheet makes the photograph the ground and stacks the words
 * on it from the bottom up, which is what stops a two line caption climbing
 * over its own heading on a narrow screen.
 * ------------------------------------------------------------------- */

.elementor .e-con:has(> .rotex-h1-card-name) {
	position: relative;
	overflow: hidden;
	background: var(--rotex-ink);
	min-height: 480px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	padding: 0 34px 26px;
}

.elementor .e-con:has(> .rotex-h1-card-wide) {
	min-height: 360px;
}

.elementor .rotex-h1-card-img {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.elementor .rotex-h1-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform 900ms cubic-bezier(0.22, 0.7, 0.28, 1);
}

.elementor .rotex-h1-card-img::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 58%;
	background: linear-gradient(to top, rgba(0, 1, 1, 0.82), rgba(0, 1, 1, 0.32) 48%, rgba(0, 1, 1, 0));
	pointer-events: none;
}

.elementor .e-con:has(> .rotex-h1-card-name):hover .rotex-h1-card-img img {
	transform: scale(1.04);
}

.elementor .rotex-h1-card-name,
.elementor .rotex-h1-card-note {
	position: relative;
	z-index: 2;
	margin: 0;
}

.elementor .rotex-h1-card-name a {
	color: inherit;
	text-decoration: none;
}

.elementor .rotex-h1-card-name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.elementor .e-con:has(> .rotex-h1-card-name):focus-within {
	outline: 3px solid var(--rotex-red);
	outline-offset: 3px;
}

/* The counter strip ---------------------------------------------------
 *
 * A thin black band with a hairline between each figure. The rules are
 * separators between items in a row, not an outline drawn round a card,
 * which is the thing rule 5 rules out: they belong to the same family as
 * the rule between two columns of a table.
 *
 * On a phone only the first three are kept, side by side on one line. Five
 * figures across a phone gives five columns of about sixty pixels, and a
 * two digit number over a two word label does not fit in sixty pixels. The
 * two that go, product families and showrooms, are the two the rest of the
 * page says anyway.
 * ------------------------------------------------------------------- */

.elementor .rotex-h1-count {
	font-variant-numeric: tabular-nums;
}

.elementor .e-con:has(> .rotex-h1-count) + .e-con:has(> .rotex-h1-count) {
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 767px) {

	.elementor .e-con:has(> .e-con > .rotex-h1-count) {
		flex-wrap: nowrap !important;
	}

	.elementor .e-con:has(> .rotex-h1-count) {
		width: 33.333% !important;
		flex: 1 1 33.333%;
	}

	.elementor .e-con:has(> .rotex-h1-count):nth-child(n + 4) {
		display: none;
	}

	/* Two lines each, a figure over a label, and the label holds one line.
	   At 13px "Countries served" wrapped while "Founded" did not, so one
	   column was two lines and another three and the strip sat crooked.
	   11px fits the longest of the three across a third of a 360px screen,
	   which is the narrowest phone worth designing for. */
	.elementor .rotex-h1-count-label,
	.elementor .rotex-h1-count-label p {
		font-size: 10px !important;
		line-height: 1.3;
		white-space: nowrap;
		letter-spacing: 0;
	}

	/* The row's own gap was taking 40px of a 375px screen, which is what
	   pushed the longest label past the edge of its column. Closed up: the
	   hairlines between the figures are doing the separating anyway. */
	.elementor .e-con:has(> .e-con > .rotex-h1-count) {
		gap: 8px !important;
	}
}

.elementor .rotex-h1-count-label {
	margin: 0;
}

/* The four reasons, as frosted glass ----------------------------------
 *
 * Each column becomes a panel of glass laid on the photograph: the picture
 * still shows through it, blurred, so the band stays a photograph rather
 * than turning into four grey boxes. It is the right finish for a company
 * that sells glazing.
 *
 * No outline on the panels. A hairline border is the obvious way to draw
 * glass and rule 5 rules it out, so the edge is drawn by the blur and by a
 * light catch across the top instead, which is closer to how glass actually
 * reads.
 *
 * backdrop-filter is not universal. Where it is missing the panel falls
 * back to its own translucent fill, which is darker to compensate, so the
 * white text keeps its contrast either way.
 * ------------------------------------------------------------------- */

.elementor .e-con:has(> .rotex-h1-reason-title) {
	position: relative;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 30px 26px 34px;
	overflow: hidden;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

	.elementor .e-con:has(> .rotex-h1-reason-title) {
		background: rgba(255, 255, 255, 0.07);
		-webkit-backdrop-filter: blur(16px) saturate(125%);
		backdrop-filter: blur(16px) saturate(125%);
	}
}

/* The light catching the top edge of the pane. */
.elementor .e-con:has(> .rotex-h1-reason-title)::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.16) 0%,
		rgba(255, 255, 255, 0.04) 18%,
		rgba(255, 255, 255, 0) 46%
	);
	pointer-events: none;
}

.elementor .rotex-h1-reason-text,
.elementor .rotex-h1-reason-title {
	position: relative;
	z-index: 1;
}

/* The four reasons over the photograph --------------------------------
 *
 * The scrim is drawn here rather than set as Elementor's overlay, and the
 * band is reached through its reason titles rather than through a class on
 * the section: Elementor prints a CSS class on a widget and drops it on a
 * container, top level ones included, so :has() is the only handle a
 * stylesheet has on a section.
 * ------------------------------------------------------------------- */

.elementor .e-con.e-parent:has(.rotex-h1-reason-title) {
	position: relative;
	isolation: isolate;
}

.elementor .e-con.e-parent:has(.rotex-h1-reason-title)::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 1, 1, 0.66);
	/* Elementor gives its own container overlay an opacity of 0.5, which
	   would halve this scrim and leave white text on a bright sky. */
	opacity: 1;
	z-index: 0;
	pointer-events: none;
}

.elementor .e-con.e-parent:has(.rotex-h1-reason-title) > .e-con-inner {
	position: relative;
	z-index: 1;
}

.elementor .rotex-h1-reason-title {
	margin: 0;
}

.elementor .rotex-h1-reason-text {
	line-height: 1.8;
}

/* News rows ----------------------------------------------------------- */
.rotex-news {
	display: flex;
	flex-direction: column;
	gap: 46px;
	width: 100%;
}

.rotex-news-row {
	display: flex;
	align-items: center;
	gap: 48px;
}

.rotex-news-flip {
	flex-direction: row-reverse;
}

.rotex-news-words {
	flex: 1 1 auto;
	min-width: 0;
}

.rotex-news-date {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 600;
	color: var(--rotex-red);
}

.rotex-news-title {
	margin: 0 0 14px;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.rotex-news-title a {
	color: var(--rotex-ink);
	text-decoration: none;
}

.rotex-news-title a:hover,
.rotex-news-title a:focus-visible {
	color: var(--rotex-red);
}

.rotex-news-summary {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--rotex-grey);
	max-width: 62ch;
}

.rotex-news-more {
	margin: 0;
}

.rotex-news .rotex-pill {
	display: inline-block;
	padding: 12px 26px;
	font-size: 15px;
	font-weight: 600;
	color: var(--rotex-ink);
	text-decoration: none;
	border: 1px solid rgba(0, 1, 1, 0.25);
	transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

.rotex-news .rotex-pill:hover,
.rotex-news .rotex-pill:focus-visible {
	background: var(--rotex-red);
	border-color: var(--rotex-red);
	color: var(--rotex-paper);
}

.rotex-news-shot {
	flex: 0 0 382px;
	max-width: 382px;
}

.rotex-news-shot img {
	display: block;
	width: 382px;
	height: 382px;
	object-fit: cover;
}

/* Narrower ------------------------------------------------------------ */
@media (max-width: 1024px) {

	.elementor .e-con:has(> .rotex-h1-card-name) {
		min-height: 380px;
	}

	.elementor .e-con:has(> .rotex-h1-card-wide) {
		min-height: 300px;
	}

	.rotex-news-shot {
		flex-basis: 300px;
		max-width: 300px;
	}

	.rotex-news-shot img {
		width: 300px;
		height: 300px;
	}

	.rotex-news-title {
		font-size: 28px;
	}
}

@media (max-width: 767px) {

	.elementor .rotex-h1-title .elementor-heading-title {
		font-size: 30px;
	}

	/* On a phone the hero words sit in the bottom left corner, over the
	   quietest part of the photograph and where a thumb already is. The
	   headline carries the band on its own: bigger, heavier, and held to a
	   narrow measure so it stacks into four or five short lines instead of
	   running the full width of the screen. The line under it goes, because
	   two blocks of text in that corner is one too many. */
	.elementor .rotex-h1-hero-title .elementor-heading-title {
		font-size: 24px !important;
		font-weight: 800;
		line-height: 1.14;
		max-width: 88%;
	}

	.elementor .rotex-h1-hero-line {
		display: none;
	}

	.elementor .rotex-h1-subhead .elementor-heading-title {
		font-size: 20px;
	}

	.elementor .e-con:has(> .rotex-h1-card-name),
	.elementor .e-con:has(> .rotex-h1-card-wide) {
		min-height: 300px;
		padding: 0 20px 22px;
	}

	.rotex-news-row,
	.rotex-news-flip {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.rotex-news-shot {
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
	}

	.rotex-news-shot img {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.rotex-news-title {
		font-size: 24px;
	}

	/* A fixed background costs a repaint on every scroll frame on a phone
	   and several mobile browsers ignore it anyway. The band keeps the
	   photograph, and loses only the effect that was never arriving. */
	.elementor .e-con.e-parent:has(.rotex-h1-reason-title) {
		background-attachment: scroll !important;
	}
}

/* The process strip -------------------------------------------------- */
.elementor .rotex-h1-step-no .elementor-heading-title {
	letter-spacing: 0.12em;
}

.elementor .rotex-h1-step-text {
	line-height: 1.7;
}

/* The testimonials, on a phone -----------------------------------------
 *
 * Three cards stacked is a long scroll past the same thing three times.
 * Side by side on a snapping strip they read as a set, and the half of the
 * next card showing at the edge is what tells somebody there is more to
 * swipe to. No script: the browser's own scroll snapping does it.
 * ------------------------------------------------------------------- */
@media (max-width: 767px) {

	.rotex-h1-voices-list .rotex-grid {
		display: grid;
		/* none, or the three column track the grid already carries wins and
		   the auto columns below never get a say: two cards collapse to a
		   few dozen pixels wide and their text runs down a ribbon. */
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}

	.rotex-h1-voices-list .rotex-grid::-webkit-scrollbar {
		display: none;
	}

	.rotex-h1-voices-list .rotex-grid > * {
		scroll-snap-align: start;
	}
}

/* Left, on a phone -----------------------------------------------------
 *
 * Centred text reads well across a wide band and badly down a narrow one:
 * every line starts in a different place, so the eye has to find the start
 * of each one. On a phone everything on this page ranges left, headings,
 * lines, figures and the rules and buttons that sit with them.
 * ------------------------------------------------------------------- */
@media (max-width: 767px) {

	.elementor .rotex-h1-title,
	.elementor .rotex-h1-title .elementor-heading-title,
	.elementor .rotex-h1-subhead,
	.elementor .rotex-h1-subhead .elementor-heading-title,
	.elementor .rotex-h1-sub,
	.elementor .rotex-h1-sub p,
	.elementor .rotex-h1-count,
	.elementor .rotex-h1-count .elementor-heading-title,
	.elementor .rotex-h1-count-label,
	.elementor .rotex-h1-count-label p,
	.elementor .rotex-h1-reason-title,
	.elementor .rotex-h1-reason-title .elementor-heading-title,
	.elementor .rotex-h1-step-title,
	.elementor .rotex-h1-step-title .elementor-heading-title {
		text-align: left !important;
	}

	.elementor .rotex-h1-sub {
		margin-inline: 0;
	}

	/* The exception to ranging left: a title over a carousel. The strip
	   under it is centred, and a left title over a centred strip reads as
	   a mistake rather than a choice. */
	.elementor .rotex-h1-centre,
	.elementor .rotex-h1-centre .elementor-heading-title,
	.elementor .rotex-h1-centre p {
		text-align: center !important;
	}

	.elementor .rotex-h1-centre.rotex-h1-sub {
		margin-inline: auto;
	}

	/* The rows and columns that hold a single button. On a phone it ranges
	   left with the words it belongs to, rather than sitting out on the
	   right where it reads as belonging to nothing. */
	.elementor .e-con:has(> .rotex-h1-pill) {
		justify-content: flex-start !important;
		align-items: flex-start !important;
	}

	/* except the one under a carousel's own heading, which stays centred
	   with the title and the line it belongs to */
	.elementor .e-con:has(> .rotex-h1-pill-centre) {
		justify-content: center !important;
		align-items: center !important;
	}

	.elementor .rotex-h1-rule .elementor-divider {
		justify-content: flex-start;
	}

	.elementor .rotex-h1-rule .elementor-divider-separator {
		margin-inline: 0;
	}
}

/* The project strip and its arrows -------------------------------------
 *
 * A grid of three showed the three most recent projects and hid the rest
 * behind a link. As a strip the whole portfolio is reachable from the home
 * page: swipe on a phone, arrows on a desktop, and a counter so somebody
 * knows how far along they are and that there is more.
 *
 * The strip scrolls and snaps on its own. The arrows are added by core.js
 * and are an addition, not a requirement: with the script blocked the strip
 * still works by dragging, by swiping and by the keyboard.
 * ------------------------------------------------------------------- */

/* The band the project strip is curved against: the same bowed shape as the
   product strip, so the two carousels on this page are recognisably the
   same object. The arcs are drawn here rather than on the strip because the
   strip is what scrolls. */
.rotex-strip-band {
	position: relative;
	overflow: hidden;
}

/* Edge to edge. The cards are meant to run off both sides of the screen, so
   nothing here may carry a gutter: not the portfolio wrapper, not the strip
   and not the first or last card. */
.rotex-portfolio:has(> .rotex-strip-band) {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

.rotex-strip-band::before,
.rotex-strip-band::after {
	content: "";
	position: absolute;
	left: -6%;
	right: -6%;
	height: 200px;
	background: var(--rotex-paper);
	border-radius: 50%;
	z-index: 5;
	pointer-events: none;
}

.rotex-strip-band::before {
	top: -158px;
}

.rotex-strip-band::after {
	bottom: -158px;
}

.rotex-grid.rotex-strip {
	padding-inline: 0;
	margin-inline: 0;
	display: grid;
	grid-template-columns: none;
	grid-auto-flow: column;
	/* A definite width, not a minmax with a zero floor: a minmax track is
	   allowed to shrink to fit the container, which quietly squeezed nine
	   cards into one screen instead of letting them overflow and scroll.
	   21% and a 14px gap are the product strip's figures, so the two
	   carousels carry cards of exactly the same size. */
	grid-auto-columns: 21%;
	gap: 14px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.rotex-grid.rotex-strip::-webkit-scrollbar {
	display: none;
}

.rotex-grid.rotex-strip > * {
	scroll-snap-align: start;
}

.rotex-carousel-nav {
	/* Above the band's arcs. Those arcs are painted in the section's own
	   colour to carve the curve out of the strip, and they were painting
	   over the arrows underneath it. Lifting the nav is enough: white over
	   white leaves no mark, and the cards keep their curve. */
	position: relative;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 26px;
	/* The space under the arrows is set here rather than as padding on the
	   band, because the band's bottom arc is anchored to the band: padding
	   would carry the curve down with it and it would stop cutting the
	   cards, which is the whole shape. */
	margin-bottom: 48px;
}

.rotex-carousel-arrow {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(0, 1, 1, 0.22);
	background: none;
	color: var(--rotex-ink);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease;
}

.rotex-carousel-arrow:hover:not(:disabled),
.rotex-carousel-arrow:focus-visible:not(:disabled) {
	background: var(--rotex-red);
	border-color: var(--rotex-red);
	color: var(--rotex-paper);
}

.rotex-carousel-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.rotex-carousel-count {
	margin: 0;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.rotex-carousel-on {
	font-size: 19px;
	font-weight: 700;
	color: var(--rotex-ink);
}

.rotex-carousel-of {
	font-size: 15px;
	color: var(--rotex-grey);
}

@media (max-width: 1024px) {

	.rotex-grid.rotex-strip {
		grid-auto-columns: 34%;
		gap: 14px;
	}
}

@media (max-width: 767px) {

	.rotex-grid.rotex-strip {
		grid-auto-columns: 78%;
		gap: 14px;
	}

	.rotex-strip-band::before,
	.rotex-strip-band::after {
		height: 150px;
	}

	.rotex-strip-band::before {
		top: -118px;
	}

	.rotex-strip-band::after {
		bottom: -118px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.rotex-grid.rotex-strip {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------------------
 * A picture shown whole
 *
 * Some page heads carry a photograph that has to be seen entire rather than
 * cropped to the shape of the column: a window is the subject, and cutting
 * off its frame defeats the point. The picture keeps its own proportions and
 * a soft corner rather than a shaped cut.
 * ------------------------------------------------------------------- */

.elementor .rotex-fit-full,
.elementor .rotex-fit-full .elementor-widget-container {
	height: auto !important;
}

.elementor .rotex-fit-full img {
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	border-radius: 24px !important;
}

/* A film in a picture frame: fills the frame the way the photograph did. */
.rotex-bgvideo-frame {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #000101;
}

.rotex-bgvideo-frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.elementor .rotex-shape-arch .rotex-bgvideo-frame {
	border-radius: 999px 999px 20px 20px;
}

@media (max-width: 767px) {

	.elementor .rotex-shape-arch .rotex-bgvideo-frame {
		border-radius: 12px;
	}
}

/* The partners' logos, on a white panel so each keeps its own colours. */
.rotex-logo-panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	padding: 18px;
	background: #FFFFFF;
	border-radius: 28px;
}

.rotex-logo-tile {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	padding: 18px;
	background: var(--rotex-surface, #F5F5F4);
	border-radius: 18px;
}

.rotex-logo-tile img {
	max-width: 100%;
	max-height: 96px;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* The call artwork at the head of the contact page. */
.rotex-call-art {
	max-width: 440px;
	margin-left: auto;
	line-height: 0;
}

.rotex-call-art svg {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 40px;
}

/* The red utility bar: its links darken to the logo black on hover rather
   than staying white, so a visitor can see which one the pointer is on. */
.rotex-utility a:hover,
.rotex-utility a:focus-visible,
.rotex-utility a.rotex-contact:hover,
.rotex-utility a.rotex-contact:focus-visible {
	color: var(--rotex-ink, #000101) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The home product tiles are links in their own right: the whole tile opens
   its page. Keep the words the colour they were rather than link blue. */
.elementor a.e-con:has(> .rotex-h1-tile-name) {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

/* Both numbers on one line in the red bar on a phone, same weight, with the
   comma between them kept tight. */
@media (max-width: 900px) {

	.rotex-utility p:has(> .rotex-contact) {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
		gap: 0;
		margin: 0;
		white-space: nowrap;
		font-size: 0.82rem;
	}

	.rotex-utility p:has(> .rotex-contact) > .rotex-contact {
		display: inline-block;
		padding: 11px 6px;
		font-weight: 700;
		letter-spacing: 0.01em;
	}
}

@media (max-width: 380px) {

	.rotex-utility p:has(> .rotex-contact) {
		font-size: 0.74rem;
	}

	.rotex-utility p:has(> .rotex-contact) > .rotex-contact {
		padding: 10px 4px;
	}
}

/* Wide screens show the email in the red bar, so they carry one phone number
   only, the main one. The comma between the two numbers is a bare character,
   so the line is set to zero size and the kept number given its size back.
   On a phone the email is hidden and both numbers show, on one line. */
@media (min-width: 901px) {

	.rotex-utility p:has(> .rotex-contact-phone_2) {
		font-size: 0;
	}

	.rotex-utility p:has(> .rotex-contact-phone_2) > .rotex-contact-phone {
		font-size: 14px;
	}

	.rotex-utility .rotex-contact-phone_2 {
		display: none !important;
	}
}

/* On a phone the email stays out of the red bar, so both numbers fit. */
@media (max-width: 900px) {

	.rotex-utility p:has(> .rotex-contact-email),
	.rotex-utility .rotex-contact-email {
		display: none !important;
	}
}

/* Keep the phone number and the email on one line in the red bar. The phone
   line is set to zero size to hide the comma, which also collapsed its line
   height and dropped the number out of line with the email; both now sit in
   the same centred row with the same line height. */
@media (min-width: 901px) {

	.rotex-utility p:has(> .rotex-contact) {
		display: flex;
		align-items: center;
		margin: 0;
		line-height: 28px;
	}

	.rotex-utility p:has(> .rotex-contact-phone_2) > .rotex-contact-phone,
	.rotex-utility .rotex-contact-email {
		display: inline-block;
		font-size: 14px;
		line-height: 28px;
	}

	.rotex-utility .wp-block-group:has(> p > .rotex-contact) {
		align-items: center;
	}
}

/* The WhatsApp button as a round icon in the bottom right corner, on every
   screen size. The words stay in the markup for screen readers. */
.rotex-whatsapp {
	width: 58px;
	height: 58px;
	padding: 0 !important;
	justify-content: center;
	border-radius: 50%;
	right: 20px;
	bottom: 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	transition: transform .15s ease, background-color .15s ease;
}

.rotex-whatsapp:hover,
.rotex-whatsapp:focus-visible {
	transform: scale(1.06);
}

.rotex-whatsapp svg {
	width: 30px;
	height: 30px;
}

.rotex-whatsapp span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 600px) {

	.rotex-whatsapp {
		width: 54px;
		height: 54px;
		right: 14px;
		bottom: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.rotex-whatsapp {
		transition: none;
	}
}

/* The question picker that opens from the WhatsApp button. */
.rotex-wa-panel {
	position: fixed;
	right: 20px;
	bottom: 92px;
	z-index: 9001;
	width: 340px;
	max-width: calc(100vw - 28px);
	max-height: calc(100vh - 120px);
	overflow: auto;
	background: var(--rotex-paper, #FFFFFF);
	color: var(--rotex-text, #1C1C1B);
	border-radius: 18px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
	font-family: inherit;
}

.rotex-wa-panel[hidden] {
	display: none;
}

.rotex-wa-head {
	position: relative;
	padding: 18px 48px 16px 20px;
	background: var(--rotex-whatsapp, #25D366);
	color: #FFFFFF;
	border-radius: 18px 18px 0 0;
}

.rotex-wa-title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.rotex-wa-sub {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	opacity: 0.95;
}

.rotex-wa-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #FFFFFF;
	font-size: 22px;
	line-height: 32px;
	cursor: pointer;
}

.rotex-wa-list {
	list-style: none;
	margin: 0;
	padding: 14px 14px 6px;
	display: grid;
	gap: 8px;
}

.rotex-wa-q {
	width: 100%;
	padding: 11px 14px;
	border: 0;
	border-radius: 12px;
	background: var(--rotex-surface, #F5F5F4);
	color: inherit;
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: background-color .15s ease;
}

.rotex-wa-q:hover,
.rotex-wa-q:focus-visible {
	background: var(--rotex-surface-deep, #EBEBEA);
	outline: none;
}

.rotex-wa-own {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	padding: 8px 14px 16px;
}

.rotex-wa-own textarea {
	flex: 1;
	min-width: 0;
	resize: none;
	padding: 10px 12px;
	border: 0;
	border-radius: 12px;
	background: var(--rotex-surface, #F5F5F4);
	color: inherit;
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
}

.rotex-wa-own textarea:focus {
	outline: 2px solid var(--rotex-whatsapp, #25D366);
	outline-offset: 0;
}

.rotex-wa-send {
	flex: none;
	padding: 11px 16px;
	border: 0;
	border-radius: 12px;
	background: var(--rotex-whatsapp, #25D366);
	color: #FFFFFF;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

@media (max-width: 600px) {

	.rotex-wa-panel {
		right: 14px;
		bottom: 80px;
	}
}

/* Showroom addresses open in Google Maps. Underlined in the brand red so it
   reads as a link without shouting, and red on hover. */
.rotex-map-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(173, 10, 4, 0.45);
	text-underline-offset: 3px;
}

.rotex-map-link:hover,
.rotex-map-link:focus-visible {
	color: var(--rotex-red, #AD0A04);
	text-decoration-color: currentColor;
}