/*!
 * Royal Consultants — Elementor widget styles
 *
 * Every colour, font and radius token comes from the theme's :root block in
 * themes/rylcons/style.css. No new custom properties are defined here.
 */

/* --------------------------------------------------------------------------
   1. Shared blocks — reuse these classes in any Royal Consultants widget
   -------------------------------------------------------------------------- */

/* Eyebrow: pill lines followed by a small uppercase label. */
.rylcons-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
}

.rylcons-eyebrow__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  color: var(--rylcons-color-secondary);
}

.rylcons-eyebrow__icon svg {
  display: block;
}

/* Centred variant: the label sits between two sets of pill lines. */
.rylcons-eyebrow--center {
  justify-content: center;
  text-align: center;
}

.rylcons-eyebrow__icon--flip {
  transform: scaleX(-1);
}

.rylcons-eyebrow__text {
  font-size: 16px;
  font-weight: var(--rylcons-fw-medium);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--rylcons-color-primary);
}

/* Title, with an optional accent-coloured run. */
.rylcons-title {
  margin: 0;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--rylcons-color-primary);
}

.rylcons-title__accent {
  color: var(--rylcons-color-secondary);
}

/* --------------------------------------------------------------------------
   2. Royal Hero
   -------------------------------------------------------------------------- */
.rylcons-hero {
  position: relative;
  font-family: var(--rylcons-font-family);
}

.rylcons-hero__inner {
  width: 100%;
  max-width: calc(var(--rylcons-container-width) + (var(--rylcons-container-padding) * 2));
  margin-inline: auto;
  padding-inline: var(--rylcons-container-padding);
}

/* Flex rather than grid so a single width value works at every breakpoint:
   at 100% the lead fills the row and the intro column wraps underneath,
   instead of a second track being pushed off-screen. */
.rylcons-hero__top {
  display: flex;
  flex-wrap: wrap;
  column-gap: 60px;
  row-gap: 40px;
  align-items: flex-start;
}

.rylcons-hero__lead {
  flex: 0 1 55%;
  min-width: 0;
}

/* The hero reuses the shared eyebrow and title blocks; only the display size
   of the title differs. */
/* Same pill-lines mark, drawn larger to sit with the display title. */
.rylcons-hero .rylcons-eyebrow__icon svg {
  width: 64px;
  height: auto;
}

.rylcons-hero .rylcons-title {
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Intro column */
.rylcons-hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 320px;
  min-width: 0;
}

.rylcons-hero__avatars {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

/* Scoped one level deeper than the bare class on purpose: Elementor ships
   `.elementor img { border: none; border-radius: 0; height: auto }`, which
   outranks a single class and would flatten every image in these widgets. */
.rylcons-hero .rylcons-hero__avatar {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: var(--rylcons-radius-pill);
  border: 2px solid var(--rylcons-color-white);
  object-fit: cover;
  flex-shrink: 0;
}

.rylcons-hero__avatar + .rylcons-hero__avatar {
  margin-left: -12px;
}

.rylcons-hero__trusted {
  margin: 0;
  font-size: 16px;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.4;
  color: var(--rylcons-color-primary);
}

.rylcons-hero__desc {
  margin: 26px 0 0;
  font-size: var(--rylcons-fs-nav);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.65;
  color: var(--rylcons-color-text-muted);
}

/* Button */
.rylcons-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 14px 22px;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-white);
  color: var(--rylcons-color-primary);
  font-size: var(--rylcons-fs-btn);
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--rylcons-transition), color var(--rylcons-transition), transform var(--rylcons-transition);
}

.rylcons-hero__btn:hover,
.rylcons-hero__btn:focus-visible {
  background-color: var(--rylcons-color-secondary);
  color: var(--rylcons-color-white);
}

.rylcons-hero__btn:active {
  transform: translateY(1px);
}

.rylcons-hero__btn-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.rylcons-hero__btn-icon svg {
  display: block;
}

/* Media — image sitting over the colour panel.
   The top margin is the gap between the widget's own text block and its media
   block. That is internal to the widget, so Elementor cannot reach it; section
   spacing above and below the widget still belongs to the container. */
.rylcons-hero__media {
  position: relative;
  margin-top: 56px;
}

.rylcons-hero__panel {
  position: absolute;
  top: 135px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--rylcons-color-primary);
}

/* Left edge only: the padding reproduces the gutter a centred container would
   leave, so the image starts on the container's content edge, while the right
   side runs on to the screen edge as the design shows. Using 100% rather than
   100vw keeps the scrollbar out of the sum, so nothing overflows sideways. */
.rylcons-hero__media-inner {
  position: relative;
  padding-left: max(var(--rylcons-container-padding), (100% - var(--rylcons-container-width)) / 2);
}

/* Left space, measured from the container's content edge. */
.rylcons-hero__image-wrap {
  position: relative;
  margin-left: 150px;
}

.rylcons-hero .rylcons-hero__image {
  display: block;
  width: 100%;
  height: 540px;
  object-fit: cover;
  border-radius: 24px 0 0 0;
}

.rylcons-hero--no-panel .rylcons-hero__image {
  border-radius: 24px;
}

/* --------------------------------------------------------------------------
   3. Royal Feature Boxes
   -------------------------------------------------------------------------- */
.rylcons-features {
  font-family: var(--rylcons-font-family);
  background-color: var(--rylcons-color-primary);
  border-radius: 0 0 64px 64px;
}

.rylcons-features__inner {
  width: 100%;
  max-width: calc(var(--rylcons-container-width) + (var(--rylcons-container-padding) * 2));
  margin-inline: auto;
  padding: 64px var(--rylcons-container-padding) 76px;
}

/* Same left space as the hero image, measured from the same container content
   edge, so the icons sit directly under the photo's left edge. */
.rylcons-features__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 44px;
  margin-left: 150px;
}

.rylcons-features__item {
  display: block;
  color: inherit;
  text-decoration: none;
}

.rylcons-features__item--link {
  transition: transform var(--rylcons-transition);
}

.rylcons-features__item--link:hover,
.rylcons-features__item--link:focus-visible {
  transform: translateY(-3px);
}

/* Square box with the artwork contained inside it, so icons of different
   proportions still leave every title on the same line. */
.rylcons-features .rylcons-features__icon {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 26px;
}

.rylcons-features__title {
  margin: 0 0 12px;
  font-size: 1.125rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.3;
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-features__desc {
  margin: 0;
  max-width: 320px;
  font-size: 14px;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.6;
  color: var(--rylcons-color-text-on-dark);
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   4. Royal Section Heading
   -------------------------------------------------------------------------- */

/* No background and no outer spacing here on purpose, sides included: this
   widget sits inside whatever Elementor container it is dropped in, so the
   container supplies the gutter. */
.rylcons-heading {
  font-family: var(--rylcons-font-family);
}

.rylcons-heading__grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: 60px;
  row-gap: 28px;
  align-items: flex-start;
}

.rylcons-heading__lead {
  flex: 0 1 50%;
  min-width: 0;
}

/* Dropped by the height of the eyebrow block so the description begins on the
   title's line rather than level with the eyebrow. Internal to the widget, so
   it cannot come from the Elementor container. */
.rylcons-heading__aside {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 48px;
}

.rylcons-heading__desc {
  margin: 0;
  max-width: 620px;
  font-size: var(--rylcons-fs-nav);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.65;
  color: var(--rylcons-color-primary);
}

/* Editor content: the field is a WYSIWYG, so it arrives as paragraphs and
   lists. The block's own outer margins are dropped and the gap between blocks
   is set here, where the Paragraph Spacing control can reach it. */
.rylcons-heading__desc > * {
  margin-top: 0;
}

.rylcons-heading__desc > *:not(:last-child) {
  margin-bottom: 16px;
}

.rylcons-heading__desc > *:last-child {
  margin-bottom: 0;
}

.rylcons-heading__desc a {
  color: var(--rylcons-color-secondary);
}

.rylcons-heading__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 14px 22px;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-primary);
  color: var(--rylcons-color-white);
  font-size: var(--rylcons-fs-btn);
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--rylcons-transition), color var(--rylcons-transition), transform var(--rylcons-transition);
}

.rylcons-heading__btn:hover,
.rylcons-heading__btn:focus-visible {
  background-color: var(--rylcons-color-secondary);
  color: var(--rylcons-color-white);
}

.rylcons-heading__btn:active {
  transform: translateY(1px);
}

.rylcons-heading__btn-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.rylcons-heading__btn-icon svg {
  display: block;
}

/* Trusted users: the photo row and its line, below everything else in the
   widget. The top margin is the gap between the heading block and this row.
   That is internal to the widget, so Elementor cannot reach it; section
   spacing above and below the widget still belongs to the container. */
.rylcons-heading__trusted {
  margin-top: 48px;
}

.rylcons-heading__avatars {
  display: flex;
  align-items: center;
}

/* Scoped one level deeper than the bare class on purpose: Elementor ships
   `.elementor img { border: none; border-radius: 0; height: auto }`, which
   outranks a single class and would flatten these photos. */
.rylcons-heading .rylcons-heading__avatar {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--rylcons-radius-pill);
  border: 2px solid var(--rylcons-color-white);
  object-fit: cover;
  flex-shrink: 0;
}

.rylcons-heading__avatar + .rylcons-heading__avatar {
  margin-left: -14px;
}

.rylcons-heading__trusted-text {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.4;
  color: var(--rylcons-color-primary);
}

/* View 2: the same parts stacked in one column, for use beside another element
   in a two column grid. View 3 is the same column, centred, so it shares every
   rule here and adds only the centring below. */
.rylcons-heading--stacked .rylcons-heading__grid,
.rylcons-heading--centered .rylcons-heading__grid {
  display: block;
}

.rylcons-heading--stacked .rylcons-heading__lead,
.rylcons-heading--stacked .rylcons-heading__aside,
.rylcons-heading--centered .rylcons-heading__lead,
.rylcons-heading--centered .rylcons-heading__aside {
  flex-basis: auto;
  min-width: 0;
}

.rylcons-heading--stacked .rylcons-heading__aside,
.rylcons-heading--centered .rylcons-heading__aside {
  margin-top: 22px;
}

.rylcons-heading--stacked .rylcons-heading__desc,
.rylcons-heading--centered .rylcons-heading__desc {
  max-width: 560px;
}

/* View 3: the stacked column, centre aligned. The eyebrow gets its second set
   of pill lines from the shared .rylcons-eyebrow--center block, the same one
   the countries grid uses. */
.rylcons-heading--centered {
  text-align: center;
}

/* The title and the description are capped by their Max Width controls, so
   they need centring in their own right, not just their text. */
.rylcons-heading--centered .rylcons-title,
.rylcons-heading--centered .rylcons-heading__desc {
  margin-inline: auto;
}

/* The aside is a column flex box aligned to the start, which would leave the
   button on the left whatever the text alignment says. */
.rylcons-heading--centered .rylcons-heading__aside {
  align-items: center;
}

/* Same reason: the photo row is a flex box, so text-align cannot reach it. */
.rylcons-heading--centered .rylcons-heading__trusted {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --------------------------------------------------------------------------
   5. Royal Services Grid — the card block is shared
   -------------------------------------------------------------------------- */

/* Royal Process Steps renders this same grid and card markup, so it needs no
   rules of its own; it only adds a `rylcons-process` root class as a hook for
   the day the two designs part company. Change anything here and check both.

   No background and no outer spacing here on purpose, sides included; the
   Elementor container supplies the gutter. */
.rylcons-services {
  font-family: var(--rylcons-font-family);
}

.rylcons-services__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(320px, auto);
  gap: 24px;
}

.rylcons-services__cell {
  border-radius: var(--rylcons-radius-md);
  overflow: hidden;
}

/* Image cell: the featured image as a centred, cropped background. */
.rylcons-services__media {
  background-color: var(--rylcons-color-border);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Detail cell: arrow pinned top right, title top, description at the bottom. */
.rylcons-services__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background-color: var(--rylcons-color-white);
  color: inherit;
  text-decoration: none;
}

.rylcons-services__arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-primary);
  color: var(--rylcons-color-white);
  transition: background-color var(--rylcons-transition);
}

.rylcons-services__arrow svg {
  display: block;
}

.rylcons-services__card:hover .rylcons-services__arrow,
.rylcons-services__card:focus-visible .rylcons-services__arrow {
  background-color: var(--rylcons-color-secondary);
}

/* Scoped to three classes on purpose: on pages using the default template the
   theme's `.site-main .entry-content h3` / `p` rules are (0,2,1) and would
   otherwise win, resetting the card's margins and sizes. Elementor's own
   control selectors carry four classes, so they still win over these. */
.rylcons-services .rylcons-services__card .rylcons-services__title {
  margin: 0;
  max-width: calc(100% - 46px);
  font-size: 1.25rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.3;
  color: var(--rylcons-color-primary);
}

/* Pushed to the foot of the card, as in the design. */
.rylcons-services .rylcons-services__card .rylcons-services__desc {
  margin: auto 0 0;
  padding-top: 24px;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.6;
  color: var(--rylcons-color-text-muted);
}

.rylcons-services__explore {
  display: flex;
  align-items: flex-end;
  padding: 28px;
  background-color: var(--rylcons-color-primary);
  color: var(--rylcons-color-white);
  font-size: 32px;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.25;
  text-decoration: none;
  transition: background-color var(--rylcons-transition);
}

.rylcons-services__explore:hover,
.rylcons-services__explore:focus-visible {
  background-color: var(--rylcons-color-secondary);
}

/* --------------------------------------------------------------------------
   6. Royal Number Stats
   -------------------------------------------------------------------------- */

/* The root stays bare; the white panel is the inner element, so background and
   padding belong to the design rather than to section chrome. */
.rylcons-stats {
  font-family: var(--rylcons-font-family);
}

.rylcons-stats__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 40px;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-white);
}

/* Heading and subheading share one column, so the flex basis lives here and
   they stack inside it. The wrapper is also what gives the two text rules
   below a third class: the theme's `.site-main .entry-content h2` / `p` are
   (0,2,1) and would otherwise repaint them on default-template pages. */
.rylcons-stats__head {
  flex: 0 1 40%;
  min-width: 0;
}

.rylcons-stats .rylcons-stats__head .rylcons-stats__title {
  margin: 0;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--rylcons-color-primary);
}

.rylcons-stats .rylcons-stats__head .rylcons-stats__subtitle {
  margin: 10px 0 0;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.5;
  color: var(--rylcons-color-text-muted);
}

.rylcons-stats__list {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
}

/* Rules sit BETWEEN items only, matching the design: three rules for four
   items. Each rule is the item's own leading border, so it never dangles after
   the last one, and the first item drops it because there is nothing to its
   left to separate it from.

   basis auto, not 0: each item starts at its own content width and only then
   shares the spare space, so a longer label does not get squeezed onto two
   lines while a short one keeps room to spare. */
.rylcons-stats__item {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: 28px;
  border-inline-start: 1px solid var(--rylcons-color-border);
}

.rylcons-stats__item:first-child {
  padding-inline-start: 0;
  border-inline-start-color: transparent;
}

