/**
 * Rotex on the public site.
 *
 * Deliberately unopinionated about colour and type: the theme and Elementor
 * own those. What lives here is layout, spacing and the states a shortcode
 * cannot express in markup. Everything is scoped under .rotex so nothing here
 * can reach into the rest of the page.
 *
 * @package Rotex_Core
 */

.rotex {
	--rotex-gap: 24px;

	/* Card corners. Named apart from core.css's --rotex-radius, which is the
	   pill radius for buttons: one file shadowing the other's token is how
	   the buttons lost their shape. */
	--rotex-card-radius: 14px;

	--rotex-muted: var(--rotex-text-muted, #5e5e5d);
	--rotex-accent: var(--rotex-red, #ad0a04);
}

.rotex *,
.rotex *::before,
.rotex *::after {
	box-sizing: border-box;
}

/* filters and search */

.rotex[aria-busy="true"] {
	opacity: .55;
	transition: opacity .15s ease;
	pointer-events: none;
}

.rotex-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--rotex-gap);
}

.rotex-filter {
	display: inline-block;
	padding: 7px 15px;
	background: var(--rotex-surface-deep, #ebebea);
	border-radius: 999px;
	text-decoration: none;
	line-height: 1.4;
	font-size: 0.9em;
}

.rotex-filter:hover,
.rotex-filter:focus-visible {
	background: var(--rotex-ink, #000101);
	color: var(--rotex-paper, #fff);
}

.rotex-filter.is-current {
	background: var(--rotex-accent);
	color: var(--rotex-paper, #fff);
	font-weight: 600;
}

.rotex-search {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 var(--rotex-gap);
}

.rotex-search input[type="search"] {
	flex: 1 1 220px;
	min-width: 0;
	padding: 11px 14px;
	border: 0;
	background: var(--rotex-surface, #f5f5f4);
	border-radius: 10px;
	font: inherit;
	color: inherit;
}

.rotex-search button {
	padding: 9px 18px;
	border-radius: var(--rotex-card-radius);
	cursor: pointer;
}

.rotex-clear {
	font-size: 0.9em;
}

/* grids and cards */

.rotex-grid {
	display: grid;
	gap: var(--rotex-gap);
	grid-template-columns: 1fr;
}

@media screen and ( min-width: 600px ) {
	.rotex-cols-2,
	.rotex-cols-3,
	.rotex-cols-4 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media screen and ( min-width: 960px ) {
	.rotex-cols-3 {
		grid-template-columns: repeat( 3, 1fr );
	}

	.rotex-cols-4 {
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* A card has to be a step away from whatever it is standing on.
 *
 * This was Surface, a fixed grey, and the range section on the home page is a
 * Surface band: every card matched its own background exactly, so six cards
 * read as one long grey area and the button under them looked like it belonged
 * to the last one. The same fixed-grey mistake the buttons and the form fields
 * already had.
 *
 * A translucent ink darkens whatever is behind it instead of being a colour of
 * its own, so the card is a shade off white on paper and a shade off grey on
 * Surface, and it cannot be broken by moving a section onto another ground. */
.rotex-card {
	border-radius: var(--rotex-card-radius);
	overflow: hidden;
	background: rgba(0, 1, 1, 0.055);
	display: flex;
	flex-direction: column;
}

.rotex-card,
.rotex-place {
	transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease, background-color .2s ease;
}

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

.rotex-card-link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.rotex-card-media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba( 0, 0, 0, .04 );
}

.rotex-card-media img,
.rotex-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rotex-card-body {
	padding: 16px 18px 18px;
}

.rotex-card-title {
	margin: 0 0 4px;
	font-size: 1.1em;
	line-height: 1.3;
}

.rotex-card-code {
	margin: 0 0 8px;
	font-size: 0.85em;
	color: var(--rotex-muted);
	letter-spacing: .03em;
}

.rotex-card-summary,
.rotex-card-where {
	margin: 0 0 10px;
	color: var(--rotex-muted);
	line-height: 1.5;
}

.rotex-card-meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 0.9em;
}

.rotex-price {
	font-weight: 600;
}

.rotex-warranty,
.rotex-units {
	color: var(--rotex-muted);
}

.rotex-empty {
	color: var(--rotex-muted);
	margin: 0;
	padding: 18px 0;
}

/* pager */

.rotex-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: var(--rotex-gap) 0 0;
}

.rotex-page {
	min-width: 38px;
	text-align: center;
	padding: 8px 11px;
	background: var(--rotex-surface-deep, #ebebea);
	border-radius: 999px;
	text-decoration: none;
}

.rotex-page.is-current {
	font-weight: 700;
	background: var(--rotex-accent);
	color: var(--rotex-paper, #fff);
}

/* directory */

.rotex-country {
	margin: 0 0 32px;
}

.rotex-country-name {
	margin: 0 0 4px;
	padding: 0;
}

.rotex-city-name {
	margin: 20px 0 10px;
	font-size: 1.05em;
	color: var(--rotex-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.rotex-places {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
	margin: 18px 0 0;
}

@media screen and ( min-width: 700px ) {
	.rotex-places.rotex-cols-2,
	.rotex-places.rotex-cols-3,
	.rotex-places.rotex-cols-4 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media screen and ( min-width: 1000px ) {
	.rotex-places.rotex-cols-3 {
		grid-template-columns: repeat( 3, 1fr );
	}

	.rotex-places.rotex-cols-4 {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.rotex-place-city {
	margin: 0 0 4px;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--rotex-muted);
}

.rotex-place {
	border-radius: var(--rotex-card-radius);
	overflow: hidden;
	background: var(--rotex-surface, #f5f5f4);
	display: flex;
	flex-direction: column;
}

.rotex-place-body {
	padding: 16px 18px;
}

.rotex-place-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba( 0, 0, 0, .04 );
}

.rotex-place-name {
	margin: 0 0 8px;
	font-size: 1.05em;
}

.rotex-place-name a {
	text-decoration: none;
	color: inherit;
}

.rotex-badge {
	display: inline-block;
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 4px 9px;
	background: var(--rotex-surface-deep, #ebebea);
	border-radius: 999px;
	vertical-align: middle;
}

.rotex-address {
	margin: 0 0 10px;
	color: var(--rotex-muted);
	line-height: 1.5;
}

.rotex-contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0 0 8px;
	font-size: 0.92em;
}

.rotex-directions {
	font-size: 0.92em;
}

.rotex-hours-list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 16px;
	margin: 12px 0 0;
	font-size: 0.9em;
}

.rotex-hours-list dt {
	color: var(--rotex-muted);
}

.rotex-hours-list dd {
	margin: 0;
}

.rotex-place-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.rotex-place-list li {
	padding: 7px 0;
}

.rotex-where {
	color: var(--rotex-muted);
	font-size: 0.9em;
}

.rotex-subhead {
	margin: 24px 0 10px;
	font-size: 1.05em;
}

/* testimonials */

.rotex-testimonial {
	padding: 20px;
	margin: 0;
}

.rotex-quote {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	font-size: 1.05em;
	line-height: 1.6;
}

.rotex-quote p:last-child {
	margin-bottom: 0;
}

.rotex-rating {
	margin: 0 0 10px;
	letter-spacing: .1em;
}

.rotex-attribution {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 0.92em;
}

.rotex-portrait {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.rotex-person {
	font-weight: 600;
}

.rotex-person-role {
	color: var(--rotex-muted);
	flex: 1 1 100%;
}

.rotex-video-link {
	margin: 0 0 12px;
	font-size: 0.92em;
	font-weight: 600;
}

.rotex-video-link a {
	text-decoration: none;
}

.rotex-video-link span {
	font-size: 0.75em;
	margin-right: 4px;
}

/* jobs */

.rotex-job .rotex-card-body {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.rotex-job-title {
	margin: 0 0 6px;
	font-size: 1.15em;
	line-height: 1.3;
}

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

.rotex-job-facts {
	margin: 0 0 8px;
	color: var(--rotex-muted);
	font-size: 0.92em;
}

.rotex-job-summary {
	margin: 0;
	line-height: 1.55;
	color: var(--rotex-muted);
}

.rotex-job-apply {
	margin: auto 0 0;
	padding-top: 16px;
	font-weight: 600;
}

.rotex-job-apply a {
	text-decoration: none;
}

/* the application form */

.rotex-form {
	max-width: 620px;
}

.rotex-form-row {
	margin: 0 0 16px;
}

.rotex-form-row label {
	display: block;
	margin: 0 0 5px;
	font-weight: 600;
}

.rotex-form-consent label {
	font-weight: 400;
	line-height: 1.5;
}

/*
 * A field has to be visible on whatever it is sitting on.
 *
 * These were filled with Surface, and the quote form sits on a Surface band,
 * so every field matched its own background exactly and the form appeared to
 * be nothing but labels floating in space. The same mistake had already been
 * made once with the quiet button.
 *
 * A translucent ink is the fix, because it darkens whatever is behind it
 * rather than being a colour of its own. On white it reads as pale grey, on
 * Surface as a shade deeper, and on the dark bands it lightens instead. One
 * value, correct everywhere, and it cannot be broken by moving a section onto
 * a different ground.
 */
.rotex-form input[type="text"],
.rotex-form input[type="email"],
.rotex-form input[type="tel"],
.rotex-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 0;
	background: rgba(0, 1, 1, 0.055);
	border-radius: 10px;
	font: inherit;
	color: inherit;
}

.rotex-form textarea {
	resize: vertical;
}

.rotex-required {
	color: #b32d2e;
}

.rotex-hint {
	display: block;
	margin: 5px 0 0;
	font-size: 0.85em;
	color: var(--rotex-muted);
}

/*
 * The submit button is the Rotex button, not the browser's.
 *
 * It was inheriting the user agent's grey box with a hairline round it, which
 * broke rule 5 and, worse, made the most important control on the site look
 * like the least important thing on the page. It now matches the primary
 * button used everywhere else, so a customer reaching the end of the form
 * meets the same red they have been clicking all the way through.
 */
.rotex-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 32px;
	min-height: 48px;
	border: 0;
	border-radius: var(--rotex-radius, 999px);
	background: var(--rotex-red, #ad0a04);
	color: var(--rotex-paper, #fff);
	font: inherit;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.rotex-submit:hover,
.rotex-submit:focus-visible {
	background: var(--rotex-red-dark, #8c0803);
	color: var(--rotex-paper, #fff);
}

.rotex-submit:focus-visible {
	outline: 3px solid var(--rotex-ink, #000101);
	outline-offset: 3px;
}

.rotex-submit[disabled] {
	opacity: .6;
	cursor: progress;
}

.rotex-notice {
	margin: 0 0 18px;
	padding: 14px 18px;
	background: var(--rotex-surface, #f5f5f4);
	border-radius: 10px;
	border-left: 4px solid var(--rotex-grey, #5e5e5d);
}

.rotex-notice-good {
	border-left-color: #1f7a3d;
}

.rotex-notice-bad {
	border-left-color: #b32d2e;
}

/* The honeypot must be invisible to people and present to robots, so it is
   moved out of view rather than hidden with display:none, which some robots
   check for. */
.rotex-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* single-page detail blocks */

.rotex-lead {
	font-size: 1.15em;
	line-height: 1.55;
	margin: 0 0 18px;
}

.rotex-key-facts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 12px 24px;
	margin: 0 0 22px;
	padding: 20px 22px;
	background: var(--rotex-surface, #f5f5f4);
	border-radius: var(--rotex-card-radius);
}

.rotex-key-facts > div {
	min-width: 0;
}

.rotex-key-facts dt {
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--rotex-muted);
	margin: 0 0 3px;
}

.rotex-key-facts dd {
	margin: 0;
	line-height: 1.45;
}

.rotex-table-wrap {
	overflow-x: auto;
	margin: 0 0 18px;
}

.rotex-specs {
	width: 100%;
	border-collapse: collapse;
}

.rotex-specs th,
.rotex-specs td {
	text-align: left;
	padding: 11px 14px;
	vertical-align: top;
}

.rotex-specs tbody tr:nth-child(odd) th,
.rotex-specs tbody tr:nth-child(odd) td {
	background: var(--rotex-surface, #f5f5f4);
}

.rotex-specs th {
	width: 38%;
	font-weight: 600;
}

.rotex-prose {
	line-height: 1.6;
	margin: 0 0 16px;
}

.rotex-lines {
	margin: 0 0 16px;
	padding-left: 20px;
	line-height: 1.55;
}

.rotex-lines li {
	margin: 0 0 6px;
}

.rotex-address {
	font-style: normal;
	line-height: 1.55;
	margin: 0 0 10px;
}

.rotex-contact-name,
.rotex-how {
	margin: 0 0 10px;
	color: var(--rotex-muted);
}

/* image gallery */

.rotex-gallery-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat( 2, 1fr );
	margin: 0 0 22px;
}

@media screen and ( min-width: 700px ) {
	.rotex-gallery-grid.rotex-cols-3 {
		grid-template-columns: repeat( 3, 1fr );
	}

	.rotex-gallery-grid.rotex-cols-4 {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.rotex-gallery-item {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--rotex-card-radius);
	background: rgba( 0, 0, 0, .04 );
}

.rotex-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .25s ease;
}

.rotex-gallery-item:hover img,
.rotex-gallery-item:focus-visible img {
	transform: scale( 1.03 );
}

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

/* Elementor editor only: shown when a widget has nothing to render yet. */
.rotex-el-placeholder {
	padding: 1.25rem;
	border-radius: 10px;
	background: var(--rotex-surface-deep, #ebebea);
	color: var(--rotex-text, #1c1c1b);
	font-size: .9rem;
	line-height: 1.5;
	text-align: center;
}

/* ---------------------------------------------------------------------
 * Video, loaded only when asked for (includes/frontend/class-rotex-video.php)
 *
 * The box holds its shape from the first paint, so nothing on the page
 * moves when the picture arrives or the player replaces it.
 * ------------------------------------------------------------------- */

.rotex-video {
	position: relative;
	aspect-ratio: var(--rotex-video-ratio, 16 / 9);
	width: 100%;
	overflow: hidden;
	background: var(--rotex-ink, #1c1c1b);
}

.rotex-video-button {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: #fff;
	font: inherit;
	text-align: left;
}

.rotex-video-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A wash across the lower half so the title stays readable on any picture. */
.rotex-video-button::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.rotex-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	pointer-events: none;
}

.rotex-video-play svg {
	width: 100%;
	height: 100%;
	display: block;
}

.rotex-video-play-bg {
	fill: var(--rotex-red, #ad0a04);
	opacity: .92;
	transition: opacity .15s ease;
}

.rotex-video-button:hover .rotex-video-play-bg,
.rotex-video-button:focus-visible .rotex-video-play-bg {
	opacity: 1;
}

.rotex-video-button:focus-visible {
	outline: 3px solid var(--rotex-red, #ad0a04);
	outline-offset: 2px;
}

.rotex-video-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 16px 18px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.rotex-video iframe,
.rotex-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

.rotex-video video {
	object-fit: contain;
}

@media (min-width: 700px) {
	.rotex-video-play {
		width: 84px;
		height: 59px;
	}

	.rotex-video-title {
		padding: 20px 22px;
		font-size: 18px;
	}
}

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

/* ---------------------------------------------------------------------
 * Cross fading pictures (includes/frontend/class-rotex-slideshow.php)
 *
 * Every picture is stacked in the same box and each takes its turn at full
 * opacity. The timing comes from the shortcode as inline duration and delay,
 * so one keyframe rule serves any number of pictures.
 * ------------------------------------------------------------------- */

.rotex-slideshow {
	position: relative;
	overflow: hidden;
	min-height: var(--rotex-slideshow-min, 560px);
	height: 100%;
	background: var(--rotex-surface-deep, #ebebea);
}

.rotex-slideshow .rotex-slideshow-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation-name: rotex-slideshow-fade;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

/* The first picture also sits underneath at rest, so there is never a moment
   of empty box between the last fade out and the first fade in. */
.rotex-slideshow .rotex-slideshow-image:first-child {
	opacity: 1;
	z-index: 0;
}

.rotex-slideshow .rotex-slideshow-image:not(:first-child) {
	z-index: 1;
}

@keyframes rotex-slideshow-fade {
	0%   { opacity: 0; }
	4%   { opacity: 1; }
	20%  { opacity: 1; }
	24%  { opacity: 0; }
	100% { opacity: 0; }
}

@media (max-width: 767px) {
	.rotex-slideshow {
		min-height: var(--rotex-slideshow-min-mobile, 320px);
	}
}

/* Asked not to animate: the first photograph, and nothing moves. */
@media (prefers-reduced-motion: reduce) {
	.rotex-slideshow .rotex-slideshow-image {
		animation: none;
		opacity: 0;
	}

	.rotex-slideshow .rotex-slideshow-image:first-child {
		opacity: 1;
	}
}

/* The hero variant: the pictures fill the whole band and the words sit on
   top of them.
   
   The dark wash is not decoration, it is legibility. These are working
   photographs of pale walls and bright sites, and white text on them fails
   without it. It fades out towards the right so the picture is still a
   picture rather than a dark rectangle, and turns vertical on a phone, where
   the words sit under the subject rather than beside it. */

/* The widget wrapper Elementor puts round a shortcode is position:relative and
   zero pixels tall, which would make it the containing block and collapse the
   background to nothing. Taking it out of the positioning chain hands the job
   to the section itself, where it belongs. */

.rotex-bg-widget {
	position: static;
}

/* A hero band is far wider than it is tall, and these photographs are not,
   so something has to be cut. Cut it from the floor rather than evenly:
   the window, the view through it and the head of the room are the subject,
   and centring the crop takes the top of the window off to show more
   floorboards. */
.rotex-slideshow-bg .rotex-slideshow-image {
	/* Half way down the frame rather than a third: the picture sits higher
	   in the band, so what shows is the room and the floor rather than the
	   ceiling above the window. */
	object-position: center 52%;
}

.rotex-slideshow.rotex-slideshow-bg {
	/* inset, not 100vw. A viewport width includes the scrollbar, so 100vw is
	   always a little wider than the page and pushes a horizontal scrollbar on
	   to every screen that has one. Since the widget wrapper above is out of
	   the positioning chain, the section itself is the containing block, and
	   inset fills it exactly. */
	position: absolute;
	inset: 0;
	width: auto;
	max-width: none;
	transform: none;
	min-height: 0;
	z-index: 0;
}

.rotex-slideshow-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	/* Light. The photograph is the point, so the scrim only has to take the
	   glare off the left hand side; the white text carries its own legibility
	   in its shadow rather than leaning on a dark panel behind it. */
	background: linear-gradient(
		90deg,
		rgba(0, 1, 1, 0.72) 0%,
		rgba(0, 1, 1, 0.6) 38%,
		rgba(0, 1, 1, 0.34) 72%,
		rgba(0, 1, 1, 0.2) 100%
	);
}

/* On a phone the words sit over the picture rather than beside it, so the
   scrim has to run down it rather than across. Kept light: heavy enough to
   hold white text, not so heavy that the photograph stops being a
   photograph. It is darkest where the words actually are and lifts again
   at the foot of the band. */
@media (max-width: 900px) {
	.rotex-slideshow-bg::after {
		background: linear-gradient(
			180deg,
			rgba(0, 1, 1, 0.32) 0%,
			rgba(0, 1, 1, 0.58) 55%,
			rgba(0, 1, 1, 0.7) 100%
		);
	}
}

/* ---------------------------------------------------------------------
 * The quote form
 *
 * Wider than the other forms, and in two columns on a desk, because it is
 * the page's main event rather than something under an article. Two columns
 * matter here for one reason: they keep the whole form on one screen, and a
 * form a customer can see the end of is a form they finish.
 *
 * Grouped into two sets with a heading each, so the eight fields read as two
 * short questions rather than one long one. Separation is a heading and
 * space; rule 5 rules out drawing a box round a fieldset, and the browser's
 * default fieldset border is switched off for the same reason.
 * ------------------------------------------------------------------- */

.rotex-form-quote {
	max-width: 780px;
}

.rotex-form-set {
	margin: 0 0 34px;
	padding: 0;
	border: 0;
}

.rotex-form-legend {
	padding: 0;
	margin: 0 0 16px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--rotex-red, #ad0a04);
}

@media (min-width: 700px) {

	.rotex-form-quote .rotex-form-set {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 28px;
	}

	.rotex-form-quote .rotex-form-legend {
		grid-column: 1 / -1;
	}

	/* The long answers take the full width. A textarea in half a row invites
	 * a one line answer, and one line is not sizes. */
	.rotex-form-quote .rotex-form-set .rotex-form-row:has(textarea),
	.rotex-form-quote .rotex-form-set .rotex-form-consent {
		grid-column: 1 / -1;
	}
}

.rotex-form select {
	width: 100%;
	padding: 12px 14px;
	border: 0;
	background: rgba(0, 1, 1, 0.055);
	border-radius: 10px;
	font: inherit;
	color: inherit;
	appearance: none;
	/* The arrow, drawn rather than fetched, so the field costs no request. */
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

.rotex-form input:focus-visible,
.rotex-form select:focus-visible,
.rotex-form textarea:focus-visible {
	outline: 2px solid var(--rotex-red, #ad0a04);
	outline-offset: 2px;
}

/*
 * The come and measure offer.
 *
 * Given a tinted ground so it reads as an answer rather than as one more
 * thing to tick. It is the single most useful control on the page for the
 * customer who would otherwise close the tab, so it is allowed to be seen.
 */
.rotex-form-measure {
	padding: 16px 18px;
	border-radius: 12px;
	/* Deeper than a field, so it reads as a panel rather than as one more
	   thing to type in, and still correct on any ground. */
	background: rgba(0, 1, 1, 0.075);
}

.rotex-form-measure label {
	font-weight: 600;
}

.rotex-form-measure .rotex-hint {
	margin-left: 26px;
}

.rotex-form-foot {
	margin-top: 18px;
}

.rotex-enquiry .rotex-notice-good p {
	margin: 0 0 10px;
}

.rotex-enquiry .rotex-notice-good p:last-child {
	margin-bottom: 0;
}

.rotex-enquiry .rotex-cta-actions {
	margin-top: 14px;
}

/* ---------------------------------------------------------------------
 * The testimonial preview: three across, and a swipe on a phone
 *
 * Three quotes fit side by side on a desk. On a phone, three stacked quote
 * cards is three screens of scrolling in the middle of a page somebody was
 * reading for another reason, and the second and third are never seen.
 *
 * So below the breakpoint the row becomes a swipeable strip: the cards line
 * up along one axis, each snaps into place, and the next one shows a sliver
 * of itself at the edge so it is obvious there is more to the right. No
 * script, no library, no arrows to tap and miss. The whole thing is the
 * browser's own scrolling, which means it is smooth on a cheap phone and
 * works with a screen reader as an ordinary list.
 * ------------------------------------------------------------------- */

@media (max-width: 860px) {

	.rotex-testimonial-carousel .rotex-grid {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* The gutter is padding rather than margin so the first and last card
		   can still reach the edge of the screen as they scroll past. */
		padding: 4px 20px 18px;
		margin-inline: -20px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

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

	.rotex-testimonial-carousel .rotex-grid > * {
		flex: 0 0 82%;
		scroll-snap-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rotex-testimonial-carousel .rotex-grid {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------------------
 * The single testimonial page
 *
 * Set as a piece of writing rather than as a large version of the card. The
 * name comes first, at reading size, because on a page of somebody else's
 * words the reader's first question is whose words these are. The quote runs
 * below it in a single measured column, at a size slightly above body copy so
 * it reads as testimony rather than as another paragraph of ours.
 *
 * No quotation marks are drawn and no box is put round it. The indent and the
 * change of size are enough, and rule 5 rules out the box.
 * ------------------------------------------------------------------- */

/* Centred, and at a measure that can be read.
   Left aligned inside a full width page this column sat against the left edge
   with a third of the screen empty beside it. Forty two rem is close to the
   sixty five characters a line wants; wider than that and the eye loses the
   start of the next line. */
.rotex-testimonial-page {
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
}

.rotex-testimonial-who {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 6px;
}

.rotex-testimonial-portrait {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.rotex-testimonial-who-words {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rotex-testimonial-person {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.rotex-testimonial-role {
	margin: 0;
	color: var(--rotex-muted);
}

.rotex-rating-large {
	margin: 0 0 22px;
	font-size: 1.15rem;
	letter-spacing: 0.12em;
	color: var(--rotex-red, #ad0a04);
}

.rotex-testimonial-body {
	margin: 0 0 34px;
	padding: 0;
	border: 0;
	font-size: 1.14rem;
	line-height: 1.8;
	color: var(--rotex-text, #1c1c1b);
}

/* The opening lines are set larger, the way a magazine opens a quote. It gives
   the eye somewhere to start, and it tells the reader in one glance that what
   follows is somebody talking rather than more of our own copy. */
.rotex-testimonial-body p:first-child {
	font-size: 1.36rem;
	line-height: 1.55;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--rotex-ink, #000101);
}

.rotex-testimonial-body p {
	margin: 0 0 1.15em;
}

.rotex-testimonial-body p:last-child {
	margin-bottom: 0;
}

.rotex-testimonial-project {
	margin: 26px 0 0;
}

/* The link out of a card in a list. */
.rotex-testimonial-more {
	margin: 14px 0 0;
	font-weight: 600;
}

.rotex-testimonial-more a {
	text-decoration: none;
	color: var(--rotex-red, #ad0a04);
}

.rotex-testimonial-more a:hover,
.rotex-testimonial-more a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ---------------------------------------------------------------------
 * Questions and answers
 *
 * Rows separated by a change of tone and by space, never by a rule or a
 * border. The open row takes the paper colour so it lifts off the band it
 * sits on, which is the whole indication that something has opened.
 *
 * The marker is drawn as a plus that becomes a minus, rather than the
 * browser's default triangle, because the default differs between browsers
 * and sits in the wrong place in a row this tall.
 * ------------------------------------------------------------------- */

.rotex-faq {
	max-width: 52rem;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rotex-faq-title {
	margin: 0 0 10px;
}

.rotex-faq-row {
	border: 0;
	border-radius: 12px;
	background: rgba(0, 1, 1, 0.045);
	padding: 0 20px;
	transition: background-color 140ms ease;
}

/* The open row goes deeper, not lighter.
 *
 * It was paper, which was right while this band was grey and wrong the moment
 * it went white: the row being read was the one row you could not see. A
 * deeper tint of the same ink is correct on all three light grounds, because
 * it darkens whatever is behind it rather than being a colour of its own. */
.rotex-faq-row[open] {
	background: rgba(0, 1, 1, 0.08);
}

.rotex-faq-q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 0;
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.4;
}

.rotex-faq-q::-webkit-details-marker,
.rotex-faq-q::marker {
	display: none;
	content: "";
}

.rotex-faq-q::after {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 5px;
	/* A plus, drawn from two gradients, so there is no icon to download. */
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	transition: transform 160ms ease;
}

.rotex-faq-row[open] .rotex-faq-q::after {
	/* The upright stroke rotates out of sight, leaving the minus. */
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
	transform: rotate(180deg);
}

.rotex-faq-q:focus-visible {
	outline: 2px solid var(--rotex-red, #ad0a04);
	outline-offset: 4px;
	border-radius: 6px;
}

.rotex-faq-a {
	padding: 0 0 22px;
	max-width: 44rem;
}

.rotex-faq-a p {
	margin: 0 0 0.9em;
	line-height: 1.7;
}

.rotex-faq-a p:last-child {
	margin-bottom: 0;
}

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

	.rotex-faq-row,
	.rotex-faq-q::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * The questions run the width of the band, and nothing is boxed
 *
 * Two corrections.
 *
 * The block was capped at 52rem, which is right for a column of prose and
 * wrong for this: a row here is a single line of text with a marker at the far
 * end, so a cap left the right half of the band empty and the rows looked like
 * they had been dropped in the corner. The rows now run the full width of the
 * section. The answers keep a reading measure of their own, because a line of
 * body copy 1100 pixels wide is genuinely hard to read.
 *
 * And the open row was drawing a rectangle round itself. Some of that is the
 * browser's own outline on a summary element and some of it is the theme, and
 * either way rule 5 rules it out. Focus is shown the way it is shown
 * everywhere else on this site: a red bar down the left of the row and a rule
 * under the question. Visible, keyboard friendly, and not a box.
 * ------------------------------------------------------------------- */

.rotex-faq {
	max-width: none;
	width: 100%;
}

.rotex-faq-row,
.rotex-faq-row[open],
.rotex-faq-q {
	border: 0 !important;
	outline: none;
	box-shadow: none;
}

.rotex-faq-q:focus,
.rotex-faq-q:focus-visible,
.rotex-faq-row[open] > .rotex-faq-q {
	outline: none !important;
	box-shadow: none !important;
}

/* Focus, and only focus, is marked. */
.rotex-faq-q {
	position: relative;
}

.rotex-faq-q:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--rotex-red, #ad0a04);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.rotex-faq-q:focus-visible::before {
	content: "";
	position: absolute;
	left: -20px;
	top: 14px;
	bottom: 14px;
	width: 3px;
	background: var(--rotex-red, #ad0a04);
	border-radius: 3px;
}

/* The answer keeps a reading measure even though the row does not. */
.rotex-faq-a {
	max-width: 62ch;
}

/* ---------------------------------------------------------------------
 * The questions get their own ground
 *
 * Two problems, one cause. The rows were a four percent ink tint sitting on
 * Surface, which is a five percent ink tint, so the rows and the band behind
 * them were within a shade of each other and the whole block read as one flat
 * grey rectangle. And with most sections on Surface already, the page had no
 * rhythm: band after band of the same colour.
 *
 * The answer is not a new colour, because there is not one to invent. It is to
 * use the darkest thing already in the palette. On ink, a light row separates
 * clearly at a tenth of the opacity, the open row lifts further, and the block
 * becomes a distinct place on the page rather than more of the same grey.
 *
 * It also earns its keep structurally. The questions are the last thing before
 * the footer on most pages, so a dark band there closes the page rather than
 * letting it fade out.
 * ------------------------------------------------------------------- */

.rotex-faq-dark .rotex-faq-title {
	color: var(--rotex-paper, #fff);
}

.rotex-faq-dark .rotex-faq-row {
	background: rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.92);
}

.rotex-faq-dark .rotex-faq-row:hover {
	background: rgba(255, 255, 255, 0.11);
}

.rotex-faq-dark .rotex-faq-row[open] {
	background: rgba(255, 255, 255, 0.13);
}

.rotex-faq-dark .rotex-faq-q {
	color: var(--rotex-paper, #fff);
}

.rotex-faq-dark .rotex-faq-a {
	color: rgba(255, 255, 255, 0.78);
}

.rotex-faq-dark .rotex-faq-a a {
	color: var(--rotex-paper, #fff);
}

/* The plus and minus are drawn from currentColor, so they follow the text and
 * need nothing of their own here. */

.rotex-faq-dark .rotex-faq-q:focus-visible {
	text-decoration-color: var(--rotex-paper, #fff);
}

.rotex-faq-dark .rotex-faq-q:focus-visible::before {
	background: var(--rotex-paper, #fff);
}

/* ---------------------------------------------------------------------
 * The questions band, in red
 *
 * Red is the one place on this site where the brand colour is allowed to take
 * a whole section, and the questions are where it belongs: the last band
 * before the footer on almost every page, where the page stops explaining and
 * starts answering. Because it is the same block in the same position
 * everywhere, one colour for all of them reads as a system. Red scattered
 * across a different section on each page would read as an accident.
 *
 * The rows are a white tint rather than solid white. Solid white panels on red
 * would give six hard rectangles and turn the band into a chessboard; a tint
 * keeps the red continuous behind them and lets the open row lift out of it.
 *
 * Contrast is comfortable throughout: white on this red passes AA at body
 * size, and the answers sit at 88 percent rather than the 78 used on ink,
 * because red is a darker ground for text than it looks.
 * ------------------------------------------------------------------- */

.rotex-faq-red .rotex-faq-row {
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.95);
}

.rotex-faq-red .rotex-faq-row:hover {
	background: rgba(255, 255, 255, 0.17);
}

.rotex-faq-red .rotex-faq-row[open] {
	background: rgba(255, 255, 255, 0.19);
}

.rotex-faq-red .rotex-faq-a {
	color: rgba(255, 255, 255, 0.88);
}

.rotex-faq-red .rotex-faq-title,
.rotex-faq-red .rotex-faq-q {
	color: var(--rotex-paper, #fff);
}

/* Rule 5: separation by tone, so nothing gains a border on this ground
 * either, whatever the theme would like to add. */
.rotex-faq-red .rotex-faq-row,
.rotex-faq-red .rotex-faq-q {
	border: 0 !important;
}

/* The photographs that came out of the quote.
 *
 * Laid as a set under the words, all the same height so the row reads as one
 * object, and cropped to fill rather than letterboxed, because a phone
 * photograph of a window is worth more in the middle than at the edges. Two
 * across on a desk, one on a phone, and no box or border round any of them. */
.rotex-testimonial-shots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
	margin: 0 0 34px;
}

.rotex-testimonial-shots img {
	display: block;
	width: 100%;
	height: clamp(220px, 24vw, 300px);
	object-fit: cover;
	border-radius: 12px;
	margin: 0;
}

/* ---------------------------------------------------------------------
 * The quote form as an object on the page
 *
 * It sits on the grey band beside the panel of reasons to finish it, and a
 * form that shares its ground with everything around it does not read as
 * something you fill in. Paper under it, and the fields tint that paper, so
 * both stay correct: the card is lighter than the band, the fields are darker
 * than the card, and nothing depends on a fixed grey.
 * ------------------------------------------------------------------- */

.rotex-form-quote {
	background: var(--rotex-paper, #fff);
	border-radius: 20px;
	padding: clamp(22px, 3vw, 34px);
}

.rotex-form-quote .rotex-form-set:last-of-type {
	margin-bottom: 22px;
}

/* The tick boxes.
 *
 * The browser's own box is thirteen pixels square and grey, which on a phone
 * is smaller than the tip of a finger and on any screen is the one control on
 * the page that still looks like 2004. Twenty pixels, in the brand red when
 * ticked, with the label beside it rather than under it, and the whole label
 * clickable because that is what doubles the target. */
.rotex-form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: none;
	margin: 1px 0 0;
	accent-color: var(--rotex-red, #ad0a04);
	cursor: pointer;
}

.rotex-form-consent label,
.rotex-form-measure label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.rotex-form-measure .rotex-hint {
	margin-left: 30px;
}

/* The panel beside the form. */
.rotex-quote-aside a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(173, 10, 4, 0.4);
}

.rotex-quote-aside a:hover,
.rotex-quote-aside a:focus-visible {
	color: var(--rotex-red, #ad0a04);
	border-bottom-color: currentColor;
}

/* ---------------------------------------------------------------------
 * Search results
 *
 * A list, not a grid of cards. Somebody who has searched is scanning for one
 * thing, and a row they can run their eye down beats six boxes they have to
 * read in turn. Each row answers, in this order: what kind of thing is this,
 * what is it called, and what is it. The picture is on the left at a size that
 * confirms a guess rather than making its own case.
 *
 * No boxes and no borders. The rows are separated by space and a hairline of
 * ink at four per cent, which is a shadow rather than a rule and disappears
 * against any ground the page happens to use.
 * ------------------------------------------------------------------- */

.rotex-results {
	max-width: 54rem;
	margin: 0 auto;
	padding: 8px 0 64px;
}

.rotex-results-count {
	margin: 0;
	font-size: 0.95rem;
	color: var(--rotex-muted);
}

.rotex-results-kinds {
	margin: 16px 0 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rotex-results-kinds .rotex-filter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.rotex-filter-count {
	font-size: 0.82em;
	opacity: 0.62;
	font-variant-numeric: tabular-nums;
}

.rotex-results-list {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.rotex-result {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	padding: 24px 0;
}

/* Rows with no picture still start their words on the same left edge as the
   rows that have one, so the titles line up down the page. */
.rotex-result:not(:has(.rotex-result-shot)) .rotex-result-words {
	grid-column: 2;
}

.rotex-result + .rotex-result {
	box-shadow: 0 -1px 0 rgba(0, 1, 1, 0.09);
}

.rotex-result-shot {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	line-height: 0;
}

.rotex-result-shot img {
	width: 112px;
	height: 84px;
	object-fit: cover;
	display: block;
	transition: transform 220ms ease;
}

.rotex-result:hover .rotex-result-shot img {
	transform: scale(1.04);
}

.rotex-result-kind {
	margin: 0 0 5px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rotex-accent);
}

.rotex-result-title {
	margin: 0 0 7px;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.rotex-result-title a {
	color: var(--rotex-ink, #000101);
	text-decoration: none;
}

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

.rotex-result-text {
	margin: 0;
	color: var(--rotex-muted);
	line-height: 1.62;
}

/* The searched word, shown where it was found. Marked with weight and the
   brand red rather than the browser's yellow highlighter. */
.rotex-result-text mark {
	background: none;
	color: var(--rotex-text, #1c1c1b);
	font-weight: 600;
}

.rotex-result-where {
	margin: 8px 0 0;
	font-size: 0.85rem;
	color: var(--rotex-muted);
}

.rotex-results-empty {
	padding-top: 18px;
}

.rotex-results-lead {
	margin: 10px 0 0;
	font-size: 1.05rem;
	max-width: 34rem;
}

.rotex-results-places {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.rotex-results .rotex-pager {
	margin-top: 30px;
}

@media (max-width: 600px) {

	.rotex-result {
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 14px;
		padding: 20px 0;
	}

	.rotex-result-shot img {
		width: 76px;
		height: 60px;
	}

	.rotex-results-places .rotex-button {
		flex: 1 1 calc(50% - 10px);
	}

	/* On a desk, holding the empty picture column keeps every title on one
	   left edge, which is worth the space. On a phone that space is a quarter
	   of the screen, and a line of text losing four words to an alignment
	   nobody can see is a bad trade. */
	.rotex-result:not(:has(.rotex-result-shot)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.rotex-result:not(:has(.rotex-result-shot)) .rotex-result-words {
		grid-column: 1;
	}
}

/* ---------------------------------------------------------------------
 * The page that is not there
 *
 * Built like the empty search result, because it is the same problem: somebody
 * wanted something specific and the site has just said no. A number set in
 * ninety point type helps nobody; a search field and six places do.
 * ------------------------------------------------------------------- */

.rotex-lost {
	max-width: 44rem;
	padding: 4px 0 64px;
}

.rotex-lost-lead {
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.65;
}

.rotex-lost-search {
	display: flex;
	gap: 10px;
	margin: 26px 0 0;
}

.rotex-lost-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 16px;
	border: 0;
	border-radius: var(--rotex-radius, 999px);
	background: rgba(0, 1, 1, 0.055);
	font: inherit;
	color: inherit;
}

.rotex-lost-search input[type="search"]:focus-visible {
	outline: 2px solid var(--rotex-accent);
	outline-offset: 2px;
}

.rotex-lost-or {
	margin: 30px 0 0;
	font-weight: 600;
}

.rotex-lost .rotex-results-places {
	margin-top: 12px;
}

.rotex-lost-call {
	margin: 30px 0 0;
	color: var(--rotex-muted);
}

.rotex-lost-call a {
	color: var(--rotex-accent);
	font-weight: 600;
	text-decoration: none;
}

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

@media (max-width: 600px) {

	.rotex-lost-search {
		flex-wrap: wrap;
	}

	.rotex-lost-search input[type="search"],
	.rotex-lost-search .rotex-button {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------------
 * The films, on a phone
 *
 * Every poster was drawn on top of the one below it. The film box sizes itself
 * with an aspect ratio, which is correct and gives the right 16:9 shape, but
 * once the columns stack the browser stops counting that height towards the
 * column it sits in: the column measured twenty pixels, the section closed
 * around it, and six posters piled into the same space.
 *
 * The fix is to give the widget a real height of its own to stand on, worked
 * out from the width it actually has on a phone: the screen less the twenty
 * pixels of gutter on each side, in sixteen by nine. The picture keeps its own
 * ratio; this only stops the column from pretending the picture is not there.
 *
 * Kept to the stacked widths. Above that the columns have a definite width and
 * the height resolves on its own.
 * ------------------------------------------------------------------- */

@media (max-width: 767px) {

	.elementor-widget-rotex-video {
		min-height: calc((100vw - 40px) * 0.5625);
	}
}

/* NOTE: these live here rather than in core.css because the base card rules
   are in this file, and this file loads second. An override written in
   core.css loses to them however specific it is, which is how a card's
   picture kept its own height instead of filling the tile. */
/* Project cards, dressed as product tiles ------------------------------
 *
 * Same size, same shape, same words on the glass. A project card elsewhere
 * on the site is a picture with a block of detail under it, which is right
 * on a page somebody is reading; in a strip on the home page it made two
 * carousels that looked like different components. Here the photograph is
 * the card and the title and the line under it sit on it.
 *
 * Place and unit count are left out on purpose. They are worth reading on
 * the projects page and they are noise at this size.
 * ------------------------------------------------------------------- */

.rotex-grid.rotex-strip .rotex-card {
	position: relative;
	overflow: hidden;
	min-height: 470px;
	padding: 0;
	background: var(--rotex-ink);
	border-radius: 0;
}

.rotex-grid.rotex-strip .rotex-card-link {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	/* Clear of the bottom arc, as on the product tiles, and clear on the
	   right of the arrow that sits in that corner. */
	padding: 0 76px 62px 20px;
	text-decoration: none;
}

.rotex-grid.rotex-strip .rotex-card-media {
	position: absolute;
	inset: 0;
	/* auto, and a height: the base card gives its picture a 4 by 3 box, and
	   an aspect ratio beats inset when both are set, which left the
	   photograph sitting in the top half of the tile. */
	aspect-ratio: auto;
	height: 100%;
	width: 100%;
	z-index: 0;
	margin: 0;
	border-radius: 0;
}

.rotex-grid.rotex-strip .rotex-card-media 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);
}

.rotex-grid.rotex-strip .rotex-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 1, 1, 0.82) 0%, rgba(0, 1, 1, 0.3) 48%, rgba(0, 1, 1, 0) 72%);
	pointer-events: none;
}

.rotex-grid.rotex-strip .rotex-card:hover .rotex-card-media img {
	transform: scale(1.05);
}

.rotex-grid.rotex-strip .rotex-card-body {
	position: relative;
	z-index: 2;
	text-align: left;
	width: 100%;
	padding: 0;
}

.rotex-grid.rotex-strip .rotex-card-title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--rotex-paper);
}

.rotex-grid.rotex-strip .rotex-card-summary {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rotex-grid.rotex-strip .rotex-card-where,
.rotex-grid.rotex-strip .rotex-card-meta {
	display: none;
}

@media (max-width: 1024px) {

	.rotex-grid.rotex-strip .rotex-card {
		min-height: 380px;
	}
}

@media (max-width: 767px) {

	.rotex-grid.rotex-strip .rotex-card {
		min-height: 340px;
	}

	.rotex-grid.rotex-strip .rotex-card-link {
		padding: 0 62px 42px 18px;
	}
}

/* ---------------------------------------------------------------------
 * Upright clips
 *
 * Most of the films Rotex shot in 2026 were filmed on a phone, upright. A row of
 * them stays two abreast on a phone rather than stacking one per screen, which
 * would make each one taller than the screen it is watched on.
 * ------------------------------------------------------------------- */

@media (max-width: 767px) {

	.e-con:has(> .e-con .rotex-video[style*="9 / 16"]) {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 12px !important;
	}

	.e-con:has(> .e-con .rotex-video[style*="9 / 16"]) > .e-con {
		flex: 0 0 calc(50% - 6px) !important;
		width: calc(50% - 6px) !important;
	}

	.rotex-video[style*="9 / 16"] .rotex-video-title {
		padding: 10px 12px;
		font-size: 13px;
	}
}

[data-rotex-affiliate][hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------
 * Showroom cards, side by side
 *
 * Two to a row, each one on its side: the photograph on the left, the
 * address, numbers and hours on the right. Smaller than a product card,
 * because a showroom is looked up rather than browsed.
 * ------------------------------------------------------------------- */

.rotex-places:has(.rotex-place-name a[href*="/showrooms/"]) {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 20px !important;
}

.rotex-places:has(.rotex-place-name a[href*="/showrooms/"]) .rotex-place {
	flex-direction: row;
	align-items: stretch;
	min-height: 0;
}

.rotex-places:has(.rotex-place-name a[href*="/showrooms/"]) .rotex-place-media {
	flex: 0 0 40%;
	aspect-ratio: auto;
	min-height: 180px;
}

.rotex-places:has(.rotex-place-name a[href*="/showrooms/"]) .rotex-place-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rotex-places:has(.rotex-place-name a[href*="/showrooms/"]) .rotex-place-body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 16px 18px;
	font-size: 14px;
	line-height: 1.5;
}

.rotex-places:has(.rotex-place-name a[href*="/showrooms/"]) .rotex-place-name {
	font-size: 17px;
}

@media (max-width: 900px) {

	.rotex-places:has(.rotex-place-name a[href*="/showrooms/"]) {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (max-width: 480px) {

	.rotex-places:has(.rotex-place-name a[href*="/showrooms/"]) .rotex-place-media {
		flex-basis: 36%;
		min-height: 150px;
	}

	.rotex-places:has(.rotex-place-name a[href*="/showrooms/"]) .rotex-place-body {
		padding: 12px 14px;
		font-size: 13px;
	}
}

/* Testimonial cards on a phone: the opening lines only, so a card is not
   taller than the screen. The full words are one tap away on its own page. */
@media (max-width: 767px) {

	.rotex-quote {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		overflow: hidden;
		font-size: 15px;
		line-height: 1.55;
	}

	.rotex-quote p {
		margin: 0;
	}
}

/* The testimonials band and the quote panel straight after it sit closer. */
.elementor .e-con:has(.elementor-widget-rotex-testimonials) {
	padding-bottom: 24px !important;
}

.elementor .e-con:has(.elementor-widget-rotex-testimonials) > .e-con-inner {
	padding-bottom: 0 !important;
}

.elementor .e-con:has(.elementor-widget-rotex-testimonials) + .e-con:has(.elementor-widget-rotex-cta),
.elementor .e-con:has(.elementor-widget-rotex-testimonials) + .e-con:has(.elementor-widget-rotex-cta) > .e-con-inner {
	padding-top: 12px !important;
}

/* On a phone the closing quote panel sits close under the last band, rather
   than after a screen's worth of white. */
@media (max-width: 767px) {

	footer.wp-block-template-part .wp-block-group:has(> .rotex-cta-panel) {
		padding-top: 16px !important;
	}
}