/* --------------------------------------------------------------------------
   Investor section
   --------------------------------------------------------------------------
   The sub-navigation, the financial-year tabs and the statutory contact
   cards shown on the six disclosure pages. The document rows themselves are
   styled in components.css and shared with anything else that lists files.
   -------------------------------------------------------------------------- */

/* Sub-navigation --------------------------------------------------------- */

/* Production puts this bar on all six investor pages and highlights the
   current one. Without it there is no way to reach a sibling disclosure page
   except through the main menu, which does not list them. */

/* Production has no band behind this bar: its own section computes a
   transparent background and no rule. The #eaeff2 full-bleed strip was
   staging's own. The bar is one component, identical on all six disclosure
   pages, so this is not page-scoped. */

/* Vertical rhythm around the bar. Production's section is 213px tall at every
   width measured (390 / 768 / 1024 / 1440): its Elementor column wrap gives
   10px of padding, the bar's own widget-container carries `margin-top: 112px`,
   the bar is 81px, and the wrap's 10px closes it. That 122px of air above the
   bar was missing here entirely, so every block on the page sat 122px high -
   this is the offset the sub-nav was reported at (staging y514 against
   production y636) and it is not the banner or the header, both of which are
   already at parity (banner 189, height 325, on both sides).

   The bar itself measures 81px on production and 80px here: production's links
   are inline-block, so its line box keeps a 1px strut below the last row that
   paints nothing. 11px of padding below absorbs it and puts the next section
   on production's own 727. */
.investor-nav {
	padding-block: 122px 11px;
}

.investor-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.investor-nav__link {
	display: flex;
	align-items: center;
	/* Production: 5px 34px on the link and 30px of margin after it, with no
	   letter-spacing - its own values, which step to 20px of side padding at
	   1199 and down to 16px type at 991. Staging had 1rem/1.25rem, a 2.75rem
	   floor and .04em of tracking, none of which production has. */
	padding: 5px 34px;
	margin-right: 30px;
	/* Production: 18px at weight 700 in rgb(34,34,34) on a 30px line, in its
	   body face. */
	color: #222;
	font-family: var(--rilt-font-body);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: normal;
	text-transform: uppercase;
}

@media (max-width: 74.99rem) {
	.investor-nav__link {
		padding-inline: 20px;
	}
}

@media (max-width: 61.99rem) {
	.investor-nav__link {
		font-size: 1rem;
	}
}

a.investor-nav__link:hover,
a.investor-nav__link:focus-visible {
	background: rgba(5, 175, 236, 0.1);
	color: var(--rilt-accent-dark);
	text-decoration: none;
}

.investor-nav__item.is-current > .investor-nav__link {
	background: linear-gradient(90deg, var(--rilt-accent), var(--rilt-green));
	color: #fff;
}

/* Financial-year tabs ---------------------------------------------------- */

/* Production's year-tab section is an Elementor column wrap with 10px of
   padding, and the tabs widget inside it carries `margin-top: 16px`; the
   section closes with the wrap's other 10px. This theme's generic `.section`
   rule put `var(--rilt-section-y)` - 88px - on both edges instead, and the
   16px sat below the tabs rather than above them. Section 727 -> bar 753 on
   production; this reproduces both numbers. */
.section--years {
	padding-block: 10px;
}

.tabs--years {
	margin-block: 16px 0;
}

/* The service pages lay a tab panel out as a two-column figure-and-text
   row. A year of filings is a list, so this resets that. */
.tabs__panel--docs {
	display: block;
	/* Production's own .ct-tabs-content padding. */
	padding-block-start: 15px;
}

.doc-year__title {
	margin-block: 2rem 1rem;
	font-size: var(--rilt-h3);
	color: var(--rilt-navy);
}

/* With the tab bar showing, the year is already named by the selected tab,
   so repeating it above the list is noise. It stays in the markup because
   without JavaScript there is no bar and every year is on the page at once,
   where each list does need its own heading. */
.js-tabs .doc-year__title {
	display: none;
}

.doc-group__title {
	/* Production prints these in sentence case at 18px/600 in near-black on
	   a 21.6px line: "Closure of trading window". Staging uppercased them,
	   which also made every text comparison against production fail. */
	margin-block: 1.5rem 0.5rem;
	font-size: 18px;
	font-weight: 600;
	line-height: 21.6px;
	color: #0e0e0e;
}