.rylcons-stats__card--no-dividers .rylcons-stats__item {
  border-inline-start-color: transparent;
}

.rylcons-stats__value {
  display: block;
  margin-bottom: 8px;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--rylcons-color-primary);
}

.rylcons-stats__label {
  display: block;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.4;
  color: var(--rylcons-color-text-muted);
}

/* --------------------------------------------------------------------------
   7. Royal Countries Grid
   -------------------------------------------------------------------------- */

/* No background here on purpose: the design's navy is set on the Elementor
   container, so this widget stays transparent. */
.rylcons-countries {
  font-family: var(--rylcons-font-family);
}

.rylcons-countries__head {
  margin-bottom: 40px;
  text-align: center;
}

/* The shared eyebrow and title default to navy, which disappears on the dark
   panel this widget is designed for. Both are colour controls, so a light
   background just needs them set back. */
.rylcons-countries .rylcons-eyebrow__text,
.rylcons-countries__title {
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-countries__title {
  margin: 0;
}

.rylcons-countries__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.rylcons-countries__cell {
  border-radius: var(--rylcons-radius-md);
  overflow: hidden;
  text-decoration: none;
}

.rylcons-countries__card {
  display: flex;
  flex-direction: column;
  background-color: var(--rylcons-color-white);
  color: inherit;
}

.rylcons-countries__media {
  display: block;
  height: 108px;
  flex-shrink: 0;
  background-color: var(--rylcons-color-border);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.rylcons-countries__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px;
}

.rylcons-countries__name {
  display: block;
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.3;
  color: var(--rylcons-color-primary);
}

.rylcons-countries__desc {
  display: block;
  margin-top: 16px;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.6;
  color: var(--rylcons-color-text-muted);
}

/* A span, not a link: the whole card is already the anchor. */
.rylcons-countries__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 12px 14px;
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-footer-bg);
  color: var(--rylcons-color-primary);
  font-size: 0.8125rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.2;
  transition: background-color var(--rylcons-transition), color var(--rylcons-transition);
}

.rylcons-countries__desc + .rylcons-countries__btn {
  margin-top: 24px;
}

.rylcons-countries__card:hover .rylcons-countries__btn,
.rylcons-countries__card:focus-visible .rylcons-countries__btn {
  background-color: var(--rylcons-color-primary);
  color: var(--rylcons-color-white);
}

.rylcons-countries__btn-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.rylcons-countries__btn-icon svg {
  display: block;
}

.rylcons-countries__explore {
  display: flex;
  align-items: flex-end;
  padding: 28px;
  background-color: var(--rylcons-color-secondary);
  color: var(--rylcons-color-white);
  font-size: 1.5rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.25;
  transition: background-color var(--rylcons-transition);
}

.rylcons-countries__explore:hover,
.rylcons-countries__explore:focus-visible {
  background-color: var(--rylcons-color-secondary-dark);
}

/* --------------------------------------------------------------------------
   8. Royal How It Works
   -------------------------------------------------------------------------- */

/* No background and no outer top/bottom spacing here on purpose. */
.rylcons-steps {
  font-family: var(--rylcons-font-family);
}

.rylcons-steps__grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: 100px;
  row-gap: 48px;
  align-items: flex-start;
}

.rylcons-steps__lead {
  flex: 0 1 46%;
  min-width: 0;
}

.rylcons-steps__aside {
  flex: 1 1 380px;
  min-width: 0;
}

.rylcons-steps__title {
  margin: 0;
}

.rylcons-steps__media {
  margin-top: 40px;
}

.rylcons-steps__image {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--rylcons-radius-md);
}

/* The timeline rule is the list's own leading border, so it always spans
   exactly the steps that are rendered. */
.rylcons-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-inline-start: 2px solid var(--rylcons-color-footer-bg);
}

.rylcons-steps__item {
  position: relative;
  padding-inline-start: 40px;
}

.rylcons-steps__item + .rylcons-steps__item {
  margin-top: 44px;
}

.rylcons-steps__num {
  display: block;
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: var(--rylcons-fw-medium);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--rylcons-color-text-muted);
}

/* The dot hangs off the title, so it lines up with the title whatever height
   the number label above it happens to be. */
.rylcons-steps__item-title {
  position: relative;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.35;
  color: var(--rylcons-color-primary);
}

.rylcons-steps__item-title::before {
  content: "";
  position: absolute;
  inset-inline-start: -46px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  border-radius: var(--rylcons-radius-pill);
  background-color: var(--rylcons-color-secondary);
}

.rylcons-steps__desc {
  margin: 12px 0 0;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.6;
  color: var(--rylcons-color-text-muted);
}

/* --------------------------------------------------------------------------
   9. Royal Success Stories
   -------------------------------------------------------------------------- */

/* No background and no outer top/bottom spacing here on purpose. */
.rylcons-stories {
  font-family: var(--rylcons-font-family);
}

/* Swiper needs the track to allow overflow while the viewport clips it. */
.rylcons-stories__slider {
  width: 100%;
  overflow: hidden;
}

/* Simple view: the same cards in rows instead of a slider. overflow is hidden
   for the same reason the slider hides it — the rule under each card overhangs
   by one gap so the line reads as continuous, and the overhang past the last
   column has to be clipped. */
.rylcons-stories__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  overflow: hidden;
  --rylcons-stories-gap: 24px;
}

/* Equal height cards without height:100%. That would resolve against the
   slide, whose height Swiper derives from the content, and the circular
   reference leaves the card measured short and clipped. Letting the slide
   stretch and the card flex into it keeps the real content height. */
/* The rule under each slide. A pseudo-element rather than a border so it can
   run on through the gap to the next slide, which is what makes the line read
   as continuous in the design. The overhang past the last slide is clipped by
   Swiper's viewport. */
.rylcons-stories__slide {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  padding-bottom: 16px;
}

.rylcons-stories__slide::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: calc(100% + var(--rylcons-stories-gap, 24px));
  height: 1px;
  background-color: var(--rylcons-color-border);
}

/* The highlight follows the middle visible slide, which the script marks,
   rather than Swiper's own active (leftmost) slide. */
.rylcons-stories__slide.rylcons-slide-highlight::after {
  background-color: var(--rylcons-color-primary);
}

.rylcons-stories--no-rule .rylcons-stories__slide {
  padding-bottom: 0;
}

.rylcons-stories--no-rule .rylcons-stories__slide::after {
  display: none;
}

.rylcons-stories__card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-footer-bg);
}

.rylcons-stories__mark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  color: var(--rylcons-color-white);
}

.rylcons-stories__mark svg {
  display: block;
  width: 30px;
  height: auto;
}

.rylcons-stories__quote {
  margin: 22px 0 0;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.65;
  color: var(--rylcons-color-primary);
}

.rylcons-stories__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 28px;
}

.rylcons-stories__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--rylcons-radius-pill);
  background-color: var(--rylcons-color-secondary);
  color: var(--rylcons-color-white);
  font-size: 0.9375rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
}

.rylcons-stories__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rylcons-stories__name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.3;
  color: var(--rylcons-color-primary);
}

.rylcons-stories__role {
  font-size: 0.75rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.4;
  color: var(--rylcons-color-text-muted);
}

/* Swiper chrome, kept in the theme's palette. The controls are siblings of the
   slider, so they need no absolute positioning of their own. */
.rylcons-stories__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

.rylcons-stories .swiper-pagination {
  position: static;
  width: auto;
  margin: 0;
}

.rylcons-stories .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: var(--rylcons-color-text-muted);
  opacity: 0.4;
}

.rylcons-stories .swiper-pagination-bullet-active {
  background-color: var(--rylcons-color-primary);
  opacity: 1;
}

.rylcons-stories .swiper-button-next,
.rylcons-stories .swiper-button-prev {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  color: var(--rylcons-color-primary);
}

.rylcons-stories .swiper-button-next::after,
.rylcons-stories .swiper-button-prev::after {
  font-size: 20px;
}

/* --------------------------------------------------------------------------
   10. Royal FAQs
   -------------------------------------------------------------------------- */

/* No background and no outer top/bottom spacing here on purpose. */
.rylcons-faqs {
  font-family: var(--rylcons-font-family);
}

.rylcons-faqs__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rylcons-faqs__item {
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-white);
}

/* summary carries its own marker in every engine; the plus below replaces it. */
.rylcons-faqs__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  color: var(--rylcons-color-primary);
}

.rylcons-faqs__question::-webkit-details-marker {
  display: none;
}

.rylcons-faqs__question::marker {
  content: "";
}

.rylcons-faqs__question-text {
  margin: 0;
  font-size: var(--rylcons-fs-nav);
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.4;
  color: inherit;
}

.rylcons-faqs__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  color: var(--rylcons-color-text-muted);
  transition: transform var(--rylcons-transition), color var(--rylcons-transition);
}

.rylcons-faqs__icon svg {
  display: block;
}

/* The plus becomes a cross rather than swapping in a second icon. */
.rylcons-faqs__item[open] .rylcons-faqs__icon {
  transform: rotate(45deg);
}

.rylcons-faqs__answer {
  padding: 0 20px 16px;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.65;
  color: var(--rylcons-color-text-muted);
}

.rylcons-faqs__answer p {
  margin: 0;
}

.rylcons-faqs__answer p + p {
  margin-top: 12px;
}

/* View 2 — the cards grid. Twelve tracks, and each card spans wide or narrow
   through its Card Width control, so the alternating rows of the design come
   from the cards, not from the grid. */
.rylcons-faqs__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(270px, auto);
  gap: 20px;
}

.rylcons-faqs__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-white);
}

.rylcons-faqs__card--wide {
  grid-column: span 8;
}

.rylcons-faqs__card--narrow {
  grid-column: span 4;
}

/* Question at the head, answer pushed to the foot. Three classes on purpose:
   the theme's .site-main .entry-content h3 rule is (0,2,1) and would repaint
   these on an ordinary page. */
.rylcons-faqs .rylcons-faqs__card .rylcons-faqs__card-question {
  display: block;
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.35;
  color: var(--rylcons-color-primary);
}

.rylcons-faqs .rylcons-faqs__card .rylcons-faqs__card-answer {
  margin-top: auto;
  padding-top: 24px;
  font-size: 1rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.5;
  color: var(--rylcons-color-text-muted);
}

.rylcons-faqs .rylcons-faqs__card .rylcons-faqs__card-answer p {
  margin: 0;
}

.rylcons-faqs .rylcons-faqs__card .rylcons-faqs__card-answer p + p {
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   11. Royal CTA Box
   -------------------------------------------------------------------------- */

/* The root stays bare; the coloured panel is the inner element, so section
   spacing and any outer background remain the container's job. */
.rylcons-cta {
  font-family: var(--rylcons-font-family);
}

/* overflow stays visible so the figure can rise above the top edge. */
.rylcons-cta__box {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  padding: 64px 40px;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-primary);
}

.rylcons-cta__content {
  position: relative;
  z-index: 1;
  max-width: 58%;
}

/* The shared eyebrow and title default to navy, which disappears on this dark
   panel. Both stay colour controls for a light background. */
.rylcons-cta .rylcons-eyebrow__text,
.rylcons-cta__title {
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-cta__title {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.2;
}

/* Each run on its own line, as in the design. */
.rylcons-cta__title .rylcons-title__main,
.rylcons-cta__title .rylcons-title__accent {
  display: block;
}

.rylcons-cta__desc {
  margin: 20px 0 0;
  max-width: 620px;
  font-size: var(--rylcons-fs-nav);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.65;
  color: var(--rylcons-color-text-muted);
}

.rylcons-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.rylcons-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: var(--rylcons-radius-sm);
  font-size: var(--rylcons-fs-btn);
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--rylcons-transition), color var(--rylcons-transition), transform var(--rylcons-transition);
}

.rylcons-cta__btn:active {
  transform: translateY(1px);
}

.rylcons-cta__btn--primary {
  background-color: var(--rylcons-color-secondary);
  color: var(--rylcons-color-white);
}

.rylcons-cta__btn--primary:hover,
.rylcons-cta__btn--primary:focus-visible {
  background-color: var(--rylcons-color-secondary-dark);
}

.rylcons-cta__btn--secondary {
  background-color: var(--rylcons-color-white);
  color: var(--rylcons-color-primary);
}

.rylcons-cta__btn--secondary:hover,
.rylcons-cta__btn--secondary:focus-visible {
  background-color: var(--rylcons-color-footer-bg);
}

.rylcons-cta__btn-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.rylcons-cta__btn-icon svg {
  display: block;
}

/* Anchored to the bottom right; any height beyond the panel shows above it. */
.rylcons-cta__media {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  line-height: 0;
  pointer-events: none;
}

.rylcons-cta .rylcons-cta__image {
  display: block;
  width: auto;
  height: 560px;
  max-width: none;
}

/* --------------------------------------------------------------------------
   12. Royal Google Rating
   -------------------------------------------------------------------------- */

/* No background and no outer spacing here on purpose: the Elementor container
   supplies both. */
.rylcons-rating {
  font-family: var(--rylcons-font-family);
}

/* The image is a cover background rather than an <img> so the badge can sit
   over it and the block keeps its height whatever the file's aspect ratio.
   A background has no intrinsic height, so one has to be set here or the block
   collapses to nothing. min-height rather than height, so the block can still
   grow: the height: 100% chain below lets it match a taller column beside it
   when the Elementor container stretches its widgets, and falls back to auto
   — leaving min-height to win — when it does not. */
.rylcons-rating__media {
  position: relative;
  min-height: 700px;
  height: 100%;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-border);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Both selectors on purpose: Elementor drops the .elementor-widget-container
   wrapper under its optimised DOM setting, so one or the other is the widget's
   real parent depending on the site's configuration. */
.elementor-widget-rylcons-google-rating .elementor-widget-container,
.rylcons-rating {
  height: 100%;
}

/* Anchored to one corner by the modifier below; the margin is the offset from
   that corner, so a single pair of controls works for all four corners. */
.rylcons-rating__badge {
  position: absolute;
  display: flex;
  align-items: center;
  column-gap: 10px;
  max-width: calc(100% - 40px);
  margin: 22px;
  padding: 16px 18px;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-white);
}

.rylcons-rating--bottom-left .rylcons-rating__badge {
  left: 0;
  bottom: 0;
}

.rylcons-rating--bottom-right .rylcons-rating__badge {
  right: 0;
  bottom: 0;
}

.rylcons-rating--top-left .rylcons-rating__badge {
  left: 0;
  top: 0;
}

.rylcons-rating--top-right .rylcons-rating__badge {
  right: 0;
  top: 0;
}

/* Square box for the mark. The inline SVG carries no width or height, so it
   takes the size of this span instead of its own artboard. */
.rylcons-rating__logo {
  display: block;
  flex-shrink: 0;
  width: 34px;
  line-height: 0;
}

.rylcons-rating__logo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Scoped one level deeper than the bare class on purpose: Elementor ships
   `.elementor img { border: none; border-radius: 0; height: auto }`, which
   outranks a single class. */
.rylcons-rating .rylcons-rating__logo-img {
  display: block;
  width: 100%;
  height: auto;
}

