/*
 * RL Corporate: only what Elementor's global classes cannot hold.
 * Layout, type, colour and the hover / focus / active states live in Elementor (global classes rl-*, variables).
 * This file keeps: base resets, page context (dark hero), states that JS switches at runtime, and editor helpers.
 * No shadows anywhere.
 */

/* ---------- the unit: every measure is a Figma px times --u, as on the preview (100vw / 1440 on desktop, 100vw / 390 on mobile) ---------- */
:root { --u: calc(100vw / 1440); }
@media (max-width: 767px) { :root { --u: calc(100vw / 390); } }
*, *::before, *::after { box-sizing: border-box; }

/* ---------- base ---------- */
html, body { background: #F4F1EC; color: #172042; }
html { overflow-x: clip; }   /* with html visible, body's clip goes to the viewport, which phones still let you swipe past */
body { font-family: "DM Sans", sans-serif; overflow-x: clip; font-kerning: normal; -webkit-font-smoothing: antialiased;
	display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main, body > #content { flex: 1 0 auto; }   /* the footer always meets the bottom of the window, so its mark is cut by the page edge */
.elementor .e-paragraph-link-base, .elementor .e-paragraph-link-base:hover { color: inherit; text-decoration: none; }
.elementor-location-header { position: relative; z-index: 50; }
/* the prototype draws page type antialiased and the overlays (sticky bar, menu) with the system default */
.elementor .rl-sbar, .elementor .rl-mmenu { -webkit-font-smoothing: auto; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- the Ember accent: emphasis in any heading or text is the Ember word (Elementor strips inline colours) ---------- */
.elementor :is(h1, h2, h3, h4, h5, h6, p, span) em { font-style: normal; color: var(--ember); }
/* the part of a belief truth still to be read sits dim (a plain span in the heading); page.js fills it on scroll */
.elementor .rl-truth > span { color: var(--paper-20); }

/* ---------- the section label: Ember dot, caps word, hairline to the end of the column (one element; the dot and the
   hairline are drawn here so the label stays a single Elementor paragraph). The motion scales them through --rl-dot / --rl-line. ---------- */
.elementor .rl-sec-label::before { content: ""; flex: 0 0 auto; width: calc(var(--u) * 12); height: calc(var(--u) * 12); margin-right: calc(var(--u) * 12); border-radius: 50%; background: var(--ember); transform: scale(var(--rl-dot, 1)); }
.elementor .rl-sec-label::after { content: ""; flex: 1 1 0%; min-width: 0; height: 1px; margin-left: calc(var(--u) * 16); background: var(--rl-hair, var(--midnight-12)); transform: scaleX(var(--rl-line, 1)); transform-origin: 0 50%; }
.elementor .rl-on-dark { --rl-hair: rgba(244, 241, 236, .2); }

/* ---------- links: the words draw an underline and the last part nudges right ---------- */
.elementor .rl-link:is(:hover, :focus-visible) .rl-link-text { background-size: 100% 1px; background-position: left bottom; }
.elementor .rl-link:is(:hover, :focus-visible) > :last-child { transform: translateX(4px); }

/* ---------- page context: a page that opens on a dark hero (global class rl-hero-dark) gets the Paper header ---------- */
body:has(.rl-hero-dark) .elementor .rl-header { color: var(--paper); }
body:not(:has(.rl-hero-dark)) .elementor .rl-header .rl-btn:is(:hover, :focus-visible, :active) { background-color: var(--midnight); color: var(--white); }

/* ---------- runtime states (switched by site.js) ---------- */
.elementor .rl-sbar.is-on { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.19, 1, .22, 1), visibility 0s; }
.elementor .rl-sbar.rl-gsap, .elementor .rl-sbar.rl-gsap.is-on { transition: none; }   /* GSAP drives it (expo.out in, power3.in out) */
.elementor .rl-sbar-link.is-current { opacity: 1; }
.elementor .rl-sbar-link.is-current::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }
.elementor .rl-mmenu.is-open { display: flex; }
@media (min-width: 768px) { .elementor .rl-mmenu.is-open { display: none; } }
html.rl-menu-open, html.rl-menu-open body { overflow: hidden; }
.elementor .rl-mmenu .rl-mmenu-link a { display: block; }

/* buttons: the hover colour floods in from the cursor (site.js reads it from the class's hover state) */
.elementor .rl-btn.has-fill { isolation: isolate; transition: color .4s; }
.elementor .rl-btn.has-fill:is(:hover, :focus-visible) { transition: color .3s; }
.rl-fill { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 50%; pointer-events: none; z-index: -1; transform: translate(-50%, -50%) scale(0); }

/* the button label rolls up to a fresh copy of itself (site.js doubles the label) */
.rl-roll { display: inline-block; overflow: hidden; vertical-align: top; }
.rl-roll > span { display: block; transition: transform .45s cubic-bezier(.19, 1, .22, 1); }
.elementor .rl-btn:is(:hover, :focus-visible) .rl-roll > span { transform: translateY(-100%); }

@media (hover: none) { .elementor .rl-btn:hover .rl-roll > span { transform: none; } }
@media (prefers-reduced-motion: reduce) { .elementor .rl-sbar, .elementor .rl-sbar.is-on, .rl-roll > span { transition: none; } }

/* ---------- the Route (geometry from the Figma export, drawn by page.js) ---------- */
.route { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.route .head { fill: var(--ember); }

/* ---------- preloader (markup from functions.php, timeline in site.js) ---------- */
#pre { position: fixed; inset: 0; background: var(--midnight, #172042); z-index: 100; clip-path: inset(0 0 0 0); }
#pre svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#pre:not(.go) svg { visibility: hidden; }   /* nothing drawn until the timeline has set its first frame */
#pre .c { position: absolute; bottom: 24px; font: 500 12px/16px "DM Sans", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: rgba(244, 241, 236, .5); }
#pl-lock { position: fixed; z-index: 101; left: 0; top: 0; width: 100px; aspect-ratio: 6118.2 / 1082.9; opacity: 0; pointer-events: none; }
#pl-lock svg { width: 100%; height: 100%; display: block; }
.no-motion #pre, .no-motion #pl-lock { display: none; }
body.admin-bar #pre { top: 0; }
/* the pricing ladder: the live level's name is full strength, the others wait at 64% (50% once page.js drives the ladder);
   on mobile the price line and the level's line read as one sentence */
.elementor .rl-lv:not(.rl-live) .rl-level-name { opacity: .64; }
.elementor .rl-s-pricing.rl-driven .rl-lv:not(.rl-live) .rl-level-name { opacity: .5; }
@media (max-width: 767px) { .elementor .rl-lv-per::after { content: ". "; } }
/* insights: the cards take the palette in turn (Midnight, Ember, Mist) whatever posts the loop returns; the stand-in tag
   shows only on posts whose rl_stand_in field is filled */
.elementor .rl-in-item:nth-child(3n+2) :is(.rl-in-card, .rl-ip-card) { background-color: var(--ember); }
.elementor .rl-in-item:nth-child(3n+3) :is(.rl-in-card, .rl-ip-card) { background-color: var(--mist); color: var(--midnight); }
.elementor .rl-in-item:nth-child(3n+1) :is(.rl-in-card, .rl-ip-card), .elementor .rl-in-item:nth-child(3n+2) :is(.rl-in-card, .rl-ip-card) { --rl-chev: url(/wp-content/themes/rl-corporate/assets/icons/chevron-right-16-paper.svg); }
/* Insights: the note's label and read time read as one line with a middle dot; the live filter chip is filled; notes past the
   first six (or outside the chosen filter) wait (sections.js) */
.elementor .rl-ip-meta > * + *::before { content: "\00b7"; margin: 0 var(--rl-sep, calc(var(--u) * 5.05)); }
@media (max-width: 767px) { .elementor .rl-ip-meta { --rl-sep: calc(var(--u) * 11.53); } }
.elementor .rl-ip-chip.rl-live { background-color: var(--midnight); color: var(--paper); }
.elementor .rl-in-item.rl-wait { display: none; }
.elementor .rl-in-tag:has(.rl-tag:empty) { display: none; }
/* an inline mark (e-svg) fills its box: no inline baseline gap under the svg */
.elementor .rl-orbit > svg { display: block; width: 100%; height: 100%; }
/* the closing ask: the dot's arrow hangs under its words; the contact links read as one muted line on desktop
   (a middle dot between them) and as icon rows on mobile. Icons are CSS, keyed on the link type */
.elementor .rl-cta-dot::after { content: ""; width: calc(var(--u) * 24); height: calc(var(--u) * 24); background: url(../icons/arrow-up-right-24-paper.svg) center / contain no-repeat; }
.elementor .rl-cta-link + .rl-cta-link::before { content: "\00b7"; margin: 0 calc(var(--u) * 4.26); }
@media (max-width: 767px) {
  .elementor .rl-cta-dot::after { width: calc(var(--u) * 20); height: calc(var(--u) * 20); background-image: url(../icons/arrow-up-right-20-paper.svg); }
  .elementor .rl-cta-link::before, .elementor .rl-cta-link + .rl-cta-link::before { content: ""; margin: 0; width: calc(var(--u) * 20); height: calc(var(--u) * 20); background: center / contain no-repeat; }
  .elementor .rl-cta-link[href^="tel:"]::before { background-image: url(../icons/phone-20-paper.svg); }
  .elementor .rl-cta-link[href^="mailto:"]::before { background-image: url(../icons/mail-20-paper.svg); }
}
/* Keynotes hero: a Midnight 38% shade over the whole photo on desktop; the headline's line breaks are desktop only */
@media (min-width: 768px) { .elementor .rl-kp-hero-photo::after { content: ""; grid-area: 1 / 1; background: rgba(23, 32, 66, .38); z-index: 1; } }
@media (max-width: 767px) { .elementor .rl-kp-hero-heading br { display: none; } }
/* a "Watch" link: the play mark is the link's own ::before */
.elementor .rl-play-link::before { content: ""; width: calc(var(--u) * 20); height: calc(var(--u) * 20); background: url(../icons/play-20-paper.svg) center / contain no-repeat; }
/* the small play circle (Keynotes film on mobile): 72 across, the mark 28 */
@media (max-width: 767px) { .elementor .rl-play-sm.rl-film-play::before { width: calc(var(--u) * 72); height: calc(var(--u) * 72);
  background-position: calc(var(--u) * 26) calc(var(--u) * 22); background-size: calc(var(--u) * 28); } }
/* About hero: a Midnight shade over the portrait (45% desktop, 42% mobile) */
.elementor .rl-ap-hero-photo::after { content: ""; grid-area: 1 / 1; background: rgba(23, 32, 66, .45); z-index: 1; }
@media (max-width: 767px) { .elementor .rl-ap-hero-photo::after { background: rgba(23, 32, 66, .42); } }
.elementor .rl-ap-sign > svg { display: block; width: 100%; height: 100%; }
/* a pinned section scrolls for its frame plus its extra length (the preview's data-extra): the class sets --rl-pin-extra,
   this spacer makes the room inside the section's content box, where the sticky frame can travel */
.elementor .rl-pin::after { content: ""; display: block; height: var(--rl-pin-extra, 0px); }
/* trainings by the moment: the live moment is full strength, the others wait at 40%; only the live training's panel shows
   (rl-live is a global class: the first moment and panel carry it in the editor, page.js moves it) */
.elementor .rl-tr-moment :is(.rl-tr-line, .rl-tr-name) { transition: opacity .35s ease; }
.elementor .rl-tr-moment:not(.rl-live) .rl-tr-line { opacity: .4; }
.elementor .rl-tr-moment:not(.rl-live) .rl-tr-name { opacity: .625; }   /* Midnight 64% to 40% */
.elementor .rl-tr-panel:not(.rl-live) { visibility: hidden; }
@media (max-width: 767px) { .elementor .rl-tr-panel:not(.rl-live) { display: none; } }

/* ---------- Elementor editor: show what the visitor only sees on scroll or tap, so it can be edited ---------- */
body.elementor-editor-active .elementor .rl-sbar { position: relative; transform: none; visibility: visible; }
body.elementor-editor-active .elementor .rl-tr-panel { visibility: visible; display: flex; grid-row: auto; height: auto; }   /* every training stacked, editable */
@media (max-width: 767px) { body.elementor-editor-active .elementor .rl-mmenu { display: flex; position: relative; height: auto; } }

/* ---------- the film player (site.js builds it inside the film frame; same as the preview) ---------- */
/* the play circle is the film link's own ::before (Ember Deep, the play mark optically centred as in Figma); the words sit
   under it and the link falls back to the film file without scripts. --rl-play-s scales the circle on hover (sections.js) */
.elementor .rl-film-play::before { content: ""; width: calc(var(--u) * 112); height: calc(var(--u) * 112); border-radius: 50%;
  background: var(--ember-deep) url(../icons/play-44-white.svg) no-repeat calc(var(--u) * 40) calc(var(--u) * 34) / calc(var(--u) * 44);
  transform: scale(var(--rl-play-s, 1)); }
@media (max-width: 767px) { .elementor .rl-film-play::before { width: calc(var(--u) * 88); height: calc(var(--u) * 88);
  background-position: calc(var(--u) * 32) calc(var(--u) * 27); background-size: calc(var(--u) * 34); } }
.player { position: absolute; inset: 0; z-index: 4; background: #0A0D1C; opacity: 0; pointer-events: none; }
.player.on { pointer-events: auto; }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.player video::cue { font-family: "DM Sans", sans-serif; font-weight: 500; font-size: clamp(14px, 1.6vw, 26px); color: #F4F1EC; background: rgba(23, 32, 66, .86); line-height: 1.4; }
.pbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: calc(var(--u) * 20); padding: 0 calc(var(--u) * 24); height: max(52px, calc(var(--u) * 64)); background: rgba(23, 32, 66, .92); color: #F4F1EC; font: 500 max(13px, calc(var(--u) * 15))/1 "DM Sans", sans-serif; transition: transform .45s cubic-bezier(.19, 1, .22, 1), opacity .3s; }
.player.idle .pbar { transform: translateY(100%); opacity: 0; } .player.idle { cursor: none; }
.pbtn { all: unset; cursor: pointer; width: max(22px, calc(var(--u) * 24)); height: max(22px, calc(var(--u) * 24)); display: grid; place-items: center; color: #F4F1EC; opacity: .85; transition: opacity .2s, transform .3s; }
.pbtn:hover, .pbtn:focus-visible { opacity: 1; transform: scale(1.1); } .pbtn:focus-visible { outline: 1px solid #E8553D; outline-offset: 4px; }
.pbtn svg { width: 100%; height: 100%; }
.ptime { min-width: 7.5em; opacity: .85; font-variant-numeric: tabular-nums; }
.ptrack { position: relative; flex: 1; height: 28px; cursor: pointer; display: flex; align-items: center; }
.ptrack i { position: absolute; left: 0; right: 0; height: 2px; background: rgba(244, 241, 236, .24); }
.ptrack b { position: absolute; left: 0; height: 2px; background: #E8553D; width: 0; }
.ptrack u { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #E8553D; transform: translateX(-50%) scale(1); transition: transform .2s; left: 0; }
.ptrack:hover u { transform: translateX(-50%) scale(1.35); }
.pbig { position: absolute; left: 50%; top: 50%; width: max(72px, calc(var(--u) * 112)); height: max(72px, calc(var(--u) * 112)); margin: calc(max(72px, calc(var(--u) * 112)) / -2) 0 0 calc(max(72px, calc(var(--u) * 112)) / -2); border-radius: 50%; background: #D14027; color: #fff; display: grid; place-items: center; opacity: 0; pointer-events: none; border: 0; }
.pbig svg { width: 38%; height: 38%; margin-left: 6%; }
.player.ended .pbig { opacity: 1; pointer-events: auto; cursor: pointer; }
.pmodal { position: fixed; inset: 0; z-index: 90; background: rgba(10, 13, 28, .94); display: none; place-items: center; visibility: hidden; }
.pmodal .player { position: relative; inset: auto; width: min(92vw, calc(80vh * 16 / 9)); aspect-ratio: 16 / 9; opacity: 1; }
.pclose { all: unset; position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; color: #F4F1EC; cursor: pointer; display: grid; place-items: center; } .pclose svg { width: 24px; height: 24px; }

/* ---------- article (single post template) ---------- */
/* the trail and the date line: a slash between "Insights" and the note's label, a middle dot between date and read time */
.elementor .rl-ar-trail > * + *::before { content: "/"; margin: 0 calc(var(--u) * 10.23) 0 calc(var(--u) * 9.14); }
.elementor .rl-ar-meta > * + *::before { content: "\00b7"; margin: 0 calc(var(--u) * 8.5); }
@media (max-width: 767px) {
  .elementor .rl-ar-meta > * + *::before { margin: 0 calc(var(--u) * 4.25); }
}
.elementor .rl-ar-trail a { color: inherit; }
/* the author's photo sits in the Orbit ring, the Ember dot riding it (ring and dot are the photo box's own layers; the ring
   gives its own size because Elementor's container overlay rule sizes every .e-con::before) */
.elementor :is(.rl-ar-face, .rl-ar-face-lg) { --ri: 7; --rw: 6; --ds: 10; --dx: -7.5; --dy: 8.5; overflow: visible; }
.elementor .rl-ar-face-lg { --ri: 10; --rw: 12; --ds: 20; --dx: -17.06; --dy: 5.85; }
@media (max-width: 767px) { .elementor .rl-ar-face-lg { --ri: 8; --rw: 10; --ds: 16; --dx: -13.79; --dy: 3.38; } }
.elementor :is(.rl-ar-face, .rl-ar-face-lg)::before { content: ""; position: absolute; z-index: 1; top: calc(var(--u) * var(--ri) * -1); left: calc(var(--u) * var(--ri) * -1);
  width: calc(100% + var(--u) * var(--ri) * 2); height: calc(100% + var(--u) * var(--ri) * 2); box-sizing: border-box; opacity: 1; mix-blend-mode: normal;
  border: calc(var(--u) * var(--rw)) solid var(--midnight); border-radius: 50%; pointer-events: none; }
.elementor :is(.rl-ar-face, .rl-ar-face-lg)::after { content: ""; position: absolute; z-index: 2; left: calc(var(--u) * var(--dx)); top: calc(var(--u) * var(--dy));
  width: calc(var(--u) * var(--ds)); height: calc(var(--u) * var(--ds)); border-radius: 50%; background: var(--ember); }
/* share links: the icon is CSS, keyed on where the link goes */
.elementor .rl-ar-share-link { background: no-repeat 0 50% / calc(var(--u) * 20) calc(var(--u) * 20); }
.elementor .rl-ar-share-link[href*="linkedin.com"] { background-image: url(../icons/arrow-up-right-20-midnight.svg); }
.elementor .rl-ar-share-link[href*="wa.me"] { background-image: url(../icons/message-circle-20-midnight.svg); }
.elementor .rl-ar-share-link.rl-ar-copy { background-image: url(../icons/link-20-midnight.svg); }
.elementor .rl-ar-small:empty { display: none; }
/* the note itself is the post content: lead, paragraphs at the reading measure, headings, and the pull quote between hairlines */
.elementor .rl-ar-body .elementor-widget-theme-post-content > * { margin: 0; }
.elementor .rl-ar-body .elementor-widget-theme-post-content p { font-family: var(--font-body); font-weight: 400; font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 28); color: rgba(23, 32, 66, .85); max-width: calc(var(--u) * 582.4); margin: 0; }
.elementor .rl-ar-body .elementor-widget-theme-post-content :is(p.rl-lead, h2) { font-family: var(--font-display); font-weight: 600;
  font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 34); letter-spacing: -0.01em; color: var(--midnight); max-width: calc(var(--u) * 636.48); }
.elementor .rl-ar-body .elementor-widget-theme-post-content > * + p { margin-top: calc(var(--u) * 24); }
.elementor .rl-ar-body .elementor-widget-theme-post-content > .rl-lead + p { margin-top: calc(var(--u) * 40); }
.elementor .rl-ar-body .elementor-widget-theme-post-content > * + h2 { margin-top: calc(var(--u) * 48); }
.elementor .rl-ar-body .elementor-widget-theme-post-content > h2 + p { margin-top: calc(var(--u) * 16); }
.elementor .rl-ar-body .elementor-widget-theme-post-content > * + .wp-block-pullquote { margin-top: calc(var(--u) * 64); }
.elementor .rl-ar-body .elementor-widget-theme-post-content > .wp-block-pullquote + * { margin-top: calc(var(--u) * 71); }
.elementor .rl-ar-body .wp-block-pullquote { position: relative; box-sizing: border-box; width: calc(var(--u) * 942); text-align: left;
  padding: calc(var(--u) * 23) 0 calc(var(--u) * 40) calc(var(--u) * 32); border: 0; border-top: 1px solid var(--midnight-12); border-bottom: 1px solid var(--midnight-12); }
.elementor .rl-ar-body .wp-block-pullquote::before { content: ""; position: absolute; left: 0; top: calc(var(--u) * 42); width: calc(var(--u) * 12);
  height: calc(var(--u) * 12); border-radius: 50%; background: var(--ember); }
.elementor .rl-ar-body .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
.elementor .rl-ar-body .wp-block-pullquote p { font-family: var(--font-display); font-weight: 700; font-size: calc(var(--u) * 56); line-height: calc(var(--u) * 60);
  letter-spacing: -0.02em; color: var(--midnight); max-width: none; }
.elementor .rl-ar-body .wp-block-pullquote em { font-style: normal; color: var(--ember); }
@media (max-width: 767px) {
  /* the design's text boxes run 355.68 wide, past the 342 column into the gutter */
  .elementor .rl-ar-body .elementor-widget-theme-post-content :is(p, h2) { max-width: none; width: calc(var(--u) * 355.68); }
  .elementor .rl-ar-body .elementor-widget-theme-post-content :is(p.rl-lead, h2) { font-size: calc(var(--u) * 20); line-height: calc(var(--u) * 28); }
  .elementor .rl-ar-body .elementor-widget-theme-post-content > * + p { margin-top: calc(var(--u) * 20); }
  .elementor .rl-ar-body .elementor-widget-theme-post-content > .rl-lead + p { margin-top: calc(var(--u) * 32); }
  .elementor .rl-ar-body .elementor-widget-theme-post-content > * + h2 { margin-top: calc(var(--u) * 36); }
  .elementor .rl-ar-body .elementor-widget-theme-post-content > h2 + p { margin-top: calc(var(--u) * 12); }
  .elementor .rl-ar-body .elementor-widget-theme-post-content > * + .wp-block-pullquote { margin-top: calc(var(--u) * 72); }
  .elementor .rl-ar-body .elementor-widget-theme-post-content > .wp-block-pullquote + * { margin-top: calc(var(--u) * 55); }
  .elementor .rl-ar-body .wp-block-pullquote { width: auto; padding: calc(var(--u) * 19) 0 calc(var(--u) * 24) calc(var(--u) * 28); }
  .elementor .rl-ar-body .wp-block-pullquote::before { top: calc(var(--u) * 34); }
  .elementor .rl-ar-body .wp-block-pullquote p { width: calc(var(--u) * 326.56); font-size: calc(var(--u) * 36); line-height: calc(var(--u) * 40); letter-spacing: -0.01em; }
  /* Related keeps two notes on mobile */
  .elementor .rl-s-related .rl-in-item:nth-child(n+3) { display: none; }
}

/* ---------- request a quote ---------- */
/* the three ways to talk: each tile's icon and arrow are its own layers, keyed on the tile's colour */
.elementor .rl-q-tile::before, .elementor .rl-q-tile::after { content: ""; position: absolute; border: 0; border-radius: 0; opacity: 1; mix-blend-mode: normal;
  background: no-repeat center / contain; pointer-events: none; }
.elementor .rl-q-tile::before { left: calc(var(--u) * 32); top: calc(var(--u) * 32); width: calc(var(--u) * 40); height: calc(var(--u) * 40);
  background-image: url(../icons/phone-40-paper.svg); }
.elementor .rl-q-tile::after { left: auto; right: calc(var(--u) * 32); top: calc(var(--u) * 32); width: calc(var(--u) * 24); height: calc(var(--u) * 24);
  background-image: url(../icons/arrow-up-right-24-paper.svg); }
.elementor .rl-q-tile-sand::before { background-image: url(../icons/message-circle-40-midnight.svg); }
.elementor .rl-q-tile-sand::after { background-image: url(../icons/arrow-up-right-24-midnight.svg); }
.elementor .rl-q-tile-ember::before { background-image: url(../icons/mail-40-paper.svg); }
.elementor .rl-q-tile-ember::after { background-image: url(../icons/chevron-down-24-paper.svg); }
@media (max-width: 767px) {
  .elementor .rl-q-tile::before { left: calc(var(--u) * 20); top: calc(var(--u) * 20); width: calc(var(--u) * 28); height: calc(var(--u) * 28); background-image: url(../icons/phone-28-paper.svg); }
  .elementor .rl-q-tile::after { right: calc(var(--u) * 24); top: calc(var(--u) * 20); width: calc(var(--u) * 20); height: calc(var(--u) * 20); background-image: url(../icons/arrow-up-right-20-paper.svg); }
  .elementor .rl-q-tile-sand::before { background-image: url(../icons/message-circle-28-midnight.svg); }
  .elementor .rl-q-tile-sand::after { background-image: url(../icons/arrow-up-right-20-midnight.svg); }
  .elementor .rl-q-tile-ember::before { background-image: url(../icons/mail-28-paper.svg); }
  .elementor .rl-q-tile-ember::after { background-image: url(../icons/chevron-down-20-paper.svg); }
}
/* the brief: one step at a time (rl-live marks the step on screen; the editor shows them all). The progress track is the
   strip's own background, each stage's dot is its ::before; sections.js adds the Ember rider and the Paper line */
.elementor .rl-q-step.rl-live, .elementor-editor-active .elementor .rl-q-step { display: block; }
.elementor .rl-q-progress { background: linear-gradient(rgba(244, 241, 236, .24), rgba(244, 241, 236, .24)) no-repeat 0 calc(var(--u) * 11) / 100% 2px; }
@media (max-width: 767px) { .elementor .rl-q-progress { background-position: 0 calc(var(--u) * 11); } }
.elementor .rl-q-stage:nth-child(2) { text-align: center; }
.elementor .rl-q-stage:nth-child(3) { text-align: right; }
.elementor .rl-q-stage.rl-live { color: var(--paper); }
.elementor .rl-q-stage::before { content: ""; position: absolute; top: calc(var(--u) * -30); left: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(244, 241, 236, .4); }
.elementor .rl-q-stage:nth-child(2)::before { left: calc(50% - 6px); }
.elementor .rl-q-stage:nth-child(3)::before { left: auto; right: -6px; }
.elementor .rl-q-stage.rl-done::before { background: var(--ember); }
@media (max-width: 767px) { .elementor .rl-q-stage::before { top: calc(var(--u) * -18); } }
.elementor .rl-q-stage.rl-done:not(.rl-live) { cursor: pointer; }
/* a chip is a pill holding its label; the radio lies over the whole pill; the chosen one fills with Paper */
.elementor .rl-q-chip:has(input:checked) { background-color: var(--paper); border-color: var(--paper); color: var(--midnight); }
.elementor .rl-q-chip:has(input:focus-visible) { outline: 2px solid var(--ember); outline-offset: 2px; }
.elementor .rl-q-radio::before, .elementor .rl-q-radio::after { display: none; }
.elementor .rl-q-input:is(:focus, :focus-visible) { outline: none; border-bottom-color: var(--ember); }
/* sent: the message reads as the next step (left aligned, no focus ring when Elementor moves focus to it) */
.elementor .rl-q-msg { text-align: left; }
.elementor .rl-q-msg:focus { outline: none; }
.elementor .rl-q-input::placeholder { color: rgba(244, 241, 236, .4); opacity: 1; }
.elementor .rl-q-chips + .rl-q-fields { margin-top: calc(var(--u) * 24); }
.elementor .rl-q-input[readonly] { cursor: pointer; padding-right: 28px; background: url(../icons/calendar-20-paper.svg) no-repeat right 0 center / 20px 20px; }
.elementor .rl-q-form [type="submit"] { display: none; }
.elementor .rl-q-form.rl-last [type="submit"] { display: inline-block; }
.elementor .rl-q-form.rl-last .rl-q-next { display: none; }
/* Back on steps 2 and 3; the reassurance only on the first */
.elementor .rl-q-form.rl-first .rl-q-back, .elementor .rl-q-form:not(.rl-first) .rl-q-hint { display: none; }
.elementor .rl-q-step > .rl-q-err { margin-top: calc(var(--u) * 16); }
/* the calendar under Preferred dates (built by sections.js) */
.rl-qcal { margin-top: 12px; width: 336px; max-width: 100%; box-sizing: border-box; padding: 24px; background: #F4F1EC; color: #172042; border-radius: 16px;
  border: 1px solid rgba(23, 32, 66, .08); font-family: var(--font-body); }
.rl-qcal header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rl-qcal header b { font: 600 24px/1.2 var(--font-display); }
.rl-qcal header button { all: unset; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(23, 32, 66, .16); }
.rl-qcal header button:hover { border-color: #172042; }
.rl-qcal header button:disabled { opacity: .24; cursor: default; }
.rl-qcal header button::before { content: ""; width: 16px; height: 16px; background: url(../icons/chevron-right-16-midnight.svg) center / contain no-repeat; }
.rl-qcal header .prev::before { transform: scaleX(-1); }
.rl-qcal .wk, .rl-qcal .days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.rl-qcal .wk span { font: 500 12px/24px var(--font-body); letter-spacing: .08em; text-transform: uppercase; text-align: center; opacity: .4; }
.rl-qcal .days button { all: unset; cursor: pointer; height: 40px; display: grid; place-items: center; font: 400 16px/1 var(--font-body); position: relative; }
.rl-qcal .days button span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; position: relative; z-index: 1; transition: background .2s; }
.rl-qcal .days button:hover span { background: rgba(23, 32, 66, .08); }
.rl-qcal .days button.today span { border: 1px solid rgba(23, 32, 66, .32); }
.rl-qcal .days button:disabled { opacity: .24; cursor: default; }
.rl-qcal .days button:disabled span { background: none; }
.rl-qcal .days button.mid::before, .rl-qcal .days button.a.r::before, .rl-qcal .days button.b::before { content: ""; position: absolute; inset: 0; background: #DCE1EE; }
.rl-qcal .days button.a.r::before { left: 50%; }
.rl-qcal .days button.b::before { right: 50%; }
.rl-qcal .days button.a span, .rl-qcal .days button.b span { background: #D14027; color: #fff; }
.rl-qcal footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(23, 32, 66, .12); font: 400 14px/1.4 var(--font-body); }
.rl-qcal footer span { opacity: .64; }
.rl-qcal footer button { all: unset; cursor: pointer; font: 500 16px/1 var(--font-body); padding: 12px 20px; border-radius: 24px; background: #D14027; color: #fff; }
.rl-qcal footer button:hover { filter: brightness(1.1); }
@media (max-width: 767px) { .rl-qcal { width: 100%; padding: 20px; } }
.elementor .rl-q-form.form-state-success :is(.rl-q-step, .rl-q-actions) { display: none; }
.elementor .rl-q-faq:last-child { border-bottom: 1px solid var(--midnight-12); }

/* ---------- trainings ---------- */
/* hero: a Midnight 45% shade over the whole photo (the label sits above it); the watch pill's play mark is its own layer */
.elementor :is(.rl-t-hero, .rl-tr-hero) > .rl-sec-label { position: relative; z-index: 1; }
@media (max-width: 767px) { .rl-title-long .elementor .rl-t-hero .rl-t-h1 { font-size: calc(var(--u) * 40); line-height: calc(var(--u) * 40); } }
/* the programme hero's route icon is drawn in Paper on the photo (the icon files are Midnight) */
.elementor .rl-trh-icon svg [stroke="#172042"] { stroke: currentColor; }
.elementor .rl-trh-icon svg [fill="#172042"] { fill: currentColor; }
/* words only one breakpoint says: the watch pill drops "of <training>" (its span) on a phone; the hero's stand-in tag
   keeps its desktop words in a span and its phone words in a b (the editor strips classes from inline text) */
@media (max-width: 767px) { .elementor .rl-t-watch span, .elementor .rl-t-tag .rl-tag span { display: none; } }
/* a hero title's line break is the desktop design's; on a phone the words wrap by width (the break carries a space before it) */
@media (max-width: 767px) { .elementor .rl-t-h1 br { display: none; } }
@media (min-width: 768px) { .elementor .rl-t-tag .rl-tag b { display: none; } }
.elementor .rl-t-tag .rl-tag b { font-weight: inherit; }
.elementor .rl-t-photo::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(23, 32, 66, .45); pointer-events: none; }
/* the design lays the stand-in tag under that shade too */
.elementor .rl-t-tag::after { content: ""; position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; background: rgba(23, 32, 66, .45); pointer-events: none; }
.elementor .rl-t-watch::before { content: ""; flex: 0 0 auto; width: calc(var(--u) * 20); height: calc(var(--u) * 20); background: url(../icons/play-20-midnight.svg) center / contain no-repeat; }
@media (max-width: 767px) { .elementor .rl-t-watch::before { width: calc(var(--u) * 18); height: calc(var(--u) * 18); background-image: url(../icons/play-18-midnight.svg); } }
/* the trainings list: each row is numbered by its place in the loop; the last row closes with a hairline */
.elementor .rl-tl-mark.e-con::before { position: static; inset: auto; width: auto; height: auto; opacity: 1; mix-blend-mode: normal; border: 0; background: none; }   /* Elementor's container ::before is an absolute overlay; here it is the number, in the flow */
.elementor .rl-tl-mark::before { content: counter(rl-tl, decimal-leading-zero); font: 500 calc(var(--u) * 16) / calc(var(--u) * 24) var(--font-body); color: var(--midnight-40); }
.elementor .rl-tl-grid { border-bottom: 1px solid var(--midnight-12); }   /* the list closes with a rule, whichever rows the tabs show */
.elementor .rl-tl-icon svg { display: block; width: 100%; height: 100%; }
/* how a booking works: hairlines between the steps (rows on mobile) */
.elementor .rl-t-step + .rl-t-step { border-left: 1px solid var(--midnight-12); padding-left: calc(var(--u) * 23); }
@media (max-width: 767px) {
  .elementor .rl-t-step + .rl-t-step { border-left: 0; padding-left: 0; }
  .elementor .rl-t-step:last-child { border-bottom: 1px solid var(--midnight-12); }
}
/* a programme: "Programme 01 · Service & experience" reads as one label on desktop; the group drops to its own line on mobile */
@media (min-width: 768px) { .elementor .rl-trh-moment::before { content: "\00a0\00b7\00a0"; } }
.elementor :is(.rl-trh-icon, .rl-trw-icon, .rl-tro-icon) svg { display: block; width: 100%; height: 100%; }
/* who it is for: Mist and Sand in turn, Ember for "Your team" (with its arrow); an audience with no label is not shown */
.elementor .rl-trw-tile:nth-child(even):not(.rl-trw-ember) { background-color: var(--sand); }
/* two across on a phone: Mist and Sand as a checkerboard (Mist, Sand / Sand, Mist) */
@media (max-width: 767px) { .elementor .rl-trw-tile:not(.rl-trw-ember) { background-color: var(--mist); }
  .elementor .rl-trw-tile:is(:nth-child(4n+2), :nth-child(4n+3)):not(.rl-trw-ember) { background-color: var(--sand); } }
/* a programme with no intro: the empty line takes no room */
.elementor :has(> .rl-trw-grid) > .e-paragraph-base:empty { display: none; }
.elementor .rl-trw-tile:has(.rl-trw-label:empty) { display: none; }
.elementor .rl-trw-ember::after { content: ""; position: absolute; top: calc(var(--u) * 32); right: calc(var(--u) * 32); width: calc(var(--u) * 24); height: calc(var(--u) * 24);
  background: url(../icons/arrow-up-right-24-paper.svg) center / contain no-repeat; }
@media (max-width: 767px) { .elementor .rl-trw-ember::after { top: calc(var(--u) * 16); right: calc(var(--u) * 16); width: calc(var(--u) * 20); height: calc(var(--u) * 20);
  background-image: url(../icons/arrow-up-right-20-paper.svg); } }
/* what changes: hairlines between the rows; a change left empty is not shown */
.elementor .rl-trc-row:has(.rl-trc-text:empty) { display: none; }
.elementor .rl-trc-row:last-child { border-bottom: 1px solid rgba(244, 241, 236, .2); }
/* format: hairlines between the columns (above each cell on mobile); a value still waiting on RL ("[...]") is muted */
@media (min-width: 768px) { .elementor .rl-trf-cell + .rl-trf-cell { border-left: 1px solid var(--midnight-12); padding-left: calc(var(--u) * 23); } }
.elementor .rl-trf-value em { font-style: normal; color: var(--midnight-40); }
/* other trainings: the hairline sits over each card; the last row closes on mobile */
@media (max-width: 767px) { .elementor .rl-tro-grid > :last-child .rl-tro-card { border-bottom: 1px solid var(--midnight-12); } }
/* Home trainings come from the trainings loop: until sections.js marks the live pair, the first training is the live one */
.elementor .rl-tr-list:not(:has(.rl-live)) .rl-tr-item:first-child .rl-tr-moment :is(.rl-tr-line, .rl-tr-name) { opacity: 1; }
.elementor .rl-tr-list:not(:has(.rl-live)) .rl-tr-item:first-child .rl-tr-panel { visibility: visible; }
@media (max-width: 767px) { .elementor .rl-tr-list:not(:has(.rl-live)) .rl-tr-item:first-child .rl-tr-panel { display: flex; } }
/* a section label built as a container (the training's "When it slips") keeps its dot in the row: a container's ::before is
   Elementor's absolutely placed overlay layer otherwise */
.elementor .rl-sec-label.e-con::before { position: static; top: auto; left: auto; opacity: 1; mix-blend-mode: normal; border: 0; }
/* the brief's checks: a field that needs attention underlines in Ember and says why underneath */
.elementor .rl-q-field.rl-invalid .rl-q-input { border-bottom-color: var(--ember); }
.elementor .rl-q-err { margin: 0; font: 400 14px / 1.4 var(--font-body); color: #F08A79; }
/* the phone: intl-tel-input's country picker dressed for the brief (Paper dial code on Midnight; the list like the calendar) */
.rl-q-tel { display: block; width: 100%; }
.rl-q-tel .iti__selected-country { background: transparent; color: var(--paper); }
.rl-q-tel .iti__selected-country:hover, .rl-q-tel .iti__selected-country:focus-visible { background: rgba(244, 241, 236, .06); }
.rl-q-tel .iti__selected-dial-code { color: var(--paper); font: 400 18px / 1.6 var(--font-body); }
.rl-q-tel .iti__arrow { border-top-color: rgba(244, 241, 236, .64); }
.rl-q-tel .iti__arrow--up { border-top-color: transparent; border-bottom-color: rgba(244, 241, 236, .64); }
.rl-q-tel .iti__country-selector { z-index: 50; }
.rl-q-tel .iti__country-selector { background: #F4F1EC; color: #172042; border: 1px solid rgba(23, 32, 66, .12);
  border-radius: 16px; overflow: hidden; font: 400 15px / 1.4 var(--font-body); }
.rl-q-tel .iti__search-input { font: 400 16px / 1.4 var(--font-body); color: #172042; background: #F4F1EC; border: 0; border-bottom: 1px solid rgba(23, 32, 66, .12); padding: 12px 16px 12px 40px; }
.rl-q-tel .iti__search-input:focus { outline: none; border-bottom-color: var(--ember); }
.rl-q-tel .iti__country { padding: 10px 16px; }
.rl-q-tel .iti__country.iti__highlight { background: rgba(23, 32, 66, .08); }
.rl-q-tel .iti__dial-code { color: rgba(23, 32, 66, .64); }
.rl-q-tel :is(.iti__country-name, .iti__no-results) { color: #172042; }
/* focus: Hello Elementor's reset draws a 4px white box-shadow ring on focus; the site uses an Ember outline instead (no
   shadows), and the brief's fields show focus with their Ember underline */
:is(a, button, input, select, textarea, [tabindex]):focus-visible { box-shadow: none; }
.elementor :is(a, button, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.elementor .rl-q-input:focus-visible { outline: none; }
.rl-q-tel .iti__country-list { background: #F4F1EC; }
.rl-q-tel .iti__search-input { padding-left: 40px; }
/* copy v3: the hero's small label sits in the right column on desktop only (the design's phone hero has none) */
@media (max-width: 767px) { .elementor .rl-hero-ask > .rl-sec-label { display: none; } }
/* copy v3, programme tiles (Home and Programmes): Mist and Sand alternate like "Who it is for"; a tile the tabs filter out folds away */
.elementor .rl-s-trainings .rl-tr-item:nth-child(even) > .e-con { background-color: var(--sand, #E8DCC8); }
.elementor :is(.rl-s-trainings .rl-tr-item, .rl-s-tlist .rl-tl-item).rl-wait { display: none; }
/* the whole tile is the link to the programme; its arrow sits in the corner (the label stays for screen readers) */
.elementor .rl-s-trainings .rl-tr-item .e-button-base { background: url(../icons/arrow-up-right-24-midnight.svg) no-repeat right calc(var(--u) * 32) bottom calc(var(--u) * 32) / calc(var(--u) * 24) transparent; color: transparent; font-size: 0; }
@media (max-width: 767px) { .elementor .rl-s-trainings .rl-tr-item .e-button-base { background-position: right calc(var(--u) * 24) bottom calc(var(--u) * 32); } }

/* Home, Rosemary on...: the card's play button, a Ember Deep circle with the play mark (the atomic style drops background images) */
.elementor .rl-s-insights .rl-card .e-button-base { background: var(--ember-deep) url(../icons/play-28-white.svg) no-repeat 55% 50% / calc(var(--u) * 26); }
@media (max-width: 767px) { .elementor .rl-s-insights .rl-card .e-button-base { background-size: calc(var(--u) * 20); } }

/* Before you ask (Home) is Elementor's atomic accordion: details and summary, one open at a time, the first open, FAQ schema
   on. What its classes cannot reach is here: the native marker, the title slot's padding, the chevron that turns into an x
   when open (a Midnight mask, as the design), and the answer easing open (::details-content, where the browser has it) */
.elementor .rl-faq { interpolate-size: allow-keywords; }
.elementor .rl-acc-head { list-style: none; }
.elementor .rl-acc-head::-webkit-details-marker { display: none; }
.elementor .rl-acc-head > .e-accordion-item-title-base { grid-column: 1; min-width: 0; padding: 0; }
.elementor .rl-acc-icon { transform: none !important; justify-content: center; }
.elementor .rl-acc-icon svg { width: 100%; height: 100%; display: block; }
.elementor .rl-acc-item[open] .rl-acc-icon > * { visibility: hidden; }
.elementor .rl-acc-item[open] .rl-acc-icon { background: var(--midnight); -webkit-mask: url(../icons/x.svg) center / contain no-repeat; mask: url(../icons/x.svg) center / contain no-repeat; }
.elementor .rl-acc-item:not([open]):hover .rl-faq-q { opacity: .8; }
.elementor .rl-acc-item::details-content { block-size: 0; overflow-x: visible; overflow-y: clip; transition: block-size .5s cubic-bezier(.19, 1, .22, 1), content-visibility .5s allow-discrete; }
.elementor .rl-acc-item[open]::details-content { block-size: auto; }
.elementor .rl-acc-body .rl-faq-a { margin: 0; }   /* the slot carries the spacing, so nothing collapses out of a closed item */

/* Let's talk close on a phone: the location is the third contact row, with its pin (the last paragraph in the section) */
@media (max-width: 767px) { .elementor .rl-s-cta > .e-paragraph-base:last-child:not(.rl-cta-note) { display: flex; gap: calc(var(--u) * 12); align-items: flex-start; opacity: 1; }
  .elementor .rl-s-cta > .e-paragraph-base:last-child:not(.rl-cta-note)::before { content: ""; flex: 0 0 auto; width: calc(var(--u) * 20); height: calc(var(--u) * 20); margin-top: calc(var(--u) * 2); background: url(../icons/map-pin-20-paper.svg) center / contain no-repeat; } }

/* counted figures (In the room): every digit the same width, so the number does not shift while it counts */
.elementor .rl-count { font-variant-numeric: tabular-nums; }

/* list rows: a link that opens Let's talk (Register interest) carries the arrow, a link to a page the chevron */
.elementor .rl-tl-row .rl-clink[href*="/lets-talk/"] { --rl-chev: url(/wp-content/themes/rl-corporate/assets/icons/arrow-up-right-20-midnight.svg); }   /* absolute: the variable resolves where it is used */
/* International's cities on a phone: "01 · United Kingdom" on one line (the number is the mark's ::before) */
@media (max-width: 767px) { .elementor .rl-tl-mark > .rl-label::before { content: "\00a0\00a0\00b7\00a0\00a0"; } }
/* Before you ask as a plain list (rl-faq-open on the list, as on International): every answer shown, beside its question
   on desktop and under it on a phone, no mark and nothing to fold */
.elementor .rl-faq.rl-faq-open > .rl-faq-item { cursor: default; }
.elementor .rl-faq.rl-faq-open > .rl-faq-item > .rl-faq-a { grid-row: 1; margin-block-start: calc(var(--u) * 2); }
@media (max-width: 767px) { .elementor .rl-faq.rl-faq-open > .rl-faq-item > .rl-faq-a { grid-row: 2; margin-block-start: calc(var(--u) * 12); } }

/* a video's play button (rl-video-play): Ember Deep circle with the play mark; the atomic style drops background images */
.elementor .rl-video-play { background: var(--ember-deep) url(/wp-content/themes/rl-corporate/assets/icons/play-28-white.svg) no-repeat 55% 50% / 46%; }
.elementor .rl-video-play:is(:hover, :focus-visible) { filter: brightness(1.08); }
/* a conversation's film on a phone: the play circle is 64 (the Home film's is 72) */
@media (max-width: 767px) { .elementor .rl-ar-photo .rl-play-sm.rl-film-play::before { width: calc(var(--u) * 64); height: calc(var(--u) * 64); } }
/* a conversation's transcript (the post content): 16/28 at 40 percent, 16 under its label (12 on a phone, where it is
   third in the column's order) */
.elementor .rl-ar-body > .elementor-widget-theme-post-content { margin-top: calc(var(--u) * 16); }
.elementor .rl-ar-body > .elementor-widget-theme-post-content :is(p, li) { font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 28); color: var(--midnight-40); }
@media (max-width: 767px) { .elementor .rl-ar-body > .elementor-widget-theme-post-content { order: 3; margin-top: calc(var(--u) * 12); } }

/* a film playing in its own section: paused, it sits under the section's shade and words (the play link resumes it) */
.player.rl-inline.paused { z-index: 0; }
.player.rl-inline.paused .pbar { opacity: 0; pointer-events: none; }
/* a conversation's transcript from its captions: each word fills from 40 percent to full as it is said; a line starts the film there */
.elementor .rl-transcript .rl-tl { margin: 0 0 calc(var(--u) * 12); cursor: pointer; }
.elementor .rl-transcript .rl-tw { color: var(--midnight-40); transition: color .25s; }
.elementor .rl-transcript .rl-tw.on { color: var(--midnight); }
.elementor .rl-transcript .rl-tl:hover .rl-tw:not(.on) { color: rgba(23, 32, 66, .56); }
/* the player's bar on a phone: the track takes its own row above the controls, so it is long enough to seek */
@media (max-width: 767px) {
  .pbar { flex-wrap: wrap; height: auto; gap: 0 14px; padding: 2px 16px 8px; }
  .ptrack { order: -1; flex: 1 0 100%; }
  .ptime { min-width: 0; margin-right: auto; }
}
/* "I connect. I engage." / "I impact." on desktop; one phrase per line on phones (copy v3, 20 Oct) */
@media (min-width: 768px) { .elementor [data-id="5b72717e"] br:first-of-type, .elementor [data-id="277cee57"] br:first-of-type { display: none; } }
/* Beyond training cards: the link covers the card, so the whole card is the target */
/* (the MCP converter drops background colour and image on buttons, so the arrow lives here) */
.elementor .rl-bt-card .rl-bt-link { background: transparent url(../icons/arrow-up-right-24-midnight.svg) right bottom / calc(var(--u) * 24) no-repeat; }
.elementor .rl-bt-link::after { content: ""; position: absolute; inset: 0; }
.elementor .rl-bt-card:has(.rl-bt-link:hover) .rl-bt-link { text-decoration: underline; text-underline-offset: 0.2em; }
/* Services drop-down (bar and sticky bar). The button is a real <button>: Elementor's default fill comes off here (the
   converter drops backgrounds on buttons). The chevron is a mask in the text colour, so it follows the header's ink. */
.elementor .rl-nav-drop-btn { background: transparent; color: inherit; border: 0; }
.elementor .rl-mmenu-drop-btn { background: transparent; border: 0; }
.elementor .rl-sbar .rl-nav-drop-btn { color: var(--paper); }
.elementor .rl-nav-drop-btn::after { content: ""; position: absolute; right: 0; top: calc(var(--u) * 14.5); width: calc(var(--u) * 16); height: calc(var(--u) * 16);
  transform: translateY(-50%); background: currentColor; -webkit-mask: url(../icons/chevron-down-16-midnight.svg) center / contain no-repeat;
  mask: url(../icons/chevron-down-16-midnight.svg) center / contain no-repeat; transition: transform .3s cubic-bezier(.19, 1, .22, 1); }
.elementor .rl-sbar .rl-nav-drop-btn::after { top: 50%; width: 16px; height: 16px; }
.elementor .rl-nav-panel { background: var(--paper); border: 1px solid rgba(23, 32, 66, .12); }
.elementor .rl-nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--u) * -26); bottom: auto; height: calc(var(--u) * 26); background: none; }   /* hover bridge; top set because the e-con ::before sets top: 0 */
.elementor .rl-nav-drop.is-open .rl-nav-panel { display: block; }
@media (hover: hover) { .elementor .rl-nav-drop:hover .rl-nav-panel { display: block; } }
.elementor .rl-nav-drop.is-open .rl-nav-drop-btn::after { transform: translateY(-50%) rotate(180deg); }
@media (hover: hover) { .elementor .rl-nav-drop:hover .rl-nav-drop-btn::after { transform: translateY(-50%) rotate(180deg); } }
.elementor .rl-nav-item + .rl-nav-item { background: linear-gradient(rgba(23, 32, 66, .12), rgba(23, 32, 66, .12)) calc(var(--u) * 24) 0 / calc(100% - var(--u) * 48) 1px no-repeat; }
.elementor .rl-nav-item:hover { background-color: rgba(23, 32, 66, .04); }
.elementor .rl-nav-item-title a::after { content: ""; position: absolute; inset: 0; }
.elementor .rl-nav-item-title a:focus-visible { outline: none; }
.elementor .rl-nav-item:has(a:focus-visible) { outline: 2px solid var(--ember); outline-offset: -2px; }
/* the row's Route icon keeps its Ember dot (Figma); on hover the line draws in like the Route, then the dot lands */
.elementor .rl-nav-item-icon path:last-child { fill: var(--ember); transform-box: fill-box; transform-origin: center; }
.elementor .rl-nav-item-icon .rl-draw { stroke-dasharray: 1 1.3; }
@media (prefers-reduced-motion: no-preference) {
  .elementor .rl-nav-item:has(a:focus-visible) .rl-draw { animation: rl-icon-draw .55s cubic-bezier(.65, 0, .35, 1) both; }
  .elementor .rl-nav-item:has(a:focus-visible) .rl-nav-item-icon path:last-child { animation: rl-icon-dot .5s cubic-bezier(.34, 1.56, .64, 1) .4s both; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .elementor .rl-nav-item:hover .rl-draw { animation: rl-icon-draw .55s cubic-bezier(.65, 0, .35, 1) both; }
  .elementor .rl-nav-item:hover .rl-nav-item-icon path:last-child { animation: rl-icon-dot .5s cubic-bezier(.34, 1.56, .64, 1) .4s both; }
}
@keyframes rl-icon-draw { from { stroke-dashoffset: 1.15; } to { stroke-dashoffset: 0; } }
@keyframes rl-icon-dot { from { transform: scale(0); } to { transform: scale(1); } }
/* phone menu: Services opens its list in place */
.elementor .rl-mmenu-drop-btn::after { content: ""; position: absolute; right: 0; top: 50%; width: 24px; height: 24px; transform: translateY(-50%);
  background: currentColor; -webkit-mask: url(../icons/chevron-down-24-paper.svg) center / contain no-repeat; mask: url(../icons/chevron-down-24-paper.svg) center / contain no-repeat;
  transition: transform .3s cubic-bezier(.19, 1, .22, 1); }
.elementor .rl-mmenu-drop.is-open .rl-mmenu-drop-btn::after { transform: translateY(-50%) rotate(180deg); }
.elementor .rl-mmenu-drop.is-open .rl-mmenu-sub { display: flex; }
/* service pages: a row (Who it's for, What we take care of) opens on a hairline inside the margins */
.elementor .rl-sv-row { background: linear-gradient(var(--midnight-12), var(--midnight-12)) calc(var(--u) * 60) 0 / calc(100% - var(--u) * 120) 1px no-repeat; }
@media (max-width: 767px) { .elementor .rl-sv-row { background-position: calc(var(--u) * 24) 0; background-size: calc(100% - var(--u) * 48) 1px; } }
/* the 2027 series: posts run in quarter order, two per quarter; the quarter's label sits on its first programme only.
   Home's grid fills column by column, so each column is a quarter (the layout's own style); phones and International stack */
.elementor [data-element_type="e-collection-loop-item"]:nth-child(even) [data-id="7366f562"] { display: none; }
/* International: a programme's row under its quarter's label; the second of each pair opens on the row line and closes the
   quarter, with room before the next label */
.elementor .rl-x-item:nth-child(even) .rl-x-q { display: none; }
.elementor .rl-x-item:nth-child(odd) .rl-x-row { margin-top: calc(var(--u) * 64); }
.elementor .rl-x-item:nth-child(even) { padding-top: calc(var(--u) * 48); margin-bottom: calc(var(--u) * 80); }
.elementor .rl-x-item:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .elementor .rl-x-item:nth-child(odd) .rl-x-row { margin-top: calc(var(--u) * 48); }
  .elementor .rl-x-item:nth-child(even) { padding-top: calc(var(--u) * 32); margin-bottom: calc(var(--u) * 64); }
}
/* the register-interest form: words sit on the line until typed over; the drop-down carries the site's chevron; the dot is
   the submit, its arrow under the words as on every closing dot */
.elementor .rl-r-input::placeholder { color: rgba(244, 241, 236, .64); opacity: 1; }
.elementor .rl-r-select { appearance: none; -webkit-appearance: none; background: url(../icons/chevron-down-20-paper.svg) right 0 top 0 / calc(var(--u) * 20) no-repeat; }
.elementor .rl-r-select:invalid { color: rgba(244, 241, 236, .64); }
.elementor .rl-r-select option { color: var(--midnight); background: var(--paper); }
.elementor .rl-r-dot::after { content: ""; width: calc(var(--u) * 24); height: calc(var(--u) * 24); background: url(../icons/arrow-up-right-24-paper.svg) center / contain no-repeat; }
.elementor .rl-r-dot:is(:hover, :focus-visible) { filter: brightness(1.08); }
.elementor .rl-r-field.rl-invalid :is(.rl-r-input, .rl-r-select) { border-bottom-color: var(--ember); }
.elementor .rl-r-field .rl-q-err { margin-top: calc(var(--u) * 6); }
.elementor .rl-r-form .rl-q-tel .iti__selected-dial-code { font: 400 calc(var(--u) * 16) / calc(var(--u) * 24) var(--font-body); }
.elementor .rl-r-form .rl-q-tel .iti__selected-country { padding-bottom: calc(var(--u) * 16); }
@media (max-width: 767px) {
  .elementor .rl-r-select { background-size: calc(var(--u) * 16); }
  .elementor .rl-r-dot::after { width: calc(var(--u) * 20); height: calc(var(--u) * 20); background-image: url(../icons/arrow-up-right-20-paper.svg); }
}
/* the hero's label is a short name (RL Corporate) with the positioning line under it; no hairline beside it (Figma) */
.elementor .rl-hero-ask > .rl-sec-label::after { display: none; }