/* The year panels set their own heading scale, so the group heading needs the
   same specificity to keep production's 18px. */
.tabs__panel .doc-group__title,
.docs-desktop .doc-group__title {
	font-size: 18px;
	line-height: 21.6px;
}

.doc-group__title:first-child {
	margin-block-start: 0;
}

.disclosure__missing {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rilt-muted);
	white-space: nowrap;
}

/* Statutory contact cards ------------------------------------------------ */

/* Production's registrar band has no background of its own: the box around
   each block carries a 3px rule instead. */
.section--alt {
	background: none;
}

/* Production's contact section has no padding of its own above: its column
   wrap's 10px, which `.contact-cards__col` already carries, is the whole of
   the gap, so the box sits on the section's own top edge (1361 on /investor/,
   1251 on /notices/). The generic 88px put it 88px too low.

   The BOTTOM is deliberately left alone. Production's footer is fixed and its
   `site-content` carries 90px of padding plus 47px of margin below the box;
   measured, production clears 98.8px between the box and the footer and this
   theme's 88px section padding plus the column's 10px clears 98. Zeroing it
   would open a 79px gap against production at the foot of both pages. */
.section--contacts {
	padding-block-start: 0;
}

/* The layout, the box and the card are production's own and are set in the
   production-parity block at the end of this file. Only the line rule is
   left here: a long address has nowhere to wrap inside a narrow card. */

.contact-card__line {
	margin: 0;
	overflow-wrap: anywhere;
}

/* Nine financial years in a wrapping bar is five rows at 390px, which pushed
   the first year's documents nearly a thousand pixels down the page. Below
   the tablet breakpoint the bar scrolls sideways instead, so the documents
   stay where a visitor expects them. The scroll is inside the bar, so the
   page itself still has no horizontal overflow. */