.rylcons-rating__body {
  min-width: 0;
}

.rylcons-rating__row {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Two identical star rows stacked: the empty one sets the size, the filled one
   is clipped to the rating's share of it. */
.rylcons-rating__stars {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.rylcons-rating__stars-base,
.rylcons-rating__stars-fill {
  display: flex;
  align-items: center;
  gap: 5px;
}

.rylcons-rating__stars-base {
  color: var(--rylcons-color-border);
}

.rylcons-rating__stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  color: var(--rylcons-color-secondary);
}

/* No shrinking: the filled row is narrower than its content by design, and
   flex items would otherwise squeeze to fit instead of being clipped. */
.rylcons-rating__star {
  display: block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  line-height: 0;
}

.rylcons-rating__star svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rylcons-rating__score {
  font-size: 14px;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.2;
  color: var(--rylcons-color-primary);
}

.rylcons-rating__caption {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: var(--rylcons-fw-medium);
  line-height: 1.4;
  color: var(--rylcons-color-text);
}

/* --------------------------------------------------------------------------
   13. Royal Detail With Image
   -------------------------------------------------------------------------- */

/* No background and no outer spacing here on purpose: the Elementor container
   supplies both. */
.rylcons-detail {
  font-family: var(--rylcons-font-family);
}

/* Two columns that wrap rather than a grid, so one width value works at every
   breakpoint: at 100% the text fills the row and the image drops underneath,
   instead of a second track being pushed off-screen.
   No column gap on purpose — the gap is the text column's own padding, so the
   two columns stay an exact split whatever the gap is set to. */
.rylcons-detail__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.rylcons-detail__content {
  flex: 0 1 50%;
  min-width: 0;
  padding-inline-end: var(--rylcons-detail-gap, 76px);
}

/* Basis under the text column's, so the pair never wraps before the width
   control says so; it then grows into whatever is left. */
.rylcons-detail__media {
  flex: 1 1 40%;
  min-width: 0;
  min-height: 420px;
  background-color: var(--rylcons-color-border);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Image on the left: the row is reversed rather than the markup, so the text
   still comes first once the columns stack. The gap swaps sides with it. */
.rylcons-detail--image-left .rylcons-detail__inner {
  flex-direction: row-reverse;
}

.rylcons-detail--image-left .rylcons-detail__content {
  padding-inline-end: 0;
  padding-inline-start: var(--rylcons-detail-gap, 76px);
}

/* Full bleed: the image runs to the screen edge while the text keeps the
   gutter a centred container would leave, as the design shows. 100% rather
   than 100vw keeps the scrollbar out of the sum, so nothing overflows
   sideways. The padding is on the row, whose width is the full section. */
.rylcons-detail--bleed .rylcons-detail__inner {
  padding-inline-start: max(var(--rylcons-container-padding), (100% - var(--rylcons-container-width)) / 2);
}

.rylcons-detail--bleed.rylcons-detail--image-left .rylcons-detail__inner {
  padding-inline-start: 0;
  padding-inline-end: max(var(--rylcons-container-padding), (100% - var(--rylcons-container-width)) / 2);
}

/* View 2: the text column becomes a coloured panel that meets the image with
   no gap. The side padding is fixed to the design; only the space above and
   below is a control, and the column centres what is left so the text sits in
   the middle of the panel however tall the image makes it. */
.rylcons-detail--view-2 .rylcons-detail__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 86px;
  padding-inline: 44px;
  background-color: var(--rylcons-color-primary);
}

/* The gap belongs to view 1: here the two columns touch. */
.rylcons-detail--view-2.rylcons-detail--image-left .rylcons-detail__content {
  padding-inline: 44px;
}

/* On the coloured panel every default text colour flips to the on-dark set.
   Scoped through __content for a third class: at two the theme's
   .site-main .entry-content h2 at (0,2,1) wins and paints the title navy on
   the navy panel, on any page using the default template. Three classes still
   sit under Elementor's own control selectors, so the colour controls win. */
.rylcons-detail--view-2 .rylcons-detail__content .rylcons-eyebrow__text,
.rylcons-detail--view-2 .rylcons-detail__content .rylcons-title,
.rylcons-detail--view-2 .rylcons-detail__content .rylcons-detail__subtitle,
.rylcons-detail--view-2 .rylcons-detail__content .rylcons-detail__author,
.rylcons-detail--view-2 .rylcons-detail__content .rylcons-detail__text {
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-detail__title {
  margin-bottom: 18px;
}

/* Sub heading and its attribution, kept in one block so the spacing control
   moves them together. */
.rylcons-detail__lead {
  margin-bottom: 26px;
}

.rylcons-detail__subtitle {
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.5;
  color: var(--rylcons-color-primary);
}

.rylcons-detail__author {
  margin: 6px 0 0;
  font-size: 0.75rem;
  font-style: italic;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.4;
  color: var(--rylcons-color-primary);
}

/* Editor content. The field is a WYSIWYG, so it arrives as paragraphs and
   lists; the blocks' own outer margins are dropped and the gaps set here,
   where the spacing controls can reach them. */
.rylcons-detail__text {
  font-size: var(--rylcons-fs-nav);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.65;
  color: var(--rylcons-color-primary);
}

.rylcons-detail__text > *:first-child {
  margin-top: 0;
}

.rylcons-detail__text > *:last-child {
  margin-bottom: 0;
}

.rylcons-detail__text p {
  margin: 0 0 18px;
}

.rylcons-detail__text a {
  color: var(--rylcons-color-secondary);
}

/* A list written in the editor becomes the panel from the design: one surface,
   rows divided by a hairline, each row carrying the chosen bullet mark. */
.rylcons-detail__text ul,
.rylcons-detail__text ol {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-footer-bg);
  overflow: hidden;
}

.rylcons-detail__text li {
  position: relative;
  margin: 0;
  padding: 16px 18px 16px 44px;
  font-size: 0.8125rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.5;
  color: var(--rylcons-color-primary);
}

.rylcons-detail__text li + li {
  border-top: 1px solid #f5f6f8;
}

/* The bullet is a mask rather than a background image, so the Bullet Colour
   control has something to change: the artwork supplies the shape and the
   background colour supplies the fill. Which artwork comes from the Bullet
   control, as a modifier on the widget root. */
.rylcons-detail__text li::before {
  content: "";
  position: absolute;
  inset-inline-start: 18px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  background-color: var(--rylcons-color-secondary);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* The star, the original mark, and the badge from the country pages. A
   widget saved before the control existed has no modifier class, so the
   bare selector keeps drawing the star for it. */
.rylcons-detail__text li::before,
.rylcons-detail--bullet-star .rylcons-detail__text li::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.20284 11.9672L7.10034 9.75175L9.99784 11.9672L8.87084 8.298L11.5541 6.48125H8.28359L7.10034 2.7825L5.91709 6.48125H2.64659L5.32984 8.298L4.20284 11.9672ZM7.10034 11.3825L3.43559 14.1813C3.30876 14.2749 3.17893 14.3158 3.04609 14.304C2.91343 14.2923 2.79201 14.2521 2.68184 14.1832C2.57151 14.1144 2.48968 14.0182 2.43634 13.8945C2.38284 13.7707 2.37918 13.6333 2.42534 13.4825L3.82734 8.90575L0.276094 6.34725C0.14576 6.26392 0.0620937 6.15533 0.0250937 6.0215C-0.0119063 5.8875 -0.00798963 5.76042 0.0368437 5.64025C0.0818437 5.52025 0.154427 5.4165 0.254594 5.329C0.35476 5.24167 0.48026 5.198 0.631093 5.198H5.06584L6.49259 0.46725C6.53876 0.316417 6.61901 0.200834 6.73334 0.1205C6.84768 0.0401668 6.97001 0 7.10034 0C7.23068 0 7.35301 0.0401668 7.46734 0.1205C7.58168 0.200834 7.66193 0.316417 7.70809 0.46725L9.13484 5.198H13.5696C13.7204 5.198 13.8459 5.24167 13.9461 5.329C14.0463 5.4165 14.1188 5.52025 14.1638 5.64025C14.2087 5.76042 14.2126 5.8875 14.1756 6.0215C14.1386 6.15533 14.0571 6.26392 13.9311 6.34725L10.3733 8.90575L11.7753 13.4825C11.8215 13.6333 11.8178 13.7707 11.7643 13.8945C11.711 14.0182 11.6292 14.1144 11.5188 14.1832C11.4087 14.2521 11.2873 14.2923 11.1546 14.304C11.0218 14.3158 10.8941 14.2749 10.7716 14.1813L7.10034 11.3825Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.20284 11.9672L7.10034 9.75175L9.99784 11.9672L8.87084 8.298L11.5541 6.48125H8.28359L7.10034 2.7825L5.91709 6.48125H2.64659L5.32984 8.298L4.20284 11.9672ZM7.10034 11.3825L3.43559 14.1813C3.30876 14.2749 3.17893 14.3158 3.04609 14.304C2.91343 14.2923 2.79201 14.2521 2.68184 14.1832C2.57151 14.1144 2.48968 14.0182 2.43634 13.8945C2.38284 13.7707 2.37918 13.6333 2.42534 13.4825L3.82734 8.90575L0.276094 6.34725C0.14576 6.26392 0.0620937 6.15533 0.0250937 6.0215C-0.0119063 5.8875 -0.00798963 5.76042 0.0368437 5.64025C0.0818437 5.52025 0.154427 5.4165 0.254594 5.329C0.35476 5.24167 0.48026 5.198 0.631093 5.198H5.06584L6.49259 0.46725C6.53876 0.316417 6.61901 0.200834 6.73334 0.1205C6.84768 0.0401668 6.97001 0 7.10034 0C7.23068 0 7.35301 0.0401668 7.46734 0.1205C7.58168 0.200834 7.66193 0.316417 7.70809 0.46725L9.13484 5.198H13.5696C13.7204 5.198 13.8459 5.24167 13.9461 5.329C14.0463 5.4165 14.1188 5.52025 14.1638 5.64025C14.2087 5.76042 14.2126 5.8875 14.1756 6.0215C14.1386 6.15533 14.0571 6.26392 13.9311 6.34725L10.3733 8.90575L11.7753 13.4825C11.8215 13.6333 11.8178 13.7707 11.7643 13.8945C11.711 14.0182 11.6292 14.1144 11.5188 14.1832C11.4087 14.2521 11.2873 14.2923 11.1546 14.304C11.0218 14.3158 10.8941 14.2749 10.7716 14.1813L7.10034 11.3825Z' fill='%23000'/%3E%3C/svg%3E");
}

.rylcons-detail--bullet-badge .rylcons-detail__text li::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg width='17' height='20' viewBox='0 0 17 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.221 18.239L5.10175 19.3038C5.01592 19.3329 4.93192 19.3525 4.84975 19.3625C4.76742 19.3725 4.68517 19.3775 4.603 19.3775C4.18167 19.3775 3.815 19.2305 3.503 18.9365C3.19117 18.6423 3.03525 18.268 3.03525 17.8135V12.2405L0.2235 7.71025C0.136833 7.57442 0.0779165 7.43775 0.0467499 7.30025C0.0155832 7.16275 0 7.02317 0 6.8815C0 6.74 0.0155832 6.59933 0.0467499 6.4595C0.0779165 6.31983 0.136833 6.18208 0.2235 6.04625L3.49925 0.732001C3.64275 0.493667 3.83158 0.312083 4.06575 0.18725C4.30008 0.0624164 4.55458 0 4.82925 0H11.6127C11.8874 0 12.1419 0.0624164 12.3763 0.18725C12.6104 0.312083 12.7992 0.493667 12.9427 0.732001L16.2247 6.04625C16.3072 6.18208 16.3641 6.31875 16.3952 6.45625C16.4264 6.59375 16.442 6.73325 16.442 6.87475C16.442 7.01642 16.4264 7.15708 16.3952 7.29675C16.3641 7.43658 16.3072 7.57442 16.2247 7.71025L13.4068 12.2405V17.8135C13.4068 18.268 13.2497 18.6423 12.9355 18.9365C12.6212 19.2305 12.2544 19.3775 11.8353 19.3775C11.7536 19.3775 11.6721 19.3725 11.5907 19.3625C11.5096 19.3525 11.4261 19.3329 11.3403 19.3038L8.221 18.239ZM8.221 16.9128L11.7465 18.0725C11.8492 18.1045 11.9422 18.0917 12.0255 18.034C12.1088 17.9763 12.1505 17.893 12.1505 17.784V13.7563H4.2915V17.784C4.2915 17.893 4.33317 17.9763 4.4165 18.034C4.49983 18.0917 4.59283 18.1045 4.6955 18.0725L8.221 16.9128ZM4.828 12.5H11.6127C11.6639 12.5 11.712 12.4872 11.757 12.4615C11.8018 12.4358 11.8402 12.4006 11.8722 12.3558L15.164 7.04175C15.1917 6.99042 15.2055 6.93592 15.2055 6.87825C15.2055 6.82058 15.1917 6.76608 15.164 6.71475L11.8737 1.40075C11.8417 1.35575 11.8032 1.32042 11.7582 1.29475C11.7134 1.26925 11.6653 1.2565 11.614 1.2565H4.82925C4.77808 1.2565 4.73 1.26925 4.685 1.29475C4.64017 1.32042 4.60175 1.35575 4.56975 1.40075L1.278 6.71475C1.25033 6.76608 1.2365 6.82058 1.2365 6.87825C1.2365 6.93592 1.25033 6.99042 1.278 7.04175L4.56825 12.3558C4.60025 12.4006 4.63875 12.4358 4.68375 12.4615C4.72858 12.4872 4.77667 12.5 4.828 12.5ZM7.171 8.65325L10.9633 4.836C11.0838 4.712 11.2288 4.65083 11.3983 4.6525C11.5678 4.65433 11.7144 4.71425 11.8383 4.83225C11.9686 4.95858 12.0348 5.1095 12.0368 5.285C12.0386 5.46033 11.9776 5.61067 11.8538 5.736L7.719 9.88C7.56233 10.036 7.3795 10.114 7.1705 10.114C6.9615 10.114 6.779 10.036 6.623 9.88L4.60375 7.8705C4.47342 7.7465 4.4065 7.59983 4.403 7.4305C4.39967 7.261 4.46208 7.11217 4.59025 6.984C4.71842 6.85583 4.86908 6.79175 5.04225 6.79175C5.21525 6.79175 5.36908 6.85475 5.50375 6.98075L7.171 8.65325ZM8.221 13.7563H4.2915H12.1505H8.221Z' fill='%23000'/></svg>");
  mask-image: url("data:image/svg+xml,<svg width='17' height='20' viewBox='0 0 17 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.221 18.239L5.10175 19.3038C5.01592 19.3329 4.93192 19.3525 4.84975 19.3625C4.76742 19.3725 4.68517 19.3775 4.603 19.3775C4.18167 19.3775 3.815 19.2305 3.503 18.9365C3.19117 18.6423 3.03525 18.268 3.03525 17.8135V12.2405L0.2235 7.71025C0.136833 7.57442 0.0779165 7.43775 0.0467499 7.30025C0.0155832 7.16275 0 7.02317 0 6.8815C0 6.74 0.0155832 6.59933 0.0467499 6.4595C0.0779165 6.31983 0.136833 6.18208 0.2235 6.04625L3.49925 0.732001C3.64275 0.493667 3.83158 0.312083 4.06575 0.18725C4.30008 0.0624164 4.55458 0 4.82925 0H11.6127C11.8874 0 12.1419 0.0624164 12.3763 0.18725C12.6104 0.312083 12.7992 0.493667 12.9427 0.732001L16.2247 6.04625C16.3072 6.18208 16.3641 6.31875 16.3952 6.45625C16.4264 6.59375 16.442 6.73325 16.442 6.87475C16.442 7.01642 16.4264 7.15708 16.3952 7.29675C16.3641 7.43658 16.3072 7.57442 16.2247 7.71025L13.4068 12.2405V17.8135C13.4068 18.268 13.2497 18.6423 12.9355 18.9365C12.6212 19.2305 12.2544 19.3775 11.8353 19.3775C11.7536 19.3775 11.6721 19.3725 11.5907 19.3625C11.5096 19.3525 11.4261 19.3329 11.3403 19.3038L8.221 18.239ZM8.221 16.9128L11.7465 18.0725C11.8492 18.1045 11.9422 18.0917 12.0255 18.034C12.1088 17.9763 12.1505 17.893 12.1505 17.784V13.7563H4.2915V17.784C4.2915 17.893 4.33317 17.9763 4.4165 18.034C4.49983 18.0917 4.59283 18.1045 4.6955 18.0725L8.221 16.9128ZM4.828 12.5H11.6127C11.6639 12.5 11.712 12.4872 11.757 12.4615C11.8018 12.4358 11.8402 12.4006 11.8722 12.3558L15.164 7.04175C15.1917 6.99042 15.2055 6.93592 15.2055 6.87825C15.2055 6.82058 15.1917 6.76608 15.164 6.71475L11.8737 1.40075C11.8417 1.35575 11.8032 1.32042 11.7582 1.29475C11.7134 1.26925 11.6653 1.2565 11.614 1.2565H4.82925C4.77808 1.2565 4.73 1.26925 4.685 1.29475C4.64017 1.32042 4.60175 1.35575 4.56975 1.40075L1.278 6.71475C1.25033 6.76608 1.2365 6.82058 1.2365 6.87825C1.2365 6.93592 1.25033 6.99042 1.278 7.04175L4.56825 12.3558C4.60025 12.4006 4.63875 12.4358 4.68375 12.4615C4.72858 12.4872 4.77667 12.5 4.828 12.5ZM7.171 8.65325L10.9633 4.836C11.0838 4.712 11.2288 4.65083 11.3983 4.6525C11.5678 4.65433 11.7144 4.71425 11.8383 4.83225C11.9686 4.95858 12.0348 5.1095 12.0368 5.285C12.0386 5.46033 11.9776 5.61067 11.8538 5.736L7.719 9.88C7.56233 10.036 7.3795 10.114 7.1705 10.114C6.9615 10.114 6.779 10.036 6.623 9.88L4.60375 7.8705C4.47342 7.7465 4.4065 7.59983 4.403 7.4305C4.39967 7.261 4.46208 7.11217 4.59025 6.984C4.71842 6.85583 4.86908 6.79175 5.04225 6.79175C5.21525 6.79175 5.36908 6.85475 5.50375 6.98075L7.171 8.65325ZM8.221 13.7563H4.2915H12.1505H8.221Z' fill='%23000'/></svg>");
}


