.section-enterwapp[data-node].ralco-about {
	--ralco-red: rgb(185, 27, 33);
	--ralco-red-2: rgb(221, 51, 51);
	--ralco-muted: rgb(68, 68, 68);
	--ralco-offwhite: rgb(242, 242, 242);
	--ralco-grey: rgb(237, 237, 237);
	--ralco-dark: rgb(26, 26, 26);
	font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 23px;
}

.section-enterwapp[data-node].ralco-about *,
.section-enterwapp[data-node].ralco-about *::before,
.section-enterwapp[data-node].ralco-about *::after {
	box-sizing: border-box;
	font-family: inherit;
}

.section-enterwapp[data-node].ralco-about .ralco-wrap {
	width: 100%;
	max-width: 1245px;
	margin: 0 auto;
	padding: 0;
}

@media (max-width: 1425px) {
	.section-enterwapp[data-node].ralco-about .ralco-wrap {
		max-width: calc(100vw - 180px);
	}
}

@media (max-width: 999px) {
	.section-enterwapp[data-node].ralco-about .ralco-wrap {
		max-width: 600px;
	}
}

@media (max-width: 767px) {
	.section-enterwapp[data-node].ralco-about .ralco-wrap {
		max-width: 320px;
	}
}

.fl-module-ralco-about > .fl-module-content {
	margin: 0;
}

.fl-row:has(.fl-module-ralco-about) > .fl-row-content-wrap {
	padding: 0;
}

.fl-col:has(> .fl-col-content > .fl-module-ralco-about) > .fl-col-content {
	padding-left: 0;
	padding-right: 0;
}

.fl-col-group > .fl-col:only-child:has(> .fl-col-content > .fl-module-ralco-about) {
	width: 100%;
	max-width: 100%;
}

.fl-col-group:has(> .fl-col > .fl-col-content > .fl-module-ralco-about) {
	display: flex;
	flex-wrap: wrap;
}

.fl-col-group:has(> .fl-col > .fl-col-content > .fl-module-ralco-about) > .fl-col {
	flex: 1 1 0;
	width: auto;
	max-width: none;
}

@media (max-width: 999px) {
	.fl-col-group:has(> .fl-col > .fl-col-content > .fl-module-ralco-about) > .fl-col {
		flex: 0 0 100%;
	}
}

.fl-content:has(.fl-module-ralco-about) {
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
}