@media (max-width: 61.99rem) {
	.tabs--years .tabs__bar {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: thin;
	}

	.tabs--years .tabs__tab {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* Production's two copies of the disclosure rows --------------------------
   It ships a desktop block and a phone block and hides one per width; its
   phone block on /investor/ and /notices/ carries different rows from the
   desktop one. Reproduced here the same way, so each width renders what
   production renders. */
.docs-phone {
	display: none;
}

@media (max-width: 47.99rem) {
	/* Only where production actually ships a second copy. Hiding the desktop
	   block wherever the width was narrow took /notifications/ down to 25
	   visible rows at 390 against production's 41, because that page has no
	   phone copy to replace it with. */
	.tabs__panel:has(.docs-phone) .docs-desktop {
		display: none;
	}

	.docs-phone {
		display: block;
	}
}

/* Production's quarter headings on /investor/ are not its group headings
   elsewhere: 29px/600 in rgb(110,193,228) on a 29px line, in Roboto, where
   /notifications/ has 18px/600 near-black names. */
.rilt-page-investor .doc-group__title,
.rilt-page-investor .tabs__panel .doc-group__title,
.rilt-page-investor .docs-desktop .doc-group__title {
	font-family: var(--rilt-font-body);
	font-size: 29px;
	font-weight: 600;
	line-height: 29px;
	color: rgb(110, 193, 228);
}

/* Production's section tabs drop to 16px on a phone. */
@media (max-width: 47.99rem) {
	.investor-nav__link {
		font-size: 1rem;
	}
}

/* Production shows this group heading on /notices/ at 390 and hides it at
   1440; staging had it the other way round. */
.doc-group__title--phone {
	display: none;
}

@media (max-width: 47.99rem) {
	.doc-group__title--phone {
		display: block;
	}
}

/* Production prints the Smart ODR link on /otherinformation/ as body copy -
   24px at weight 400 on a 45px line - rather than as a disclosure row. */
.rilt-page-otherinformation .disclosure__download:not(:has(.disclosure__size)) {
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.875;
}

/* Production's /investor/ rows are smaller than its other disclosure pages':
   12.8px on a 24px line at 1440, and 14px on 26.25px at 390. */
.rilt-page-investor .disclosure__title,
.rilt-page-investor .disclosure__title a {
	font-size: 12.8px;
	line-height: 24px;
}

@media (max-width: 47.99rem) {
	.rilt-page-investor .disclosure__title,
	.rilt-page-investor .disclosure__title a {
		font-size: 0.875rem;
		line-height: 1.875;
	}
}

/* A phone-block row is production's near-black body text, not a link colour:
   its CORPORATE GOVERNANCE rows read rgb(56,56,56) at 390. */
.docs-phone .disclosure__title,
.docs-phone .disclosure__title a {
	color: rgb(56, 56, 56);
}

/* Round eleven — see the note in components.css.

   Production applies the same disclosure type on /notices/ as on /investor/;
   these rules had been scoped to the investor page alone, so /notices/ kept
   this theme's own sizes. The page class comes from inc/setup.php. */
.rilt-page-notices .disclosure__title,
.rilt-page-notices .disclosure__title a {
	font-size: 12.8px;
	line-height: 24px;
}

.rilt-page-notices .doc-group__title,
.rilt-page-notices .tabs__panel .doc-group__title,
.rilt-page-notices .docs-phone .doc-group__title {
	font-family: var(--rilt-font-body);
	font-size: 29px;
	font-weight: 600;
	line-height: 29px;
	color: rgb(110, 193, 228);
}

/* Production's year tabs are 16px at 1440 and 13px at 390, black until
   selected; this theme drew 15px navy at both widths. They keep Poppins at
   weight 600 - the service tabs next door are Roboto 700, which is why the
   family and weight are set on the service rule and undone here rather than
   left to the shared .tabs__tab base. */
/* Production's year bar is its tab style4: a 40px chip - 38px of line inside
   a 1px border - in #ebf1f1 with a #e4e4e4 border, 0 20px of padding and
   5px/15px of margin after it; the selected one goes solid #05afec and grows
   a 10px CSS triangle in the same colour, centred 20px below its own box.
   Staging drew bare text with a gradient on the selected tab, which was the
   service pages' style borrowed. Values from production's own theme.css at
   .ct-tabs--layout1.style4. */

.tabs--years .tabs__bar {
	/* Production has no rule under this bar and no gap between the chips:
	   the chips carry their own margins. */
	gap: 0;
	border-block-end: 0;
}

.tabs--years .tabs__tab {
	position: relative;
	/* Beats the shared .tabs__tab 2.75rem floor, which made the chip 44px
	   where production's is 40. */
	min-height: 0;
	padding: 0 20px;
	margin: 0 5px 15px 0;
	border: 1px solid #e4e4e4;
	border-radius: 0;
	background-color: #ebf1f1;
	font-family: var(--rilt-font-heading);
	font-size: 16px;
	font-weight: 600;
	line-height: 38px;
	letter-spacing: normal;
	color: #000;
	transition: all 200ms linear 0ms;
}

.tabs--years .tabs__tab:first-child {
	border-radius: 3px 0 0 3px;
}

.tabs--years .tabs__tab:last-child {
	margin-right: 0;
	border-radius: 0 3px 3px 0;
}

.tabs--years .tabs__tab::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -20px;
	width: 0;
	height: 0;
	transform: translate(-50%, 0);
	border-width: 10px;
	border-style: solid;
	border-color: #05afec transparent transparent;
	opacity: 0;
	transition: all 200ms linear 0ms;
}

.tabs--years .tabs__tab:hover,
.tabs--years .tabs__tab:focus-visible {
	color: #000;
}

.tabs--years .tabs__tab[aria-selected="true"] {
	background: #05afec;
	border-color: #05afec;
	color: #fff;
}

.tabs--years .tabs__tab[aria-selected="true"]::before {
	opacity: 1;
}

/* Production steps the chip type 16 / 15 / 13 / 13 and shrinks the triangle
   below 1200. Staging held 16px all the way to 767. */
@media (max-width: 74.99rem) {
	.tabs--years .tabs__tab {
		padding: 0 16px;
		font-size: 15px;
	}

	.tabs--years .tabs__tab::before {
		bottom: -14px;
		border-width: 7px;
	}
}

@media (max-width: 61.99rem) {
	.tabs--years .tabs__tab {
		padding: 0 10px;
		font-size: 13px;
	}
}

/* --------------------------------------------------------------------------
   Production's row, grid and contact block on /investor/ and /notices/
   --------------------------------------------------------------------------
   Both pages are rendered from this one template and share every stylesheet,
   so every rule below names both page classes. investor.css duplicates
   per-page blocks rather than sharing them, and a rule scoped to
   .rilt-page-investor alone has silently missed /notices/ twice on this
   project.
   -------------------------------------------------------------------------- */

/* The row IS the link. Production: `display:flex`, `padding: 9px 30px`,
   colour #383838, a 25px PDF icon with `min-width: 38px` ahead of the label,
   and 17px between consecutive rows. Values from its own theme.css at
   .ct-download .item--download. */

.rilt-page-investor .disclosure,
.rilt-page-policy .disclosure,
.rilt-page-notifications .disclosure,
.rilt-page-notices .disclosure {
	/* Beats components.css .disclosure, which is a space-between flex row
	   with 0.875rem/1.125rem of padding and a white background. */
	display: block;
	padding: 0;
	background: none;
	gap: 0;
}

.rilt-page-investor .disclosure + .disclosure,
.rilt-page-policy .disclosure + .disclosure,
.rilt-page-notifications .disclosure + .disclosure,
.rilt-page-notices .disclosure + .disclosure {
	margin-top: 17px;
}

.rilt-page-investor .disclosure > a,
.rilt-page-policy .disclosure > a,
.rilt-page-notifications .disclosure > a,
.rilt-page-notices .disclosure > a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 9px 30px;
	color: #383838;
	font-family: var(--rilt-font-body);
	/* Production's widget carries its `small` modifier on /investor/ and
	   /notices/. /notifications/ and /policy/ do not: both draw 16px on a
	   1.875 line, which is the 48px row they measure, and both override the
	   two values below further down this file. */
	font-size: 12.8px;
	line-height: 24px;
	text-decoration: none;
	/* The hover fill below is painted by two stacked pseudo-elements that sit
	   behind the row's own content, exactly as production's theme.css does at
	   `.entry-tags a, .comment-reply a, .ct-navigation-menu1.default li a,
	   .item--download a`. */
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: all 300ms linear 0ms;
}