/* View 2 extras: a mark above the heading, and three boxes under the content.
   Both are rendered only in view 2, so they need no view scoping here. */
.rylcons-detail__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  line-height: 0;
  color: var(--rylcons-color-secondary);
}

/* Scoped one level deeper than the bare class on purpose: Elementor ships an
   img reset at (0,1,1) that would beat a single class. */
.rylcons-detail .rylcons-detail__icon img,
.rylcons-detail .rylcons-detail__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  fill: currentColor;
}

.rylcons-detail .rylcons-detail__icon i {
  font-size: 56px;
  line-height: 1;
}

/* One bordered block; the boxes draw the hairlines between them. Every box
   carries a top and a left hairline and the grid is pulled up and left by one
   pixel, so the outermost lines tuck under the block border and are clipped
   away. */
.rylcons-detail__boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 32px;
  border: 1px solid #0c1e8f;
  border-radius: var(--rylcons-radius-md);
  overflow: hidden;
}

.rylcons-detail__box {
  display: flex;
  gap: 14px;
  min-width: 0;
  padding: 22px;
  border-top: 1px solid #0c1e8f;
  border-left: 1px solid #0c1e8f;
  margin: -1px 0 0 -1px;
}

/* The third box runs the width of the block, as in the design. Keyed to its
   own position in the panel rather than to nth-child, so emptying box 2 does
   not hand the span to the wrong box. */
.rylcons-detail__box--3 {
  grid-column: 1 / -1;
}

.rylcons-detail__box-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  line-height: 0;
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-detail .rylcons-detail__box-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  fill: currentColor;
}

.rylcons-detail__box-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Three classes: the box title tag is a control, and the theme's
   .site-main .entry-content h4 rule is (0,2,1). */
.rylcons-detail__boxes .rylcons-detail__box-text .rylcons-detail__box-title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.35;
  color: var(--rylcons-color-text-on-dark);
}

/* A literal, not a token: the reading grey the palette carries is for text on
   white and disappears against this navy. */
.rylcons-detail__boxes .rylcons-detail__box-text .rylcons-detail__box-desc {
  font-size: 0.8125rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.5;
  color: #afb8ca;
}

/* --------------------------------------------------------------------------
   14. Royal Services Grid Items
   -------------------------------------------------------------------------- */

/* No background and no outer spacing here on purpose, sides included; the
   Elementor container supplies the gutter. */
.rylcons-sgrid {
  font-family: var(--rylcons-font-family);
}

/* Four equal tracks; each item spans as many as its Width control says, so the
   mixed rows of the design come from the items, not from the grid. */
.rylcons-sgrid__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(270px, auto);
  gap: 20px;
}

.rylcons-sgrid__item {
  min-width: 0;
  border-radius: var(--rylcons-radius-md);
  overflow: hidden;
}

/* Image cell: the photo as a centred, cropped background. */
.rylcons-sgrid__media {
  background-color: var(--rylcons-color-border);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Content cell: icon and title on one line at the top, text pushed to the
   foot of the box, as in the design. */
.rylcons-sgrid__card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background-color: var(--rylcons-color-primary);
  color: var(--rylcons-color-text-on-dark);
  text-decoration: none;
  transition: background-color var(--rylcons-transition);
}

.rylcons-sgrid__card--link:hover,
.rylcons-sgrid__card--link:focus-visible {
  background-color: var(--rylcons-color-primary-dark);
}

.rylcons-sgrid__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Square box with the artwork contained inside it, so icons of different
   proportions still leave every title on the same line. Scoped one level
   deeper than the bare class on purpose: Elementor ships an img reset at
   (0,1,1) that would beat a single class. */
.rylcons-sgrid .rylcons-sgrid__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  line-height: 0;
  color: var(--rylcons-color-secondary);
}

.rylcons-sgrid .rylcons-sgrid__icon img,
.rylcons-sgrid .rylcons-sgrid__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  fill: currentColor;
}

.rylcons-sgrid .rylcons-sgrid__icon i {
  font-size: 26px;
  line-height: 1;
}

/* Title and editor text are scoped to (0,3,0) on purpose: on pages using the
   default template the theme's `.site-main .entry-content h3` and `p`/`ul`
   rules would otherwise win and paint the title navy on navy. */
.rylcons-sgrid .rylcons-sgrid__card .rylcons-sgrid__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.3;
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-sgrid .rylcons-sgrid__card .rylcons-sgrid__desc {
  margin-top: auto;
  padding-top: 24px;
  font-size: 0.875rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.6;
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-sgrid--desc-top .rylcons-sgrid__card .rylcons-sgrid__desc {
  margin-top: 0;
}

/* Editor content: paragraphs and lists arrive with their own outer margins;
   they are dropped and the gap between blocks is set where the Paragraph
   Spacing control can reach it. */
.rylcons-sgrid .rylcons-sgrid__card .rylcons-sgrid__desc > * {
  margin: 0;
}

.rylcons-sgrid .rylcons-sgrid__card .rylcons-sgrid__desc > * + * {
  margin-top: 14px;
}

.rylcons-sgrid .rylcons-sgrid__card .rylcons-sgrid__desc ul,
.rylcons-sgrid .rylcons-sgrid__card .rylcons-sgrid__desc ol {
  padding-inline-start: 18px;
}

.rylcons-sgrid .rylcons-sgrid__card .rylcons-sgrid__desc li {
  margin: 0;
}

.rylcons-sgrid .rylcons-sgrid__card .rylcons-sgrid__desc a {
  color: inherit;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   15. Royal Team
   -------------------------------------------------------------------------- */

/* No background and no outer spacing here on purpose, sides included: the
   design sits on a navy Elementor container, which supplies both. Text
   defaults to the on-dark colours for that reason. */
.rylcons-team {
  font-family: var(--rylcons-font-family);
}

.rylcons-team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 46px;
}

.rylcons-team__member {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--rylcons-color-text-on-dark);
}

/* Portrait crop of whatever is uploaded; the ratio is the design's, and the
   Photo Height control overrides it when a fixed height is wanted. Scoped one
   level deeper than the bare class on purpose: Elementor ships an img reset
   at (0,1,1) that would beat a single class. */
.rylcons-team .rylcons-team__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-border);
  margin-bottom: 42px;
}

/* Short accent rule between the photo and the text. */
.rylcons-team__rule {
  width: 35%;
  height: 1px;
  background-color: var(--rylcons-color-secondary);
  opacity: 0.5;
  margin-bottom: 20px;
}

/* Text rules are scoped to (0,3,0) on purpose: on pages using the default
   template the theme's `.site-main .entry-content h3` / `a` rules would
   otherwise win and paint the name navy on navy. */
.rylcons-team .rylcons-team__member .rylcons-team__designation {
  margin: 0 0 36px;
  font-size: 0.75rem;
  font-weight: var(--rylcons-fw-medium);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rylcons-color-text-on-dark);
  opacity: 0.85;
}

.rylcons-team .rylcons-team__member .rylcons-team__name {
  margin: 0 0 18px;
  font-size: 1.25rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.3;
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-team__contacts {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}

.rylcons-team__contact {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.4;
  color: var(--rylcons-color-text-muted);
}

/* Square box with the artwork contained inside it, so the envelope and the
   handset leave every label on the same line. */
.rylcons-team__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  line-height: 0;
  color: var(--rylcons-color-secondary);
}

.rylcons-team__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rylcons-team .rylcons-team__member .rylcons-team__link {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--rylcons-transition);
}

.rylcons-team .rylcons-team__member .rylcons-team__link:hover,
.rylcons-team .rylcons-team__member .rylcons-team__link:focus-visible {
  color: var(--rylcons-color-text-on-dark);
}

/* Two phone numbers sit on one row divided by a hairline, as in the design. */
.rylcons-team__sep {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-inline: 10px;
  background-color: currentColor;
  opacity: 0.5;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   16. Royal Vision
   -------------------------------------------------------------------------- */

/* Full width by design: no maximum width, no background and no outer spacing
   here, so the Elementor container decides how wide the block runs and how
   much room sits around it. */
.rylcons-vision {
  font-family: var(--rylcons-font-family);
}

/* Every text rule below is scoped to three classes on purpose. On pages using
   the default template the theme's `.site-main .entry-content h2` / `h3` / `p`
   rules are (0,2,1) and would beat a single class, resetting the sizes and
   margins set here. Elementor's own control selectors carry four classes, so
   they still win over these. */
.rylcons-vision.rylcons-vision--align-center .rylcons-vision__quote,
.rylcons-vision.rylcons-vision--align-left .rylcons-vision__quote {
  margin: 0 0 24px;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.35;
  color: var(--rylcons-color-primary);
}

/* Centred is the design's default. The quote is a block, so its own margins
   have to centre it as well as its text, or a Maximum Width would sit left. */
.rylcons-vision.rylcons-vision--align-center .rylcons-vision__quote {
  margin-inline: auto;
  text-align: center;
}

.rylcons-vision.rylcons-vision--align-left .rylcons-vision__quote {
  text-align: left;
}

/* Every label takes an equal share of the bar, so the set stays evenly spaced
   however many there are and however long each label is. */
.rylcons-vision__bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
  padding: 20px 24px;
  margin-bottom: 20px;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-primary);
}

.rylcons-vision .rylcons-vision__bar .rylcons-vision__step {
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: var(--rylcons-fw-semibold);
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-vision--align-center .rylcons-vision__bar .rylcons-vision__step {
  text-align: center;
}

.rylcons-vision--align-left .rylcons-vision__bar .rylcons-vision__step {
  text-align: left;
}

.rylcons-vision__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* The cards keep the design's left alignment whatever the Alignment control
   says: the label and its icon sit on one row and the text block is pushed to
   the foot, which is what leaves the open space under the label. */
.rylcons-vision__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 260px;
  padding: 24px;
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-footer-bg);
  text-align: left;
}

.rylcons-vision__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.rylcons-vision .rylcons-vision__card .rylcons-vision__label {
  margin: 0;
  min-width: 0;
  font-size: 1rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.3;
  color: var(--rylcons-color-primary);
}

/* Square box with the mark centred inside it, so icons of different
   proportions leave every label on the same line. Scoped one level deeper
   than the bare class on purpose: Elementor ships an img reset at (0,1,1)
   that would beat a single class. */
.rylcons-vision__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  line-height: 0;
  border-radius: 8px;
  background-color: #cdd2de;
  color: var(--rylcons-color-white);
}

.rylcons-vision .rylcons-vision__icon svg,
.rylcons-vision .rylcons-vision__icon img {
  display: block;
  width: 17px;
  height: 17px;
  object-fit: contain;
}

/* Pushed to the foot of the card, as in the design. */
.rylcons-vision__card-body {
  margin-top: auto;
  padding-top: 24px;
}

.rylcons-vision .rylcons-vision__card .rylcons-vision__card-title {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.4;
  color: var(--rylcons-color-primary);
}

.rylcons-vision .rylcons-vision__card .rylcons-vision__card-text {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.6;
  color: var(--rylcons-color-text-muted);
}

/* --------------------------------------------------------------------------
   17. Royal Application CTA
   -------------------------------------------------------------------------- */

/* Full width by design: no maximum width, no background and no outer spacing
   here, so the widget fills whatever container or grid cell it is dropped
   into and the container decides how narrow that is. */
.rylcons-appcta {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: var(--rylcons-font-family);
}

/* The photo, centred and cropped to cover. The text is pushed to the foot,
   which is what leaves the picture visible above it. */
.rylcons-appcta__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 560px;
  padding: 24px;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-border);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

/* The fade sits between the photo and the text rather than on either, so the
   picture keeps its own colours at the top and the text has a solid ground at
   the foot. Its three values are custom properties so each control can set one
   without writing the whole gradient. */