.fl-page-content:has(.fl-module-ralco-about) .container,
.fl-page-content:has(.fl-module-ralco-about) .fl-content,
.fl-page-content:has(.fl-module-ralco-about) .fl-row-fixed-width,
.fl-page-content:has(.fl-module-ralco-about) .fl-row-content.fl-row-fixed-width {
	width: 100%;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.fl-page-content:has(.fl-module-ralco-about) .container > .row {
	margin-left: 0;
	margin-right: 0;
}

.section-enterwapp[data-node].ralco-about h1,
.section-enterwapp[data-node].ralco-about h2,
.section-enterwapp[data-node].ralco-about h3,
.section-enterwapp[data-node].ralco-about h4,
.section-enterwapp[data-node].ralco-about p,
.section-enterwapp[data-node].ralco-about a,
.section-enterwapp[data-node].ralco-about li,
.section-enterwapp[data-node].ralco-about span,
.section-enterwapp[data-node].ralco-about address,
.section-enterwapp[data-node].ralco-about strong,
.section-enterwapp[data-node].ralco-about figure {
	font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.section-enterwapp[data-node].ralco-about {
	background: #ffffff;
}

/* the reference about row measures 1245 of *content*; .ralco-wrap carries
   15px of side padding, so widen it to land on the same inner width and give
   the image its reference 671x353. The extra 21px below the figure matches the
   line-box the reference's inline image leaves behind. */
.section-enterwapp[data-node].ralco-about .ralco-about-wrap {
	padding-top: 50px;
	padding-bottom: 30px;
}

.section-enterwapp[data-node].ralco-about .ralco-about-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
}

/* Reference geometry inside the 1245-wide row: the image column is 671 (53.9%)
   and the copy sits on a 609-wide white card that starts 46px BEFORE the image
   ends, so the photo laps over it, and stops 11px short of the row's right
   edge. Percentages: card 48.92%, pulled back 3.69%. */
.section-enterwapp[data-node].ralco-about .ralco-about-col {
	/* both columns are positioned, so DOM order decides who paints on top and
	   the card (second) covers the photo's right edge, as in the reference. A
	   positioned photo column beats a static card whatever the order. */
	position: relative;
	flex: 0 0 48.92%;
	max-width: 48.92%;
	margin-left: -3.69%;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	/* the reference sets this copy against the top of the card, not centred */
	justify-content: flex-start;
	/* The reference pads this card at a constant ~8.2% of its own width - 49.8
	   at 1440, 41 at 1200, 33.5 at 1024. A flat 50px left the copy in a 313px
	   column at 1024 (reference: 339), which wrapped an extra three lines and
	   made the section 33px taller than it should be. */
	padding: min(50px, calc(4.01vw - 7px));
	background: #ffffff;
	box-shadow: rgba(0, 0, 0, 0.14) 0 30px 80px 0, rgba(0, 0, 0, 0.12) 0 20px 70px 0;
}

/* The CARD laps over the photo, not the other way round - it comes later in
   the DOM and paints on top, so the photo's right 46px sit underneath it and
   only 625 of its 671 are visible. Lifting the photo above the card (which is
   what a z-index here did) is the single most visible difference from the
   reference: it makes the picture look 46px wider and the card 46px narrower. */
.section-enterwapp[data-node].ralco-about .ralco-about-col:first-child {
	flex: 0 0 53.9%;
	max-width: 53.9%;
	margin-left: 0;
	align-self: center;
	display: block;
	position: relative;
	z-index: auto;
	padding: 0;
	background: none;
	box-shadow: none;
}

/* reference fades this image in on scroll (data-animation="fade-in") */
.section-enterwapp[data-node].ralco-about .ralco-fade {
	transition: opacity 0.8s ease;
}

@media (prefers-reduced-motion: reduce) {
	.section-enterwapp[data-node].ralco-about .ralco-fade { transition: none; }
}

/* The reference photo has no shadow of its own and its hover-wrap is set to
   data-hover-animation="none" - the shadow in this section belongs to the card
   behind the copy, not to the picture. */
.section-enterwapp[data-node].ralco-about .ralco-about-media {
	margin: 0 0 21px;
	box-shadow: none;
	overflow: hidden;
}

.section-enterwapp[data-node].ralco-about .ralco-about-media img {
	display: block;
	width: 100%;
	height: auto;
}

/* reference measures this heading at 21px/62px, not the 48px used elsewhere */
.section-enterwapp[data-node].ralco-about .ralco-about-title {
	font-size: 21px;
	line-height: 62px;
	font-weight: 700;
	color: rgb(0, 0, 0);
	text-transform: capitalize;
	margin: 0 0 7px;
}

.section-enterwapp[data-node].ralco-about .ralco-about-regs {
	list-style: none;
	margin: 0 0 27px;
	padding: 0;
}

/* the reference sets this copy in black at 300, not the grey used elsewhere */
.section-enterwapp[data-node].ralco-about .ralco-about-regs li {
	font-size: 15px;
	line-height: 23px;
	font-weight: 300;
	color: rgb(0, 0, 0);
}

.section-enterwapp[data-node].ralco-about .ralco-about-body {
	font-size: 15px;
	line-height: 23px;
	font-weight: 300;
	color: rgb(0, 0, 0);
	margin: 0 0 30px;
}

.section-enterwapp[data-node].ralco-about .ralco-about-body p {
	margin: 0 0 12px;
}

.section-enterwapp[data-node].ralco-about .ralco-about-body p:last-child {
	margin-bottom: 0;
}

.section-enterwapp[data-node].ralco-about .ralco-link {
	position: relative;
	display: inline-block;
	padding-left: 40px;
	font-size: 18px;
	line-height: 26px;
	font-weight: 400;
	letter-spacing: 2px;
	color: var(--ralco-red);
	text-decoration: none;
	/* Explicit: the unversioned cached copy of this stylesheet still carries an
	   underline, and a property we simply omit would inherit from it. */
	border: 0 none;
	transition: color 0.2s ease;
}

/* the short rule the reference sets to the left of "Read more" */
.section-enterwapp[data-node].ralco-about .ralco-link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 28px;
	height: 1px;
	background: currentColor;
	transition: width 0.28s cubic-bezier(0.25, 1, 0.2, 1);
}

.section-enterwapp[data-node].ralco-about .ralco-link:hover::before,
.section-enterwapp[data-node].ralco-about .ralco-link:focus::before {
	width: 34px;
}

.section-enterwapp[data-node].ralco-about .ralco-link:hover,
.section-enterwapp[data-node].ralco-about .ralco-link:focus {
	color: var(--ralco-red-2);
	text-decoration: none;
}

/* Typical laptop screen size*/
@media (max-width: 1300px) {
	.section-enterwapp[data-node].ralco-about .ralco-about-title { line-height: 52.7px; }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 999px) {
}

/* Below the reference's 1000px container breakpoint */
@media (max-width: 999px) {
	.section-enterwapp[data-node].ralco-about .ralco-about-wrap { padding-top: 50px; padding-bottom: 30px; }
	.section-enterwapp[data-node].ralco-about .ralco-about-row { display: block; }
	.section-enterwapp[data-node].ralco-about .ralco-about-col,
	.section-enterwapp[data-node].ralco-about .ralco-about-col:first-child {
		flex: 0 0 100%;
		max-width: 100%;
		margin-left: 0;
	}
	/* stacked: photo first, then the white card with 30px of padding */
	.section-enterwapp[data-node].ralco-about .ralco-about-col:first-child { padding: 0; }
	.section-enterwapp[data-node].ralco-about .ralco-about-col + .ralco-about-col { margin-top: 25px; padding: 30px; }
	.section-enterwapp[data-node].ralco-about .ralco-about-media { margin-bottom: 0; }
	.section-enterwapp[data-node].ralco-about .ralco-about-title { font-size: 36px; line-height: 46.5px; }
}

/* Mobile screen size */
@media (max-width: 480px) {
}