/* Production's resting row is a white box with a 1px #cdcbcb hairline, drawn
   by `:before`; `:after` holds the brand gradient at opacity 0, ready to fade
   in on hover. Both come from theme.css
   (`.ct-download .item--download a:before` / `...a:after`). */
.rilt-page-investor .disclosure > a::before,
.rilt-page-policy .disclosure > a::before,
.rilt-page-investor .disclosure > a::after,
.rilt-page-policy .disclosure > a::after,
.rilt-page-notices .disclosure > a::before,
.rilt-page-notifications .disclosure > a::before,
.rilt-page-notifications .disclosure > a::after,
.rilt-page-notices .disclosure > a::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	border-radius: inherit;
	z-index: -1;
	transition: all 300ms linear 0ms;
}

.rilt-page-investor .disclosure > a::before,
.rilt-page-policy .disclosure > a::before,
.rilt-page-notifications .disclosure > a::before,
.rilt-page-notices .disclosure > a::before {
	background-color: #fff;
	border: 1px solid #cdcbcb;
}

.rilt-page-investor .disclosure > a::after,
.rilt-page-policy .disclosure > a::after,
.rilt-page-notifications .disclosure > a::after,
.rilt-page-notices .disclosure > a::after {
	background-color: #05afec;
	background-image: linear-gradient(to right, #05afec, #94ca36);
	opacity: 0;
}

/* Hover: the hairline box fades out, the gradient fades in over 180ms, the
   label turns white and the PDF glyph drops its gradient clip for a flat
   white fill. */
.rilt-page-investor .disclosure > a:hover,
.rilt-page-policy .disclosure > a:hover,
.rilt-page-notifications .disclosure > a:hover,
.rilt-page-notices .disclosure > a:hover {
	color: #fff;
}

.rilt-page-investor .disclosure > a:hover::before,
.rilt-page-policy .disclosure > a:hover::before,
.rilt-page-notifications .disclosure > a:hover::before,
.rilt-page-notices .disclosure > a:hover::before {
	opacity: 0;
}

.rilt-page-investor .disclosure > a:hover::after,
.rilt-page-policy .disclosure > a:hover::after,
.rilt-page-notifications .disclosure > a:hover::after,
.rilt-page-notices .disclosure > a:hover::after {
	opacity: 1;
	transform: translateX(0%);
	transition: all 180ms linear 0ms;
}

.rilt-page-investor .disclosure > a:hover i,
.rilt-page-policy .disclosure > a:hover i,
.rilt-page-notifications .disclosure > a:hover i,
.rilt-page-notices .disclosure > a:hover i {
	background-image: none;
	-webkit-text-fill-color: #fff;
}

/* Production's icon is gradient-filled text, the same #05afec - #94ca36 fill
   its theme paints on every accent glyph. */
.rilt-page-investor .disclosure > a i,
.rilt-page-policy .disclosure > a i,
.rilt-page-notifications .disclosure > a i,
.rilt-page-notices .disclosure > a i {
	font-size: 25px;
	min-width: 38px;
	background-image: linear-gradient(to right, #05afec, #94ca36);
	background-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (max-width: 74.99rem) {
	.rilt-page-investor .disclosure > a,
	.rilt-page-policy .disclosure > a,
	.rilt-page-notifications .disclosure > a,
	.rilt-page-notices .disclosure > a {
		padding-inline: 20px;
	}

	.rilt-page-investor .disclosure > a i,
	.rilt-page-policy .disclosure > a i,
	.rilt-page-notifications .disclosure > a i,
	.rilt-page-notices .disclosure > a i {
		min-width: 32px;
	}
}

@media (max-width: 61.99rem) {
	.rilt-page-investor .disclosure > a,
	.rilt-page-policy .disclosure > a,
	.rilt-page-notifications .disclosure > a,
	.rilt-page-notices .disclosure > a {
		padding-left: 15px;
		padding-right: 10px;
		font-size: 14px;
	}
}

/* The desktop grid ------------------------------------------------------- */

/* Production files each year's quarters as four Elementor columns side by
   side - `elementor-col-25` x 4, each holding its Q heading above its own
   list. Staging had no grid or flex rule anywhere in the theme for this
   block, so it stacked Q1, its list, Q2, its list down one column at every
   width. /notices/ files its single group in one `elementor-col-50`
   instead, which is two of the same four tracks. */

@media (min-width: 48rem) {
	.rilt-page-investor .docs-desktop,
	.rilt-page-notices .docs-desktop {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: start;
		/* Elementor outdents a column row 10px either side of the boxed
		   container and gives each column 10px of padding back, so the
		   first column's content starts flush with the container edge.
		   Without this the four tracks are 292.5px at x 145 against
		   production's 297.5 at 135. */
		margin-inline: -10px;
	}

	/* Elementor's own column padding. */
	.rilt-page-investor .doc-group,
	.rilt-page-notices .doc-group {
		padding: 10px;
	}

	.rilt-page-notices .doc-group {
		grid-column: span 2;
	}

	/* The unnamed group runs the full width of the panel under a 30px
	   spacer - production's ANNUAL REPORT block. */
	.rilt-page-investor .doc-group--other {
		grid-column: 1 / -1;
		margin-top: 30px;
	}
}

/* Quarter headings ------------------------------------------------------- */

/* Production centres these. Staging left-aligned them and pinned them to
   `margin: 0`, because service.css's `.tabs__panel h3` (0,1,1) beat
   `.doc-group__title` (0,1,0) and took the margin with it. Naming the page
   and the block puts this at (0,3,0), ahead of both. */

.rilt-page-investor .docs-desktop .doc-group__title,
.rilt-page-notices .docs-desktop .doc-group__title,
.rilt-page-investor .tabs__panel .doc-group__title,
.rilt-page-notices .tabs__panel .doc-group__title {
	margin: 0 0 20px;
	text-align: center;
}

/* The divider ------------------------------------------------------------ */

/* Production's Elementor divider between the tabs and the contact blocks on
   /investor/: a full-width dashed rule, 4.3px in #6EC1E4, carrying a centred
   49px flaticon-map in #7EB61B with 15px above and below. The rule is drawn
   the way Elementor draws it - two flex-grown borders either side of the
   icon - rather than as a hand-made border, so the dash pattern is the
   browser's own and matches. /notices/ has no divider and gets none. */

/* Production's divider sits in its own section with the same 10px Elementor
   column padding either side: section 1262, widget 1272, 99px tall. This was
   0, which let the generic `.section` 88px through on the sibling sections
   and left this one flush. */
.section--divider {
	padding-block: 10px;
}

.rilt-divider {
	display: flex;
	padding-block: 15px;
}

.rilt-divider__separator {
	display: flex;
	align-items: center;
	direction: ltr;
	margin: 0;
	width: 100%;
}

.rilt-divider__separator::before,
.rilt-divider__separator::after {
	content: "";
	display: block;
	flex-grow: 1;
	border-block-start: 4.3px dashed #6EC1E4;
	border-block-end: 0;
}

.rilt-divider__element {
	flex-shrink: 0;
	margin: 0 10px;
	line-height: 1;
	color: #7EB61B;
	font-size: 49px;
}

/* The glyph's own box, or the icon runs 10px taller than production's 49. */
/* Production's icon box is 49x49. `line-height: 1` resolved to 50px here
   because the flaticon face reports a taller content box than its own
   em square, and the extra pixel pushed the whole contact block down. */
.rilt-divider__element i {
	display: block;
	height: 49px;
	line-height: 49px;
}

/* The contact blocks ----------------------------------------------------- */

/* Production lays these out as two half-width columns, not a four-equal
   grid: the share transfer agent on the left and every other card stacked
   inside ONE bordered box on the right. The border, the padding and the
   72px icon belong to the box, not to each card. Values from production's
   own theme.css at .ct-contact-info2. */

.contact-cards {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.contact-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* Same Elementor outdent as the document columns. */
		margin-inline: -10px;
	}
}

.contact-cards__col {
	padding: 10px;
}

.contact-info {
	border: 3px solid #d4ecfe;
	padding: 27px 19px;
}

.contact-card {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	position: relative;
	padding: 0 30px 0 0;
	gap: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.contact-card + .contact-card {
	margin-top: 23px;
}

.contact-card__icon {
	position: relative;
	height: 72px;
	width: 72px;
	min-width: 72px;
	margin-right: 15px;
	line-height: 1;
	background-color: #05afec;
	border-radius: 3px;
}

.contact-card__icon i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	color: #fff;
}

.contact-card__meta {
	min-width: 0;
}

.contact-card__heading {
	margin: 0 0 5px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: #0e0e0e;
}

.contact-card__name,
.contact-card__role,
.contact-card__details,
.contact-card__line {
	font-size: 14px;
	line-height: 20px;
	color: #000;
}

.contact-card__name {
	margin: 0;
	font-family: var(--rilt-font-body);
	font-weight: 700;
}

.contact-card__role {
	margin: 0;
}

.contact-card__details {
	margin: 0;
}

.contact-card__link {
	position: absolute;
	top: 50%;
	right: -22px;
	transform: translate(0, -50%);
	width: 35px;
	height: 72px;
	line-height: 72px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	background-color: #05afec;
}

/* /notifications/ ------------------------------------------------------- */

/* Production files this page as two `elementor-col-50` columns rather than
   the four quarter tracks of /investor/ or the single half-width block of
   /notices/: the four quarterly groups run down the left, "SDD Compliance
   certificate" and "Other filings" down the right. Measured on its served
   page at 1440 on 2 November 2026 - panel 878 at x135 w1170, columns at
   x125 and x720, each 595 wide with 10px of Elementor padding, so their
   content sits at x135 and x730, 575 wide.

   The split is made in the template, not here: a grid cannot put five
   siblings into "first four left, rest right" without its rows sizing to the
   tallest cell, which would drop "Other filings" to the y of the second
   left-hand group instead of the top of its column. */

@media (min-width: 48rem) {
	.rilt-page-notifications .docs-desktop {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		/* Elementor outdents the column row 10px either side and gives it
		   back as column padding, so the first column's content is flush
		   with the container edge. */
		margin-inline: -10px;
	}

	.rilt-page-notifications .doc-col {
		padding: 10px;
	}
}

/* Production's download widget carries 30px below its rows - measured on
   every one of them, the last in a column included: its left column's four
   widgets run 919..1192, 1222..1495, 1526..1799 and 1829..2102 against row
   runs 30px shorter, and the column closes at 2102 + its 10px of padding.
   So this is a trailing margin on each list, not a gap between groups; as a
   gap the column would end 30px high and carry the divider and the contact
   blocks up with it. */
.rilt-page-notifications .doc-group .disclosure-list {
	margin-block: 0 30px;
}

/* Production's row on /notifications/ and on /policy/ is the download widget
   without the `small` modifier
   that /investor/ and /notices/ carry: 16px at 1440, which with a 1.875 line
   and 9px of padding either side is the 48px row it measures. Its line is
   1.875 of the font size at every width - 30px on 16, 26.25px on the 14 its
   own rule drops to below 992 - so the ratio is set here and the size is
   left to the width rules above, which is why the size is behind a
   min-width: without it this rule, being later in the file, would hold 16px
   through to 390 and draw a 48px row where production draws 44. */
/* /policy/ measures the same row on production: `div.item--download > a` at
   top 524, height 48, x 135, with a 38x25 glyph at x 165 and the label span
   at x 203 on a 30px line in rgb(56,56,56). Read off
   https://www.responseinformaticsltd.com/policy/?id=investors at 1440 on
   3 November 2026. */
.rilt-page-notifications .disclosure > a,
.rilt-page-policy .disclosure > a {
	line-height: 1.875;
}

@media (min-width: 62rem) {
	.rilt-page-notifications .disclosure > a,
	.rilt-page-policy .disclosure > a {
		font-size: 16px;
	}
}

/* /policy/'s section bar sits BELOW its rows ------------------------------ */

/* On /investor/, /notices/ and /notifications/ production files the section
   bar in its own Elementor section above the document widget. On /policy/ it
   is the second widget inside the SAME section as the rows, so it reads under
   them: measured on production at 1440 on 3 November 2026, section 514 (10px
   of column padding, so the first row starts 524), the download widget
   524..1677, then the text-editor widget carrying the bar at 1677 with 112px
   of margin-top, which puts the bar itself at 1789, height 81, and the
   section closes at 1880 on its other 10px.
   Staging's bar measures 80 rather than 81, the same inline-block strut the
   122px rule above absorbs with 11px, so 11 of the padding below is that.
   The twelfth pixel is production's own: its divider section starts at 1881
   where the section above it closes at 1880, and every margin and padding on
   both is reported as 0, so the gap is in its section layout rather than in
   any box this theme has. It is carried here so the divider and the contact
   blocks land on production's 1881 and 1980 rather than one pixel high. */
.rilt-page-policy .section--years {
	padding-block: 10px 0;
}

.rilt-page-policy .investor-nav {
	padding-block: 112px 12px;
}

/* Production's group heading is a `ct_heading` widget in `st-line-bottom1`
   style: the title at 18px/600 on a 21.6px line in near-black, left aligned
   with no margin of its own, over a 3px strip 6px below it carrying a 2px
   #05afec - #94ca36 bar the width of the title's own text. Rules from
   consultio's theme.css at `.ct-heading .item--title.st-line-bottom1
   .ct-heading-divider`; the 18px/600/#0e0e0e is already the base rule above.

   `width: fit-content` is what makes the bar the width of the text: in
   production the bar's width is set per heading - 243, 248, 300, 227 and 113
   against text runs of 239.7, 243.5, 296.5, 223.2 and 110.8 - so it tracks
   the title rather than the column. The five text runs here measure the same
   five numbers, and the bars measure the text width exactly, which leaves
   each one 3.3px shorter than production's. Measured on both sides at 1440
   on 3 November 2026. */
.rilt-page-notifications .docs-desktop .doc-group__title,
.rilt-page-notifications .tabs__panel .doc-group__title {
	width: fit-content;
	max-width: 100%;
	margin: 0;
	text-align: left;
}

.rilt-page-notifications .doc-group__title::after {
	content: '';
	display: block;
	width: 100%;
	/* 3px of strip holding a 2px bar at its top, which is how production's
	   divider element and its inner span measure. */
	height: 3px;
	margin-top: 6px;
	background-image: linear-gradient(to right, #05afec, #94ca36);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 2px;
}