.rylcons-appcta__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    180deg,
    transparent var(--rylcons-appcta-fade-start, 32%),
    var(--rylcons-appcta-overlay, var(--rylcons-color-secondary)) var(--rylcons-appcta-fade-end, 78%)
  );
}

.rylcons-appcta__body {
  position: relative;
  z-index: 1;
}

/* Every text rule below is scoped to three classes on purpose. On pages using
   the default template the theme's `.site-main .entry-content h2` / `h3` / `p`
   rules are (0,2,1) and would beat a single class, resetting the sizes and
   margins set here. Elementor's own control selectors carry four classes, so
   they still win over these. */
.rylcons-appcta .rylcons-appcta__body .rylcons-appcta__title {
  margin: 0 0 18px;
  font-size: 1.625rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.35;
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-appcta .rylcons-appcta__body .rylcons-appcta__text {
  font-size: 0.875rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.6;
  color: var(--rylcons-color-text-on-dark);
}

/* Editor content: the field is a WYSIWYG, so it arrives as paragraphs. Their
   own outer margins are dropped and the gap between them is set here, where
   the Paragraph Spacing control can reach it. */
.rylcons-appcta .rylcons-appcta__body .rylcons-appcta__text > * {
  margin: 0;
}

.rylcons-appcta .rylcons-appcta__body .rylcons-appcta__text > * + * {
  margin-top: 16px;
}

.rylcons-appcta .rylcons-appcta__body .rylcons-appcta__text a {
  color: inherit;
  text-decoration: underline;
}

.rylcons-appcta__panel {
  padding: 24px;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-primary);
}

.rylcons-appcta .rylcons-appcta__panel .rylcons-appcta__panel-title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.35;
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-appcta .rylcons-appcta__panel .rylcons-appcta__panel-text {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.5;
  color: var(--rylcons-color-text-muted);
}

/* Space between rather than a gap: full width, the label sits at the left and
   the arrow at the right, as in the design. */
.rylcons-appcta .rylcons-appcta__panel .rylcons-appcta__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-secondary);
  color: var(--rylcons-color-white);
  font-size: var(--rylcons-fs-btn);
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--rylcons-transition), transform var(--rylcons-transition);
}

.rylcons-appcta .rylcons-appcta__panel .rylcons-appcta__btn--full {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.rylcons-appcta .rylcons-appcta__panel .rylcons-appcta__btn:hover,
.rylcons-appcta .rylcons-appcta__panel .rylcons-appcta__btn:focus-visible {
  background-color: var(--rylcons-color-secondary-dark);
}

.rylcons-appcta .rylcons-appcta__panel .rylcons-appcta__btn:active {
  transform: translateY(1px);
}

/* Square box with the mark sized to it. The artwork is the header CTA's
   24x24 arrow, which would otherwise render at its own attribute size and
   tower over the label. */
.rylcons-appcta__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  line-height: 0;
}

.rylcons-appcta__btn-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   18. Royal Journey
   -------------------------------------------------------------------------- */

/* No background and no outer spacing here on purpose: the Elementor container
   supplies both. Because that container decides whether the ground is light or
   dark, every colour below is set twice, once per scheme, and the Text Colour
   control picks which by putting --dark or --light on the root. */
.rylcons-journey {
  font-family: var(--rylcons-font-family);
}

/* One continuous rule across the whole row, so it must sit on the grid rather
   than on each item: item borders would be broken by the column gaps. The
   colour is a custom property because the stacked breakpoints move the rule
   onto the items, and one control has to feed both. */
.rylcons-journey__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 44px;
  border-top: var(--rylcons-journey-rule, 1px) solid var(--rylcons-journey-rule-color, currentColor);
}

.rylcons-journey--no-rule .rylcons-journey__grid {
  border-top: 0;
}

/* The space under the rule is the item's own padding, not the grid's, so each
   item's top edge lands exactly on the rule and the accent below can be
   measured from it. */
.rylcons-journey__item {
  position: relative;
  min-width: 0;
  padding-top: 18px;
}

/* The short accent that starts each column, sitting on the rule itself. Drawn
   over the line rather than beside it, so it reads as a coloured run of the
   same rule. */
.rylcons-journey__item::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--rylcons-journey-rule, 1px));
  inset-inline-start: 0;
  width: 32px;
  height: 2px;
  background-color: var(--rylcons-color-secondary);
}

.rylcons-journey--no-accent .rylcons-journey__item::before {
  content: none;
}

/* Every text rule below is scoped to three classes on purpose. On pages using
   the default template the theme's `.site-main .entry-content h3` / `p` rules
   are (0,2,1) and would beat a single class, resetting the sizes and margins
   set here. Elementor's own control selectors carry four classes, so they
   still win over these. */
.rylcons-journey .rylcons-journey__item .rylcons-journey__num {
  display: block;
  margin: 0 0 40px;
  font-size: 0.8125rem;
  font-weight: var(--rylcons-fw-medium);
  letter-spacing: 0.04em;
  line-height: 1.2;
  opacity: 0.7;
}

.rylcons-journey .rylcons-journey__item .rylcons-journey__title {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.35;
}

.rylcons-journey .rylcons-journey__item .rylcons-journey__desc {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.6;
}

/* Dark text, the default: the primary blue, with the description dropped to
   the muted grey the rest of the site uses on light grounds. */
.rylcons-journey--dark {
  --rylcons-journey-rule-color: rgba(0, 0, 102, 0.15);
}

.rylcons-journey--dark .rylcons-journey__item .rylcons-journey__num,
.rylcons-journey--dark .rylcons-journey__item .rylcons-journey__title {
  color: var(--rylcons-color-primary);
}

.rylcons-journey--dark .rylcons-journey__item .rylcons-journey__desc {
  color: var(--rylcons-color-text-muted);
}

/* Light text, for a dark container: white throughout, with the number and the
   description carried at reduced opacity so the title still leads. */
.rylcons-journey--light {
  --rylcons-journey-rule-color: rgba(255, 255, 255, 0.15);
}

.rylcons-journey--light .rylcons-journey__item .rylcons-journey__num,
.rylcons-journey--light .rylcons-journey__item .rylcons-journey__title,
.rylcons-journey--light .rylcons-journey__item .rylcons-journey__desc {
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-journey--light .rylcons-journey__item .rylcons-journey__desc {
  opacity: 0.72;
}


/* --------------------------------------------------------------------------
   19. Royal Blog
   -------------------------------------------------------------------------- */

/* No background and no outer spacing here on purpose; the Elementor container
   supplies both. */
.rylcons-blog {
  font-family: var(--rylcons-font-family);
}

.rylcons-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.rylcons-blog__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  border-radius: var(--rylcons-radius-sm);
  overflow: hidden;
}

/* The featured image as a cropped background rather than an <img>: Elementor's
   own img reset is (0,1,1) and would fight any per-widget image rule. */
.rylcons-blog__media {
  display: block;
  aspect-ratio: 3 / 2;
  background-color: var(--rylcons-color-border);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* A shade darker than the panel below it, so a card with no featured image
   still reads as a card rather than one flat block. */
.rylcons-blog__media--empty {
  background-color: var(--rylcons-color-footer-divider);
}

.rylcons-blog__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
  background-color: var(--rylcons-color-footer-bg);
}

/* The text block takes the slack, which is what lines the buttons up along the
   foot of every card in a row without an auto margin on the button itself. */
.rylcons-blog__text {
  flex: 1 1 auto;
}

.rylcons-blog__date {
  display: block;
  margin-bottom: 6px;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.4;
  color: var(--rylcons-color-text-muted);
}

/* Clamped to one line by default, so a long headline ends in an ellipsis and
   every card in the row keeps the same shape. Three classes: the theme's
   .site-main .entry-content h3 rule is (0,2,1) and would repaint these. */
.rylcons-blog .rylcons-blog__body .rylcons-blog__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin: 0;
  overflow: hidden;
  font-size: 1.25rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.35;
  color: var(--rylcons-color-primary);
}

.rylcons-blog .rylcons-blog__body .rylcons-blog__title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--rylcons-transition);
}

.rylcons-blog .rylcons-blog__body .rylcons-blog__title-link:hover,
.rylcons-blog .rylcons-blog__body .rylcons-blog__title-link:focus-visible {
  color: var(--rylcons-color-secondary);
}

.rylcons-blog .rylcons-blog__body .rylcons-blog__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 26px 0 0;
  overflow: hidden;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.6;
  color: var(--rylcons-color-text-muted);
}

.rylcons-blog .rylcons-blog__body .rylcons-blog__btn {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 12px 16px;
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-primary);
  color: var(--rylcons-color-white);
  font-size: 0.8125rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--rylcons-transition), color var(--rylcons-transition);
}

.rylcons-blog .rylcons-blog__body .rylcons-blog__btn:hover,
.rylcons-blog .rylcons-blog__body .rylcons-blog__btn:focus-visible {
  background-color: var(--rylcons-color-primary-dark);
  color: var(--rylcons-color-white);
}

.rylcons-blog__btn-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.rylcons-blog__btn-icon svg {
  display: block;
}

/* Pagination. The chips are whatever paginate_links() prints, so the rules
   hang off its own .page-numbers class. */
.rylcons-blog__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.rylcons-blog .rylcons-blog__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-footer-bg);
  color: var(--rylcons-color-primary);
  font-size: var(--rylcons-fs-nav);
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--rylcons-transition), color var(--rylcons-transition);
}

.rylcons-blog .rylcons-blog__pagination .page-numbers.current,
.rylcons-blog .rylcons-blog__pagination a.page-numbers:hover,
.rylcons-blog .rylcons-blog__pagination a.page-numbers:focus-visible {
  background-color: var(--rylcons-color-primary);
  color: var(--rylcons-color-white);
}

/* The gap between numbers is its own mark, so it carries no chip. */
.rylcons-blog .rylcons-blog__pagination .page-numbers.dots {
  min-width: 0;
  padding: 0 4px;
  background-color: transparent;
  color: var(--rylcons-color-text-muted);
}


/* --------------------------------------------------------------------------
   20. Royal Study Areas
   -------------------------------------------------------------------------- */

/* No background and no outer spacing here on purpose; the Elementor container
   supplies both, and the design's grey ground is the container's. */
.rylcons-sareas {
  font-family: var(--rylcons-font-family);
}

/* One gap value for the whole checkerboard: the grid uses it between items and
   each item uses it between its own two cells. They have to match or the rows
   stop lining up, so a single control writes it to the root as a property. */
.rylcons-sareas__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(270px, auto);
  gap: var(--rylcons-sareas-gap, 20px);
}

.rylcons-sareas--per-1 .rylcons-sareas__grid {
  grid-template-columns: minmax(0, 1fr);
}

.rylcons-sareas--per-3 .rylcons-sareas__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* An item is the pair, not the cell, so the two halves can swap ends without
   the grid having to know anything about it. Two tracks rather than two flex
   children: flex-basis 0 is floored by the text box's own padding, which
   would leave its half 40px wider than the photo's. */
.rylcons-sareas__item {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rylcons-sareas-gap, 20px);
  min-width: 0;
}

.rylcons-sareas__text,
.rylcons-sareas__media {
  min-width: 0;
}

/* The checkerboard. Every second row of items leads with its photo, which is
   nth-child rather than a class worked out in PHP so that collapsing the row
   at a breakpoint re-reckons it for free. */
.rylcons-sareas--per-1 .rylcons-sareas__item:nth-child(2n) .rylcons-sareas__media,
.rylcons-sareas--per-2 .rylcons-sareas__item:nth-child(4n+3) .rylcons-sareas__media,
.rylcons-sareas--per-2 .rylcons-sareas__item:nth-child(4n+4) .rylcons-sareas__media,
.rylcons-sareas--per-3 .rylcons-sareas__item:nth-child(6n+4) .rylcons-sareas__media,
.rylcons-sareas--per-3 .rylcons-sareas__item:nth-child(6n+5) .rylcons-sareas__media,
.rylcons-sareas--per-3 .rylcons-sareas__item:nth-child(6n+6) .rylcons-sareas__media {
  order: -1;
}

/* Title at the head, description at the foot, as in the design. */
.rylcons-sareas__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-white);
}

/* Three classes: the theme's .site-main .entry-content h3 rule is (0,2,1) and
   would repaint these on an ordinary page. */
.rylcons-sareas .rylcons-sareas__text .rylcons-sareas__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.35;
  color: var(--rylcons-color-primary);
}

.rylcons-sareas .rylcons-sareas__text .rylcons-sareas__desc {
  margin: 0;
  padding-top: 24px;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.6;
  color: var(--rylcons-color-text-muted);
}

/* The photo as a cropped background rather than an <img>: Elementor's own img
   reset is (0,1,1) and would fight any per-widget image rule. */
.rylcons-sareas__media {
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-border);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* A shade darker than the ground, so an item with no picture still reads as a
   cell rather than a hole. */
.rylcons-sareas__media--empty {
  background-color: var(--rylcons-color-footer-divider);
}


/* --------------------------------------------------------------------------
   21. Royal Story Detail
   -------------------------------------------------------------------------- */

/* No background and no outer spacing here on purpose; the Elementor container
   supplies both. */
.rylcons-sdetail {
  font-family: var(--rylcons-font-family);
}

/* inline-flex, not flex: the widget's Alignment control sets text-align, and
   an inline-level row rides along with it. One value, no second property to
   keep in step. */
.rylcons-sdetail__person {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
  text-align: left;
}

/* Same mark as the story card in Royal Success Stories, drawn larger. */
.rylcons-sdetail .rylcons-sdetail__person .rylcons-sdetail__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--rylcons-radius-pill);
  background-color: var(--rylcons-color-secondary);
  color: var(--rylcons-color-white);
  font-size: 1.25rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
}

.rylcons-sdetail__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Three classes throughout this block: the name tag is a control, and the
   theme's .site-main .entry-content h3 rule is (0,2,1). */
.rylcons-sdetail .rylcons-sdetail__meta .rylcons-sdetail__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.4;
  color: var(--rylcons-color-primary);
}

.rylcons-sdetail .rylcons-sdetail__meta .rylcons-sdetail__role {
  font-size: 1rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.4;
  color: #53617f;
}

.rylcons-sdetail .rylcons-sdetail__body .rylcons-sdetail__heading {
  margin: 0 0 40px;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--rylcons-color-primary);
}

/* A literal, not a token: long-form copy on the story page reads darker than
   the muted grey the cards use, and the theme has no variable for it. */
.rylcons-sdetail .rylcons-sdetail__body .rylcons-sdetail__desc {
  font-size: 1.125rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.5;
  color: #53617f;
}

.rylcons-sdetail .rylcons-sdetail__body .rylcons-sdetail__desc p {
  margin: 0;
}

.rylcons-sdetail .rylcons-sdetail__body .rylcons-sdetail__desc p + p {
  margin-top: 24px;
}

.rylcons-sdetail .rylcons-sdetail__body .rylcons-sdetail__desc a {
  color: var(--rylcons-color-secondary);
}

.rylcons-sdetail .rylcons-sdetail__body .rylcons-sdetail__desc ul,
.rylcons-sdetail .rylcons-sdetail__body .rylcons-sdetail__desc ol {
  margin: 24px 0;
  padding-left: 20px;
}

.rylcons-sdetail .rylcons-sdetail__body .rylcons-sdetail__desc li + li {
  margin-top: 8px;
}


/* --------------------------------------------------------------------------
   22. Royal Post Title
   -------------------------------------------------------------------------- */

/* No background and no outer spacing here on purpose; the Elementor container
   supplies both. A flex column because start/center/end is the one set of
   keywords align-items and text-align share, so the Alignment control moves
   the blocks and their wrapped lines with one value. */
.rylcons-ptitle {
  text-align: center;
  font-family: var(--rylcons-font-family);
}

/* An inner column rather than a flex root: it gives every rule below a real
   third class, without which the theme's .site-main .entry-content h1 at
   (0,2,1) repaints the title and .entry-content p resets the eyebrow. */
.rylcons-ptitle__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The shared eyebrow carries 22px below it; the design wants the title closer. */
.rylcons-ptitle .rylcons-ptitle__inner .rylcons-eyebrow {
  margin-bottom: 10px;
}

.rylcons-ptitle .rylcons-ptitle__inner .rylcons-ptitle__title {
  margin: 0 0 24px;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--rylcons-color-primary);
}

.rylcons-ptitle__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 44px;
  row-gap: 12px;
}

.rylcons-ptitle__author,
.rylcons-ptitle__published {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.rylcons-ptitle__avatar {
  display: inline-flex;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--rylcons-radius-pill);
  background-color: var(--rylcons-color-border);
  overflow: hidden;
}

/* Scoped one level deeper than the bare class on purpose: Elementor ships an
   img reset at (0,1,1) that would beat a single class. */
.rylcons-ptitle .rylcons-ptitle__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rylcons-radius-pill);
}

.rylcons-ptitle .rylcons-ptitle__meta .rylcons-ptitle__name,
.rylcons-ptitle .rylcons-ptitle__meta .rylcons-ptitle__date {
  font-size: var(--rylcons-fs-nav);
  font-weight: var(--rylcons-fw-medium);
  line-height: 1.4;
  color: var(--rylcons-color-primary);
}

.rylcons-ptitle__date-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  color: var(--rylcons-color-primary);
}

.rylcons-ptitle__date-icon svg {
  display: block;
}


/* --------------------------------------------------------------------------
   23. Royal Author Detail
   -------------------------------------------------------------------------- */

/* The one widget in the set that carries its own background: here the panel
   IS the element, not the section it sits in, so the colour and the padding
   belong to the widget rather than to the Elementor container. */
.rylcons-author {
  padding: 40px;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-primary);
  font-family: var(--rylcons-font-family);
}

/* An inner wrapper so every rule below gets a real third class; without it
   the theme's .site-main .entry-content h3 at (0,2,1) repaints the name and
   .entry-content p resets the eyebrow. */
.rylcons-author__inner {
  min-width: 0;
}

.rylcons-author .rylcons-author__inner .rylcons-eyebrow {
  margin-bottom: 8px;
}

/* On navy the shared eyebrow label would sit navy on navy. */
.rylcons-author .rylcons-author__inner .rylcons-eyebrow__text {
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-author__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.rylcons-author__person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.rylcons-author__avatar {
  display: inline-flex;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--rylcons-radius-pill);
  background-color: var(--rylcons-color-primary-dark);
  overflow: hidden;
}

/* Scoped one level deeper than the bare class on purpose: Elementor ships an
   img reset at (0,1,1) that would beat a single class. */
.rylcons-author .rylcons-author__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rylcons-radius-pill);
}

.rylcons-author__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.rylcons-author .rylcons-author__meta .rylcons-author__name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rylcons-color-text-on-dark);
}

/* A literal, not a token: the reading grey the palette carries is for text on
   white, and it disappears against this navy. */
.rylcons-author .rylcons-author__meta .rylcons-author__designation {
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.4;
  color: #afb8ca;
}

.rylcons-author__social {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Three classes: these are anchors, and the theme's .site-main .entry-content a
   rule is (0,2,1) — it painted them secondary red on the navy panel. */
.rylcons-author .rylcons-author__social .rylcons-author__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: #afb8ca;
  text-decoration: none;
  transition: color var(--rylcons-transition);
}

.rylcons-author .rylcons-author__social .rylcons-author__social-link:hover,
.rylcons-author .rylcons-author__social .rylcons-author__social-link:focus-visible {
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-author .rylcons-author__social-link svg {
  display: block;
  width: auto;
  height: 24px;
}


/* --------------------------------------------------------------------------
   24. Royal Country Heading
   -------------------------------------------------------------------------- */

/* The flag as a cropped background rather than an <img>: Elementor's own img
   reset is (0,1,1) and would fight any per-widget image rule. The banner owns
   its height and its padding because the picture is the element here, not the
   section it sits in. */
.rylcons-cheading {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 400px;
  padding: 10px;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-primary);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  text-align: center;
  font-family: var(--rylcons-font-family);
}

/* The fade is one gradient with its colour and both stops as custom
   properties, so each control writes a single value instead of rebuilding the
   whole thing. */
.rylcons-cheading--faded::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent var(--rylcons-cheading-fade-start, 62%),
    var(--rylcons-cheading-fade-color, rgba(0, 0, 102, 0.62)) var(--rylcons-cheading-fade-end, 66%)
  );
  pointer-events: none;
}

/* Above the fade, and the third class every rule below needs: the theme's
   .site-main .entry-content h1 at (0,2,1) would otherwise repaint the title
   and .entry-content p would reset the eyebrow. */
.rylcons-cheading__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.rylcons-cheading .rylcons-cheading__inner .rylcons-eyebrow {
  margin-bottom: 12px;
}

/* On the flag the shared eyebrow label would sit navy on a photo. */
.rylcons-cheading .rylcons-cheading__inner .rylcons-eyebrow__text {
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-cheading .rylcons-cheading__inner .rylcons-cheading__title {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--rylcons-color-text-on-dark);
}


/* --------------------------------------------------------------------------
   25. Royal Country Stats
   -------------------------------------------------------------------------- */

/* One bordered box; the cells draw the hairlines between them. */
.rylcons-cstats {
  border: 1px solid var(--rylcons-color-footer-divider);
  border-radius: var(--rylcons-radius-md);
  overflow: hidden;
  font-family: var(--rylcons-font-family);
}

/* Every cell carries a top and a left hairline and the whole grid is pulled
   up and left by one pixel, so the outermost lines tuck under the box border
   and are clipped away. Pulling the grid rather than each cell keeps the last
   row and column flush; the 1px that overhangs is clipped too. This holds at
   any column count, which per-cell nth-child rules would not. */
.rylcons-cstats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: -1px 0 0 -1px;
}

.rylcons-cstats__cell {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
  min-height: 134px;
  padding: 28px 48px;
  border-top: 1px solid var(--rylcons-color-footer-divider);
  border-left: 1px solid var(--rylcons-color-footer-divider);
}

/* Square box with the artwork contained inside it, so icons of different
   proportions still leave every label on the same line. Scoped one level
   deeper than the bare class on purpose: Elementor ships an img reset at
   (0,1,1) that would beat a single class. */
.rylcons-cstats .rylcons-cstats__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  line-height: 0;
  color: var(--rylcons-color-secondary);
}

.rylcons-cstats .rylcons-cstats__icon img,
.rylcons-cstats .rylcons-cstats__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  fill: currentColor;
}

.rylcons-cstats .rylcons-cstats__icon i {
  font-size: 28px;
  line-height: 1;
}

.rylcons-cstats__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Three classes: the label tag is a control, and the theme's
   .site-main .entry-content h3 rule is (0,2,1). */
.rylcons-cstats .rylcons-cstats__text .rylcons-cstats__label {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.35;
  color: var(--rylcons-color-primary);
}

/* A literal, not a token: the same darker reading grey the story page uses,
   and the theme has no variable for it. */
.rylcons-cstats .rylcons-cstats__text .rylcons-cstats__value {
  font-size: 1rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.4;
  color: #53617f;
}


/* --------------------------------------------------------------------------
   26. Royal Universities
   -------------------------------------------------------------------------- */

/* One bordered box; the cards draw the hairlines between them, the same
   construction as Royal Country Stats. */
.rylcons-unis {
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-md);
  overflow: hidden;
  font-family: var(--rylcons-font-family);
}

/* Every card carries a top and a left hairline and the whole grid is pulled
   up and left by one pixel, so the outermost lines tuck under the box border
   and are clipped away. Holds at any column count, which per-card nth-child
   rules would not. */
.rylcons-unis__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: -1px 0 0 -1px;
}

.rylcons-unis__cell {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  min-height: 88px;
  padding: 18px 22px;
  border-top: 1px solid var(--rylcons-color-border);
  border-left: 1px solid var(--rylcons-color-border);
  transition: background-color var(--rylcons-transition);
}

/* Three classes throughout: a linked card is an anchor, and the theme's
   .site-main .entry-content a rule is (0,2,1) — it underlined every name. */
.rylcons-unis .rylcons-unis__grid .rylcons-unis__cell {
  color: inherit;
  text-decoration: none;
}

.rylcons-unis .rylcons-unis__grid .rylcons-unis__cell--link:hover,
.rylcons-unis .rylcons-unis__grid .rylcons-unis__cell--link:focus-visible {
  background-color: var(--rylcons-color-footer-bg);
}

/* Square frame with the crest contained inside it, so names stay aligned
   whatever shape the artwork is. Scoped one level deeper than the bare class
   on purpose: Elementor ships an img reset at (0,1,1). */
.rylcons-unis__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 6px;
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-white);
}

.rylcons-unis .rylcons-unis__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rylcons-unis__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.rylcons-unis .rylcons-unis__text .rylcons-unis__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rylcons-color-primary);
}

/* Clamped to one line by default, so a long name ends in an ellipsis and
   every card in the row keeps the same shape. */
.rylcons-unis .rylcons-unis__text .rylcons-unis__full {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.4;
  color: var(--rylcons-color-text-muted);
}

.rylcons-unis__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  color: var(--rylcons-color-primary);
  transition: color var(--rylcons-transition);
}

.rylcons-unis__icon svg {
  display: block;
}

.rylconst-about-rightdet-img .rylcons-detail__content,
.rylconst-about-leftdet-img .rylcons-detail__content {
	padding-top: 50px;
	padding-bottom: 50px;
}

.elementor .elementor-widget-text-editor img {
  border-radius: 10px;
}

.elementor .elementor-widget-image img {
  border-radius: 10px;
}

.elementor-widget-text-editor p {
  font-size: 14px;
  margin: 0 0 15px;
}

.elementor-widget-text-editor ul {
  font-size: 14px;
  margin: 0 0 15px;
  padding: 0 0 0 25px;
}

.elementor-widget-text-editor h2 {
  margin: 0 0 5px;
}

.elementor-widget-text-editor h3 {
  margin: 0 0 5px;
}

.elementor-widget-text-editor h4 {
  margin: 45px 0 15px;
}

.elementor-element.rylconst-blog-graycon > .e-con-inner {
	background-color: #ECEEF2;
  padding: 20px 20px 0 20px;
  border-radius: 10px;
}

.rylconst-form-fieldscon .rylconst-form-field p {
  display: inline-block;
  width: 100%;
  padding: 0;
  margin: 0 0 10px;
}

.rylconst-form-fieldscon .rylconst-form-field span {
  display: inline-block;
  width: 100%;
}

.rylconst-form-fieldscon .rylconst-form-field span span {
  font-size: 13px;
}

.rylconst-form-fieldscon .rylconst-form-field span.wpcf7-spinner {
  display: block;
  width: 24px;
}

.rylconst-form-fieldscon .rylconst-form-grid-con {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.rylconst-form-fieldscon .rylconst-form-field span input[type="text"],
.rylconst-form-fieldscon .rylconst-form-field span input[type="email"],
.rylconst-form-fieldscon .rylconst-form-field span input[type="url"],
.rylconst-form-fieldscon .rylconst-form-field span input[type="password"],
.rylconst-form-fieldscon .rylconst-form-field span input[type="search"],
.rylconst-form-fieldscon .rylconst-form-field span input[type="number"],
.rylconst-form-fieldscon .rylconst-form-field span input[type="tel"],
.rylconst-form-fieldscon .rylconst-form-field span input[type="range"],
.rylconst-form-fieldscon .rylconst-form-field span input[type="date"],
.rylconst-form-fieldscon .rylconst-form-field span input[type="month"],
.rylconst-form-fieldscon .rylconst-form-field span input[type="week"],
.rylconst-form-fieldscon .rylconst-form-field span input[type="time"],
.rylconst-form-fieldscon .rylconst-form-field span input[type="datetime"],
.rylconst-form-fieldscon .rylconst-form-field span textarea {
  display: inline-block;
  width: 100%;
  font-size: 14px;
  outline: none;
  border: none;
  color: #8392AD;
  padding: 15px 40px 15px 15px;
  border-radius: 10px;
}

.rylconst-form-fieldscon .rylconst-form-field span input[type="text"]:focus,
.rylconst-form-fieldscon .rylconst-form-field span input[type="email"]:focus,
.rylconst-form-fieldscon .rylconst-form-field span input[type="url"]:focus,
.rylconst-form-fieldscon .rylconst-form-field span input[type="password"]:focus,
.rylconst-form-fieldscon .rylconst-form-field span input[type="search"]:focus,
.rylconst-form-fieldscon .rylconst-form-field span input[type="number"]:focus,
.rylconst-form-fieldscon .rylconst-form-field span input[type="tel"]:focus,
.rylconst-form-fieldscon .rylconst-form-field span input[type="range"]:focus,
.rylconst-form-fieldscon .rylconst-form-field span input[type="date"]:focus,
.rylconst-form-fieldscon .rylconst-form-field span input[type="month"]:focus,
.rylconst-form-fieldscon .rylconst-form-field span input[type="week"]:focus,
.rylconst-form-fieldscon .rylconst-form-field span input[type="time"]:focus,
.rylconst-form-fieldscon .rylconst-form-field span input[type="datetime"]:focus,
.rylconst-form-fieldscon .rylconst-form-field span textarea:focus {
  color: #333;
  outline: none;
  border: none;
}

.rylconst-form-fieldscon .rylconst-form-field span textarea {
  height: 140px;
}

.rylconst-form-fieldscon .rylconst-form-field {
  position: relative;
}

.rylconst-form-field .rylconst-formfield-icn {
  position: absolute;
  right: 15px;
  top: 17px;
  background-position: center;
  background-size: cover;
}

.rylconst-formfield-icn.rylconst-formfield-icn-user {
  width: 19px;
  height: 19px;
  background-image: url('../images/user.svg');
}

.rylconst-formfield-icn.rylconst-formfield-icn-mail {
  width: 19px;
  height: 15px;
  background-image: url('../images/mail.svg');
}

.rylconst-formfield-icn.rylconst-formfield-icn-phone {
  width: 17px;
  height: 18px;
  background-image: url('../images/phone.svg');
}

.rylconst-formfield-icn.rylconst-formfield-icn-keyboard {
  width: 18px;
  height: 10px;
  background-image: url('../images/keyboard.svg');
}

.rylconst-form-field.rylconst-sbmitbtn-con p {
  display: flex;
  align-items: center;
}

.rylconst-form-field.rylconst-sbmitbtn-con input[type="submit"] {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 10px;
  padding: 14px 22px;
  border: none;
  outline: none;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-primary);
  color: var(--rylcons-color-white);
  font-size: var(--rylcons-fs-btn);
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--rylcons-transition), color var(--rylcons-transition), transform var(--rylcons-transition);
}

.rylconst-form-field.rylconst-sbmitbtn-con input[type="submit"]:hover,
.rylconst-form-field.rylconst-sbmitbtn-con input[type="submit"]:focus-visible {
  background-color: var(--rylcons-color-secondary);
  border: none;
  outline: none;
  color: var(--rylcons-color-white);
}

.rylconst-form-field.rylconst-sbmitbtn-con input[type="submit"]:active {
  transform: translateY(1px);
  border: none;
  outline: none;
  color: var(--rylcons-color-white);
}

/* --------------------------------------------------------------------------
   27. Royal Universities Map

   The height comes from Royal Settings and is written onto the root as
   --rylcons-umap-height, which the map and the sidebar's scroll ceiling both
   read — that is what makes a long sidebar scroll on its own rather than
   stretching the block past the map.
   -------------------------------------------------------------------------- */
.rylcons-umap {
  --rylcons-umap-sidebar: 262px;
  --rylcons-umap-divider: var(--rylcons-color-border);
  --rylcons-umap-pin: var(--rylcons-color-secondary);
  --rylcons-umap-cluster-bg: #2F80ED;
  --rylcons-umap-cluster-color: #ffffff;
  --rylcons-umap-cluster-size: 40px;
  --rylcons-umap-popup-bg: var(--rylcons-color-white);
  --rylcons-umap-popup-title: var(--rylcons-color-primary);
  --rylcons-umap-popup-text: var(--rylcons-color-text-muted);
  --rylcons-umap-popup-label: var(--rylcons-color-text-muted);
  --rylcons-umap-popup-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Search bar */
.rylcons-umap__search {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

.rylcons-umap__field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 0;
  padding: 12px 16px;
  background-color: var(--rylcons-color-white);
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-md);
  cursor: pointer;
}

.rylcons-umap__field-label {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: var(--rylcons-fw-regular);
  color: var(--rylcons-color-text-muted);
}

.rylcons-umap__field-label::after {
  content: "|";
  margin-left: 8px;
  color: var(--rylcons-color-border);
}

/* Both the selects and the keyword box, so one set of controls styles all
   three fields. Appearance is stripped because the chevron is drawn below. */
.rylcons-umap__control {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0 18px 0 0;
  border: 0;
  background-color: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.4;
  color: var(--rylcons-color-primary);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.rylcons-umap__control:focus {
  outline: none;
}

.rylcons-umap__control::placeholder {
  font-weight: var(--rylcons-fw-semibold);
  color: var(--rylcons-color-primary);
  opacity: 1;
}

select.rylcons-umap__control {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%238392AD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px 12px;
}

.rylcons-umap__or {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: var(--rylcons-fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rylcons-color-text-muted);
}

.rylcons-umap__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-secondary);
  color: var(--rylcons-color-white);
  cursor: pointer;
  transition: background-color var(--rylcons-transition);
}

.rylcons-umap__submit:hover,
.rylcons-umap__submit:focus-visible {
  background-color: var(--rylcons-color-secondary-dark);
}

.rylcons-umap__submit svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Sidebar and map */
.rylcons-umap__body {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--rylcons-umap-divider);
  border-radius: var(--rylcons-radius-md);
}

.rylcons-umap__sidebar {
  flex: 0 0 var(--rylcons-umap-sidebar);
  width: var(--rylcons-umap-sidebar);
  max-height: var(--rylcons-umap-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--rylcons-color-white);
  border-right: 1px solid var(--rylcons-umap-divider);
}

.rylcons-umap__map {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--rylcons-umap-height);
  background-color: #e9ecf2;
}

.rylcons-umap__country {
  border-bottom: 1px solid var(--rylcons-umap-divider);
}

.rylcons-umap__country-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background-color: transparent;
  text-align: left;
  cursor: pointer;
}

.rylcons-umap__country-name {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rylcons-color-primary);
}

.rylcons-umap__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-secondary);
  font-size: 0.75rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.6;
  color: var(--rylcons-color-white);
}

/* Collapsed by default; the open modifier is what the script toggles.

   The slide is a 0fr to 1fr grid row rather than a max-height guess, so it
   runs to the list's real height however many universities a country has —
   which also means it stays right while the search bar is hiding rows.
   Visibility is switched at the end of the slide so a collapsed list is out
   of the tab order without cutting the animation short. */
.rylcons-umap__list {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.rylcons-umap__list-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}

.rylcons-umap__country.is-open .rylcons-umap__list {
  grid-template-rows: 1fr;
}

.rylcons-umap__country.is-open .rylcons-umap__list-inner {
  visibility: visible;
  transition-delay: 0s;
}

.rylcons-umap__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-top: 1px solid var(--rylcons-umap-divider);
  background-color: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--rylcons-transition);
}

.rylcons-umap__item:hover,
.rylcons-umap__item:focus-visible {
  background-color: #f6f7fa;
}

.rylcons-umap__item.is-active {
  background-color: #f1f4fb;
}

.rylcons-umap__item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rylcons-umap__item-name {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rylcons-color-primary);
}

.rylcons-umap__item-full {
  font-size: 0.75rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.4;
  color: var(--rylcons-color-text-muted);
}

.rylcons-umap__item-mark {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  color: var(--rylcons-color-text-muted);
}

.rylcons-umap__empty {
  margin: 0;
  padding: 20px;
  font-size: 0.8125rem;
  color: var(--rylcons-color-text-muted);
}

.rylcons-umap__notice {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-md);
  font-size: 0.875rem;
  color: var(--rylcons-color-text-muted);
}

/* Markers. Leaflet draws these as div icons, so they inherit the custom
   properties above; Google is handed the same colours as SVG data URIs. */
.rylcons-umap .leaflet-container {
  font-family: var(--rylcons-font-family);
}

.rylcons-umap__pin,
.rylcons-umap__cluster {
  background: none;
  border: 0;
}

.rylcons-umap__pin svg {
  display: block;
  width: 26px;
  height: 34px;
  color: var(--rylcons-umap-pin);
  filter: drop-shadow(0 4px 8px rgba(17, 17, 60, 0.25));
}

.rylcons-umap__cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(47, 128, 237, 0.25);
  background-color: color-mix(in srgb, var(--rylcons-umap-cluster-bg) 25%, transparent);
}

.rylcons-umap__cluster-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background-color: var(--rylcons-umap-cluster-bg);
  font-size: 0.8125rem;
  font-weight: var(--rylcons-fw-semibold);
  color: var(--rylcons-umap-cluster-color);
}

/* Popover — one card, dressed into whichever chrome the provider draws. */
.rylcons-umap__popup-inner {
  width: var(--rylcons-umap-popup-width);
  max-width: 100%;
  padding: 16px 18px;
  background-color: var(--rylcons-umap-popup-bg);
}

.rylcons-umap__popup-title {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--rylcons-umap-popup-title);
}

.rylcons-umap__popup-address {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rylcons-umap-popup-text);
}

.rylcons-umap__popup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rylcons-umap-divider);
}

.rylcons-umap__popup-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rylcons-umap__popup-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: var(--rylcons-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rylcons-umap-popup-label);
}

.rylcons-umap__popup-label svg {
  display: block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.rylcons-umap__popup-value {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--rylcons-umap-popup-text);
  overflow-wrap: anywhere;
}

/* The .site-main .entry-content a rule is (0,2,1) and would underline these. */
.rylcons-umap .rylcons-umap__popup-value,
.site-main .entry-content .rylcons-umap__popup-value {
  text-decoration: none;
}

.rylcons-umap__popup-value:hover {
  color: var(--rylcons-umap-popup-title);
}

/* Leaflet's own popup chrome, emptied out so the card above is all there is. */
.leaflet-popup.rylcons-umap__popup .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: var(--rylcons-radius-md);
  box-shadow: var(--rylcons-shadow-dropdown);
  overflow: hidden;
}

.leaflet-popup.rylcons-umap__popup .leaflet-popup-content {
  margin: 0;
  width: auto !important;
}

.leaflet-popup.rylcons-umap__popup .leaflet-popup-tip {
  box-shadow: none;
}

/* Google's InfoWindow keeps its own padding and scroll box; both are removed
   so its card measures the same as Leaflet's. */
.rylcons-umap .gm-style-iw.gm-style-iw-c {
  padding: 0;
  border-radius: var(--rylcons-radius-md);
}

.rylcons-umap .gm-style-iw-d {
  padding: 0;
  overflow: hidden !important;
}

.rylcons-umap .gm-style-iw-chr {
  position: absolute;
  top: 0;
  right: 0;
  height: auto;
}

/* --------------------------------------------------------------------------
   28. Royal Contact Info

   The Royal Journey row with a mark in place of the number, so the rule and
   accent mechanics below are deliberately identical: change one and check the
   other. What differs is the content — an address with a directions link, and
   lists of emails and phone numbers.
   -------------------------------------------------------------------------- */

/* No background and no outer spacing here on purpose: the Elementor container
   supplies both. Every colour is set twice, once per scheme, and the Text
   Colour control picks which by putting --dark or --light on the root. */
.rylcons-cinfo {
  --rylcons-cinfo-icon: 20px;
  --rylcons-cinfo-line-gap: 4px;
  font-family: var(--rylcons-font-family);
}

/* One continuous rule across the whole row, so it sits on the grid rather than
   on each item: item borders would be broken by the column gaps. */
.rylcons-cinfo__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 44px;
  border-top: var(--rylcons-cinfo-rule, 1px) solid var(--rylcons-cinfo-rule-color, currentColor);
}

.rylcons-cinfo--no-rule .rylcons-cinfo__grid {
  border-top: 0;
}

/* The space under the rule is the item's own padding, not the grid's, so each
   item's top edge lands exactly on the rule and the accent can be measured
   from it. */
.rylcons-cinfo__item {
  position: relative;
  min-width: 0;
  padding-top: 22px;
}

/* The short accent that starts each column, drawn over the rule rather than
   beside it so it reads as a coloured run of the same line. */
.rylcons-cinfo__item::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--rylcons-cinfo-rule, 1px));
  inset-inline-start: 0;
  width: 32px;
  height: 2px;
  background-color: var(--rylcons-color-secondary);
}

.rylcons-cinfo--no-accent .rylcons-cinfo__item::before {
  content: none;
}

/* Sized by height, not width: the pin, envelope and handset have different
   aspect ratios, and matching their heights is what lines the row up. An
   inline SVG would otherwise draw at its own width/height attributes. */
.rylcons-cinfo .rylcons-cinfo__item .rylcons-cinfo__icon {
  display: block;
  margin: 0 0 22px;
  line-height: 0;
  color: var(--rylcons-color-secondary);
}

.rylcons-cinfo__icon svg,
.rylcons-cinfo__icon img {
  display: block;
  width: auto;
  height: var(--rylcons-cinfo-icon);
}

/* Every text rule below is scoped to three classes on purpose. On pages using
   the default template the theme's `.site-main .entry-content h3` / `p` / `ul`
   / `a` rules are (0,2,1) and would beat a single class, resetting the sizes,
   margins and colours set here. Elementor's own control selectors carry four
   classes, so they still win over these. */
.rylcons-cinfo .rylcons-cinfo__item .rylcons-cinfo__title {
  margin: 0 0 14px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}

.rylcons-cinfo .rylcons-cinfo__item .rylcons-cinfo__text {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.7;
}

.rylcons-cinfo .rylcons-cinfo__item .rylcons-cinfo__list {
  display: flex;
  flex-direction: column;
  gap: var(--rylcons-cinfo-line-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rylcons-cinfo .rylcons-cinfo__item .rylcons-cinfo__line {
  margin: 0;
  list-style: none;
}

.rylcons-cinfo .rylcons-cinfo__item .rylcons-cinfo__value {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.7;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--rylcons-transition), opacity var(--rylcons-transition);
}

/* The mark slides out on hover, so the gap is what animates. */
.rylcons-cinfo .rylcons-cinfo__item .rylcons-cinfo__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 0.875rem;
  font-weight: var(--rylcons-fw-medium);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--rylcons-transition), gap var(--rylcons-transition);
}

.rylcons-cinfo .rylcons-cinfo__item .rylcons-cinfo__link:hover,
.rylcons-cinfo .rylcons-cinfo__item .rylcons-cinfo__link:focus-visible {
  gap: 13px;
}

.rylcons-cinfo__link-mark {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.rylcons-cinfo__link-mark svg {
  display: block;
  width: 12px;
  height: 12px;
}

/* Dark text, for a light container: the primary blue, with the body copy
   dropped to the muted grey the rest of the site uses on light grounds. */
.rylcons-cinfo--dark {
  --rylcons-cinfo-rule-color: rgba(0, 0, 102, 0.15);
}

.rylcons-cinfo--dark .rylcons-cinfo__item .rylcons-cinfo__title,
.rylcons-cinfo--dark .rylcons-cinfo__item .rylcons-cinfo__link {
  color: var(--rylcons-color-primary);
}

.rylcons-cinfo--dark .rylcons-cinfo__item .rylcons-cinfo__text,
.rylcons-cinfo--dark .rylcons-cinfo__item .rylcons-cinfo__value {
  color: var(--rylcons-color-text-muted);
}

.rylcons-cinfo--dark .rylcons-cinfo__item a.rylcons-cinfo__value:hover,
.rylcons-cinfo--dark .rylcons-cinfo__item a.rylcons-cinfo__value:focus-visible {
  color: var(--rylcons-color-primary);
}

/* Light text, the default, for the navy panel the design draws: white
   throughout, with the body copy carried at reduced opacity so the title
   still leads. */
.rylcons-cinfo--light {
  --rylcons-cinfo-rule-color: rgba(255, 255, 255, 0.15);
}

.rylcons-cinfo--light .rylcons-cinfo__item .rylcons-cinfo__title,
.rylcons-cinfo--light .rylcons-cinfo__item .rylcons-cinfo__text,
.rylcons-cinfo--light .rylcons-cinfo__item .rylcons-cinfo__value,
.rylcons-cinfo--light .rylcons-cinfo__item .rylcons-cinfo__link {
  color: var(--rylcons-color-text-on-dark);
}

.rylcons-cinfo--light .rylcons-cinfo__item .rylcons-cinfo__text,
.rylcons-cinfo--light .rylcons-cinfo__item .rylcons-cinfo__value {
  opacity: 0.72;
}

.rylcons-cinfo--light .rylcons-cinfo__item a.rylcons-cinfo__value:hover,
.rylcons-cinfo--light .rylcons-cinfo__item a.rylcons-cinfo__value:focus-visible {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   29. Responsive — matches Elementor's 1024 / 767 breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .rylcons-cinfo__grid {
    column-gap: 28px;
    row-gap: 36px;
  }

  /* Same reason as Royal Journey: a wrapped row would sit under no rule at
     all, leaving its accent floating, so the rule moves onto every item. */
  .rylcons-cinfo--dark .rylcons-cinfo__grid,
  .rylcons-cinfo--light .rylcons-cinfo__grid {
    border-top: 0;
  }

  .rylcons-cinfo__item {
    border-top: var(--rylcons-cinfo-rule, 1px) solid var(--rylcons-cinfo-rule-color, currentColor);
  }

  .rylcons-cinfo--no-rule .rylcons-cinfo__item {
    border-top: 0;
  }

  .rylcons-umap__sidebar {
    max-height: var(--rylcons-umap-height-tablet, var(--rylcons-umap-height));
  }

  .rylcons-umap__map {
    height: var(--rylcons-umap-height-tablet, var(--rylcons-umap-height));
  }

  .rylcons-hero__top {
    column-gap: 0;
    row-gap: 32px;
  }

  .rylcons-hero__lead {
    flex-basis: 100%;
  }

  .rylcons-hero__title {
    max-width: 100%;
  }

  .rylcons-hero__media {
    margin-top: 40px;
  }

  .rylcons-hero__panel {
    top: 90px;
  }

  .rylcons-hero__image-wrap {
    margin-left: 0;
  }

  .rylcons-hero .rylcons-hero__image {
    height: 420px;
  }

  .rylcons-features {
    border-radius: 0 0 48px 48px;
  }

  .rylcons-features__inner {
    padding: 48px var(--rylcons-container-padding) 56px;
  }

  .rylcons-features__grid {
    margin-left: 0;
  }

  .rylcons-features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 36px;
  }

  .rylcons-heading__grid {
    column-gap: 0;
    row-gap: 24px;
  }

  .rylcons-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(280px, auto);
    gap: 20px;
  }

  .rylcons-sgrid__grid {
    grid-auto-rows: minmax(240px, auto);
  }

  .rylcons-faqs__grid {
    grid-auto-rows: minmax(240px, auto);
    gap: 16px;
  }

  .rylcons-blog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .rylcons-author {
    padding: 32px;
  }

  .rylcons-cheading {
    padding: 40px;
  }

  .rylcons-cstats__cell {
    min-height: 120px;
    padding: 24px 32px;
  }

  .rylcons-unis__cell {
    gap: 16px;
    padding: 16px 18px;
  }

  /* One item per row here whatever the Items Per Row control says, so the
     flip has to be re-reckoned for that count. Both rules are written one
     class deeper than the ones they override. */
  .rylcons-sareas .rylcons-sareas__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rylcons-sareas .rylcons-sareas__grid .rylcons-sareas__item .rylcons-sareas__media {
    order: 0;
  }

  .rylcons-sareas .rylcons-sareas__grid .rylcons-sareas__item:nth-child(2n) .rylcons-sareas__media {
    order: -1;
  }

  .rylcons-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 36px;
  }

  .rylcons-vision__bar {
    padding: 16px 20px;
  }

  .rylcons-journey__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 36px;
  }

  /* Wrapped rows would sit under no rule at all, leaving their accents
     floating, so the rule moves onto every item once the row wraps. */
  .rylcons-journey--dark .rylcons-journey__grid,
  .rylcons-journey--light .rylcons-journey__grid {
    border-top: 0;
  }

  .rylcons-journey__item {
    border-top: var(--rylcons-journey-rule, 1px) solid var(--rylcons-journey-rule-color, currentColor);
  }

  .rylcons-journey--no-rule .rylcons-journey__item {
    border-top: 0;
  }

  .rylcons-journey .rylcons-journey__item .rylcons-journey__num {
    margin-bottom: 24px;
  }

  .rylcons-team .rylcons-team__photo {
    margin-bottom: 28px;
  }

  .rylcons-team .rylcons-team__member .rylcons-team__designation {
    margin-bottom: 24px;
  }

  .rylcons-stories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Mirrors the tablet defaults of the Text Column Width, Column Gap and Image
     Minimum Height controls, so the columns stack even before Elementor has
     regenerated its stylesheet. */
  .rylcons-detail__content {
    flex-basis: 100%;
  }

  .rylcons-detail__content,
  .rylcons-detail--image-left .rylcons-detail__content {
    padding-inline: 0;
  }

  /* View 2 keeps its side padding once stacked: the text is still on the
     coloured panel, so it cannot sit against the edge. */
  .rylcons-detail--view-2 .rylcons-detail__content,
  .rylcons-detail--view-2.rylcons-detail--image-left .rylcons-detail__content {
    padding-inline: 24px;
  }

  .rylcons-detail__media {
    min-height: 360px;
  }

  .rylcons-stats__card {
    padding: 32px;
    gap: 20px;
  }

  .rylcons-countries__head {
    margin-bottom: 32px;
  }

  .rylcons-countries__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .rylcons-steps__grid {
    column-gap: 0;
    row-gap: 36px;
  }

  .rylcons-steps__lead {
    flex-basis: 100%;
  }

  .rylcons-steps__image {
    height: 340px;
  }

  .rylcons-cta__box {
    min-height: 360px;
    padding: 48px 32px;
  }

  .rylcons-cta__content {
    max-width: 62%;
  }

  .rylcons-cta .rylcons-cta__image {
    height: 440px;
  }

  .rylcons-stats__head {
    flex-basis: 100%;
  }

  .rylcons-stats__item {
    padding-inline: 20px;
  }

  .rylcons-heading__lead {
    flex-basis: 100%;
  }

  .rylcons-heading__aside {
    margin-top: 0;
  }

  .rylcons-features__desc {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .rylcons-cinfo__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }

  .rylcons-cinfo .rylcons-cinfo__item .rylcons-cinfo__icon {
    margin-bottom: 16px;
  }

  .rylcons-umap__body {
    flex-direction: column;
  }

  .rylcons-umap__sidebar {
    flex-basis: auto;
    width: 100%;
    max-height: var(--rylcons-umap-height-mobile, var(--rylcons-umap-height));
    border-right: 0;
    border-bottom: 1px solid var(--rylcons-umap-divider);
  }

  .rylcons-umap__map {
    height: var(--rylcons-umap-height-mobile, var(--rylcons-umap-height));
  }

  .rylcons-umap__field,
  .rylcons-umap__submit {
    flex-basis: 100%;
  }

  /* The word between the fields only reads as a separator side by side. */
  .rylcons-umap__or {
    display: none;
  }

  .rylcons-hero__eyebrow {
    margin-bottom: 16px;
  }

  .rylcons-hero__desc {
    margin-top: 20px;
  }

  .rylcons-hero__btn {
    margin-top: 20px;
    width: 100%;
    justify-content: center;
  }

  .rylcons-hero__media {
    margin-top: 32px;
  }

  .rylcons-hero__panel {
    top: 60px;
  }

  .rylcons-hero__image-wrap {
    margin-left: 0;
  }

  .rylcons-hero .rylcons-hero__image {
    height: 280px;
    border-radius: 16px 16px 0 0;
  }

  .rylcons-hero--no-panel .rylcons-hero__image {
    border-radius: 16px;
  }

  .rylcons-features {
    border-radius: 0 0 32px 32px;
  }

  .rylcons-features__inner {
    padding: 36px var(--rylcons-container-padding) 44px;
  }

  .rylcons-features__grid {
    margin-left: 0;
  }

  .rylcons-features__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  .rylcons-heading__btn {
    margin-top: 20px;
    width: 100%;
    justify-content: center;
  }

  .rylcons-services__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 16px;
  }

  /* Items default to the full four tracks here through their Width control,
     so the grid itself keeps its four tracks. */
  .rylcons-sgrid__grid {
    grid-auto-rows: minmax(0, auto);
    gap: 16px;
  }

  /* Same idea: the twelve tracks stay, and both cards take all twelve through
     their Card Width controls. These two rules only cover a widget saved
     before those controls existed. */
  .rylcons-faqs__grid {
    grid-auto-rows: minmax(180px, auto);
    gap: 16px;
  }

  .rylcons-faqs__card--wide,
  .rylcons-faqs__card--narrow {
    grid-column: span 12;
  }

  .rylcons-faqs .rylcons-faqs__card .rylcons-faqs__card-question {
    font-size: 1.125rem;
  }

  .rylcons-faqs .rylcons-faqs__card .rylcons-faqs__card-answer {
    padding-top: 18px;
  }

  .rylcons-blog__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* Stacked, and the photo always on top: alternating an over/under pair
     reads as a mistake rather than as a pattern. Both selectors are needed
     to outrank the tablet rules above, which still apply at this width. */
  .rylcons-sareas .rylcons-sareas__grid .rylcons-sareas__item {
    grid-template-columns: minmax(0, 1fr);
  }

  .rylcons-sareas .rylcons-sareas__grid .rylcons-sareas__item .rylcons-sareas__media,
  .rylcons-sareas .rylcons-sareas__grid .rylcons-sareas__item:nth-child(2n) .rylcons-sareas__media {
    order: -1;
  }

  .rylcons-sareas__media {
    min-height: 200px;
  }

  .rylcons-sdetail .rylcons-sdetail__person .rylcons-sdetail__avatar {
    width: 52px;
    height: 52px;
    font-size: 1.125rem;
  }

  .rylcons-sdetail__person {
    gap: 14px;
  }

  .rylcons-sdetail .rylcons-sdetail__body .rylcons-sdetail__heading {
    margin-bottom: 28px;
  }

  .rylcons-sdetail .rylcons-sdetail__body .rylcons-sdetail__desc {
    font-size: 1rem;
  }

  .rylcons-ptitle__meta {
    column-gap: 24px;
  }

  .rylcons-ptitle__avatar {
    width: 34px;
    height: 34px;
  }

  .rylcons-author {
    padding: 24px;
  }

  /* The row wraps here, so the links would otherwise sit hard against the
     right edge, away from the name they belong to. */
  .rylcons-author__row {
    justify-content: flex-start;
    gap: 20px;
  }

  .rylcons-author__avatar {
    width: 56px;
    height: 56px;
  }

  .rylcons-author .rylcons-author__meta .rylcons-author__name {
    font-size: 1.25rem;
  }

  .rylcons-cheading {
    padding: 24px;
  }

  .rylcons-detail__boxes {
    grid-template-columns: minmax(0, 1fr);
  }

  .rylcons-detail__box {
    padding: 18px;
  }

  .rylcons-cstats__cell {
    min-height: 0;
    gap: 16px;
    padding: 20px 22px;
  }

  .rylcons-unis__cell {
    min-height: 0;
    gap: 14px;
    padding: 14px 16px;
  }

  .rylcons-unis__logo {
    width: 42px;
    height: 42px;
  }

  /* A long label at 16px wraps to three lines between the pill lines on a
     phone; a step down keeps it to one or two. */
  .rylcons-cheading .rylcons-cheading__inner .rylcons-eyebrow__text {
    font-size: 0.8125rem;
  }

  .rylcons-sareas__text {
    padding: 18px;
  }

  .rylcons-blog__pagination {
    margin-top: 32px;
  }

  .rylcons-sgrid__media {
    min-height: 220px;
  }

  .rylcons-sgrid__card {
    padding: 22px;
  }

  .rylcons-team__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  /* Three labels across a phone leave no room to read them, so the bar
     becomes a column and each label keeps the block's alignment. */
  .rylcons-vision__bar {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    row-gap: 10px;
    padding: 16px 20px;
  }

  .rylcons-vision__card {
    min-height: 0;
    padding: 20px;
  }

  .rylcons-appcta__media {
    min-height: 420px;
    padding: 20px;
  }

  .rylcons-appcta__panel {
    padding: 20px;
  }

  .rylcons-journey__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }

  .rylcons-journey .rylcons-journey__item .rylcons-journey__num {
    margin-bottom: 14px;
  }

  .rylcons-vision__card-body {
    padding-top: 40px;
  }

  .rylcons-team .rylcons-team__photo {
    margin-bottom: 22px;
  }

  .rylcons-team .rylcons-team__member .rylcons-team__designation {
    margin-bottom: 16px;
  }

  .rylcons-stories__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rylcons-detail__content,
  .rylcons-detail--image-left .rylcons-detail__content {
    padding-inline: 0;
  }

  .rylcons-detail__media {
    min-height: 300px;
  }

  .rylcons-services__card,
  .rylcons-services__explore {
    padding: 22px;
  }

  .rylcons-countries__head {
    margin-bottom: 24px;
  }

  .rylcons-countries__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .rylcons-countries__explore {
    min-height: 160px;
    padding: 22px;
  }

  .rylcons-steps__media {
    margin-top: 28px;
  }

  .rylcons-steps__image {
    height: 240px;
  }

  .rylcons-steps__item {
    padding-inline-start: 28px;
  }

  .rylcons-steps__item + .rylcons-steps__item {
    margin-top: 32px;
  }

  .rylcons-steps__item-title::before {
    inset-inline-start: -34px;
  }

  .rylcons-stories__card {
    padding: 22px;
  }

  .rylcons-faqs__question {
    padding: 14px 16px;
  }

  .rylcons-faqs__answer {
    padding: 0 16px 14px;
  }

  .rylcons-cta__box {
    min-height: 0;
    padding: 32px 22px;
  }

  .rylcons-cta__content {
    max-width: 100%;
  }

  .rylcons-cta__btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .rylcons-cta--hide-image-mobile .rylcons-cta__media {
    display: none;
  }

  .rylcons-stats__card {
    padding: 24px;
  }

  .rylcons-stats__list {
    flex-basis: 100%;
    row-gap: 24px;
  }

  .rylcons-stats__item {
    flex: 0 0 50%;
    padding-inline: 16px;
  }

  .rylcons-stats__item:nth-child(odd) {
    padding-inline-start: 0;
    border-inline-start-color: transparent;
  }

  .rylcons-features .rylcons-features__icon {
    margin-bottom: 18px;
  }

  .rylcons-rating__badge {
    margin: 16px;
    padding: 12px 14px;
    max-width: calc(100% - 32px);
  }
  
  .rylconst-about-rightdet-img .rylcons-detail__content,
  .rylconst-about-leftdet-img .rylcons-detail__content {
	  padding-top: 0;
  }

  .rylconst-form-fieldscon .rylconst-form-grid-con {
    display: inline-block;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rylcons-hero__btn,
  .rylcons-heading__btn,
  .rylcons-cta__btn,
  .rylcons-faqs__icon,
  .rylcons-services__arrow,
  .rylcons-services__explore,
  .rylcons-sgrid__card,
  .rylcons-appcta__btn,
  .rylcons-team__link,
  .rylcons-countries__btn,
  .rylcons-countries__explore,
  .rylcons-features__item--link,
  .rylcons-umap__list,
  .rylcons-umap__list-inner,
  .rylcons-umap__item,
  .rylcons-cinfo__link,
  .rylcons-cinfo__value {
    transition: none;
  }
}