/* RCS responsive remediation layer — v6 (2026-09-13)
   Typeface switched to Tajawal (SIL OFL 1.1, self-hosted; faces are declared
   once in rcs-tajawal.css, loaded from the site-wide head). The Bahij Janna
   and Gotham @font-face blocks that lived here are removed so neither font
   can ever be fetched again. */
/* RCS responsive remediation layer
   Loaded after the Webflow export so approved structure and content remain intact. */

:root {
  --rcs-font-primary: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
  --rcs-font-secondary: 'Tajawal', 'Segoe UI', Arial, sans-serif;
  --rcs-brand-red: #8c182a;
  --rcs-brand-red-hover: #a61f34;
  --rcs-glass-bg: rgba(255, 255, 255, 0.1);
  --rcs-glass-border: rgba(255, 255, 255, 0.5);
  --rcs-glass-text: #fff;
  --rcs-panel-bg: rgba(30, 30, 32, 0.76);
  --rcs-panel-border: rgba(255, 255, 255, 0.2);
  --rcs-panel-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  --rcs-focus: #fff;
  --rcs-control-min: 48px;
  --rcs-page-gutter: clamp(18px, 4vw, 72px);
}

html,
:root,
html[data-theme="light"],
html[lang="ar"],
html[dir="rtl"],
body {
  --font-main: var(--rcs-font-primary) !important;
  --font-h: var(--rcs-font-primary) !important;
  --font-b: var(--rcs-font-primary) !important;
  --font-book: var(--rcs-font-primary) !important;
  --font-body: var(--rcs-font-primary) !important;
  --font-heading: var(--rcs-font-primary) !important;
  --font-ar: var(--rcs-font-primary) !important;
}

html:not(#rcs-font-lock) body:not(#rcs-font-lock) *:not(#rcs-font-lock):not(code):not(pre):not(kbd):not(samp):not([class*="icon"]):not([class*="Icon"]):not(ion-icon):not(svg):not(svg *) {
  font-family: var(--rcs-font-primary) !important;
}

html[lang="ar"]:not(#rcs-font-lock) body:not(#rcs-font-lock) *:not(#rcs-font-lock):not(code):not(pre):not(kbd):not(samp):not([class*="icon"]):not([class*="Icon"]):not(ion-icon):not(svg):not(svg *) {
  font-family: var(--rcs-font-primary) !important;
}

html:not(#rcs-font-lock) body:not(#rcs-font-lock) {
  font-family: var(--rcs-font-primary) !important;
}

html:not(#rcs-font-lock) {
  font-family: var(--rcs-font-primary) !important;
}

svg text {
  font-family: var(--rcs-font-primary) !important;
}

html[lang="ar"]:not(#rcs-font-lock) body:not(#rcs-font-lock) #rcs-footer-magnetic-ar svg text:not(#rcs-font-lock) {
  font-family: var(--rcs-font-primary) !important;
}

html {
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto !important;
}

html.rcs-fouc-active::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #222;
}

html[data-theme="light"].rcs-fouc-active::after {
  background: #f5f2ef;
}

html,
body {
  max-inline-size: 100%;
  min-inline-size: 0;
}

body,
button,
input,
select,
textarea {
  font-family: var(--rcs-font-primary) !important;
}

body {
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html[lang="ar"] body {
  line-height: 1.72;
}

h1,
h2,
h3,
h4,
h5,
h6,
[class*="headline"],
[class*="-head"],
[class*="-title"] {
  text-wrap: balance;
  overflow-wrap: break-word;
}

p,
li,
dd,
blockquote,
[class*="description"],
[class*="-desc"] {
  overflow-wrap: break-word;
  text-wrap: pretty;
  hyphens: none;
  -webkit-hyphens: none;
}

.rcs-long-copy {
  text-align: start !important;
  text-align-last: auto;
  hanging-punctuation: none;
}

.rcs-long-copy.rcs-narrow-copy {
  text-align: start !important;
}

a,
button,
input,
select,
textarea,
[role="button"],
[tabindex]:not([tabindex="-1"]) {
  -webkit-tap-highlight-color: transparent;
}

:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid var(--rcs-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(140, 24, 42, 0.72) !important;
}

/* Unified control grammar derived from the approved homepage .vo-main-btn. */
.rcs-glass-control {
  min-block-size: var(--rcs-control-min) !important;
  max-inline-size: 100%;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  padding: 0.78rem clamp(1.15rem, 2.4vw, 2.2rem) !important;
  border: 1px solid var(--rcs-glass-border) !important;
  border-radius: 4px !important;
  background: var(--rcs-glass-bg) !important;
  color: var(--rcs-glass-text) !important;
  font-family: var(--rcs-font-primary) !important;
  font-size: clamp(0.82rem, 0.76rem + 0.18vw, 0.95rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: clamp(0.05em, 0.1vw, 0.12em) !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: normal;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, transform 180ms ease !important;
}

.rcs-glass-control:is(:hover, :focus-visible) {
  border-color: #fff !important;
  background: #fff !important;
  color: var(--rcs-brand-red) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.rcs-glass-control.rcs-glass-primary {
  border-color: var(--rcs-glass-border) !important;
  background: var(--rcs-glass-bg) !important;
  color: var(--rcs-glass-text) !important;
}

.rcs-glass-control.rcs-glass-primary:is(:hover, :focus-visible) {
  border-color: #fff !important;
  background: #fff !important;
  color: var(--rcs-brand-red) !important;
}

.rcs-glass-control.rcs-glass-compact {
  min-block-size: 46px !important;
  padding: 0.58rem clamp(0.8rem, 1.6vw, 1.15rem) !important;
  font-size: clamp(0.72rem, 0.7rem + 0.12vw, 0.82rem) !important;
}

html[data-theme="light"] .rcs-glass-control {
  --rcs-glass-bg: rgba(255, 255, 255, 0.48);
  --rcs-glass-border: rgba(140, 24, 42, 0.72);
  --rcs-glass-text: var(--rcs-brand-red);
  box-shadow: 0 8px 24px rgba(35, 26, 28, 0.12);
}

html[data-theme="light"] .rcs-glass-control:is(:hover, :focus-visible) {
  border-color: var(--rcs-brand-red) !important;
  background: var(--rcs-brand-red) !important;
  color: #fff !important;
}

/* Touch browsers can retain :hover after a tap. Restore the resting material
   and preserve high-contrast close strokes in either theme. */
@media (hover: none) {
  .rcs-glass-control:hover:not(:focus-visible) {
    border-color: var(--rcs-glass-border) !important;
    background: var(--rcs-glass-bg) !important;
    color: var(--rcs-glass-text) !important;
    transform: none !important;
  }

  .hf-hamburger.open span {
    background: #fff !important;
  }

  html[data-theme="light"] .hf-hamburger.open span {
    background: #fff !important;
  }
}

/* ========================================================================== */
/* RCS final consistency lock v11                                              */
/* ========================================================================== */

:root {
  --rcs-card-radius: 4px;
}

/* The supplied ending frame replaces the former hero video in both languages. */
.hg-bg-video-wrap > .hg-bg-image {
  display: block !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* One type system: every readable glyph in EN and AR uses Bahij Janna.
   Icon fonts and SVG geometry remain excluded so controls keep their symbols. */
html:is(#rcs-bahij-lock, :root):is(#rcs-bahij-lock-2, :root) body
  *:not(svg):not(svg *):not(ion-icon):not([class*="icon"]):not([class*="Icon"]),
html:is(#rcs-bahij-lock, :root):is(#rcs-bahij-lock-2, :root) body
  :is(button, input, select, option, textarea),
html:is(#rcs-bahij-lock, :root):is(#rcs-bahij-lock-2, :root) svg text {
  font-family: var(--rcs-font-primary) !important;
}

/* Editorial red cards follow the website's established 4px geometry. */
html:is(#rcs-red-radius-lock, :root):is(#rcs-red-radius-lock-2, :root) body :is(
  .vo-red-header,
  .intro-red-card,
  .bp-intro-panel,
  .giga-title-card,
  .srv-red-card,
  .v-red-card,
  .v-red-card-mob,
  .lr-red-card,
  .m-header,
  .port-header-section h2,
  .title-card-wrap,
  .hero-title-card,
  .c-info-panel
) {
  border-radius: var(--rcs-card-radius) !important;
}

html:is(#rcs-red-radius-lock, :root):is(#rcs-red-radius-lock-2, :root) body :is(
  .vo-red-header,
  .intro-red-card,
  .bp-intro-panel,
  .giga-title-card,
  .srv-red-card,
  .v-red-card,
  .v-red-card-mob,
  .lr-red-card,
  .m-header,
  .port-header-section h2,
  .title-card-wrap,
  .hero-title-card
)::after {
  top: -6px !important;
  left: -6px !important;
  right: auto !important;
  inline-size: 20px !important;
  block-size: 20px !important;
  border-radius: 0 !important;
  pointer-events: none !important;
}

html[lang="ar"]:is(#rcs-red-radius-lock, :root):is(#rcs-red-radius-lock-2, :root) body :is(
  .vo-red-header,
  .intro-red-card,
  .bp-intro-panel,
  .giga-title-card,
  .srv-red-card,
  .v-red-card,
  .v-red-card-mob,
  .lr-red-card,
  .m-header,
  .port-header-section h2,
  .title-card-wrap,
  .hero-title-card
)::after {
  left: auto !important;
  right: -6px !important;
}

/* Project details are always viewport overlays. The runtime also reparents
   them to body; these rules provide the CSS-side guarantee for every page. */
html:is(#rcs-modal-top-layer, :root):is(#rcs-modal-top-layer-2, :root) body .pmc-modal {
  position: fixed !important;
  inset: 0 !important;
  inline-size: 100vw !important;
  block-size: 100dvh !important;
  min-inline-size: 0 !important;
  min-block-size: 0 !important;
  max-inline-size: none !important;
  max-block-size: none !important;
  margin: 0 !important;
  z-index: 2147483647 !important;
  isolation: isolate !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html:is(#rcs-modal-top-layer, :root):is(#rcs-modal-top-layer-2, :root) body .pmc-modal:not(.active) {
  display: none !important;
}

html:is(#rcs-modal-top-layer, :root):is(#rcs-modal-top-layer-2, :root) body .pmc-modal.active {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

html:is(#rcs-modal-top-layer, :root):is(#rcs-modal-top-layer-2, :root) body .pmc-m-box {
  position: relative !important;
  flex: 0 0 auto !important;
  margin: auto !important;
}

@media (max-width: 900px) {
  html:is(#rcs-modal-top-layer, :root):is(#rcs-modal-top-layer-2, :root) body .pmc-modal.active {
    padding: 0 !important;
    align-items: flex-start !important;
  }

  html:is(#rcs-modal-top-layer, :root):is(#rcs-modal-top-layer-2, :root) body .pmc-m-box,
  html[lang="ar"]:is(#rcs-modal-top-layer, :root):is(#rcs-modal-top-layer-2, :root) body .pmc-m-box {
    display: flex !important;
    flex-direction: column !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: auto !important;
    min-block-size: 100dvh !important;
    max-block-size: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html:is(#rcs-modal-top-layer, :root):is(#rcs-modal-top-layer-2, :root) body .pmc-m-left,
  html[lang="ar"]:is(#rcs-modal-top-layer, :root):is(#rcs-modal-top-layer-2, :root) body .pmc-m-left {
    display: block !important;
    flex: 0 0 clamp(240px, 39dvh, 380px) !important;
    inline-size: 100% !important;
    block-size: clamp(240px, 39dvh, 380px) !important;
    min-block-size: 240px !important;
    overflow: hidden !important;
  }

  html:is(#rcs-modal-top-layer, :root):is(#rcs-modal-top-layer-2, :root) body .pmc-m-right,
  html[lang="ar"]:is(#rcs-modal-top-layer, :root):is(#rcs-modal-top-layer-2, :root) body .pmc-m-right {
    display: block !important;
    flex: 0 0 auto !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    overflow: visible !important;
  }

  html:is(#rcs-modal-top-layer, :root):is(#rcs-modal-top-layer-2, :root) body .pmc-m-grid,
  html[lang="ar"]:is(#rcs-modal-top-layer, :root):is(#rcs-modal-top-layer-2, :root) body .pmc-m-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ========================================================================== */
/* v16 — desktop geometry: contact, RTL dialogs, and Global Reach             */
/* ========================================================================== */

/* Contact uses the full approved desktop measure. The former 1200px cap and
   short-viewport compression made both columns look miniature on 1440–2000px
   Mac/desktop screens and on scaled Windows laptops. */
@media (min-width: 1025px) {
  html:is(#rcs-contact-v16-a, :root):is(#rcs-contact-v16-b, :root):is(#rcs-contact-v16-c, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .contact-grid {
    inline-size: min(90vw, 1440px) !important;
    max-inline-size: 1440px !important;
  }

  html:is(#rcs-contact-v16-a, :root):is(#rcs-contact-v16-b, :root):is(#rcs-contact-v16-c, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) :is(.c-info-panel, .c-form-panel) {
    padding: clamp(40px, 3.4vw, 58px) !important;
  }

  html:is(#rcs-contact-v16-a, :root):is(#rcs-contact-v16-b, :root):is(#rcs-contact-v16-c, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-title {
    font-size: clamp(50px, 3.4vw, 58px) !important;
    line-height: 1.08 !important;
  }

  html:is(#rcs-contact-v16-a, :root):is(#rcs-contact-v16-b, :root):is(#rcs-contact-v16-c, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .form-intro h3 {
    font-size: clamp(30px, 2vw, 34px) !important;
    line-height: 1.18 !important;
  }

  html:is(#rcs-contact-v16-a, :root):is(#rcs-contact-v16-b, :root):is(#rcs-contact-v16-c, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) :is(.form-intro p, .c-text p) {
    font-size: 15px !important;
  }

  html:is(#rcs-contact-v16-a, :root):is(#rcs-contact-v16-b, :root):is(#rcs-contact-v16-c, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-label,
  html:is(#rcs-contact-v16-a, :root):is(#rcs-contact-v16-b, :root):is(#rcs-contact-v16-c, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input:is(:focus, :valid) + .bp-label,
  html:is(#rcs-contact-v16-a, :root):is(#rcs-contact-v16-b, :root):is(#rcs-contact-v16-c, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) select.bp-input + .bp-label {
    font-size: 14px !important;
  }

  html:is(#rcs-contact-v16-a, :root):is(#rcs-contact-v16-b, :root):is(#rcs-contact-v16-c, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input {
    font-size: 16px !important;
  }
}

/* v19 transition/navbar seal: internal routes keep the real navbar brand
   visible, while the fresh Home entry retains its original flying-logo reveal. */
html.rcs-logo-free-preloader body .hf-logo-link,
html.rcs-logo-free-preloader body .hf-logo-img {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 1199px) {
  html:is(#rcs-nav-utility-seal-a, :root):is(#rcs-nav-utility-seal-b, :root):is(#rcs-nav-utility-seal-c, :root) body .hf-navbar {
    position: fixed !important;
  }

  html:is(#rcs-nav-utility-seal-a, :root):is(#rcs-nav-utility-seal-b, :root):is(#rcs-nav-utility-seal-c, :root) body .hf-theme-btn,
  html[lang="ar"]:is(#rcs-nav-utility-seal-a, :root):is(#rcs-nav-utility-seal-b, :root):is(#rcs-nav-utility-seal-c, :root) body .hf-theme-btn {
    position: absolute !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    translate: none !important;
    flex: 0 0 auto !important;
  }

  html[lang="ar"]:is(#rcs-nav-utility-seal-a, :root):is(#rcs-nav-utility-seal-b, :root):is(#rcs-nav-utility-seal-c, :root) body .hf-nav-actions {
    direction: ltr !important;
    flex-direction: row !important;
  }
}

/* v17 — Global Reach shared frame
   The office rail and the undistorted 820:400 map now share both vertical
   datums: GLOBAL REACH at the top and the Toronto divider at the bottom. */
@media (min-width: 1025px) {
  html:is(#rcs-footer-v17-a, :root):is(#rcs-footer-v17-b, :root):is(#rcs-footer-v17-c, :root):is(#rcs-footer-v17-d, :root):is(#rcs-footer-v17-e, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-map-zone {
    grid-template-columns: clamp(210px, 18vw, 320px) minmax(0, 1fr) !important;
    column-gap: clamp(24px, 2.4vw, 44px) !important;
    padding-inline: 4vw !important;
  }

  html:is(#rcs-footer-v17-a, :root):is(#rcs-footer-v17-b, :root):is(#rcs-footer-v17-c, :root):is(#rcs-footer-v17-d, :root):is(#rcs-footer-v17-e, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-stack {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    align-content: space-between !important;
    align-self: stretch !important;
    min-block-size: 0 !important;
    padding-block-start: 0 !important;
  }

  html:is(#rcs-footer-v17-a, :root):is(#rcs-footer-v17-b, :root):is(#rcs-footer-v17-c, :root):is(#rcs-footer-v17-d, :root):is(#rcs-footer-v17-e, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-map,
  html:is(#rcs-footer-v17-a, :root):is(#rcs-footer-v17-b, :root):is(#rcs-footer-v17-c, :root):is(#rcs-footer-v17-d, :root):is(#rcs-footer-v17-e, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-map svg {
    aspect-ratio: 820 / 400 !important;
  }
}

@media (min-width: 1025px) and (max-width: 1599px) {
  html:is(#rcs-footer-v17-a, :root):is(#rcs-footer-v17-b, :root):is(#rcs-footer-v17-c, :root):is(#rcs-footer-v17-d, :root):is(#rcs-footer-v17-e, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-tag {
    margin-block-end: 8px !important;
  }

  html:is(#rcs-footer-v17-a, :root):is(#rcs-footer-v17-b, :root):is(#rcs-footer-v17-c, :root):is(#rcs-footer-v17-d, :root):is(#rcs-footer-v17-e, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-title {
    line-height: 0.94 !important;
  }

  html:is(#rcs-footer-v17-a, :root):is(#rcs-footer-v17-b, :root):is(#rcs-footer-v17-c, :root):is(#rcs-footer-v17-d, :root):is(#rcs-footer-v17-e, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-card {
    gap: 6px !important;
    padding: 6px 0 !important;
  }

  html:is(#rcs-footer-v17-a, :root):is(#rcs-footer-v17-b, :root):is(#rcs-footer-v17-c, :root):is(#rcs-footer-v17-d, :root):is(#rcs-footer-v17-e, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-card.active {
    gap: 6px !important;
    padding: 8px 0 10px 16px !important;
  }

  html[lang="ar"]:is(#rcs-footer-v17-a, :root):is(#rcs-footer-v17-b, :root):is(#rcs-footer-v17-c, :root):is(#rcs-footer-v17-d, :root):is(#rcs-footer-v17-e, :root) body
    #rcs-footer-magnetic-ar .fm-mz-card.active {
    padding: 8px 16px 10px 0 !important;
  }

  html:is(#rcs-footer-v17-a, :root):is(#rcs-footer-v17-b, :root):is(#rcs-footer-v17-c, :root):is(#rcs-footer-v17-d, :root):is(#rcs-footer-v17-e, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-card.active .fm-mz-addr {
    margin-block-start: 0 !important;
    line-height: 1.35 !important;
  }

  html:is(#rcs-footer-v17-a, :root):is(#rcs-footer-v17-b, :root):is(#rcs-footer-v17-c, :root):is(#rcs-footer-v17-d, :root):is(#rcs-footer-v17-e, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-card.active .fm-mz-contact {
    gap: 2px !important;
    margin-block-start: 2px !important;
  }

  html:is(#rcs-footer-v17-a, :root):is(#rcs-footer-v17-b, :root):is(#rcs-footer-v17-c, :root):is(#rcs-footer-v17-d, :root):is(#rcs-footer-v17-e, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-card.active .fm-mz-maps {
    margin-block-start: 2px !important;
    padding-block-start: 4px !important;
  }
}

/* v17 alignment seal: the visible map begins with the GLOBAL heading and its
   lower edge is the Toronto row's upper divider at every desktop width. */
@media (min-width: 1025px) {
  html:is(#rcs-footer-v17-lock-a, :root):is(#rcs-footer-v17-lock-b, :root):is(#rcs-footer-v17-lock-c, :root):is(#rcs-footer-v17-lock-d, :root):is(#rcs-footer-v17-lock-e, :root):is(#rcs-footer-v17-lock-f, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-map-zone {
    padding-block-end: clamp(96px, 8vw, 160px) !important;
  }

  html:is(#rcs-footer-v17-lock-a, :root):is(#rcs-footer-v17-lock-b, :root):is(#rcs-footer-v17-lock-c, :root):is(#rcs-footer-v17-lock-d, :root):is(#rcs-footer-v17-lock-e, :root):is(#rcs-footer-v17-lock-f, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-map {
    margin-block-start: clamp(29px, 1.8vw, 35px) !important;
  }

  html:is(#rcs-footer-v17-lock-a, :root):is(#rcs-footer-v17-lock-b, :root):is(#rcs-footer-v17-lock-c, :root):is(#rcs-footer-v17-lock-d, :root):is(#rcs-footer-v17-lock-e, :root):is(#rcs-footer-v17-lock-f, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-stack {
    position: relative !important;
    block-size: 100% !important;
    min-block-size: 0 !important;
    align-content: start !important;
    overflow: visible !important;
  }

  html:is(#rcs-footer-v17-lock-a, :root):is(#rcs-footer-v17-lock-b, :root):is(#rcs-footer-v17-lock-c, :root):is(#rcs-footer-v17-lock-d, :root):is(#rcs-footer-v17-lock-e, :root):is(#rcs-footer-v17-lock-f, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) :is(#mz-beirut, #mz-beirut-ar) {
    position: absolute !important;
    inset-block-end: 0 !important;
    inset-inline: 0 !important;
    inline-size: 100% !important;
    margin: 0 !important;
  }

  html:is(#rcs-footer-v17-lock-a, :root):is(#rcs-footer-v17-lock-b, :root):is(#rcs-footer-v17-lock-c, :root):is(#rcs-footer-v17-lock-d, :root):is(#rcs-footer-v17-lock-e, :root):is(#rcs-footer-v17-lock-f, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) :is(#mz-toronto, #mz-toronto-ar) {
    position: absolute !important;
    inset-block-start: 100% !important;
    inset-inline: 0 !important;
    inline-size: 100% !important;
    margin: 0 !important;
  }
}

/* Exact cross-axis anchors. These values are the algebraic height of the
   responsive map column at the immutable 820:400 source ratio. */
@media (min-width: 1025px) {
  html:is(#rcs-footer-v17-exact-a, :root):is(#rcs-footer-v17-exact-b, :root):is(#rcs-footer-v17-exact-c, :root):is(#rcs-footer-v17-exact-d, :root):is(#rcs-footer-v17-exact-e, :root):is(#rcs-footer-v17-exact-f, :root):is(#rcs-footer-v17-exact-g, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-map-zone {
    --fm-zone-top: clamp(42px, 5vw, 82px);
    --fm-title-offset: clamp(29px, 1.8vw, 35px);
    --fm-map-height: 34.926829vw;
    position: relative !important;
  }

  html:is(#rcs-footer-v17-exact-a, :root):is(#rcs-footer-v17-exact-b, :root):is(#rcs-footer-v17-exact-c, :root):is(#rcs-footer-v17-exact-d, :root):is(#rcs-footer-v17-exact-e, :root):is(#rcs-footer-v17-exact-f, :root):is(#rcs-footer-v17-exact-g, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-stack {
    position: static !important;
  }

  html:is(#rcs-footer-v17-exact-a, :root):is(#rcs-footer-v17-exact-b, :root):is(#rcs-footer-v17-exact-c, :root):is(#rcs-footer-v17-exact-d, :root):is(#rcs-footer-v17-exact-e, :root):is(#rcs-footer-v17-exact-f, :root):is(#rcs-footer-v17-exact-g, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) :is(#mz-beirut, #mz-beirut-ar),
  html:is(#rcs-footer-v17-exact-a, :root):is(#rcs-footer-v17-exact-b, :root):is(#rcs-footer-v17-exact-c, :root):is(#rcs-footer-v17-exact-d, :root):is(#rcs-footer-v17-exact-e, :root):is(#rcs-footer-v17-exact-f, :root):is(#rcs-footer-v17-exact-g, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) :is(#mz-toronto, #mz-toronto-ar) {
    inset-block-start: calc(var(--fm-zone-top) + var(--fm-title-offset) + var(--fm-map-height)) !important;
    inset-block-end: auto !important;
    inset-inline: auto !important;
    inset-inline-start: 4vw !important;
    inline-size: clamp(210px, 18vw, 320px) !important;
  }

  html:is(#rcs-footer-v17-exact-a, :root):is(#rcs-footer-v17-exact-b, :root):is(#rcs-footer-v17-exact-c, :root):is(#rcs-footer-v17-exact-d, :root):is(#rcs-footer-v17-exact-e, :root):is(#rcs-footer-v17-exact-f, :root):is(#rcs-footer-v17-exact-g, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) :is(#mz-beirut, #mz-beirut-ar) {
    transform: translateY(-100%) !important;
  }

  html:is(#rcs-footer-v17-exact-a, :root):is(#rcs-footer-v17-exact-b, :root):is(#rcs-footer-v17-exact-c, :root):is(#rcs-footer-v17-exact-d, :root):is(#rcs-footer-v17-exact-e, :root):is(#rcs-footer-v17-exact-f, :root):is(#rcs-footer-v17-exact-g, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) :is(#mz-toronto, #mz-toronto-ar) {
    transform: none !important;
  }
}

@media (min-width: 1025px) and (max-width: 1166px) {
  html:is(#rcs-footer-v17-exact-a, :root):is(#rcs-footer-v17-exact-b, :root):is(#rcs-footer-v17-exact-c, :root):is(#rcs-footer-v17-exact-d, :root):is(#rcs-footer-v17-exact-e, :root):is(#rcs-footer-v17-exact-f, :root):is(#rcs-footer-v17-exact-g, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-map-zone {
    --fm-map-height: calc(43.707317vw - 102.439024px);
  }
}

@media (min-width: 1778px) and (max-width: 1832px) {
  html:is(#rcs-footer-v17-exact-a, :root):is(#rcs-footer-v17-exact-b, :root):is(#rcs-footer-v17-exact-c, :root):is(#rcs-footer-v17-exact-d, :root):is(#rcs-footer-v17-exact-e, :root):is(#rcs-footer-v17-exact-f, :root):is(#rcs-footer-v17-exact-g, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-map-zone {
    --fm-map-height: calc(43.707317vw - 156.097561px);
  }
}

@media (min-width: 1833px) {
  html:is(#rcs-footer-v17-exact-a, :root):is(#rcs-footer-v17-exact-b, :root):is(#rcs-footer-v17-exact-c, :root):is(#rcs-footer-v17-exact-d, :root):is(#rcs-footer-v17-exact-e, :root):is(#rcs-footer-v17-exact-f, :root):is(#rcs-footer-v17-exact-g, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-map-zone {
    --fm-map-height: calc(44.878049vw - 177.560976px);
  }
}

@media (min-width: 1025px) and (max-height: 820px) {
  html:is(#rcs-footer-v17-exact-a, :root):is(#rcs-footer-v17-exact-b, :root):is(#rcs-footer-v17-exact-c, :root):is(#rcs-footer-v17-exact-d, :root):is(#rcs-footer-v17-exact-e, :root):is(#rcs-footer-v17-exact-f, :root):is(#rcs-footer-v17-exact-g, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-map-zone {
    --fm-zone-top: clamp(30px, 4.5vh, 42px);
  }
}

@media (min-width: 1600px) {
  html:is(#rcs-footer-v17-top-a, :root):is(#rcs-footer-v17-top-b, :root):is(#rcs-footer-v17-top-c, :root):is(#rcs-footer-v17-top-d, :root):is(#rcs-footer-v17-top-e, :root):is(#rcs-footer-v17-top-f, :root):is(#rcs-footer-v17-top-g, :root):is(#rcs-footer-v17-top-h, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-map {
    margin-block-start: 35px !important;
  }
}

/* v18 — restore the office index as one continuous rail. Beirut and Toronto
   remain directly under Riyadh; the enlarged map stays independent. */
@media (min-width: 1025px) {
  html:is(#rcs-footer-v18-a, :root):is(#rcs-footer-v18-b, :root):is(#rcs-footer-v18-c, :root):is(#rcs-footer-v18-d, :root):is(#rcs-footer-v18-e, :root):is(#rcs-footer-v18-f, :root):is(#rcs-footer-v18-g, :root):is(#rcs-footer-v18-h, :root):is(#rcs-footer-v18-i, :root):is(#rcs-footer-v18-j, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-map-zone {
    padding-block-end: clamp(22px, 3vw, 42px) !important;
  }

  html:is(#rcs-footer-v18-a, :root):is(#rcs-footer-v18-b, :root):is(#rcs-footer-v18-c, :root):is(#rcs-footer-v18-d, :root):is(#rcs-footer-v18-e, :root):is(#rcs-footer-v18-f, :root):is(#rcs-footer-v18-g, :root):is(#rcs-footer-v18-h, :root):is(#rcs-footer-v18-i, :root):is(#rcs-footer-v18-j, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-stack {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-content: normal !important;
    align-self: start !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    padding-block-start: clamp(12px, 1.2vw, 20px) !important;
    overflow: visible !important;
  }

  html:is(#rcs-footer-v18-a, :root):is(#rcs-footer-v18-b, :root):is(#rcs-footer-v18-c, :root):is(#rcs-footer-v18-d, :root):is(#rcs-footer-v18-e, :root):is(#rcs-footer-v18-f, :root):is(#rcs-footer-v18-g, :root):is(#rcs-footer-v18-h, :root):is(#rcs-footer-v18-i, :root):is(#rcs-footer-v18-j, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) :is(#mz-beirut, #mz-beirut-ar, #mz-toronto, #mz-toronto-ar) {
    position: static !important;
    inset: auto !important;
    inline-size: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (min-width: 1025px) and (max-width: 1250px) {
  html[lang="ar"]:is(#rcs-footer-v17-ar-a, :root):is(#rcs-footer-v17-ar-b, :root):is(#rcs-footer-v17-ar-c, :root):is(#rcs-footer-v17-ar-d, :root):is(#rcs-footer-v17-ar-e, :root):is(#rcs-footer-v17-ar-f, :root):is(#rcs-footer-v17-ar-g, :root):is(#rcs-footer-v17-ar-h, :root):is(#rcs-footer-v17-ar-i, :root) body
    #rcs-footer-magnetic-ar .fm-mz-map {
    margin-block-start: 33px !important;
  }
}

@media (min-width: 1251px) and (max-width: 1599px) {
  html[lang="ar"]:is(#rcs-footer-v17-ar-a, :root):is(#rcs-footer-v17-ar-b, :root):is(#rcs-footer-v17-ar-c, :root):is(#rcs-footer-v17-ar-d, :root):is(#rcs-footer-v17-ar-e, :root):is(#rcs-footer-v17-ar-f, :root):is(#rcs-footer-v17-ar-g, :root):is(#rcs-footer-v17-ar-h, :root):is(#rcs-footer-v17-ar-i, :root) body
    #rcs-footer-magnetic-ar .fm-mz-map {
    margin-block-start: 32px !important;
  }
}

@media (min-width: 1600px) {
  html[lang="ar"]:is(#rcs-footer-v17-ar-a, :root):is(#rcs-footer-v17-ar-b, :root):is(#rcs-footer-v17-ar-c, :root):is(#rcs-footer-v17-ar-d, :root):is(#rcs-footer-v17-ar-e, :root):is(#rcs-footer-v17-ar-f, :root):is(#rcs-footer-v17-ar-g, :root):is(#rcs-footer-v17-ar-h, :root):is(#rcs-footer-v17-ar-i, :root) body
    #rcs-footer-magnetic-ar .fm-mz-map {
    margin-block-start: 38px !important;
  }
}

/* Arabic project dialogs are a true mirror of English: image left, content
   right, close control upper-left, and the eyebrow/title share one right edge. */
html[lang="ar"]:is(#rcs-dialog-v16-a, :root):is(#rcs-dialog-v16-b, :root):is(#rcs-dialog-v16-c, :root) body
  .pmc-m-box > .pmc-m-close {
  inset-block-start: clamp(16px, 1.4vw, 24px) !important;
  inset-inline: auto !important;
  left: clamp(16px, 1.4vw, 24px) !important;
  right: auto !important;
}

html[lang="ar"]:is(#rcs-dialog-v16-a, :root):is(#rcs-dialog-v16-b, :root):is(#rcs-dialog-v16-c, :root) body
  :is(.pmc-m-content, .pmc-m-head, .pmc-m-desc) {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"]:is(#rcs-dialog-v16-a, :root):is(#rcs-dialog-v16-b, :root):is(#rcs-dialog-v16-c, :root) body
  :is(.pmc-m-tag, .pmc-m-eyebrow) {
  margin-inline: 0 !important;
}

html[lang="ar"]:is(#rcs-dialog-v16-a, :root):is(#rcs-dialog-v16-b, :root):is(#rcs-dialog-v16-c, :root) body
  .pmc-m-head {
  inline-size: 100% !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

html[lang="ar"]:is(#rcs-dialog-v16-a, :root):is(#rcs-dialog-v16-b, :root):is(#rcs-dialog-v16-c, :root) body
  .pmc-m-head::after {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

/* On desktop the title rail and the map share a top datum. The map keeps its
   native 820:400 SVG viewBox, scales uniformly, and receives the dominant
   width instead of being pushed below the office rail. */
@media (min-width: 992px) {
  html:is(#rcs-footer-v16-a, :root):is(#rcs-footer-v16-b, :root):is(#rcs-footer-v16-c, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-map-zone {
    display: grid !important;
    grid-template-columns: clamp(250px, 22vw, 340px) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "intro map" "stack map" !important;
    column-gap: clamp(36px, 4vw, 72px) !important;
    row-gap: 0 !important;
    align-items: start !important;
    justify-content: initial !important;
    padding: clamp(42px, 5vw, 82px) 6vw clamp(22px, 3vw, 42px) !important;
  }

  html:is(#rcs-footer-v16-a, :root):is(#rcs-footer-v16-b, :root):is(#rcs-footer-v16-c, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-intro {
    grid-area: intro !important;
    display: block !important;
    inline-size: 100% !important;
    margin: 0 !important;
  }

  html:is(#rcs-footer-v16-a, :root):is(#rcs-footer-v16-b, :root):is(#rcs-footer-v16-c, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-grid {
    display: contents !important;
  }

  html:is(#rcs-footer-v16-a, :root):is(#rcs-footer-v16-b, :root):is(#rcs-footer-v16-c, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-stack {
    grid-area: stack !important;
    align-self: start !important;
    inline-size: 100% !important;
    padding-block-start: clamp(24px, 3.5vh, 42px) !important;
  }

  html:is(#rcs-footer-v16-a, :root):is(#rcs-footer-v16-b, :root):is(#rcs-footer-v16-c, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-map {
    grid-area: map !important;
    align-self: start !important;
    inline-size: 100% !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    overflow: visible !important;
  }

  html:is(#rcs-footer-v16-a, :root):is(#rcs-footer-v16-b, :root):is(#rcs-footer-v16-c, :root) body
    #fm-d3-map,
  html:is(#rcs-footer-v16-a, :root):is(#rcs-footer-v16-b, :root):is(#rcs-footer-v16-c, :root) body
    #rcs-footer-magnetic-ar #fm-d3-map-ar {
    inline-size: 100% !important;
    max-inline-size: none !important;
    block-size: auto !important;
    margin: 0 !important;
  }

  html:is(#rcs-footer-v16-a, :root):is(#rcs-footer-v16-b, :root):is(#rcs-footer-v16-c, :root) body
    #fm-d3-map svg,
  html:is(#rcs-footer-v16-a, :root):is(#rcs-footer-v16-b, :root):is(#rcs-footer-v16-c, :root) body
    #rcs-footer-magnetic-ar #fm-d3-map-ar svg {
    display: block !important;
    inline-size: 100% !important;
    block-size: auto !important;
    max-inline-size: none !important;
    max-block-size: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}

@media (min-width: 992px) and (max-height: 820px) {
  html:is(#rcs-footer-v16-a, :root):is(#rcs-footer-v16-b, :root):is(#rcs-footer-v16-c, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-map-zone {
    padding-block: clamp(30px, 4.5vh, 42px) clamp(16px, 2.5vh, 24px) !important;
  }

  html:is(#rcs-footer-v16-a, :root):is(#rcs-footer-v16-b, :root):is(#rcs-footer-v16-c, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-stack {
    padding-block-start: 18px !important;
  }
}

/* ========================================================================== */
/* v14 — Contact field matrix                                                 */
/* ========================================================================== */
/* Three compact pairs keep the form fast to scan; the narrative field and
   action retain the full measure so longer project briefs never feel boxed. */
html:is(#rcs-contact-v14-a, :root):is(#rcs-contact-v14-b, :root):is(#rcs-contact-v14-c, :root):is(#rcs-contact-v14-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: clamp(16px, 2vw, 24px) !important;
  align-items: start !important;
}

html:is(#rcs-contact-v14-a, :root):is(#rcs-contact-v14-b, :root):is(#rcs-contact-v14-c, :root):is(#rcs-contact-v14-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) :is(.bp-full-row, .submit-wrap) {
  grid-column: 1 / -1 !important;
}

@media (max-width: 600px) {
  html:is(#rcs-contact-v14-a, :root):is(#rcs-contact-v14-b, :root):is(#rcs-contact-v14-c, :root):is(#rcs-contact-v14-d, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:is(#rcs-contact-v14-a, :root):is(#rcs-contact-v14-b, :root):is(#rcs-contact-v14-c, :root):is(#rcs-contact-v14-d, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) :is(.bp-full-row, .submit-wrap) {
    grid-column: 1 !important;
  }
}

/* ========================================================================== */
/* v15 — Mac-scale typography on Windows laptops                              */
/* ========================================================================== */
/* The export used viewport width to shrink the root font below the approved
   1440px Mac reference.  On 125%/150% Windows display scaling that compounds
   with the smaller CSS viewport and makes the whole interface look miniature.
   Keep the authored 16px baseline throughout the desktop/laptop range. */
@media (min-width: 1025px) and (max-width: 1470px) {
  html:is(#rcs-laptop-type-a, :root):is(#rcs-laptop-type-b, :root) {
    font-size: 16px !important;
  }
}

/* Contact remains a two-column desktop composition, but its hierarchy no
   longer collapses when a Windows browser has a short usable viewport. */
@media (min-width: 1025px) and (max-height: 820px) {
  html:is(#rcs-laptop-contact-a, :root):is(#rcs-laptop-contact-b, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) :is(.c-info-panel, .c-form-panel) {
    padding: clamp(30px, 3vw, 42px) !important;
  }

  html:is(#rcs-laptop-contact-a, :root):is(#rcs-laptop-contact-b, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-title {
    font-size: clamp(46px, 3.4vw, 54px) !important;
    line-height: 1.08 !important;
  }

  html:is(#rcs-laptop-contact-a, :root):is(#rcs-laptop-contact-b, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .form-intro h3 {
    font-size: clamp(28px, 2.2vw, 32px) !important;
    line-height: 1.15 !important;
  }

  html:is(#rcs-laptop-contact-a, :root):is(#rcs-laptop-contact-b, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .form-intro p,
  html:is(#rcs-laptop-contact-a, :root):is(#rcs-laptop-contact-b, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-text p {
    font-size: 15px !important;
  }

  html:is(#rcs-laptop-contact-a, :root):is(#rcs-laptop-contact-b, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-tag,
  html:is(#rcs-laptop-contact-a, :root):is(#rcs-laptop-contact-b, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-text h5 {
    font-size: 13px !important;
  }

  html:is(#rcs-laptop-contact-a, :root):is(#rcs-laptop-contact-b, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-details {
    gap: 18px !important;
  }
}

/* The approved closer is deliberately two lines on desktop.  The previous
   7vw heading produced a third line on HP/Lenovo widths and exaggerated the
   platform difference.  Use a stable editorial scale and hold the metric
   numerals at the same readable size as the Mac reference. */
@media (min-width: 901px) {
  html:is(#rcs-laptop-cta-a, :root):is(#rcs-laptop-cta-b, :root) body
    section:is(#rcs-cta-section, #rcs-cta-section-ar) .cta-headline {
    font-size: clamp(58px, 5.2vw, 76px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.025em !important;
    max-inline-size: 100% !important;
  }

  html[lang="ar"]:is(#rcs-laptop-cta-a, :root):is(#rcs-laptop-cta-b, :root) body
    section:is(#rcs-cta-section, #rcs-cta-section-ar) .cta-headline {
    font-size: clamp(52px, 4.8vw, 70px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  html:is(#rcs-laptop-cta-a, :root):is(#rcs-laptop-cta-b, :root) body
    section:is(#rcs-cta-section, #rcs-cta-section-ar) .cta-led-num {
    font-size: clamp(40px, 2.8vw, 48px) !important;
  }
}

/* ========================================================================== */
/* RCS project-dialog system v12                                                */
/*
   Project dialogs are reparented to <body> so they cannot be trapped by an
   exported section's stacking context. Consequently every essential visual
   rule must live here rather than under a page-specific section selector.
   This block is the single source of truth for EN and AR project dialogs.
*/
html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-modal {
  position: fixed !important;
  inset: 0 !important;
  inline-size: 100vw !important;
  block-size: 100dvh !important;
  padding: clamp(18px, 3vw, 48px) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  background: rgba(10, 10, 11, 0.94) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
}

html[data-theme="light"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-modal {
  background: rgba(239, 240, 242, 0.96) !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-modal.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: rcs-project-dialog-in 220ms cubic-bezier(0.2, 0.72, 0.2, 1) both !important;
}

@keyframes rcs-project-dialog-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-box {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(340px, 43%) minmax(0, 57%) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  inline-size: min(92vw, 1580px) !important;
  block-size: min(84dvh, 880px) !important;
  min-inline-size: 0 !important;
  min-block-size: min(570px, 84dvh) !important;
  max-inline-size: 1580px !important;
  max-block-size: calc(100dvh - 36px) !important;
  margin: auto !important;
  overflow: hidden !important;
  direction: ltr !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 4px !important;
  background: #262626 !important;
  background-image: none !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38) !important;
  transform-origin: 50% 54% !important;
  animation: rcs-project-surface-in 280ms cubic-bezier(0.2, 0.72, 0.2, 1) both !important;
}

@keyframes rcs-project-surface-in {
  from { opacity: 0; transform: translateY(12px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

html[data-theme="light"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-box {
  border-color: rgba(31, 31, 31, 0.18) !important;
  background: #f8f9fa !important;
  box-shadow: 0 30px 80px rgba(20, 20, 22, 0.16) !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-left {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  display: block !important;
  inline-size: auto !important;
  block-size: 100% !important;
  min-inline-size: 0 !important;
  min-block-size: 0 !important;
  overflow: hidden !important;
  background: #111 !important;
}

html[lang="ar"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-box {
  grid-template-columns: minmax(0, 57%) minmax(340px, 43%) !important;
}

html[lang="ar"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-left {
  grid-column: 1 !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-img,
html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-left > :is(img, picture) {
  display: block !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  max-inline-size: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-right {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  inline-size: auto !important;
  block-size: 100% !important;
  min-inline-size: 0 !important;
  min-block-size: 0 !important;
  padding: clamp(38px, 3.35vw, 64px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  direction: ltr !important;
  text-align: left !important;
  background: #262626 !important;
}

html[lang="ar"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-right {
  grid-column: 2 !important;
  direction: rtl !important;
  text-align: right !important;
}

html[data-theme="light"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-right {
  background: #f8f9fa !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-content {
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  margin: auto 0 !important;
  direction: inherit !important;
  text-align: inherit !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body :is(.pmc-m-tag, .pmc-m-eyebrow) {
  display: inline-flex !important;
  align-items: center !important;
  inline-size: fit-content !important;
  margin: 0 0 18px !important;
  padding: 7px 13px !important;
  border-radius: 3px !important;
  background: var(--rcs-brand-red, #8c182a) !important;
  color: #fff !important;
  font-family: var(--rcs-font-primary) !important;
  font-size: clamp(14px, 0.76vw, 16px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

@media (min-width: 901px) {
  html[lang="ar"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body :is(.pmc-m-tag, .pmc-m-eyebrow) {
    margin-inline-start: 84px !important;
  }
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-head {
  max-inline-size: 100% !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: var(--rcs-font-primary) !important;
  font-size: clamp(36px, 2.45vw, 48px) !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  overflow-wrap: anywhere !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-head::after {
  content: "" !important;
  display: block !important;
  inline-size: 52px !important;
  block-size: 3px !important;
  margin-block-start: 18px !important;
  margin-inline: 0 !important;
  border-radius: 2px !important;
  background: var(--rcs-brand-red, #8c182a) !important;
}

html[data-theme="light"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-head {
  color: #252527 !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(17px, 1.35vw, 24px) clamp(22px, 2vw, 34px) !important;
  inline-size: 100% !important;
  margin: 0 0 24px !important;
  padding: 0 0 24px !important;
  border-block-end: 1px solid rgba(255, 255, 255, 0.16) !important;
  direction: inherit !important;
}

html[data-theme="light"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-grid {
  border-block-end-color: rgba(31, 31, 31, 0.16) !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-item {
  min-inline-size: 0 !important;
  direction: inherit !important;
  text-align: inherit !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-item.full {
  grid-column: 1 / -1 !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-item h6 {
  margin: 0 0 6px !important;
  color: var(--rcs-brand-red, #a61f34) !important;
  font-family: var(--rcs-font-primary) !important;
  font-size: clamp(14px, 0.8vw, 16px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-item p {
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--rcs-font-primary) !important;
  font-size: clamp(17px, 1.02vw, 19px) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

html[data-theme="light"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-item p {
  color: #252527 !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-desc {
  max-inline-size: 68ch !important;
  margin: 0 !important;
  color: #d2d2d4 !important;
  font-family: var(--rcs-font-primary) !important;
  font-size: clamp(17px, 0.98vw, 19px) !important;
  font-weight: 400 !important;
  line-height: 1.82 !important;
  letter-spacing: 0 !important;
  direction: inherit !important;
  text-align: start !important;
  text-wrap: pretty !important;
  overflow-wrap: anywhere !important;
}

html[data-theme="light"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-desc {
  color: #55565a !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-box > .pmc-m-close {
  position: absolute !important;
  inset-block-start: clamp(16px, 1.4vw, 24px) !important;
  inset-inline-end: clamp(16px, 1.4vw, 24px) !important;
  inset-inline-start: auto !important;
  inline-size: 58px !important;
  block-size: 58px !important;
  min-inline-size: 58px !important;
  min-block-size: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 50% !important;
  background: rgba(20, 20, 21, 0.68) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
  z-index: 50 !important;
}

html[data-theme="light"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-box > .pmc-m-close {
  border-color: rgba(140, 24, 42, 0.52) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--rcs-brand-red, #8c182a) !important;
}

html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-box > .pmc-m-close :is(svg, ion-icon) {
  inline-size: 24px !important;
  block-size: 24px !important;
  font-size: 24px !important;
}

@media (hover: hover) and (pointer: fine) {
  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-box > .pmc-m-close:hover {
    border-color: #fff !important;
    background: #fff !important;
    color: var(--rcs-brand-red, #8c182a) !important;
    transform: rotate(90deg) !important;
  }
}

@media (max-width: 900px) {
  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-modal,
  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-modal.active {
    padding: 0 !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-box,
  html[lang="ar"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-box {
    display: flex !important;
    flex-direction: column !important;
    inline-size: min(100%, 760px) !important;
    block-size: auto !important;
    min-block-size: 100dvh !important;
    max-inline-size: 760px !important;
    max-block-size: none !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-left,
  html[lang="ar"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-left {
    order: 1 !important;
    flex: 0 0 clamp(260px, 37dvh, 390px) !important;
    inline-size: 100% !important;
    block-size: clamp(260px, 37dvh, 390px) !important;
    min-block-size: 260px !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-right,
  html[lang="ar"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-right {
    order: 2 !important;
    flex: 0 0 auto !important;
    inline-size: 100% !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    padding: clamp(32px, 6vw, 48px) clamp(24px, 6vw, 46px) calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-content {
    margin: 0 !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-head {
    font-size: clamp(34px, 5.2vw, 42px) !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-item h6 {
    font-size: 14px !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-item p {
    font-size: 17px !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-desc {
    font-size: 17px !important;
    line-height: 1.82 !important;
  }
}

@media (max-width: 520px) {
  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-left,
  html[lang="ar"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-left {
    flex-basis: clamp(230px, 34dvh, 300px) !important;
    block-size: clamp(230px, 34dvh, 300px) !important;
    min-block-size: 230px !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-right,
  html[lang="ar"]:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-right {
    padding: 30px 22px calc(48px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 16px !important;
    margin-block-end: 22px !important;
    padding-block-end: 22px !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-head {
    margin-block-end: 22px !important;
    font-size: clamp(31px, 8vw, 36px) !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-item h6 {
    font-size: 13px !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-item p {
    font-size: 16px !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-desc {
    font-size: 17px !important;
    line-height: 1.82 !important;
  }

  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body .pmc-m-box > .pmc-m-close {
    inset-block-start: max(14px, env(safe-area-inset-top, 14px)) !important;
    inset-inline-end: max(14px, env(safe-area-inset-right, 14px)) !important;
    inline-size: 56px !important;
    block-size: 56px !important;
    min-inline-size: 56px !important;
    min-block-size: 56px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:is(#rcs-dialog-v12-a, :root):is(#rcs-dialog-v12-b, :root):is(#rcs-dialog-v12-c, :root):is(#rcs-dialog-v12-d, :root) body :is(.pmc-modal.active, .pmc-m-box) {
    animation: none !important;
  }
}

/* ========================================================================== */
/* RCS responsive quality pass v10                                             */
/* ========================================================================== */

/* Arabic uses naturally joined glyphs. No tracking is allowed to split words. */
html[lang="ar"] body *:not(svg):not(path):not(line):not(polyline):not(circle):not(rect) {
  letter-spacing: 0 !important;
  word-spacing: normal !important;
}

html[lang="ar"]:is(#rcs-arabic-no-tracking, :root):is(#rcs-arabic-no-tracking-2, :root) body
  *:not(svg):not(path):not(line):not(polyline):not(circle):not(rect) {
  letter-spacing: 0 !important;
  word-spacing: normal !important;
}

/* Mobile navigation is typography-led: no decorative card around the menu
   trigger, accordion heading, or individual project destinations. */
@media (max-width: 991px) {
  html body .hf-hamburger,
  html body .hf-hamburger.rcs-glass-control,
  html body .hf-hamburger.rcs-glass-icon {
    inline-size: 48px !important;
    block-size: 48px !important;
    min-inline-size: 48px !important;
    min-block-size: 48px !important;
    padding: 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body :is(.hf-mob-link, .hf-mob-acc-btn, .hf-mob-sublink),
  html body .hf-mob-sublink.rcs-glass-control,
  html body .hf-mob-sublink.rcs-glass-compact {
    inline-size: 100% !important;
    min-block-size: 44px !important;
    block-size: auto !important;
    margin: 0 !important;
    padding: 11px 2px !important;
    /* These are forced to full width above, so without this they fall back to
       text-align:start and sit left in English / right in Arabic while the
       top-level items stay centred. */
    text-align: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body .hf-mob-acc-btn {
    border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
  }

  html[data-theme="light"] body .hf-mob-acc-btn {
    border-bottom-color: rgba(38, 38, 38, 0.14) !important;
  }

  html body .hf-mob-sub {
    padding: 5px 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* Homepage: one uninterrupted first screen and restrained spacing into About. */
@media (max-width: 767px) {
  html body .rcs-hero-section,
  html body #home.rcs-hero-section,
  html body #hero-home-content {
    block-size: 100dvh !important;
    min-block-size: 100dvh !important;
    max-block-size: none !important;
    margin-block: 0 !important;
  }

  html body :is(#rcs-about-vault, #rcs-about-vault-ar) {
    margin-block-start: 0 !important;
    padding-block-start: clamp(38px, 8vw, 58px) !important;
  }

  html body :is(#rcs-about-vault, #rcs-about-vault-ar) .vo-section-tag {
    margin-block-end: 24px !important;
  }
}

/* v21 sector-hero datum: all six EN/AR sector families share one measurable
   frame. On two-column layouts the red title card starts at the image top and
   the statistics finish at the image bottom. The paragraph and statistics use
   the red card's full inline measure, independent of OS font rasterization. */
html:is(#rcs-sector-hero-a, :root):is(#rcs-sector-hero-b, :root):is(#rcs-sector-hero-c, :root):is(#rcs-sector-hero-d, :root) body
  :is(
    #rcs-hero-commercial,
    #rcs-hero-commercial-ar,
    #rcs-hero-sports,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education,
    #rcs-hero-education-ar
  ) {
  --rcs-sector-hero-frame: clamp(450px, 70vh, 750px);
}

@media (min-width: 768px) {
  html:is(#rcs-sector-hero-a, :root):is(#rcs-sector-hero-b, :root):is(#rcs-sector-hero-c, :root):is(#rcs-sector-hero-d, :root) body
    :is(
      #rcs-hero-commercial,
      #rcs-hero-commercial-ar,
      #rcs-hero-sports,
      #rcs-hero-sports-ar,
      #rcs-hero-hospitality,
      #rcs-hero-hospitality-ar,
      #rcs-hero-residential,
      #rcs-hero-residential-ar,
      #rcs-hero-healthcare,
      #rcs-hero-healthcare-ar,
      #rcs-hero-education,
      #rcs-hero-education-ar
    ) .hero-left {
    block-size: var(--rcs-sector-hero-frame) !important;
    min-block-size: 0 !important;
    justify-content: flex-start !important;
    align-self: center !important;
  }

  html:is(#rcs-sector-hero-a, :root):is(#rcs-sector-hero-b, :root):is(#rcs-sector-hero-c, :root):is(#rcs-sector-hero-d, :root) body
    :is(
      #rcs-hero-commercial,
      #rcs-hero-commercial-ar,
      #rcs-hero-sports,
      #rcs-hero-sports-ar,
      #rcs-hero-hospitality,
      #rcs-hero-hospitality-ar,
      #rcs-hero-residential,
      #rcs-hero-residential-ar,
      #rcs-hero-healthcare,
      #rcs-hero-healthcare-ar,
      #rcs-hero-education,
      #rcs-hero-education-ar
    ) .h-img-frame {
    block-size: var(--rcs-sector-hero-frame) !important;
  }

  html:is(#rcs-sector-hero-a, :root):is(#rcs-sector-hero-b, :root):is(#rcs-sector-hero-c, :root):is(#rcs-sector-hero-d, :root) body
    :is(
      #rcs-hero-commercial,
      #rcs-hero-commercial-ar,
      #rcs-hero-sports,
      #rcs-hero-sports-ar,
      #rcs-hero-hospitality,
      #rcs-hero-hospitality-ar,
      #rcs-hero-residential,
      #rcs-hero-residential-ar,
      #rcs-hero-healthcare,
      #rcs-hero-healthcare-ar,
      #rcs-hero-education,
      #rcs-hero-education-ar
    ) .hero-stats {
    margin-block-start: auto !important;
    margin-block-end: 0 !important;
  }
}

html:is(#rcs-sector-hero-a, :root):is(#rcs-sector-hero-b, :root):is(#rcs-sector-hero-c, :root):is(#rcs-sector-hero-d, :root) body
  :is(
    #rcs-hero-commercial,
    #rcs-hero-commercial-ar,
    #rcs-hero-sports,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education,
    #rcs-hero-education-ar
  ) :is(.title-card-wrap, .hero-desc, .hero-stats) {
  box-sizing: border-box !important;
  inline-size: 100% !important;
  max-inline-size: none !important;
  margin-inline: 0 !important;
}

html:is(#rcs-sector-hero-a, :root):is(#rcs-sector-hero-b, :root):is(#rcs-sector-hero-c, :root):is(#rcs-sector-hero-d, :root) body
  :is(
    #rcs-hero-commercial,
    #rcs-hero-commercial-ar,
    #rcs-hero-sports,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education,
    #rcs-hero-education-ar
  ) .hero-desc {
  text-align: start !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
  html:is(#rcs-sector-hero-a, :root):is(#rcs-sector-hero-b, :root):is(#rcs-sector-hero-c, :root):is(#rcs-sector-hero-d, :root) body
    :is(
      #rcs-hero-commercial,
      #rcs-hero-commercial-ar,
      #rcs-hero-sports,
      #rcs-hero-sports-ar,
      #rcs-hero-hospitality,
      #rcs-hero-hospitality-ar,
      #rcs-hero-residential,
      #rcs-hero-residential-ar,
      #rcs-hero-healthcare,
      #rcs-hero-healthcare-ar,
      #rcs-hero-education,
      #rcs-hero-education-ar
    ) {
    --rcs-sector-hero-frame: max(400px, 55vh);
  }
}

@media (min-width: 900px) and (max-height: 820px) {
  html:is(#rcs-sector-hero-a, :root):is(#rcs-sector-hero-b, :root):is(#rcs-sector-hero-c, :root):is(#rcs-sector-hero-d, :root) body
    :is(
      #rcs-hero-commercial,
      #rcs-hero-commercial-ar,
      #rcs-hero-sports,
      #rcs-hero-sports-ar,
      #rcs-hero-hospitality,
      #rcs-hero-hospitality-ar,
      #rcs-hero-residential,
      #rcs-hero-residential-ar,
      #rcs-hero-healthcare,
      #rcs-hero-healthcare-ar,
      #rcs-hero-education,
      #rcs-hero-education-ar
    ) {
    --rcs-sector-hero-frame: min(72vh, 560px);
  }
}

@media (min-width: 900px) and (max-width: 1199px) and (max-height: 820px) {
  html:is(#rcs-sector-hero-a, :root):is(#rcs-sector-hero-b, :root):is(#rcs-sector-hero-c, :root):is(#rcs-sector-hero-d, :root) body
    :is(
      #rcs-hero-commercial,
      #rcs-hero-commercial-ar,
      #rcs-hero-sports,
      #rcs-hero-sports-ar,
      #rcs-hero-hospitality,
      #rcs-hero-hospitality-ar,
      #rcs-hero-residential,
      #rcs-hero-residential-ar,
      #rcs-hero-healthcare,
      #rcs-hero-healthcare-ar,
      #rcs-hero-education,
      #rcs-hero-education-ar
    ) {
    --rcs-sector-hero-frame: max(400px, min(72vh, 560px));
  }
}

/* Red editorial cards use the same small radius throughout the system. */
:is(.vo-red-header, .intro-red-card, .bp-intro-panel, .giga-title-card, .srv-red-card, .v-red-card, .v-red-card-mob, .lr-red-card, .m-header, .port-header-section h2) {
  border-radius: 8px !important;
  overflow: visible !important;
}

/* Keep the corner marker outside the card border rather than cutting into it. */
:is(.vo-red-header, .intro-red-card, .bp-intro-panel, .giga-title-card, .srv-red-card, .v-red-card, .v-red-card-mob, .lr-red-card, .m-header, .port-header-section h2)::after {
  top: -7px !important;
  left: -7px !important;
  right: auto !important;
  inline-size: 20px !important;
  block-size: 20px !important;
  pointer-events: none !important;
}

html[lang="ar"] :is(.vo-red-header, .intro-red-card, .bp-intro-panel, .giga-title-card, .srv-red-card, .v-red-card, .v-red-card-mob, .lr-red-card, .m-header, .port-header-section h2)::after {
  left: auto !important;
  right: -7px !important;
}

/* Team cards are neutral at rest. The red frame is interaction feedback only. */
html:is(#rcs-team-red-card, :root):is(#rcs-team-red-card-2, :root):is(#rcs-team-red-card-3, :root) body
  :is(#rcs-leadership-system, #rcs-leadership-system-ar)
  .lr-member-card > .lr-card-flipper > .lr-side {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html[data-theme="light"]:is(#rcs-team-red-card, :root):is(#rcs-team-red-card-2, :root):is(#rcs-team-red-card-3, :root) body
  :is(#rcs-leadership-system, #rcs-leadership-system-ar)
  .lr-member-card > .lr-card-flipper > .lr-side {
  border-color: rgba(38, 38, 38, 0.18) !important;
}

@media (hover: hover) and (pointer: fine) {
  html:is(#rcs-team-red-card, :root):is(#rcs-team-red-card-2, :root):is(#rcs-team-red-card-3, :root) body
    :is(#rcs-leadership-system, #rcs-leadership-system-ar)
    .lr-member-card:hover > .lr-card-flipper > .lr-side {
    border-color: var(--rcs-brand-red, #9c1b2f) !important;
  }
}

html:is(#rcs-team-red-card, :root):is(#rcs-team-red-card-2, :root):is(#rcs-team-red-card-3, :root) body
  :is(#rcs-leadership-system, #rcs-leadership-system-ar)
  .lr-member-card:focus-within > .lr-card-flipper > .lr-side {
  border-color: var(--rcs-brand-red, #9c1b2f) !important;
}

/* Project dialogs are solid website surfaces—no diagonal/blur gradient—and
   retain a stable two-column metadata grid on phones in both languages. */
html body .pmc-m-box.rcs-dialog-surface,
html body .pmc-m-box {
  background: #262626 !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-theme="light"] body .pmc-m-box.rcs-dialog-surface,
html[data-theme="light"] body .pmc-m-box {
  background: #f8f9fa !important;
  background-image: none !important;
}

html body .pmc-m-box.rcs-dialog-surface::before,
html body .pmc-m-box::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

html body .pmc-m-box > .pmc-m-close,
html body .pmc-m-close.rcs-glass-icon {
  inline-size: 54px !important;
  block-size: 54px !important;
  min-inline-size: 54px !important;
  min-block-size: 54px !important;
  padding: 0 !important;
}

html body .pmc-m-box > .pmc-m-close :is(svg, ion-icon),
html body .pmc-m-close.rcs-glass-icon :is(svg, ion-icon) {
  inline-size: 23px !important;
  block-size: 23px !important;
  font-size: 23px !important;
}

@media (max-width: 900px) {
  html body .pmc-modal {
    padding: 0 !important;
  }

  html body .pmc-m-box,
  html[lang="ar"] body .pmc-m-box {
    display: flex !important;
    flex-direction: column !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    min-block-size: 100dvh !important;
    block-size: auto !important;
    max-block-size: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  html body .pmc-m-left,
  html[lang="ar"] body .pmc-m-left {
    display: block !important;
    flex: 0 0 clamp(240px, 39dvh, 380px) !important;
    inline-size: 100% !important;
    block-size: clamp(240px, 39dvh, 380px) !important;
    min-block-size: 240px !important;
    overflow: hidden !important;
  }

  html body .pmc-m-left :is(img, picture),
  html body .pmc-m-img {
    display: block !important;
    inline-size: 100% !important;
    block-size: 100% !important;
    object-fit: cover !important;
  }

  html body .pmc-m-right,
  html[lang="ar"] body .pmc-m-right {
    display: block !important;
    flex: 0 0 auto !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    overflow: visible !important;
  }

  html body .pmc-m-grid,
  html[lang="ar"] body .pmc-m-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 18px !important;
  }
}

@media (max-width: 420px) {
  html body .pmc-m-box > .pmc-m-close,
  html body .pmc-m-close.rcs-glass-icon {
    inline-size: 52px !important;
    block-size: 52px !important;
    min-inline-size: 52px !important;
    min-block-size: 52px !important;
    top: max(12px, env(safe-area-inset-top, 12px)) !important;
    right: max(12px, env(safe-area-inset-right, 12px)) !important;
  }
}

/* Tablet/mobile Vision 2030 is a normal editorial flow, never a pinned scene. */
@media (max-width: 1199px) {
  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar),
  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) :is(#sec-giga-wrapper, #sec-giga-wrapper-ar) {
    block-size: auto !important;
    min-block-size: 0 !important;
    max-block-size: none !important;
    overflow: visible !important;
  }

  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) :is(#sec-giga-wrapper, #sec-giga-wrapper-ar) {
    padding: clamp(58px, 7vw, 86px) clamp(28px, 6vw, 72px) !important;
  }

  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) :is(#giga-sticky-stage, #giga-sticky-stage-ar) {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr) !important;
    gap: clamp(34px, 5vw, 64px) !important;
    align-items: start !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    inline-size: min(100%, 1160px) !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }

  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) :is(.g3d-col-left, .g3d-col-right) {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    inline-size: 100% !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-col-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* The page export makes .g3d-col-right a 2-column grid and collapses the
     spinner with `display: contents`, so the four cards become that grid's
     items. The rule below restores the spinner to `display: grid`, which turned
     the column into a NESTED grid: the spinner took one of the two tracks and
     split it again, so each card rendered at ~25% of the stage (154px at 768)
     and ~48% of the section sat empty, with up to 60px of caption clipped.
     Neutralise the outer grid so the spinner's own 2-up grid owns the column. */
  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-col-right {
    display: block !important;
    grid-template-columns: none !important;
  }

  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) .carousel-spinner {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    inline-size: 100% !important;
    block-size: auto !important;
    min-block-size: 0 !important;
  }

  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-card,
  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-card.active {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    inline-size: 100% !important;
    block-size: clamp(300px, 38vw, 410px) !important;
    min-block-size: 300px !important;
  }

  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-dl-btn {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    /* `order: initial` used to be set here. That resolves to 0, and because
       this selector outranks the page rule that asks for `order: 4`, the
       button sorted ahead of the title card (order 1) and the description
       (order 2) and jumped to the top of the section on phones. The stacked
       reading order has to be card, description, carousel, button. */
    order: 4 !important;
  }
}

@media (max-width: 900px) {
  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) :is(#giga-sticky-stage, #giga-sticky-stage-ar) {
    grid-template-columns: 1fr !important;
    row-gap: 24px !important;
  }

  /* Single column here, so flatten the left column into the grid and let the
     page's own order values (card 1, description 2, carousel 3, button 4)
     place the four blocks. Above 900px the stage is still two columns, so the
     column keeps its own flex layout. */
  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-col-left {
    display: contents !important;
  }

  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) .carousel-spinner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) :is(#sec-giga-wrapper, #sec-giga-wrapper-ar) {
    padding: 48px 20px 58px !important;
  }

  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) .carousel-spinner {
    grid-template-columns: 1fr !important;
  }

  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-card,
  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-card.active {
    block-size: clamp(340px, 112vw, 440px) !important;
  }
}

/* Services: Integrated Solutions is intentionally omitted on phones. The
   three service systems use compact selectors and readable card typography. */
@media (max-width: 767px) {
  html body :is(#rcs-blueprint, #rcs-blueprint-ar),
  html body :is(#rcs-blueprint, #rcs-blueprint-ar).rcs-route-anchor {
    display: none !important;
  }

  html.rcs-services-page body .rcs-blueprint-host {
    display: none !important;
    block-size: 0 !important;
    min-block-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 900px) {
  html body .rcs-service-sequence > .srv-viewport {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    padding: calc(var(--nav-height, 80px) + 18px) clamp(20px, 5vw, 42px) 54px !important;
    overflow: visible !important;
  }

  html body .rcs-service-sequence :is(.srv-left, .srv-right) {
    inline-size: 100% !important;
    max-inline-size: none !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .rcs-service-sequence .srv-red-card {
    max-inline-size: none !important;
    padding: clamp(22px, 4.5vw, 32px) !important;
  }

  html body .rcs-service-sequence .srv-head {
    font-size: clamp(2rem, 7vw, 3.3rem) !important;
    line-height: 1.08 !important;
  }

  html body .rcs-service-sequence .srv-desc {
    max-inline-size: none !important;
    font-size: clamp(15px, 2.1vw, 17px) !important;
    line-height: 1.65 !important;
    margin-block: 20px !important;
  }

  html body .rcs-service-sequence .srv-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px 16px !important;
    margin-block: 0 20px !important;
  }

  html body .rcs-service-sequence .srv-nav-item {
    min-block-size: 42px !important;
    padding: 8px 2px !important;
    font-size: clamp(12px, 1.9vw, 14px) !important;
    line-height: 1.25 !important;
  }

  html body .rcs-service-sequence .srv-global-cta {
    max-inline-size: none !important;
    min-block-size: 50px !important;
    padding: 13px 18px !important;
    font-size: 12px !important;
  }

  html body .rcs-service-sequence .srv-card-frame {
    inline-size: 100% !important;
    max-inline-size: none !important;
    block-size: clamp(500px, 68dvh, 620px) !important;
    min-block-size: 500px !important;
    margin: 0 !important;
  }

  html body .rcs-service-sequence .srv-media {
    block-size: 43% !important;
    min-block-size: 0 !important;
  }

  html body .rcs-service-sequence .srv-body {
    block-size: 57% !important;
    min-block-size: 0 !important;
    padding: clamp(20px, 4vw, 30px) !important;
    overflow-y: auto !important;
  }

  html body .rcs-service-sequence .srv-c-tit {
    font-size: clamp(1.55rem, 4.4vw, 2.2rem) !important;
    line-height: 1.08 !important;
  }

  html body .rcs-service-sequence .srv-p {
    font-size: clamp(14.5px, 2vw, 16px) !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 480px) {
  html body .rcs-service-sequence > .srv-viewport {
    gap: 22px !important;
    padding: calc(var(--nav-height, 72px) + 14px) 18px 44px !important;
  }

  html body .rcs-service-sequence .srv-desc {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.58 !important;
  }

  html body .rcs-service-sequence .srv-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 10px !important;
  }

  html body .rcs-service-sequence .srv-nav-item {
    min-block-size: 40px !important;
    font-size: 11.5px !important;
  }

  html body .rcs-service-sequence .srv-card-frame {
    block-size: 500px !important;
    min-block-size: 500px !important;
  }

  html body .rcs-service-sequence .srv-body {
    padding: 19px 18px !important;
  }
}

/* Careers and Contact: the right-hand form is one glass surface and every
   control has one focus frame. Native selects keep a Windows-safe arrow. */
:is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-right,
:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-form-panel {
  position: relative !important;
  background: rgba(255, 255, 255, 0.065) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 8px !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14) !important;
  overflow: visible !important;
}

html[data-theme="light"] :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-right,
html[data-theme="light"] :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-form-panel {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(140, 24, 42, 0.48) !important;
  box-shadow: 0 18px 42px rgba(38, 38, 38, 0.08) !important;
}

:is(#rcs-careers-unified, #rcs-careers-unified-ar) .form-field :is(input, textarea),
:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input {
  inline-size: 100% !important;
  min-block-size: 48px !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  border-radius: 5px !important;
  outline: 0 !important;
  background-color: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
}

html[data-theme="light"] :is(#rcs-careers-unified, #rcs-careers-unified-ar) .form-field :is(input, textarea),
html[data-theme="light"] :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input {
  border-color: rgba(38, 38, 38, 0.22) !important;
  background-color: rgba(255, 255, 255, 0.64) !important;
}

:is(#rcs-careers-unified, #rcs-careers-unified-ar) .form-field :is(input, textarea):is(:focus, :focus-visible),
:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input:is(:focus, :focus-visible) {
  border-color: var(--rcs-brand-red, #9c1b2f) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px rgba(156, 27, 47, 0.18) !important;
  background-color: rgba(255, 255, 255, 0.075) !important;
}

:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input-group {
  margin-block-end: 24px !important;
}

:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-label {
  top: 15px !important;
  inset-inline-start: 14px !important;
  inset-inline-end: auto !important;
}

:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input:is(:focus, :valid) + .bp-label,
:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) select.bp-input + .bp-label {
  top: -15px !important;
  inset-inline-start: 2px !important;
}

:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) select.bp-input {
  min-block-size: 50px !important;
  padding-inline: 14px 42px !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
  line-height: 1.35 !important;
  cursor: pointer !important;
}

html[lang="ar"] :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) select.bp-input {
  padding-inline: 42px 14px !important;
  background-position: left 14px center !important;
}

:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) select.bp-input option {
  background: #262626 !important;
  color: #fff !important;
}

html[data-theme="light"] :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) select.bp-input option {
  background: #fff !important;
  color: #2b2b2b !important;
}

/* On phones the footer map is intentionally absent and the final information
   row participates in normal flow instead of floating as a glass card. */
/* Portrait tablets use the phone footer bar too: at 768-834 the desktop
   3-column grid left `.fm-bottom-right` only ~325px, so legal / social / login
   wrapped onto three rows and the bar grew to ~140px tall. */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  html body :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-map,
  html body #rcs-footer-magnetic-ar .fm-mz-map {
    display: none !important;
  }

  html body :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: start !important;
    inline-size: 100% !important;
    margin: 0 !important;
    padding: 22px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-bottom-right {
    grid-column: 1 !important;
    inline-size: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px 18px !important;
    padding: 14px 0 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html[data-theme="light"] body :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-bottom-right {
    border-top-color: rgba(38, 38, 38, 0.14) !important;
  }

  html body :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-legal {
    flex: 1 1 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
  }

  html body :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-social-group {
    order: initial !important;
    /* `.fm-social-group { margin-inline-start: auto }` further down has no media
       query, and on phones `.fm-login-btn` also carries an auto inline-start
       margin. Two autos on one flex line split the free space, so the icon row
       started ~29px inside the bar's edge instead of aligning with the
       copyright and legal links. Only the login button may absorb the slack. */
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }

  html body :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-login-btn {
    order: initial !important;
    margin-inline-start: auto !important;
  }

  html body :is(#backTopBtn, .hf-back-top) {
    /* Was 124px, clearance for the contact pill and chatbot launcher that are
       both display:none now. 28px matches the tablet/desktop value; env()
       keeps the iOS home-indicator gap. */
    bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ========================================================================== */
/* RCS visual QA v8 — exact CTA material, original Home loader, fast routes   */
/* ========================================================================== */

/* The dropdown's Explore All Projects CTA is the canonical action component.
   The double :is() specificity guard intentionally defeats page-export rules
   without changing utility icons, language links, cards, or navigation tabs. */
html:is(#rcs-action-system, :root):is(#rcs-action-system-2, :root) body .rcs-explore-action {
  min-block-size: 46px !important;
  max-inline-size: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  padding: 0.58rem clamp(0.8rem, 1.6vw, 1.15rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 4px !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: var(--rcs-font-primary) !important;
  font-size: clamp(0.72rem, 0.7rem + 0.12vw, 0.82rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: clamp(0.05em, 0.1vw, 0.12em) !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  cursor: pointer !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14) !important;
  transform: none !important;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, transform 180ms ease !important;
}

html:is(#rcs-action-system, :root):is(#rcs-action-system-2, :root) body .rcs-explore-action :is(span, strong, small, svg, svg *, ion-icon) {
  color: inherit !important;
  stroke: currentColor;
}

html:is(#rcs-action-system, :root):is(#rcs-action-system-2, :root) body .rcs-explore-action:is(:hover, :focus-visible) {
  border-color: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: var(--rcs-brand-red) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-1px) !important;
}

html[data-theme="light"]:is(#rcs-action-system, :root):is(#rcs-action-system-2, :root) body .rcs-explore-action {
  border-color: rgba(140, 24, 42, 0.72) !important;
  background-color: rgba(255, 255, 255, 0.48) !important;
  color: var(--rcs-brand-red) !important;
  box-shadow: 0 8px 24px rgba(35, 26, 28, 0.12) !important;
}

html[data-theme="light"]:is(#rcs-action-system, :root):is(#rcs-action-system-2, :root) body .rcs-explore-action:is(:hover, :focus-visible) {
  border-color: var(--rcs-brand-red) !important;
  background-color: var(--rcs-brand-red) !important;
  color: #fff !important;
}

@media (hover: none) {
  html:is(#rcs-action-system, :root):is(#rcs-action-system-2, :root) body .rcs-explore-action:hover:not(:focus-visible) {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    transform: none !important;
  }

  html[data-theme="light"]:is(#rcs-action-system, :root):is(#rcs-action-system-2, :root) body .rcs-explore-action:hover:not(:focus-visible) {
    border-color: rgba(140, 24, 42, 0.72) !important;
    background-color: rgba(255, 255, 255, 0.48) !important;
    color: var(--rcs-brand-red) !important;
  }
}

/* Leadership framing belongs to each visible card face, never to an oversized
   wrapper around the flip component. */
html:is(#rcs-team-frame-reset, :root):is(#rcs-team-frame-reset-2, :root) body :is(.lr-member-card, .lr-side),
html:is(#rcs-team-frame-reset, :root):is(#rcs-team-frame-reset-2, :root) body .lr-member-card:is(:hover, :focus-within, .is-flipped) .lr-side {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Fresh/reloaded Home keeps the untouched branded logo choreography. Internal
   routes reuse its dark animated dot atmosphere without replaying the logo. */
#rcs-global-preloader {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation: none;
  transition: opacity 72ms ease, visibility 72ms ease !important;
}

html.rcs-logo-free-preloader #rcs-global-preloader .rcs-flying-logo {
  display: none !important;
}

html.rcs-logo-free-preloader #rcs-global-preloader #rcs-preloader-dot-canvas {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html.rcs-logo-free-preloader #rcs-global-preloader .rcs-shockwave {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 3 !important;
  width: min(22vw, 280px) !important;
  aspect-ratio: 1 !important;
  border: 1px solid rgba(154, 25, 47, 0.55) !important;
  border-radius: 50% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(0.35) !important;
}

html.rcs-logo-free-preloader #rcs-global-preloader.rcs-signal-active .rcs-shockwave {
  animation: rcs-signal-shockwave 900ms cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
}

/* Follow the active theme. `--c-dark` is the semantic token and IS remapped to
   --rcs-light-bg under html[data-theme="light"]; `--rcs-dark-bg` is a raw
   palette value that is not, so using it here forced the page-to-page
   preloader to stay near-black even in light mode. */
html.rcs-logo-free-preloader #rcs-global-preloader .rcs-preloader-bg {
  opacity: 1 !important;
  background: var(--c-dark, #262626) !important;
}

#rcs-global-preloader.rcs-loader-exiting {
  opacity: 0 !important;
  visibility: hidden !important;
}

#rcs-global-preloader.rcs-loader-ready {
  display: none !important;
}

html.rcs-logo-free-preloader.rcs-route-leaving #rcs-global-preloader {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: none !important;
}

body.rcs-hero-ready :is(.hg-headline, .hg-sub, .rcs-bottom-area, .rcs-stat-item) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

@keyframes rcs-signal-shockwave {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.35); }
  70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
}

@media (prefers-reduced-motion: reduce) {
  html.rcs-logo-free-preloader #rcs-global-preloader .rcs-shockwave { animation: none !important; }
}

html:is(#rcs-team-red-card, :root):is(#rcs-team-red-card-2, :root) body
  :is(#rcs-leadership-system, #rcs-leadership-system-ar)
  .lr-member-card > .lr-card-flipper > .lr-side,
html:is(#rcs-team-red-card, :root):is(#rcs-team-red-card-2, :root) body
  :is(#rcs-leadership-system, #rcs-leadership-system-ar)
  .lr-member-card:is(:hover, :focus-within, .is-flipped) > .lr-card-flipper > .lr-side {
  border: 1px solid var(--rcs-brand-red, #9c1b2f) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.rcs-route-anchor {
  display: block !important;
  position: relative !important;
  block-size: 0 !important;
  scroll-margin-top: calc(var(--nav-height, 80px) + 12px) !important;
}

/* The chatbot feature is retired, including its floating launcher and any
   late-added modal instance. The back-to-top control remains independent. */
.hf-contact-pill,
.hf-chatbot-widget,
#hfChatbotModal,
#chatbotForm {
  display: none !important;
}

/* Service portfolio CTA is exactly the same inline size as its red title card. */
html:is(#rcs-service-cta-width, :root) body :is(
  #rcs-design-stack,
  #rcs-sup-stack,
  #rcs-adv-stack,
  #ar-stack-design,
  #ar-stack-sup,
  #ar-stack-adv
) .srv-global-cta.rcs-explore-action {
  inline-size: 100% !important;
  max-inline-size: 500px !important;
  box-sizing: border-box !important;
}

/* Project dialogs: English text left/image right; Arabic mirrors content only.
   The close control is a direct child (normalized in JS), always upper-right. */
html:is(#rcs-project-modal-layout, :root) body .pmc-m-box {
  position: relative !important;
  direction: ltr !important;
}

html:is(#rcs-project-modal-layout, :root) body .pmc-m-right,
html:is(#rcs-project-modal-layout, :root) body .pmc-m-content,
html:is(#rcs-project-modal-layout, :root) body .pmc-m-desc {
  direction: ltr !important;
  text-align: left !important;
}

html[lang="ar"]:is(#rcs-project-modal-layout, :root) body .pmc-m-right,
html[lang="ar"]:is(#rcs-project-modal-layout, :root) body .pmc-m-content,
html[lang="ar"]:is(#rcs-project-modal-layout, :root) body .pmc-m-desc {
  direction: rtl !important;
  text-align: right !important;
}

html:is(#rcs-project-modal-layout, :root) body .pmc-m-box > .pmc-m-close {
  position: absolute !important;
  top: clamp(14px, 1.35vw, 22px) !important;
  right: clamp(14px, 1.35vw, 22px) !important;
  left: auto !important;
  z-index: 40 !important;
  margin: 0 !important;
}

@media (min-width: 901px) {
  html:is(#rcs-project-modal-grid, :root):is(#rcs-project-modal-grid-2, :root) body .pmc-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(18px, 3vw, 46px) !important;
    overflow: hidden auto !important;
  }

  html:is(#rcs-project-modal-grid, :root):is(#rcs-project-modal-grid-2, :root) body .pmc-m-box {
    display: grid !important;
    grid-template-columns: minmax(320px, 42%) minmax(0, 58%) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    flex-direction: initial !important;
    inline-size: min(94vw, 1400px) !important;
    block-size: min(82dvh, 820px) !important;
    min-block-size: min(560px, 82dvh) !important;
    max-block-size: calc(100dvh - 36px) !important;
    overflow: hidden !important;
  }

  html[lang="ar"]:is(#rcs-project-modal-grid, :root):is(#rcs-project-modal-grid-2, :root) body .pmc-m-box {
    grid-template-columns: minmax(0, 58%) minmax(320px, 42%) !important;
  }

  html:is(#rcs-project-modal-grid, :root):is(#rcs-project-modal-grid-2, :root) body .pmc-m-left,
  html:is(#rcs-project-modal-grid, :root):is(#rcs-project-modal-grid-2, :root) body .pmc-m-right {
    grid-row: 1 !important;
    inline-size: auto !important;
    min-inline-size: 0 !important;
    block-size: 100% !important;
    min-block-size: 0 !important;
  }

  html:is(#rcs-project-modal-grid, :root):is(#rcs-project-modal-grid-2, :root) body .pmc-m-right {
    grid-column: 1 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  html:is(#rcs-project-modal-grid, :root):is(#rcs-project-modal-grid-2, :root) body .pmc-m-left {
    grid-column: 2 !important;
    overflow: hidden !important;
  }

  html[lang="ar"]:is(#rcs-project-modal-grid, :root):is(#rcs-project-modal-grid-2, :root) body .pmc-m-left {
    grid-column: 1 !important;
  }

  html[lang="ar"]:is(#rcs-project-modal-grid, :root):is(#rcs-project-modal-grid-2, :root) body .pmc-m-right {
    grid-column: 2 !important;
  }

  html:is(#rcs-project-modal-grid, :root):is(#rcs-project-modal-grid-2, :root) body .pmc-m-left :is(img, picture),
  html:is(#rcs-project-modal-grid, :root):is(#rcs-project-modal-grid-2, :root) body .pmc-m-img {
    display: block !important;
    inline-size: 100% !important;
    block-size: 100% !important;
    object-fit: cover !important;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  html:is(#rcs-service-cta-width, :root) body :is(
    #rcs-design-stack,
    #rcs-sup-stack,
    #rcs-adv-stack,
    #ar-stack-design,
    #ar-stack-sup,
    #ar-stack-adv
  ) .srv-global-cta.rcs-explore-action {
    max-inline-size: 560px !important;
  }
}

@media (max-width: 900px) {
  html:is(#rcs-project-modal-layout, :root) body .pmc-m-box,
  html[lang="ar"]:is(#rcs-project-modal-layout, :root) body .pmc-m-box {
    flex-direction: column !important;
    inline-size: min(100%, 760px) !important;
    block-size: auto !important;
    min-block-size: min(100dvh, 720px) !important;
    max-block-size: none !important;
    overflow: visible !important;
  }

  html:is(#rcs-project-modal-layout, :root) body .pmc-modal {
    align-items: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  html:is(#rcs-project-modal-layout, :root) body .pmc-m-left {
    inline-size: 100% !important;
    block-size: clamp(230px, 38dvh, 390px) !important;
    min-block-size: 230px !important;
  }

  html:is(#rcs-project-modal-layout, :root) body .pmc-m-right {
    inline-size: 100% !important;
    min-block-size: 0 !important;
    overflow: visible !important;
    padding: clamp(26px, 5vw, 40px) clamp(20px, 5vw, 38px) calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html:is(#rcs-project-modal-layout, :root) body .pmc-m-box > .pmc-m-close {
    position: absolute !important;
    top: max(14px, env(safe-area-inset-top, 14px)) !important;
    right: max(14px, env(safe-area-inset-right, 14px)) !important;
    left: auto !important;
  }
}

.rcs-glass-control.rcs-glass-icon {
  inline-size: max(var(--rcs-control-min), 2.85rem);
  min-inline-size: var(--rcs-control-min) !important;
  padding: 0.55rem !important;
  border-radius: 50% !important;
  letter-spacing: 0 !important;
}

.rcs-glass-control.rcs-glass-icon:is(:hover, :focus-visible) {
  transform: translateY(-1px) scale(1.03);
}

/* Shared glass surfaces for form panels and project/service dialogs. */
.rcs-glass-panel,
.rcs-dialog-surface {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--rcs-panel-border) !important;
  background: var(--rcs-panel-bg) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.22);
  backdrop-filter: blur(16px) saturate(1.22);
  box-shadow: var(--rcs-panel-shadow) !important;
}

.rcs-glass-panel::before,
.rcs-dialog-surface::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 42%);
}

html[data-theme="light"] {
  --rcs-panel-bg: rgba(255, 255, 255, 0.8);
  --rcs-panel-border: rgba(140, 24, 42, 0.2);
  --rcs-panel-shadow: 0 24px 70px rgba(35, 26, 28, 0.16);
}

.rcs-project-dialog {
  background: rgba(12, 12, 14, 0.82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
  backdrop-filter: blur(14px) saturate(1.12) !important;
  overscroll-behavior: contain;
}

html[data-theme="light"] .rcs-project-dialog {
  background: rgba(244, 242, 240, 0.86) !important;
}

.rcs-project-dialog .rcs-dialog-surface {
  border-radius: clamp(4px, 0.8vw, 12px) !important;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rcs-glass-control { background: rgba(35, 35, 38, 0.94) !important; }
  .rcs-glass-panel,
  .rcs-dialog-surface { background: rgba(30, 30, 32, 0.97) !important; }
  html[data-theme="light"] .rcs-glass-control,
  html[data-theme="light"] .rcs-glass-panel,
  html[data-theme="light"] .rcs-dialog-surface { background: rgba(255, 255, 255, 0.97) !important; }
}

/* Compact utilities remain visually quiet but meet touch-size requirements. */
#cbContactBtn,
.chat-send-btn,
.pmc-m-close,
.hf-theme-btn,
[class*="slider-arrow"],
[class*="carousel-arrow"] {
  min-inline-size: var(--rcs-control-min) !important;
  min-block-size: var(--rcs-control-min) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Language switching is intentionally typographic, not a button panel. */
#btn-en,
#btn-ar,
.hf-lang-btn,
html[data-theme="light"] #btn-en,
html[data-theme="light"] #btn-ar,
html[data-theme="light"] .hf-lang-btn {
  inline-size: auto !important;
  min-inline-size: 44px !important;
  min-block-size: 44px !important;
  block-size: 44px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.72) !important;
  letter-spacing: 0.08em !important;
  transform: none !important;
}

html[data-theme="light"] #btn-en,
html[data-theme="light"] #btn-ar,
html[data-theme="light"] .hf-lang-btn {
  color: rgba(38, 38, 38, 0.72) !important;
}

#btn-en.active,
#btn-ar.active,
.hf-lang-btn.active,
html[data-theme="light"] #btn-en.active,
html[data-theme="light"] #btn-ar.active,
html[data-theme="light"] .hf-lang-btn.active {
  color: var(--rcs-brand-red) !important;
}

#btn-en:is(:hover, :focus-visible),
#btn-ar:is(:hover, :focus-visible),
.hf-lang-btn:is(:hover, :focus-visible) {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="light"] #btn-en:is(:hover, :focus-visible),
html[data-theme="light"] #btn-ar:is(:hover, :focus-visible),
html[data-theme="light"] .hf-lang-btn:is(:hover, :focus-visible) {
  color: var(--rcs-brand-red) !important;
}

/* About navigation dots retain a 44px hit area while the visible mark stays small. */
.vo-nav-dots {
  gap: 2px !important;
  right: 18px !important;
}

html[lang="ar"] .vo-nav-dots {
  right: auto !important;
  left: 18px !important;
}

.vo-dot,
.vo-dot.active,
.vo-dot:hover {
  position: relative;
  inline-size: 44px !important;
  block-size: 44px !important;
  min-inline-size: 44px !important;
  min-block-size: 44px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.vo-dot::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transform: translate(-50%, -50%);
  transition: inline-size 180ms ease, block-size 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.vo-dot.active::after {
  inline-size: 11px;
  block-size: 11px;
  background: var(--rcs-brand-red);
  box-shadow: 0 0 0 3px rgba(140, 24, 42, 0.18);
}

.vo-dot:is(:hover, :focus-visible)::after {
  background: #fff;
}

html[data-theme="light"] .vo-dot::after { background: rgba(38, 38, 38, 0.28); }
html[data-theme="light"] .vo-dot.active::after { background: var(--rcs-brand-red); }

.hf-hamburger {
  min-inline-size: var(--rcs-control-min) !important;
  min-block-size: var(--rcs-control-min) !important;
}

/* Desktop dropdowns use the large-surface material; rows are compact controls. */
.hf-takeover-mega {
  border: 1px solid var(--rcs-panel-border) !important;
  border-radius: 0 0 12px 12px !important;
  background: rgba(30, 30, 32, 0.88) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="light"] .hf-takeover-mega {
  background: rgba(255, 255, 255, 0.84) !important;
  border-color: rgba(140, 24, 42, 0.2) !important;
  box-shadow: 0 24px 70px rgba(35, 26, 28, 0.16) !important;
}

/* The homepage Services overview is informational, not a gesture-controlled
   sequence. Keep it content-driven so no empty pinned viewport can appear. */
:is(#rcs-services-unified, #rcs-services-unified-ar) {
  block-size: auto !important;
  min-block-size: 0 !important;
  padding-block: clamp(52px, 7vh, 88px) !important;
}

:is(#rcs-services-unified, #rcs-services-unified-ar) .svc-sticky-stage {
  position: relative !important;
  inset: auto !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  overflow: visible !important;
}

:is(#rcs-services-unified, #rcs-services-unified-ar) :is(.intro-red-card, .svc-header-row, .svc-card, .svc-cta-container) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

@media (min-width: 1200px) {
  :is(#rcs-services-unified, #rcs-services-unified-ar) .svc-grid {
    block-size: clamp(330px, 43svh, 470px) !important;
    max-block-size: min(470px, 52svh) !important;
  }
}

/* Preserve the expanding AI action without letting universal padding clip its icon. */
.hf-contact-pill.rcs-glass-control {
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.hf-contact-pill.rcs-glass-control .hf-cp-icon-box {
  flex: 0 0 54px;
}

.hf-hp-link.rcs-glass-control {
  inline-size: 100% !important;
  justify-content: space-between !important;
  text-align: start !important;
  text-transform: none !important;
}

/* Primary mobile menu entries remain one quiet typographic system. */
.hf-mob-acc-btn,
.hf-mob-link,
.hf-mob-acc-btn:is(:hover, :focus-visible),
.hf-mob-link:is(:hover, :focus-visible) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Stable initial sector heroes: the full-screen preloader already masks loading,
   so underlying hero content must never be hidden a second time. */
body.rcs-preload-active [data-rcs-hero-stable="true"] .hero-title,
body.rcs-preload-active [data-rcs-hero-stable="true"] .hero-desc,
body.rcs-preload-active [data-rcs-hero-stable="true"] .hero-stats,
body.rcs-preload-active [data-rcs-hero-stable="true"] .title-card-wrap,
body.rcs-preload-active [data-rcs-hero-stable="true"] .hero-right {
  opacity: 1 !important;
  visibility: visible !important;
}

body.rcs-hero-ready [data-rcs-hero-stable="true"] .hero-title,
body.rcs-hero-ready [data-rcs-hero-stable="true"] .hero-desc,
body.rcs-hero-ready [data-rcs-hero-stable="true"] .hero-stats,
body.rcs-hero-ready [data-rcs-hero-stable="true"] .title-card-wrap,
body.rcs-hero-ready [data-rcs-hero-stable="true"] .hero-right {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Project and sector cards are surfaces, never universal action controls. */
html:not([data-theme="light"]) :is(.m-card, .port-card, .als-card, .lr-member-card) {
  border: 1px solid var(--rcs-brand-red) !important;
}

html:not([data-theme="light"]) :is(.m-card, .port-card):is(:hover, :focus-within) {
  border-color: var(--rcs-brand-red-hover) !important;
}

:is(.m-card, .port-card)::after {
  content: "";
  position: absolute;
  z-index: 20;
  top: 10px;
  left: 10px;
  inline-size: 22px;
  block-size: 22px;
  border-top: 2px solid var(--rcs-brand-red);
  border-left: 2px solid var(--rcs-brand-red);
  pointer-events: none;
}

html[lang="ar"] :is(.m-card, .port-card)::after {
  left: auto;
  right: 10px;
  border-left: 0;
  border-right: 2px solid var(--rcs-brand-red);
}

/* A square card with an authored 340px minimum block size transfers that
   minimum through aspect-ratio and becomes 340px wide.  Keep the square shape
   on narrow phones without allowing it to exceed the grid track. */
@media (max-width: 374px) {
  :is(.m-card, .port-card) {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Align About copy to the red card instead of constraining it to a narrow island. */
#rcs-about-vault .vo-body,
#rcs-about-vault-ar .vo-body {
  inline-size: 100% !important;
  max-inline-size: 760px !important;
  text-wrap: pretty;
  text-align: start !important;
  text-align-last: auto !important;
}

/* The complete form surface owns both the glass and the visible red accent. */
:is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-right,
:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-form-panel {
  overflow: visible !important;
}

:is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-right::after,
:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-form-panel::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 18px;
  inline-size: 30px;
  block-size: 30px;
  border-top: 2px solid var(--rcs-brand-red);
  border-left: 2px solid var(--rcs-brand-red);
  pointer-events: none;
}

html[lang="ar"] :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-right::after,
html[lang="ar"] :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-form-panel::after {
  left: auto;
  right: 18px;
  border-left: 0;
  border-right: 2px solid var(--rcs-brand-red);
}

/* BIM fallback and one-time stable-frame crossfade. */
#vo-webgl-target,
#vo-webgl-target-ar {
  background: radial-gradient(circle at 55% 45%, rgba(140, 24, 42, 0.12), transparent 48%), linear-gradient(145deg, rgba(255,255,255,0.035), transparent 64%);
}

#vo-webgl-target canvas,
#vo-webgl-target-ar canvas {
  opacity: 0;
  transition: opacity 260ms ease;
}

#vo-webgl-target[data-rcs-ready="true"] canvas,
#vo-webgl-target-ar[data-rcs-ready="true"] canvas {
  opacity: 1;
}

/* Footer map and labels keep authored proportions without outlined text. */
.fm-city-label {
  paint-order: normal !important;
  stroke: none !important;
  stroke-width: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="light"] .fm-city-label {
  stroke: none !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

.fm-bottom {
  position: relative;
  isolation: isolate;
  background: rgba(30, 30, 32, 0.76) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.22) !important;
  backdrop-filter: blur(18px) saturate(1.22) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="light"] .fm-bottom {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(140, 24, 42, 0.2) !important;
  box-shadow: 0 18px 52px rgba(35, 26, 28, 0.14) !important;
}

.fm-social-group { margin-inline-start: auto; }
.fm-social-x { font-family: var(--rcs-font-secondary) !important; font-size: 15px; font-weight: 700; line-height: 1; }

img,
picture,
video,
iframe {
  max-inline-size: 100%;
}

img,
video {
  block-size: auto;
}

.rcs-image-fallback {
  object-fit: contain !important;
  background: linear-gradient(135deg, rgba(140, 24, 42, 0.28), rgba(24, 24, 24, 0.92));
}

/* Pinned sections must recalculate across live orientation and window resizes. */
.pin-spacer {
  max-inline-size: 100vw !important;
}

.rcs-flying-logo,
.hero-bg-image,
.hero-bottom-vignette,
#rcs-hero-about .hero-content,
#rcs-hero-about-ar .hero-content,
#vault-wrapper .v-card-desktop,
#vault-wrapper-ar .v-card-desktop,
.vo-stage {
  will-change: auto !important;
}

#home,
#rcs-hero-home,
#rcs-hero-home-ar,
.hg-stage,
.sa-section,
.sa-logo-viewport,
.hero-bg-image,
.hero-media {
  overflow-inline: clip;
}

#hfCpText {
  max-inline-size: calc(100vw - 2 * var(--rcs-page-gutter));
}

.w-row,
.w-container,
[class*="grid"],
[class*="-row"],
[class*="-columns"] {
  min-inline-size: 0;
}

:where(.w-row, [class*="grid"], [class*="-row"], [class*="-columns"]) > * {
  min-inline-size: 0;
}

input,
select,
textarea {
  max-inline-size: 100%;
  min-block-size: var(--rcs-control-min);
}

textarea {
  resize: vertical;
}

[id] {
  scroll-margin-block-start: clamp(72px, 10vh, 120px);
}

.hf-mob-menu,
[class*="mobile-menu"],
[class*="mob-menu"] {
  max-block-size: 100vh;
  max-block-size: 100dvh;
  overscroll-behavior: contain;
}

/* Laptop-width windows use the complete navigation. The width boundary is
   intentional because some desktop shells incorrectly report a coarse pointer. */
@media (min-width: 992px) {
  .hf-hamburger,
  .hf-mob-menu {
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hf-navbar {
    padding-inline: clamp(20px, 2.5vw, 32px) !important;
  }

  .hf-nav-left {
    flex: 0 0 auto !important;
    padding-inline-start: 0 !important;
  }

  .hf-nav-center {
    display: flex !important;
    flex: 1 1 auto !important;
    min-inline-size: 0;
  }

  .hf-nav-right {
    flex: 0 0 auto !important;
    padding-inline-end: 0 !important;
  }

  .hf-nav-links-wrapper {
    gap: clamp(8px, 1vw, 14px) !important;
  }

  .hf-nav-link {
    font-size: clamp(11px, 1.15vw, 13px) !important;
    letter-spacing: 0.45px !important;
  }

  .hf-nav-link.active-page {
    font-size: clamp(11.5px, 1.2vw, 13.5px) !important;
  }

  .hf-nav-actions {
    margin-inline-start: 0 !important;
    gap: 4px !important;
  }

  .hf-theme-btn {
    position: static !important;
    margin-inline: 0 4px !important;
    transform: none !important;
  }

  .hf-theme-btn:is(:hover, :active) {
    transform: none !important;
  }

}

@media (max-width: 767px) {
  :root {
    --rcs-page-gutter: clamp(16px, 5vw, 24px);
  }

  .rcs-long-copy {
    text-align: start !important;
  }

  .rcs-glass-control {
    min-block-size: 48px !important;
    padding-inline: clamp(1rem, 5vw, 1.5rem) !important;
  }

  .hf-mob-menu a,
  .hf-mob-menu button {
    min-block-size: 44px;
  }

  .hf-nav-actions {
    gap: 8px !important;
  }

  .hf-theme-btn {
    left: 50% !important;
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
  }

  #btn-en,
  #btn-ar,
  .hf-hamburger {
    inline-size: 44px !important;
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
  }
}

@media (max-width: 430px) {
  .hf-theme-btn {
    left: 50% !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .hf-mob-menu {
    overflow-y: auto !important;
    padding-block: 76px 20px !important;
  }

  .hf-mob-menu a {
    min-block-size: 40px;
  }

  .rcs-glass-control {
    padding-block: 0.58rem !important;
  }
}

/* Services typing is a text reveal, not a caret simulation. The complete
   source phrase remains in the DOM and JavaScript progressively exposes
   Unicode grapheme clusters only after the section becomes visible. */
#rcs-blueprint .bp-type-mask,
#rcs-blueprint-ar .bp-type-mask {
  inline-size: auto !important;
  max-inline-size: min(94vw, 1200px);
  overflow: visible !important;
  white-space: normal !important;
  border-inline: 0 !important;
  direction: inherit;
  unicode-bidi: isolate;
}

#rcs-blueprint .bp-head,
#rcs-blueprint-ar .bp-head {
  padding-inline: 0 !important;
  overflow-wrap: normal;
  word-break: normal;
}

#rcs-blueprint .cursor-blink,
#rcs-blueprint-ar .cursor-blink,
.bp-type-mask::before,
.bp-type-mask::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  border: 0 !important;
}

/* Component-local one-gesture Services controller. The outgoing card is
   removed from the visual and accessibility trees before the incoming card
   enters, so momentum cannot produce stacked or ghost text. */
@media (min-width: 901px) {
  .rcs-service-sequence {
    block-size: 100vh !important;
    block-size: 100svh !important;
    min-block-size: 600px;
  }

  .rcs-service-sequence > .srv-viewport {
    position: sticky !important;
    inset-block-start: 0 !important;
    block-size: 100vh !important;
    block-size: 100svh !important;
    overflow: clip !important;
  }

  .rcs-service-sequence .srv-card {
    position: absolute !important;
    inset: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
  }

  .rcs-service-sequence .srv-card .srv-media,
  .rcs-service-sequence .srv-card .srv-body {
    opacity: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  .rcs-service-sequence .srv-card:is(.active, .rcs-active) {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: rcs-service-card-enter 220ms ease-out both;
  }

  .rcs-service-sequence .srv-card:is(.active, .rcs-active) .srv-media,
  .rcs-service-sequence .srv-card:is(.active, .rcs-active) .srv-body {
    opacity: 1 !important;
    transform: none !important;
  }

  .rcs-service-sequence.rcs-sequence-transitioning .srv-card,
  .rcs-service-sequence.rcs-sequence-transitioning .srv-card .srv-media,
  .rcs-service-sequence.rcs-sequence-transitioning .srv-card .srv-body {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
  }

  @keyframes rcs-service-card-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

.rcs-service-sequence .srv-nav-item[role="tab"] {
  cursor: pointer;
  border-radius: 3px;
}

.rcs-service-sequence .srv-nav-item[role="tab"]:focus-visible {
  outline: 3px solid var(--rcs-focus);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .rcs-service-sequence .srv-card {
    scroll-margin-block-start: calc(var(--nav-height, 80px) + 14px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* Services page v4: a single, deterministic owner for the type reveal, hero
   image, card sequences, and sector actions at every viewport size. */
.rcs-blueprint-host {
  display: block !important;
  inline-size: 100% !important;
}

#rcs-blueprint,
#rcs-blueprint-ar {
  block-size: auto !important;
  min-block-size: clamp(430px, 72svh, 760px) !important;
}

#rcs-blueprint .bp-stage,
#rcs-blueprint-ar .bp-stage {
  position: relative !important;
  inset-block-start: auto !important;
  block-size: auto !important;
  min-block-size: clamp(430px, 72svh, 760px) !important;
  padding: clamp(72px, 10svh, 120px) var(--rcs-page-gutter) !important;
}

#rcs-blueprint .bp-type-mask,
#rcs-blueprint-ar .bp-type-mask {
  inline-size: auto !important;
  max-inline-size: calc(100vw - (2 * var(--rcs-page-gutter))) !important;
  overflow: visible !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#rcs-blueprint .bp-head,
#rcs-blueprint-ar .bp-head {
  max-inline-size: 100% !important;
  padding-inline: 0 !important;
  font-size: clamp(1.45rem, 6.85vw, 7.2rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.035em !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-wrap: nowrap !important;
}

#rcs-blueprint-ar .bp-head {
  font-size: clamp(1.8rem, 7.5vw, 7.2rem) !important;
  letter-spacing: 0 !important;
}

#rcs-hero .h-img-frame,
#rcs-hero-ar .h-img-frame {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateZ(0) !important;
  animation: none !important;
  transition: none !important;
  contain: layout paint;
  background: #171717 !important;
}

#rcs-hero .h-img-inner,
#rcs-hero-ar .h-img-inner {
  background: #171717 !important;
}

#rcs-hero .h-img,
#rcs-hero-ar .h-img {
  display: block !important;
  opacity: 0.88 !important;
  visibility: visible !important;
  transform: scale(1.02) translateZ(0) !important;
  animation: none !important;
  transition: none !important;
  backface-visibility: hidden;
}

body.rcs-preload-active #rcs-hero .h-img-frame,
body.rcs-preload-active #rcs-hero-ar .h-img-frame,
body.rcs-hero-ready #rcs-hero .h-img-frame,
body.rcs-hero-ready #rcs-hero-ar .h-img-frame {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateZ(0) !important;
}

.rcs-service-sequence {
  position: relative !important;
  block-size: 100vh !important;
  block-size: 100svh !important;
  min-block-size: 560px !important;
  overflow: clip !important;
  isolation: isolate;
}

.rcs-service-sequence > .srv-viewport {
  position: sticky !important;
  inset-block-start: 0 !important;
  inline-size: 100% !important;
  block-size: 100vh !important;
  block-size: 100svh !important;
  min-block-size: 560px !important;
  overflow: clip !important;
}

.rcs-service-sequence .srv-card {
  position: absolute !important;
  inset: 0 !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}

.rcs-service-sequence .srv-card .srv-media,
.rcs-service-sequence .srv-card .srv-body {
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
}

.rcs-service-sequence .srv-card:is(.active, .rcs-active) {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  animation: rcs-service-card-enter 180ms cubic-bezier(.2,.7,.2,1) both !important;
}

.rcs-service-sequence .srv-card:is(.active, .rcs-active) .srv-media,
.rcs-service-sequence .srv-card:is(.active, .rcs-active) .srv-body {
  opacity: 1 !important;
  transform: none !important;
}

.rcs-service-sequence.rcs-sequence-transitioning .srv-card:is(.active, .rcs-active),
.rcs-service-sequence.rcs-sequence-transitioning .srv-card:is(.active, .rcs-active) .srv-media,
.rcs-service-sequence.rcs-sequence-transitioning .srv-card:is(.active, .rcs-active) .srv-body {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.rcs-sequence-status {
  display: none;
}

@media (max-width: 900px) {
  .rcs-service-sequence > .srv-viewport {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: calc(var(--nav-height, 80px) + 10px) clamp(12px, 4vw, 24px) 12px !important;
  }

  .rcs-service-sequence .srv-left {
    inline-size: 100% !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-content: start !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .rcs-service-sequence .srv-red-card {
    inline-size: 100% !important;
    max-inline-size: none !important;
    min-block-size: 0 !important;
    margin: 0 !important;
    padding: 11px 16px 12px !important;
  }

  .rcs-service-sequence .srv-lbl {
    margin-block-end: 2px !important;
    font-size: 9px !important;
    letter-spacing: 2px !important;
  }

  .rcs-service-sequence .srv-head {
    font-size: clamp(1.25rem, 5.6vw, 2rem) !important;
    line-height: 1 !important;
  }

  .rcs-service-sequence .srv-desc,
  .rcs-service-sequence .srv-nav {
    display: none !important;
  }

  .rcs-service-sequence .srv-global-cta {
    inline-size: 100% !important;
    max-inline-size: none !important;
    min-block-size: 44px !important;
    padding: 8px 14px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .rcs-service-sequence .srv-right {
    position: relative !important;
    inline-size: 100% !important;
    block-size: 100% !important;
    min-block-size: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }

  .rcs-service-sequence .srv-card-frame {
    position: relative !important;
    inline-size: 100% !important;
    max-inline-size: none !important;
    block-size: 100% !important;
    max-block-size: none !important;
    min-block-size: 0 !important;
    display: block !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--srv-border) !important;
    background: var(--srv-card) !important;
  }

  html[data-theme="light"] .rcs-service-sequence .srv-card-frame {
    border-color: rgba(0, 0, 0, 0.22) !important;
    background: #fff !important;
  }

  .rcs-service-sequence .srv-media {
    position: absolute !important;
    inset: 0 0 auto !important;
    inline-size: 100% !important;
    block-size: 40% !important;
  }

  .rcs-service-sequence .srv-body {
    position: absolute !important;
    inset: 40% 0 0 !important;
    inline-size: 100% !important;
    block-size: 60% !important;
    min-block-size: 0 !important;
    padding: clamp(12px, 2.2svh, 22px) clamp(14px, 4vw, 24px) !important;
    overflow: hidden !important;
  }

  .rcs-service-sequence .srv-c-tit {
    font-size: clamp(1.25rem, 5vw, 1.8rem) !important;
    line-height: 0.98 !important;
  }

  .rcs-service-sequence .srv-c-no {
    font-size: clamp(2rem, 9vw, 3.2rem) !important;
  }

  .rcs-service-sequence .srv-text-block {
    margin-block-start: 7px !important;
    padding-block-start: 7px !important;
  }

  .rcs-service-sequence .srv-p {
    font-size: clamp(11px, 3.2vw, 14px) !important;
    line-height: 1.38 !important;
    text-align: start !important;
  }

  .rcs-service-sequence .srv-c-foot {
    margin-block-start: 7px !important;
    padding-block-start: 7px !important;
  }

  .rcs-service-sequence .srv-detail-btn {
    min-block-size: 42px !important;
    padding: 8px 14px !important;
    font-size: 9px !important;
  }

  .rcs-service-sequence .srv-badge {
    inset-block-start: 12px !important;
    inset-inline-start: 12px !important;
    padding: 5px 9px !important;
  }

  .rcs-service-sequence .srv-project-overlay {
    padding: 42px 14px 12px !important;
  }

  .rcs-sequence-status {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    z-index: 30;
    display: grid;
    grid-template-columns: 42px auto 42px;
    align-items: center;
    gap: 6px;
    direction: ltr;
  }

  .rcs-sequence-count {
    min-inline-size: 48px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
  }

  .rcs-sequence-nav {
    inline-size: 42px !important;
    min-inline-size: 42px !important;
    block-size: 42px !important;
    min-block-size: 42px !important;
    padding: 0 !important;
  }

  .rcs-sequence-nav:disabled {
    opacity: 0.35 !important;
    cursor: default !important;
  }
}

@media (max-width: 420px), (max-height: 650px) {
  .rcs-service-sequence > .srv-viewport {
    gap: 7px !important;
    padding-block-start: calc(var(--nav-height, 72px) + 6px) !important;
    padding-block-end: 7px !important;
  }

  .rcs-service-sequence .srv-red-card {
    padding-block: 8px 9px !important;
  }

  .rcs-service-sequence .srv-global-cta {
    min-block-size: 40px !important;
    padding-block: 6px !important;
  }

  .rcs-service-sequence .srv-body {
    padding: 10px 12px !important;
  }

  .rcs-service-sequence .srv-project-label,
  .rcs-service-sequence .srv-project-loc {
    display: none !important;
  }

  .rcs-service-sequence .srv-p {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (min-width: 560px) {
  .rcs-service-sequence > .srv-viewport {
    grid-template-columns: minmax(230px, 40%) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding-inline: 14px !important;
  }

  .rcs-service-sequence .srv-left {
    align-self: center !important;
  }

  .rcs-service-sequence .srv-media {
    block-size: 45% !important;
  }

  .rcs-service-sequence .srv-body {
    inset-block-start: 45% !important;
    block-size: 55% !important;
  }
}

.rcs-services-page #rcs-sector-matrix .bp-tab-btn,
.rcs-services-page #rcs-sector-matrix-ar .bp-tab-btn {
  min-block-size: 48px !important;
  padding: 11px 16px !important;
  background: rgba(24, 24, 24, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 4px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
}

.rcs-services-page #rcs-sector-matrix .bp-tab-text,
.rcs-services-page #rcs-sector-matrix-ar .bp-tab-text {
  color: #fff !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.rcs-services-page #rcs-sector-matrix .bp-main-btn,
.rcs-services-page #rcs-sector-matrix-ar .bp-main-btn {
  display: inline-flex !important;
  min-block-size: 48px !important;
  background: var(--rcs-glass-bg) !important;
  border-color: var(--rcs-glass-border) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
}

html.rcs-services-page[data-theme="light"] #rcs-sector-matrix .bp-main-btn,
html.rcs-services-page[data-theme="light"] #rcs-sector-matrix-ar .bp-main-btn {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: var(--rcs-brand-red) !important;
  color: var(--rcs-brand-red) !important;
}

@media (max-width: 767px) {
  .rcs-services-page #rcs-sector-matrix .bp-tab-btn,
  .rcs-services-page #rcs-sector-matrix-ar .bp-tab-btn {
    inset-block-end: 14px !important;
    inset-inline-end: 14px !important;
    min-block-size: 44px !important;
    padding: 9px 13px !important;
  }

  .rcs-services-page #rcs-sector-matrix .bp-content,
  .rcs-services-page #rcs-sector-matrix-ar .bp-content {
    padding: 50px 16px 70px !important;
  }
}

/* Services page v5: normal document flow and explicit sub-service selection.
   The page never captures wheel or touch scrolling; cards change only through
   the visible tab list. Sector actions mirror the Commercial card controls. */
#rcs-blueprint,
#rcs-blueprint-ar {
  block-size: auto !important;
  min-block-size: 100vh !important;
  min-block-size: 100svh !important;
}

#rcs-blueprint .bp-stage,
#rcs-blueprint-ar .bp-stage {
  position: relative !important;
  inset: auto !important;
  block-size: 100vh !important;
  block-size: 100svh !important;
  min-block-size: 620px !important;
  padding: clamp(88px, 11svh, 140px) var(--rcs-page-gutter) !important;
}

#rcs-blueprint .bp-lbl,
#rcs-blueprint-ar .bp-lbl {
  opacity: 1 !important;
  transform: none !important;
}

.rcs-service-sequence {
  block-size: auto !important;
  min-block-size: 0 !important;
  overflow: visible !important;
  isolation: isolate;
}

.rcs-service-sequence > .srv-viewport {
  position: relative !important;
  inset: auto !important;
  block-size: auto !important;
  min-block-size: clamp(720px, 90svh, 900px) !important;
  overflow: visible !important;
}

.rcs-service-sequence .srv-left,
.rcs-service-sequence .srv-right {
  block-size: auto !important;
  min-block-size: clamp(720px, 90svh, 900px) !important;
}

.rcs-service-sequence .srv-card-frame {
  block-size: min(700px, calc(100svh - 120px)) !important;
  min-block-size: 560px !important;
  max-block-size: none !important;
}

.rcs-service-sequence .srv-nav-item[role="tab"] {
  min-block-size: 40px;
  padding: 8px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.rcs-service-sequence .srv-nav-item[role="tab"]:hover {
  opacity: 1 !important;
  color: #fff !important;
  border: 0 !important;
  background: transparent !important;
}

.rcs-service-sequence .srv-nav-item[role="tab"].active {
  opacity: 1 !important;
  color: #fff !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-theme="light"] .rcs-service-sequence .srv-nav-item[role="tab"]:hover,
html[data-theme="light"] .rcs-service-sequence .srv-nav-item[role="tab"].active {
  color: #2b2b2b !important;
  border: 0 !important;
  background: transparent !important;
}

.rcs-sequence-status {
  display: none !important;
}

@media (max-width: 900px) {
  .rcs-service-sequence > .srv-viewport {
    display: block !important;
    min-block-size: 0 !important;
    padding: calc(var(--nav-height, 80px) + 28px) clamp(16px, 4vw, 28px) 72px !important;
  }

  .rcs-service-sequence .srv-left {
    inline-size: 100% !important;
    min-block-size: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .rcs-service-sequence .srv-red-card {
    padding: clamp(18px, 4vw, 28px) !important;
    margin-block-end: 18px !important;
  }

  .rcs-service-sequence .srv-desc {
    display: block !important;
    max-inline-size: none !important;
    margin: 0 0 18px !important;
    font-size: clamp(0.8rem, 2.2vw, 0.95rem) !important;
    line-height: 1.55 !important;
    text-align: start !important;
  }

  .rcs-service-sequence .srv-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    gap: 7px 10px !important;
    inline-size: 100% !important;
    max-inline-size: none !important;
    margin: 0 0 18px !important;
  }

  .rcs-service-sequence .srv-nav-item[role="tab"] {
    min-block-size: 44px !important;
    padding: 9px 0 !important;
    white-space: normal !important;
    font-size: clamp(10px, 2vw, 13px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.5px !important;
    opacity: 0.72 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] .rcs-service-sequence .srv-nav-item[role="tab"] {
    border: 0 !important;
    background: transparent !important;
  }

  .rcs-service-sequence .srv-nav-item[role="tab"].active {
    opacity: 1 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .rcs-service-sequence .srv-global-cta {
    min-block-size: 48px !important;
    margin-block-end: 28px !important;
    padding: 12px 18px !important;
    font-size: 10px !important;
  }

  .rcs-service-sequence .srv-right {
    inline-size: 100% !important;
    min-block-size: 0 !important;
    display: block !important;
    padding: 0 !important;
  }

  .rcs-service-sequence .srv-card-frame {
    inline-size: 100% !important;
    block-size: clamp(640px, 82svh, 760px) !important;
    min-block-size: 640px !important;
    max-inline-size: 680px !important;
    max-block-size: none !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  .rcs-service-sequence .srv-media {
    block-size: 42% !important;
  }

  .rcs-service-sequence .srv-body {
    inset-block-start: 42% !important;
    block-size: 58% !important;
    padding: clamp(18px, 3vw, 28px) !important;
  }

  .rcs-service-sequence .srv-p {
    font-size: clamp(12px, 2.4vw, 14px) !important;
    line-height: 1.45 !important;
  }

  .rcs-service-sequence .srv-detail-btn {
    min-block-size: 44px !important;
    padding: 8px 14px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 420px) {
  .rcs-service-sequence > .srv-viewport {
    padding-block-start: calc(var(--nav-height, 72px) + 22px) !important;
    padding-block-end: 56px !important;
  }

  .rcs-service-sequence .srv-desc {
    display: none !important;
  }

  .rcs-service-sequence .srv-nav {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .rcs-service-sequence .srv-card-frame {
    block-size: 680px !important;
    min-block-size: 680px !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (min-width: 560px) and (max-width: 900px) {
  .rcs-service-sequence > .srv-viewport {
    display: grid !important;
    grid-template-columns: minmax(250px, 42%) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: start !important;
    gap: 18px !important;
    padding-block: calc(var(--nav-height, 64px) + 18px) 48px !important;
  }

  .rcs-service-sequence .srv-global-cta {
    margin-block-end: 0 !important;
  }

  .rcs-service-sequence .srv-card-frame {
    block-size: 620px !important;
    min-block-size: 620px !important;
  }
}

.rcs-services-page #rcs-sector-matrix .bp-tab-btn,
.rcs-services-page #rcs-sector-matrix-ar .bp-tab-btn {
  min-block-size: 46px !important;
  padding: 0.58rem clamp(0.8rem, 1.6vw, 1.15rem) !important;
  background: var(--rcs-glass-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-size: clamp(0.72rem, 0.7rem + 0.12vw, 0.82rem) !important;
  font-weight: 800 !important;
  letter-spacing: clamp(0.05em, 0.1vw, 0.12em) !important;
  line-height: 1.25 !important;
  gap: 0.75rem !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, transform 180ms ease !important;
}

.rcs-services-page #rcs-sector-matrix .bp-tab-text,
.rcs-services-page #rcs-sector-matrix-ar .bp-tab-text {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

.rcs-services-page #rcs-sector-matrix-ar .bp-tab-text {
  font-size: 14px !important;
  letter-spacing: 0 !important;
}

.rcs-services-page #rcs-sector-matrix .bp-item:hover .bp-tab-btn,
.rcs-services-page #rcs-sector-matrix-ar .bp-item:hover .bp-tab-btn,
.rcs-services-page #rcs-sector-matrix .bp-tab-btn:hover,
.rcs-services-page #rcs-sector-matrix-ar .bp-tab-btn:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--srv-red) !important;
  transform: none !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
}

.rcs-services-page #rcs-sector-matrix .bp-item:hover .bp-tab-text,
.rcs-services-page #rcs-sector-matrix-ar .bp-item:hover .bp-tab-text,
.rcs-services-page #rcs-sector-matrix .bp-item:hover .bp-tab-icon,
.rcs-services-page #rcs-sector-matrix-ar .bp-item:hover .bp-tab-icon {
  color: var(--srv-red) !important;
}

html.rcs-services-page[data-theme="light"] #rcs-sector-matrix .bp-tab-btn,
html.rcs-services-page[data-theme="light"] #rcs-sector-matrix-ar .bp-tab-btn {
  background: rgba(255, 255, 255, 0.48) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(35, 26, 28, 0.12) !important;
}

html.rcs-services-page[data-theme="light"] #rcs-sector-matrix .bp-item:hover .bp-tab-btn,
html.rcs-services-page[data-theme="light"] #rcs-sector-matrix-ar .bp-item:hover .bp-tab-btn,
html.rcs-services-page[data-theme="light"] #rcs-sector-matrix .bp-tab-btn:hover,
html.rcs-services-page[data-theme="light"] #rcs-sector-matrix-ar .bp-tab-btn:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--srv-red) !important;
  box-shadow: 0 8px 24px rgba(35, 26, 28, 0.12) !important;
}

.rcs-services-page #rcs-sector-matrix .bp-main-btn,
.rcs-services-page #rcs-sector-matrix-ar .bp-main-btn {
  min-block-size: 48px !important;
  padding: 16px 32px !important;
  background: var(--rcs-glass-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
}

.rcs-services-page #rcs-sector-matrix .bp-main-btn:hover,
.rcs-services-page #rcs-sector-matrix-ar .bp-main-btn:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--srv-red) !important;
  transform: none !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
}

html.rcs-services-page[data-theme="light"] #rcs-sector-matrix .bp-main-btn,
html.rcs-services-page[data-theme="light"] #rcs-sector-matrix-ar .bp-main-btn {
  background: var(--rcs-glass-bg) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(35, 26, 28, 0.12) !important;
}

html.rcs-services-page[data-theme="light"] #rcs-sector-matrix .bp-main-btn:hover,
html.rcs-services-page[data-theme="light"] #rcs-sector-matrix-ar .bp-main-btn:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--srv-red) !important;
  box-shadow: 0 8px 24px rgba(35, 26, 28, 0.12) !important;
}

@media (max-width: 900px) {
  .rcs-services-page #rcs-sector-matrix .bp-tab-btn,
  .rcs-services-page #rcs-sector-matrix-ar .bp-tab-btn {
    min-block-size: 44px !important;
    padding: 8px 14px !important;
    font-size: 9px !important;
  }
}

@media (hover: none) {
  .rcs-services-page #rcs-sector-matrix .bp-item:hover .bp-tab-btn,
  .rcs-services-page #rcs-sector-matrix-ar .bp-item:hover .bp-tab-btn,
  .rcs-services-page #rcs-sector-matrix .bp-tab-btn:hover,
  .rcs-services-page #rcs-sector-matrix-ar .bp-tab-btn:hover,
  .rcs-services-page #rcs-sector-matrix .bp-main-btn:hover,
  .rcs-services-page #rcs-sector-matrix-ar .bp-main-btn:hover {
    background: var(--rcs-glass-bg) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14) !important;
  }

  .rcs-services-page #rcs-sector-matrix .bp-item:hover .bp-tab-text,
  .rcs-services-page #rcs-sector-matrix-ar .bp-item:hover .bp-tab-text,
  .rcs-services-page #rcs-sector-matrix .bp-item:hover .bp-tab-icon,
  .rcs-services-page #rcs-sector-matrix-ar .bp-item:hover .bp-tab-icon {
    color: #fff !important;
  }

  html.rcs-services-page[data-theme="light"] #rcs-sector-matrix .bp-item:hover .bp-tab-btn,
  html.rcs-services-page[data-theme="light"] #rcs-sector-matrix-ar .bp-item:hover .bp-tab-btn,
  html.rcs-services-page[data-theme="light"] #rcs-sector-matrix .bp-tab-btn:hover,
  html.rcs-services-page[data-theme="light"] #rcs-sector-matrix-ar .bp-tab-btn:hover,
  html.rcs-services-page[data-theme="light"] #rcs-sector-matrix .bp-main-btn:hover,
  html.rcs-services-page[data-theme="light"] #rcs-sector-matrix-ar .bp-main-btn:hover {
    background: rgba(255, 255, 255, 0.48) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(35, 26, 28, 0.12) !important;
  }

}

/* When optional motion libraries do not initialize, the readable mobile card
   layout becomes the desktop fallback instead of leaving an invisible pin. */
.rcs-motion-fallback #vault-desktop-system,
.rcs-motion-fallback #vault-desktop-system-ar {
  display: none !important;
}

.rcs-motion-fallback #vault-mobile-system,
.rcs-motion-fallback #vault-mobile-system-ar {
  display: flex !important;
  flex-direction: column;
  gap: clamp(36px, 6vw, 70px);
  padding: clamp(72px, 9vw, 120px) var(--rcs-page-gutter);
}

.rcs-motion-fallback #rcs-about-vault,
.rcs-motion-fallback #rcs-about-vault-ar {
  block-size: auto !important;
  min-block-size: 0 !important;
}

.rcs-motion-fallback #rcs-about-vault .vo-stage,
.rcs-motion-fallback #rcs-about-vault-ar .vo-stage {
  position: relative !important;
  block-size: auto !important;
  min-block-size: 100svh;
  overflow: visible !important;
}

.rcs-motion-fallback #rcs-about-vault .vo-text-card,
.rcs-motion-fallback #rcs-about-vault-ar .vo-text-card {
  position: relative !important;
  inset: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* About-vault image correction: retain the intentional monochrome history
   image while removing the accidental opacity/vignette haze from the media. */
#vault-wrapper .v-img,
#vault-wrapper .v-img-mob,
#vault-wrapper-ar .v-img,
#vault-wrapper-ar .v-img-mob {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

#vault-wrapper .v-img:not(.perm-bw),
#vault-wrapper .v-img-mob:not(.perm-bw),
#vault-wrapper-ar .v-img:not(.perm-bw),
#vault-wrapper-ar .v-img-mob:not(.perm-bw) {
  filter: none !important;
  -webkit-filter: none !important;
}

#vault-wrapper .v-img-overlay,
#vault-wrapper-ar .v-img-overlay {
  display: none !important;
}

/* Homepage map keeps its authored 820:400 viewBox at every size and occupies
   the left edge of the available map region rather than disappearing on touch. */
#rcs-footer-magnetic .fm-mz-map,
#rcs-footer-magnetic-ar .fm-mz-map,
html body #rcs-footer-magnetic-ar .fm-mz-map {
  display: flex !important;
  inline-size: 100% !important;
  justify-content: flex-start !important;
}

#fm-d3-map,
#rcs-footer-magnetic-ar #fm-d3-map-ar {
  inline-size: 100% !important;
  max-inline-size: min(100%, 1120px) !important;
  aspect-ratio: 820 / 400;
  margin-left: 0 !important;
  margin-right: auto !important;
}

#fm-d3-map svg,
#rcs-footer-magnetic-ar #fm-d3-map-ar svg {
  inline-size: 100% !important;
  block-size: auto !important;
  aspect-ratio: 820 / 400;
}

.fm-bottom-right,
#rcs-footer-magnetic-ar .fm-bottom-right {
  grid-column: 2 / -1;
}

.fm-social-group,
#rcs-footer-magnetic-ar .fm-social-group {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  #rcs-footer-magnetic .fm-mz-map,
  #rcs-footer-magnetic-ar .fm-mz-map,
  html body #rcs-footer-magnetic-ar .fm-mz-map {
    display: flex !important;
    margin-block: 0 24px !important;
  }

  #rcs-footer-magnetic .fm-bottom-right,
  #rcs-footer-magnetic-ar .fm-bottom-right {
    justify-content: flex-start !important;
  }

  .fm-social-group,
  #rcs-footer-magnetic-ar .fm-social-group {
    order: 2;
  }

  .fm-login-btn,
  #rcs-footer-magnetic-ar .fm-login-btn {
    order: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .rcs-service-sequence .srv-card:is(.active, .rcs-active) {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .rcs-glass-control {
    border: 2px solid ButtonText !important;
    background: ButtonFace !important;
    color: ButtonText !important;
    forced-color-adjust: auto;
  }
}

/* ========================================================================== */
/* RCS visual QA v6 — EN/AR, light/dark, pointer/touch, Windows-safe          */
/* ========================================================================== */

/* Floating utilities: the chatbot is intentionally retired. The remaining
   back-to-top control moves into the vacated corner and keeps its arrow
   readable through every interaction state. */
.hf-contact-pill,
.hf-chatbot-widget {
  display: none !important;
}

.hf-back-top {
  bottom: 28px !important;
  color: #fff !important;
}

.hf-back-top svg,
.hf-back-top svg * {
  color: inherit !important;
  stroke: currentColor !important;
}

.hf-back-top:is(:hover, :focus-visible) {
  border-color: var(--rcs-brand-red) !important;
  background: var(--rcs-brand-red) !important;
  color: #fff !important;
}

html[data-theme="light"] .hf-back-top {
  border-color: var(--rcs-brand-red) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--rcs-brand-red) !important;
}

html[data-theme="light"] .hf-back-top:is(:hover, :focus-visible) {
  background: var(--rcs-brand-red) !important;
  color: #fff !important;
}

/* Slightly quieter theme control without sacrificing the 44px mobile target. */
.hf-theme-btn,
.hf-theme-btn.rcs-glass-control.rcs-glass-icon {
  inline-size: 42px !important;
  block-size: 42px !important;
  min-inline-size: 42px !important;
  min-block-size: 42px !important;
  padding: 0 !important;
}

.hf-theme-btn svg,
.hf-theme-btn :is(ion-icon,svg) {
  inline-size: 17px !important;
  block-size: 17px !important;
  font-size: 17px !important;
}

@media (max-width: 767px) {
  .hf-theme-btn,
  .hf-theme-btn.rcs-glass-control.rcs-glass-icon {
    inline-size: 44px !important;
    block-size: 44px !important;
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
  }

  .hf-back-top {
    bottom: 20px !important;
  }
}

/* Navbar dropdown rows: white arrows at dark-mode rest, unambiguous hover in
   both themes, and no inherited universal-control color conflict. */
.hf-hp-link.rcs-glass-control {
  background: rgba(255, 255, 255, 0.025) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

.hf-hp-link .hf-hp-ltitle,
.hf-hp-link .hf-hp-icon {
  color: #fff !important;
}

.hf-hp-link .hf-hp-icon {
  opacity: 0.82 !important;
  stroke: currentColor !important;
}

.hf-hp-link.rcs-glass-control:is(:hover, :focus-visible) {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--rcs-brand-red) !important;
}

.hf-hp-link:is(:hover, :focus-visible) :is(.hf-hp-ltitle, .hf-hp-icon) {
  color: var(--rcs-brand-red) !important;
}

html[data-theme="light"] .hf-hp-link.rcs-glass-control {
  background: rgba(255, 255, 255, 0.58) !important;
  border-color: rgba(38, 38, 38, 0.2) !important;
  color: #2b2b2b !important;
}

html[data-theme="light"] .hf-hp-link .hf-hp-ltitle {
  color: #2b2b2b !important;
}

html[data-theme="light"] .hf-hp-link .hf-hp-icon {
  color: var(--rcs-brand-red) !important;
}

html[data-theme="light"] .hf-hp-link.rcs-glass-control:is(:hover, :focus-visible) {
  background: var(--rcs-brand-red) !important;
  border-color: var(--rcs-brand-red) !important;
  color: #fff !important;
}

html[data-theme="light"] .hf-hp-link:is(:hover, :focus-visible) :is(.hf-hp-ltitle, .hf-hp-icon) {
  color: #fff !important;
}

/* Cards use neutral outlines at rest. Red communicates hover/focus only. */
html:not([data-theme="light"]) :is(.m-card, .port-card, .g3d-card, .als-card) {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.lr-member-card {
  border: 0 !important;
}

.lr-side {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="light"] :is(.m-card, .port-card, .g3d-card, .als-card, .lr-side) {
  border-color: rgba(38, 38, 38, 0.18) !important;
}

:is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-card.active {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="light"] :is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-card.active {
  border-color: rgba(38, 38, 38, 0.18) !important;
}

:is(.m-card, .port-card)::after {
  content: none !important;
  display: none !important;
}

html:not([data-theme="light"]) :is(.m-card, .port-card, .g3d-card, .als-card, .lr-side):focus-within,
html[data-theme="light"] :is(.m-card, .port-card, .g3d-card, .als-card, .lr-side):focus-within {
  border-color: var(--rcs-brand-red) !important;
}

@media (hover: hover) and (pointer: fine) {
  html:not([data-theme="light"]) :is(.m-card, .port-card, .g3d-card, .als-card):hover,
  html[data-theme="light"] :is(.m-card, .port-card, .g3d-card, .als-card):hover,
  html:not([data-theme="light"]) .lr-member-card:hover .lr-side,
  html[data-theme="light"] .lr-member-card:hover .lr-side {
    border-color: var(--rcs-brand-red) !important;
  }
}

/* About buttons remain rectangular controls. This also neutralizes the old
   classification that rendered bottom navigation as circular icon buttons. */
:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) :is(.als-card-btn, .als-nav-btn),
:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-nav-btn.rcs-glass-icon {
  inline-size: auto !important;
  min-inline-size: 0 !important;
  min-block-size: 48px !important;
  block-size: auto !important;
  padding: 12px 22px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: #fff !important;
}

:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) :is(.als-card-btn, .als-nav-btn):is(:hover, :focus-visible) {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--rcs-brand-red) !important;
}

html[data-theme="light"] :is(#rcs-alliance-strip, #rcs-alliance-strip-ar) :is(.als-card-btn, .als-nav-btn) {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: var(--rcs-brand-red) !important;
  color: var(--rcs-brand-red) !important;
}

html[data-theme="light"] :is(#rcs-alliance-strip, #rcs-alliance-strip-ar) :is(.als-card-btn, .als-nav-btn):is(:hover, :focus-visible) {
  background: var(--rcs-brand-red) !important;
  border-color: var(--rcs-brand-red) !important;
  color: #fff !important;
}

@media (max-width: 767px) {
  :is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-nav-btn,
  :is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-nav-btn.rcs-glass-icon {
    inline-size: 100% !important;
  }
}

/* Image-overlay sector actions share one high-contrast behavior on Home,
   Services, and All Projects. Light mode must not turn them into pale ghosts. */
:is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-tab-btn,
:is(#rcs-all-projects-page, #rcs-all-projects-page-ar) .s-tab-btn {
  min-block-size: 46px !important;
  padding: 10px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  border-radius: 4px !important;
  background: rgba(24, 24, 24, 0.58) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

:is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-tab-btn :is(.bp-tab-text, .bp-tab-icon),
:is(#rcs-all-projects-page, #rcs-all-projects-page-ar) .s-tab-btn :is(.s-tab-text, .s-tab-icon) {
  color: inherit !important;
}

:is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-item:is(:hover, :focus-within) .bp-tab-btn,
:is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-tab-btn:is(:hover, :focus-visible),
:is(#rcs-all-projects-page, #rcs-all-projects-page-ar) .sector-item:is(:hover, :focus-visible) .s-tab-btn {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--rcs-brand-red) !important;
}

/* Off-image sector navigation is outlined red in light mode and cannot blend
   into the page background. */
:is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-main-btn,
:is(#rcs-all-projects-page, #rcs-all-projects-page-ar) .m-action-btn {
  min-block-size: 48px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
}

:is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-main-btn:is(:hover, :focus-visible),
:is(#rcs-all-projects-page, #rcs-all-projects-page-ar) .m-action-btn:is(:hover, :focus-visible) {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--rcs-brand-red) !important;
}

html[data-theme="light"] :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-main-btn,
html[data-theme="light"] :is(#rcs-all-projects-page, #rcs-all-projects-page-ar) .m-action-btn {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: var(--rcs-brand-red) !important;
  color: var(--rcs-brand-red) !important;
  box-shadow: 0 8px 24px rgba(35, 26, 28, 0.12) !important;
}

html[data-theme="light"] :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-main-btn:is(:hover, :focus-visible),
html[data-theme="light"] :is(#rcs-all-projects-page, #rcs-all-projects-page-ar) .m-action-btn:is(:hover, :focus-visible) {
  background: var(--rcs-brand-red) !important;
  border-color: var(--rcs-brand-red) !important;
  color: #fff !important;
}

/* Services carries page-qualified legacy rules, so its final state needs the
   same qualification to guarantee that the shared system wins. */
html.rcs-services-page :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-tab-btn {
  background: rgba(24, 24, 24, 0.58) !important;
  border-color: rgba(255, 255, 255, 0.68) !important;
  color: #fff !important;
}

html.rcs-services-page :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-item:is(:hover, :focus-within) .bp-tab-btn,
html.rcs-services-page :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-tab-btn:is(:hover, :focus-visible) {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--rcs-brand-red) !important;
}

html.rcs-services-page[data-theme="light"] :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-tab-btn {
  background: rgba(24, 24, 24, 0.58) !important;
  border-color: rgba(255, 255, 255, 0.68) !important;
  color: #fff !important;
}

html.rcs-services-page[data-theme="light"] :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-item:is(:hover, :focus-within) .bp-tab-btn,
html.rcs-services-page[data-theme="light"] :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-tab-btn:is(:hover, :focus-visible) {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--rcs-brand-red) !important;
}

html.rcs-services-page :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-main-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
}

html.rcs-services-page :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-main-btn:is(:hover, :focus-visible) {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--rcs-brand-red) !important;
}

html.rcs-services-page[data-theme="light"] :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-main-btn {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: var(--rcs-brand-red) !important;
  color: var(--rcs-brand-red) !important;
}

html.rcs-services-page[data-theme="light"] :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-main-btn:is(:hover, :focus-visible) {
  background: var(--rcs-brand-red) !important;
  border-color: var(--rcs-brand-red) !important;
  color: #fff !important;
}

/* Contact and Careers form panels receive four discrete corner accents. */
:is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-right::after,
:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-form-panel::after,
html[lang="ar"] :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-right::after,
html[lang="ar"] :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-form-panel::after {
  inset: 18px !important;
  inline-size: auto !important;
  block-size: auto !important;
  border: 0 !important;
  background:
    linear-gradient(var(--rcs-brand-red), var(--rcs-brand-red)) left top / 30px 2px no-repeat,
    linear-gradient(var(--rcs-brand-red), var(--rcs-brand-red)) left top / 2px 30px no-repeat,
    linear-gradient(var(--rcs-brand-red), var(--rcs-brand-red)) right top / 30px 2px no-repeat,
    linear-gradient(var(--rcs-brand-red), var(--rcs-brand-red)) right top / 2px 30px no-repeat,
    linear-gradient(var(--rcs-brand-red), var(--rcs-brand-red)) left bottom / 30px 2px no-repeat,
    linear-gradient(var(--rcs-brand-red), var(--rcs-brand-red)) left bottom / 2px 30px no-repeat,
    linear-gradient(var(--rcs-brand-red), var(--rcs-brand-red)) right bottom / 30px 2px no-repeat,
    linear-gradient(var(--rcs-brand-red), var(--rcs-brand-red)) right bottom / 2px 30px no-repeat !important;
}

@media (max-width: 480px) {
  :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-right::after,
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-form-panel::after {
    inset: 10px !important;
  }
}

/* Vision 2030 copy and CTA share the red title card's exact column width. */
:is(#rcs-giga-projects, #rcs-giga-projects-ar) :is(.giga-title-card, .g3d-desc, .g3d-dl-btn) {
  inline-size: 100% !important;
  max-inline-size: 550px !important;
  box-sizing: border-box !important;
  margin-inline: 0 !important;
}

:is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-desc {
  text-align: start !important;
  text-align-last: auto !important;
}

:is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-dl-btn {
  justify-content: center !important;
}

/* The existing D3 map is an 820x400 vector. Let its viewBox control the ratio,
   enlarge the map region, and remove the old transform that made it look
   cropped or stretched on wide Windows layouts. */
:is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-grid {
  grid-template-columns: clamp(220px, 22vw, 300px) minmax(0, 1fr) !important;
  gap: clamp(28px, 4vw, 64px) !important;
}

:is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-map {
  transform: none !important;
  justify-content: center !important;
  overflow: visible !important;
}

#fm-d3-map,
#rcs-footer-magnetic-ar #fm-d3-map-ar {
  max-inline-size: min(100%, 1280px) !important;
  aspect-ratio: auto !important;
  margin-inline: auto !important;
}

#fm-d3-map svg,
#rcs-footer-magnetic-ar #fm-d3-map-ar svg {
  inline-size: 100% !important;
  block-size: auto !important;
  max-block-size: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

@media (max-width: 991px) {
  :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (hover: none) {
  :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-item:hover .bp-tab-btn,
  :is(#rcs-all-projects-page, #rcs-all-projects-page-ar) .sector-item:hover .s-tab-btn {
    background: rgba(24, 24, 24, 0.58) !important;
    border-color: rgba(255, 255, 255, 0.68) !important;
    color: #fff !important;
  }

  html.rcs-services-page :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-item:hover .bp-tab-btn {
    background: rgba(24, 24, 24, 0.58) !important;
    border-color: rgba(255, 255, 255, 0.68) !important;
    color: #fff !important;
  }
}

/* v11 cascade seal: these rules intentionally remain the final declarations. */
html:is(#rcs-bahij-final-1, :root):is(#rcs-bahij-final-2, :root):is(#rcs-bahij-final-3, :root):is(#rcs-bahij-final-4, :root) body
  *:not(svg):not(svg *):not(ion-icon):not([class*="icon"]):not([class*="Icon"]),
html:is(#rcs-bahij-final-1, :root):is(#rcs-bahij-final-2, :root):is(#rcs-bahij-final-3, :root):is(#rcs-bahij-final-4, :root) body
  :is(button, input, select, option, textarea),
html:is(#rcs-bahij-final-1, :root):is(#rcs-bahij-final-2, :root):is(#rcs-bahij-final-3, :root):is(#rcs-bahij-final-4, :root) svg text {
  font-family: var(--rcs-font-primary) !important;
}

html:is(#rcs-red-final-1, :root):is(#rcs-red-final-2, :root):is(#rcs-red-final-3, :root):is(#rcs-red-final-4, :root) body :is(
  .vo-red-header, .intro-red-card, .bp-intro-panel, .giga-title-card,
  .srv-red-card, .v-red-card, .v-red-card-mob, .lr-red-card,
  .m-header, .port-header-section h2, .title-card-wrap,
  .hero-title-card, .c-info-panel
) {
  border-radius: 4px !important;
}

html:is(#rcs-red-final-1, :root):is(#rcs-red-final-2, :root):is(#rcs-red-final-3, :root):is(#rcs-red-final-4, :root) body :is(
  .vo-red-header, .intro-red-card, .bp-intro-panel, .giga-title-card,
  .srv-red-card, .v-red-card, .v-red-card-mob, .lr-red-card,
  .m-header, .port-header-section h2, .title-card-wrap, .hero-title-card
)::after {
  top: -6px !important;
  left: -6px !important;
  right: auto !important;
  inline-size: 20px !important;
  block-size: 20px !important;
  border-radius: 0 !important;
}

html[lang="ar"]:is(#rcs-red-final-1, :root):is(#rcs-red-final-2, :root):is(#rcs-red-final-3, :root):is(#rcs-red-final-4, :root) body :is(
  .vo-red-header, .intro-red-card, .bp-intro-panel, .giga-title-card,
  .srv-red-card, .v-red-card, .v-red-card-mob, .lr-red-card,
  .m-header, .port-header-section h2, .title-card-wrap, .hero-title-card
)::after {
  left: auto !important;
  right: -6px !important;
}

/* ========================================================================== */
/* v13 — final cross-page consistency pass                                    */
/* ========================================================================== */

/* Project metadata is information, not micro-copy. Keep the sector and
   All Projects dialogs on the same readable hierarchy at every viewport. */
html:is(#rcs-dialog-v13-a, :root):is(#rcs-dialog-v13-b, :root):is(#rcs-dialog-v13-c, :root):is(#rcs-dialog-v13-d, :root) body .pmc-m-item h6 {
  font-size: clamp(16px, 0.92vw, 18px) !important;
  line-height: 1.4 !important;
}

/* The contact composition is carried by its glass surface and four authored
   corner marks. Remove the redundant continuous outline around that surface. */
html:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .contact-grid,
html:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-form-panel {
  border: 0 !important;
  outline: 0 !important;
}

/* Replace the legacy floating-label collision with a stable label/control
   stack. This prevents focused, valid, and browser-autofilled controls from
   drawing text directly through the field border. */
html:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-block-end: 18px !important;
}

html:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-label,
html:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input:is(:focus, :valid) + .bp-label,
html:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) select.bp-input + .bp-label {
  position: static !important;
  order: -1 !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding-inline: 2px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: start !important;
}

html[data-theme="light"]:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-label,
html[data-theme="light"]:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input:is(:focus, :valid) + .bp-label,
html[data-theme="light"]:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) select.bp-input + .bp-label {
  color: #55565a !important;
}

html:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input {
  min-block-size: 54px !important;
  padding: 14px 18px !important;
}

html:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) select.bp-input {
  padding-inline: 18px 44px !important;
}

html[lang="ar"]:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) select.bp-input {
  padding-inline: 44px 18px !important;
}

html:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) textarea.bp-input {
  min-block-size: 92px !important;
  resize: vertical !important;
}

/* The footer utility bar keeps its glass fill in light mode, with the same
   unmistakable red edge used by the rest of the RCS interaction system. */
html[data-theme="light"]:is(#rcs-footer-v13-a, :root):is(#rcs-footer-v13-b, :root):is(#rcs-footer-v13-c, :root):is(#rcs-footer-v13-d, :root) body
  :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-bottom {
  border: 1px solid var(--rcs-brand-red, #8c182a) !important;
}

@media (max-width: 900px) {
  html:is(#rcs-dialog-v13-a, :root):is(#rcs-dialog-v13-b, :root):is(#rcs-dialog-v13-c, :root):is(#rcs-dialog-v13-d, :root) body .pmc-m-item h6 {
    font-size: 16px !important;
  }
}

@media (max-width: 520px) {
  html:is(#rcs-dialog-v13-a, :root):is(#rcs-dialog-v13-b, :root):is(#rcs-dialog-v13-c, :root):is(#rcs-dialog-v13-d, :root) body .pmc-m-item h6 {
    font-size: 15px !important;
  }

  html:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-label,
  html:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input:is(:focus, :valid) + .bp-label,
  html:is(#rcs-contact-v13-a, :root):is(#rcs-contact-v13-b, :root):is(#rcs-contact-v13-c, :root):is(#rcs-contact-v13-d, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) select.bp-input + .bp-label {
    font-size: 12.5px !important;
  }
}

html:is(#rcs-modal-final-1, :root):is(#rcs-modal-final-2, :root):is(#rcs-modal-final-3, :root):is(#rcs-modal-final-4, :root) body .pmc-modal {
  position: fixed !important;
  inset: 0 !important;
  inline-size: 100vw !important;
  block-size: 100dvh !important;
  min-inline-size: 0 !important;
  min-block-size: 0 !important;
  max-inline-size: none !important;
  max-block-size: none !important;
  margin: 0 !important;
  z-index: 2147483647 !important;
  isolation: isolate !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html:is(#rcs-modal-final-1, :root):is(#rcs-modal-final-2, :root):is(#rcs-modal-final-3, :root):is(#rcs-modal-final-4, :root) body .pmc-modal:not(.active) {
  display: none !important;
}

html:is(#rcs-modal-final-1, :root):is(#rcs-modal-final-2, :root):is(#rcs-modal-final-3, :root):is(#rcs-modal-final-4, :root) body .pmc-modal.active {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

@media (max-width: 900px) {
  html:is(#rcs-modal-final-1, :root):is(#rcs-modal-final-2, :root):is(#rcs-modal-final-3, :root):is(#rcs-modal-final-4, :root) body .pmc-modal.active {
    padding: 0 !important;
  }

  html:is(#rcs-modal-final-1, :root):is(#rcs-modal-final-2, :root):is(#rcs-modal-final-3, :root):is(#rcs-modal-final-4, :root) body .pmc-m-box,
  html[lang="ar"]:is(#rcs-modal-final-1, :root):is(#rcs-modal-final-2, :root):is(#rcs-modal-final-3, :root):is(#rcs-modal-final-4, :root) body .pmc-m-box {
    display: flex !important;
    flex-direction: column !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    block-size: auto !important;
    min-block-size: 100dvh !important;
    max-block-size: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html:is(#rcs-modal-final-1, :root):is(#rcs-modal-final-2, :root):is(#rcs-modal-final-3, :root):is(#rcs-modal-final-4, :root) body .pmc-m-grid,
  html[lang="ar"]:is(#rcs-modal-final-1, :root):is(#rcs-modal-final-2, :root):is(#rcs-modal-final-3, :root):is(#rcs-modal-final-4, :root) body .pmc-m-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v16 cascade seal: the exported page embeds appear after this stylesheet,
   so these final high-specificity declarations are the authoritative geometry. */
html[lang="ar"]:is(#rcs-v16-seal-a, :root):is(#rcs-v16-seal-b, :root):is(#rcs-v16-seal-c, :root):is(#rcs-v16-seal-d, :root):is(#rcs-v16-seal-e, :root) body
  .pmc-m-box > .pmc-m-close {
  position: absolute !important;
  top: clamp(16px, 1.4vw, 24px) !important;
  inset-inline: auto !important;
  left: clamp(16px, 1.4vw, 24px) !important;
  right: auto !important;
  margin: 0 !important;
}

html[lang="ar"]:is(#rcs-v16-seal-a, :root):is(#rcs-v16-seal-b, :root):is(#rcs-v16-seal-c, :root):is(#rcs-v16-seal-d, :root):is(#rcs-v16-seal-e, :root) body
  :is(.pmc-m-content, .pmc-m-head, .pmc-m-desc) {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"]:is(#rcs-v16-seal-a, :root):is(#rcs-v16-seal-b, :root):is(#rcs-v16-seal-c, :root):is(#rcs-v16-seal-d, :root):is(#rcs-v16-seal-e, :root) body
  :is(.pmc-m-tag, .pmc-m-eyebrow) {
  margin-inline: 0 !important;
}

html[lang="ar"]:is(#rcs-v16-seal-a, :root):is(#rcs-v16-seal-b, :root):is(#rcs-v16-seal-c, :root):is(#rcs-v16-seal-d, :root):is(#rcs-v16-seal-e, :root) body
  .pmc-m-head {
  inline-size: 100% !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

html[lang="ar"]:is(#rcs-v16-seal-a, :root):is(#rcs-v16-seal-b, :root):is(#rcs-v16-seal-c, :root):is(#rcs-v16-seal-d, :root):is(#rcs-v16-seal-e, :root) body
  .pmc-m-head::after {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

@media (min-width: 1025px) {
  html:is(#rcs-v16-contact-seal-a, :root):is(#rcs-v16-contact-seal-b, :root):is(#rcs-v16-contact-seal-c, :root):is(#rcs-v16-contact-seal-d, :root):is(#rcs-v16-contact-seal-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-label,
  html:is(#rcs-v16-contact-seal-a, :root):is(#rcs-v16-contact-seal-b, :root):is(#rcs-v16-contact-seal-c, :root):is(#rcs-v16-contact-seal-d, :root):is(#rcs-v16-contact-seal-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input:is(:focus, :valid) + .bp-label,
  html:is(#rcs-v16-contact-seal-a, :root):is(#rcs-v16-contact-seal-b, :root):is(#rcs-v16-contact-seal-c, :root):is(#rcs-v16-contact-seal-d, :root):is(#rcs-v16-contact-seal-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) select.bp-input + .bp-label {
    font-size: 14px !important;
  }
}

/* v20 homepage frame seal: Sector Expertise already establishes the approved
   90vw / 1500px datum. The closing CTA, Global Reach content, and floating
   utility bar now resolve from that exact same pair of edges in EN and AR. */
:root {
  --rcs-home-frame-gutter: max(5vw, calc((100vw - 1500px) / 2));
}

html:is(#rcs-home-frame-a, :root):is(#rcs-home-frame-b, :root):is(#rcs-home-frame-c, :root):is(#rcs-home-frame-d, :root) body
  :is(#rcs-cta-section, #rcs-cta-section-ar) {
  padding-inline: var(--rcs-home-frame-gutter) !important;
}

html:is(#rcs-home-frame-a, :root):is(#rcs-home-frame-b, :root):is(#rcs-home-frame-c, :root):is(#rcs-home-frame-d, :root) body
  :is(#rcs-cta-section, #rcs-cta-section-ar) .cta-inner {
  inline-size: 100% !important;
  max-inline-size: 1500px !important;
  margin-inline: auto !important;
}

html:is(#rcs-home-frame-a, :root):is(#rcs-home-frame-b, :root):is(#rcs-home-frame-c, :root):is(#rcs-home-frame-d, :root):is(#rcs-home-frame-e, :root):is(#rcs-home-frame-f, :root):is(#rcs-home-frame-g, :root) body
  :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-map-zone {
  padding-inline: var(--rcs-home-frame-gutter) !important;
}

html:is(#rcs-home-frame-a, :root):is(#rcs-home-frame-b, :root):is(#rcs-home-frame-c, :root):is(#rcs-home-frame-d, :root) body
  :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-bottom {
  inline-size: auto !important;
  max-inline-size: 1500px !important;
  margin-inline: var(--rcs-home-frame-gutter) !important;
}

@media (max-width: 767px) {
  html:is(#rcs-home-frame-a, :root):is(#rcs-home-frame-b, :root):is(#rcs-home-frame-c, :root):is(#rcs-home-frame-d, :root):is(#rcs-home-frame-e, :root):is(#rcs-home-frame-f, :root):is(#rcs-home-frame-g, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-map {
    display: none !important;
  }
}

/* v22 sector-stat distribution: use the complete red-card measure as a
   three-column datum. Logical start/end alignment mirrors naturally in RTL. */
html:is(#rcs-sector-stats-a, :root):is(#rcs-sector-stats-b, :root):is(#rcs-sector-stats-c, :root):is(#rcs-sector-stats-d, :root) body
  :is(
    #rcs-hero-commercial,
    #rcs-hero-commercial-ar,
    #rcs-hero-sports,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education,
    #rcs-hero-education-ar
  ) .hero-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 0 !important;
  row-gap: 12px !important;
  padding-inline: 0 !important;
  align-items: start !important;
}

html:is(#rcs-sector-stats-a, :root):is(#rcs-sector-stats-b, :root):is(#rcs-sector-stats-c, :root):is(#rcs-sector-stats-d, :root) body
  :is(
    #rcs-hero-commercial,
    #rcs-hero-commercial-ar,
    #rcs-hero-sports,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education,
    #rcs-hero-education-ar
  ) .h-stat-item {
  inline-size: 100% !important;
  min-inline-size: 0 !important;
}

html:is(#rcs-sector-stats-a, :root):is(#rcs-sector-stats-b, :root):is(#rcs-sector-stats-c, :root):is(#rcs-sector-stats-d, :root) body
  :is(
    #rcs-hero-commercial,
    #rcs-hero-commercial-ar,
    #rcs-hero-sports,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education,
    #rcs-hero-education-ar
  ) .h-stat-item h4 {
  display: flex !important;
  inline-size: 100% !important;
  align-items: baseline !important;
}

html:is(#rcs-sector-stats-a, :root):is(#rcs-sector-stats-b, :root):is(#rcs-sector-stats-c, :root):is(#rcs-sector-stats-d, :root) body
  :is(
    #rcs-hero-commercial,
    #rcs-hero-commercial-ar,
    #rcs-hero-sports,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education,
    #rcs-hero-education-ar
  ) .h-stat-item:nth-child(1) {
  text-align: start !important;
}

html:is(#rcs-sector-stats-a, :root):is(#rcs-sector-stats-b, :root):is(#rcs-sector-stats-c, :root):is(#rcs-sector-stats-d, :root) body
  :is(
    #rcs-hero-commercial,
    #rcs-hero-commercial-ar,
    #rcs-hero-sports,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education,
    #rcs-hero-education-ar
  ) .h-stat-item:nth-child(2) {
  text-align: center !important;
}

html:is(#rcs-sector-stats-a, :root):is(#rcs-sector-stats-b, :root):is(#rcs-sector-stats-c, :root):is(#rcs-sector-stats-d, :root) body
  :is(
    #rcs-hero-commercial,
    #rcs-hero-commercial-ar,
    #rcs-hero-sports,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education,
    #rcs-hero-education-ar
  ) .h-stat-item:nth-child(3) {
  text-align: end !important;
}

html:is(#rcs-sector-stats-a, :root):is(#rcs-sector-stats-b, :root):is(#rcs-sector-stats-c, :root):is(#rcs-sector-stats-d, :root) body
  :is(
    #rcs-hero-commercial,
    #rcs-hero-commercial-ar,
    #rcs-hero-sports,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education,
    #rcs-hero-education-ar
  ) .h-stat-item:nth-child(1) h4 {
  justify-content: flex-start !important;
}

html:is(#rcs-sector-stats-a, :root):is(#rcs-sector-stats-b, :root):is(#rcs-sector-stats-c, :root):is(#rcs-sector-stats-d, :root) body
  :is(
    #rcs-hero-commercial,
    #rcs-hero-commercial-ar,
    #rcs-hero-sports,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education,
    #rcs-hero-education-ar
  ) .h-stat-item:nth-child(2) h4 {
  justify-content: center !important;
}

html:is(#rcs-sector-stats-a, :root):is(#rcs-sector-stats-b, :root):is(#rcs-sector-stats-c, :root):is(#rcs-sector-stats-d, :root) body
  :is(
    #rcs-hero-commercial,
    #rcs-hero-commercial-ar,
    #rcs-hero-sports,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education,
    #rcs-hero-education-ar
  ) .h-stat-item:nth-child(3) h4 {
  justify-content: flex-end !important;
}

/* Editorial copy flow. Long prose uses the full available measure with
   natural alignment and ordinary word spacing. */
html:is(#rcs-copy-flow-a, :root):is(#rcs-copy-flow-b, :root):is(#rcs-copy-flow-c, :root):is(#rcs-copy-flow-d, :root):is(#rcs-copy-flow-e, :root) body
  .rcs-prose-copy {
  text-align: start !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  text-wrap: pretty !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

html:is(#rcs-copy-flow-a, :root):is(#rcs-copy-flow-b, :root):is(#rcs-copy-flow-c, :root):is(#rcs-copy-flow-d, :root):is(#rcs-copy-flow-e, :root) body
  .rcs-prose-copy.rcs-balanced-copy {
  text-wrap: pretty !important;
}

html[lang="ar"]:is(#rcs-copy-flow-a, :root):is(#rcs-copy-flow-b, :root):is(#rcs-copy-flow-c, :root):is(#rcs-copy-flow-d, :root):is(#rcs-copy-flow-e, :root) body
  .rcs-prose-copy {
  text-justify: inter-word !important;
  letter-spacing: normal !important;
}

/* All Arabic sector hero cards use the approved commercial card type scale.
   Matching the typography and padding keeps their physical size identical at
   every responsive breakpoint without clipping or brittle fixed heights. */
html[lang="ar"]:is(#rcs-ar-sector-card-a, :root):is(#rcs-ar-sector-card-b, :root):is(#rcs-ar-sector-card-c, :root):is(#rcs-ar-sector-card-d, :root) body
  :is(
    #rcs-hero-commercial-ar,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education-ar
  ) .title-card-wrap {
  padding: clamp(25px, 4vw, 40px) clamp(30px, 5vw, 50px) !important;
}

html[lang="ar"]:is(#rcs-ar-sector-card-a, :root):is(#rcs-ar-sector-card-b, :root):is(#rcs-ar-sector-card-c, :root):is(#rcs-ar-sector-card-d, :root) body
  :is(
    #rcs-hero-commercial-ar,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education-ar
  ) .title-card-wrap .hero-card-tag {
  font-size: 13px !important;
  line-height: normal !important;
  margin-block-end: 12px !important;
}

/* v24 editorial geometry.
   Copy blocks paired with red cards inherit the card's exact column width so
   layout and type share one visual edge without stretched word spacing. */
html body .rcs-prose-copy {
  text-align: start !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  text-wrap: pretty !important;
  white-space: normal !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

html body .rcs-prose-copy.rcs-balanced-copy {
  text-wrap: pretty !important;
}

html body :is(
  #rcs-design-stack,
  #rcs-sup-stack,
  #rcs-adv-stack,
  #ar-stack-design,
  #ar-stack-sup,
  #ar-stack-adv
) .srv-left > :is(.srv-red-card, .srv-desc, .srv-global-cta) {
  inline-size: 100% !important;
  max-inline-size: none !important;
  box-sizing: border-box !important;
  margin-inline: 0 !important;
}

html body :is(
  #rcs-design-stack,
  #rcs-sup-stack,
  #rcs-adv-stack,
  #ar-stack-design,
  #ar-stack-sup,
  #ar-stack-adv
) .srv-desc {
  text-align: start !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

html body :is(
  #rcs-hero-commercial,
  #rcs-hero-commercial-ar,
  #rcs-hero-sports,
  #rcs-hero-sports-ar,
  #rcs-hero-hospitality,
  #rcs-hero-hospitality-ar,
  #rcs-hero-residential,
  #rcs-hero-residential-ar,
  #rcs-hero-healthcare,
  #rcs-hero-healthcare-ar,
  #rcs-hero-education,
  #rcs-hero-education-ar
) .hero-left > :is(.title-card-wrap, .hero-desc, .hero-stats) {
  inline-size: 100% !important;
  max-inline-size: none !important;
  box-sizing: border-box !important;
}

html body :is(
  #rcs-hero-commercial,
  #rcs-hero-commercial-ar,
  #rcs-hero-sports,
  #rcs-hero-sports-ar,
  #rcs-hero-hospitality,
  #rcs-hero-hospitality-ar,
  #rcs-hero-residential,
  #rcs-hero-residential-ar,
  #rcs-hero-healthcare,
  #rcs-hero-healthcare-ar,
  #rcs-hero-education,
  #rcs-hero-education-ar
) .hero-desc {
  text-align: start !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

/* Vision 2030 keeps the approved two-column composition on large screens and
   becomes a contained editorial grid on tablets. The title, prose, and CTA
   deliberately share one 550px measure. */
html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) {
  inline-size: 100% !important;
  overflow: hidden !important;
}

@media (min-width: 1200px) {
  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar)
    :is(#giga-sticky-stage, #giga-sticky-stage-ar) {
    display: grid !important;
    grid-template-columns: minmax(0, 40%) minmax(0, 60%) !important;
    align-items: center !important;
    inline-size: min(100%, 1600px) !important;
    margin-inline: auto !important;
    padding-inline: clamp(48px, 5vw, 80px) !important;
    box-sizing: border-box !important;
  }

  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-col-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    inline-size: 100% !important;
    max-inline-size: 550px !important;
  }
}

html body :is(#rcs-giga-projects, #rcs-giga-projects-ar)
  .g3d-col-left > :is(.giga-title-card, .g3d-desc, .g3d-dl-btn) {
  inline-size: 100% !important;
  max-inline-size: 550px !important;
  box-sizing: border-box !important;
  margin-inline: 0 !important;
}

html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-desc {
  text-align: start !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

html body :is(#rcs-giga-projects, #rcs-giga-projects-ar) .g3d-dl-btn {
  justify-content: center !important;
}

/* v27 natural editorial copy.
   Paragraphs use ordinary word and letter spacing and fill the paired red
   card measure without artificial balancing or justification. */
html body :is(
  .rcs-prose-copy,
  .srv-desc,
  .hero-desc,
  .g3d-desc,
  .vo-body,
  .irc-text
) {
  text-align: start !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  text-wrap: pretty !important;
  text-wrap-mode: wrap !important;
  text-wrap-style: pretty !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html[lang="ar"] body :is(
  .rcs-prose-copy,
  .srv-desc,
  .hero-desc,
  .g3d-desc,
  .vo-body,
  .irc-text
) {
  text-align: start !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  text-wrap: pretty !important;
  text-wrap-mode: wrap !important;
  text-wrap-style: pretty !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

@media (max-width: 1199px) {
  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar)
    .g3d-col-left > :is(.giga-title-card, .g3d-desc, .g3d-dl-btn) {
    max-inline-size: none !important;
  }
}

html[lang="ar"]:is(#rcs-ar-sector-card-a, :root):is(#rcs-ar-sector-card-b, :root):is(#rcs-ar-sector-card-c, :root):is(#rcs-ar-sector-card-d, :root) body
  :is(
    #rcs-hero-commercial-ar,
    #rcs-hero-sports-ar,
    #rcs-hero-hospitality-ar,
    #rcs-hero-residential-ar,
    #rcs-hero-healthcare-ar,
    #rcs-hero-education-ar
  ) .title-card-wrap .hero-title {
  font-size: clamp(3.5rem, 5vw, 5.5rem) !important;
  line-height: 1.2 !important;
}

@media (max-width: 767px) {
  html[lang="ar"]:is(#rcs-ar-sector-card-a, :root):is(#rcs-ar-sector-card-b, :root):is(#rcs-ar-sector-card-c, :root):is(#rcs-ar-sector-card-d, :root) body
    :is(
      #rcs-hero-commercial-ar,
      #rcs-hero-sports-ar,
      #rcs-hero-hospitality-ar,
      #rcs-hero-residential-ar,
      #rcs-hero-healthcare-ar,
      #rcs-hero-education-ar
    ) .title-card-wrap {
    padding: 18px 24px !important;
  }

  html[lang="ar"]:is(#rcs-ar-sector-card-a, :root):is(#rcs-ar-sector-card-b, :root):is(#rcs-ar-sector-card-c, :root):is(#rcs-ar-sector-card-d, :root) body
    :is(
      #rcs-hero-commercial-ar,
      #rcs-hero-sports-ar,
      #rcs-hero-hospitality-ar,
      #rcs-hero-residential-ar,
      #rcs-hero-healthcare-ar,
      #rcs-hero-education-ar
    ) .title-card-wrap .hero-title {
    font-size: 2.1rem !important;
  }
}

/* v27.1 final editorial precedence.
   The chained root selector intentionally outranks legacy page-local rules
   without changing the approved component geometry. */
html:is(#rcs-natural-copy-a, :root):is(#rcs-natural-copy-b, :root):is(#rcs-natural-copy-c, :root):is(#rcs-natural-copy-d, :root):is(#rcs-natural-copy-e, :root):is(#rcs-natural-copy-f, :root):is(#rcs-natural-copy-g, :root) body
  :is(.rcs-prose-copy, .srv-desc, .hero-desc, .g3d-desc, .vo-body, .irc-text, .srv-p, .srv-modal-desc, .pmc-m-desc, .bpi-desc, .lr-description, .lr-m-bio) {
  text-align: start !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  text-wrap: pretty !important;
  text-wrap-mode: wrap !important;
  text-wrap-style: pretty !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html[lang="ar"]:is(#rcs-natural-copy-a, :root):is(#rcs-natural-copy-b, :root):is(#rcs-natural-copy-c, :root):is(#rcs-natural-copy-d, :root):is(#rcs-natural-copy-e, :root):is(#rcs-natural-copy-f, :root):is(#rcs-natural-copy-g, :root) body
  :is(.rcs-prose-copy, .srv-desc, .hero-desc, .g3d-desc, .vo-body, .irc-text, .srv-p, .srv-modal-desc, .pmc-m-desc, .bpi-desc, .lr-description, .lr-m-bio) {
  text-align: start !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  text-wrap: pretty !important;
  text-wrap-mode: wrap !important;
  text-wrap-style: pretty !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

/* v31 complete paragraph normalization.
   These prose surfaces retain their component widths while every line uses
   natural alignment and normal font spacing in both languages. */
html:is(#rcs-prose-normal-a, :root):is(#rcs-prose-normal-b, :root):is(#rcs-prose-normal-c, :root):is(#rcs-prose-normal-d, :root):is(#rcs-prose-normal-e, :root) body
  :is(.srv-p, .srv-modal-desc, .pmc-m-desc, .bpi-desc, .lr-description, .lr-m-bio) {
  text-align: start !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  text-wrap: pretty !important;
  text-wrap-mode: wrap !important;
  text-wrap-style: pretty !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* v33 site-wide editorial measure.
   Every paragraph fills the full width of the red card above it.

   `text-wrap: balance` was removed. Balancing deliberately shortens every line
   so they come out equal, which held prose to ~85% of the card width on
   average and as little as 52% on some cards. `auto` keeps the full measure;
   see the note on the text-wrap declarations below for why not `pretty`.

   Hyphenation is OFF in both languages: a visible break hyphen is not wanted.
   Line fill therefore comes from copy length tuned to each component's
   measure, plus the last-line repair in responsive-remediation.js.

   Justification is deliberately NOT used either: at these column widths (~55
   characters per line, ~43 on mobile) justifying forces word spaces to
   0.37em-0.72em against a 0.18em natural space, which is the stretched
   spacing this design already rejected once. */
html:is(#rcs-measure-a, :root):is(#rcs-measure-b, :root):is(#rcs-measure-c, :root):is(#rcs-measure-d, :root):is(#rcs-measure-e, :root):is(#rcs-measure-f, :root):is(#rcs-measure-g, :root):is(#rcs-measure-h, :root) body
  :is(
    .rcs-prose-copy,
    .hero-desc,
    .g3d-desc,
    .vo-body,
    .v-body,
    .v-body-mob,
    .irc-text,
    .svc-desc,
    .srv-desc,
    .srv-p,
    .srv-modal-desc,
    .als-card-desc,
    .lr-b-brief,
    .careers-desc,
    .cta-sub,
    .crc-text,
    .pmc-m-desc,
    .bpi-desc,
    .lr-description,
    .lr-m-bio,
    .hg-sub,
    .careers-meta-sub
  ) {
  /* Justified: every line reaches both edges of the red card's measure.
     text-align-last stays `auto` here and is promoted to `justify` per element
     by repairLastLines() in responsive-remediation.js, but only once that final
     line is already nearly full. Setting it to `justify` in CSS would stretch a
     short final line across the entire column (measured at up to 105x the
     natural word space), which is the one thing that must never happen.
     Normal word spacing is carried by the copy length: each paragraph is cut to
     fill its lines, which is what keeps the justification stretch small. */
  text-align: start !important;
  text-align-last: auto !important;

  /* `auto`, deliberately NOT `pretty` or `balance`.
     balance shortens every line to equalise them (measured: prose held to
     ~85% of card width, worst case 52%).
     Safari 26's `pretty` also wraps each line EARLIER than the box allows in
     order to even the rag, which shortens lines on Safari and iOS in exactly
     the same way. Chromium's `pretty` is a no-op here. `auto` is the only
     value that fills the measure identically in Blink, WebKit and Gecko. */
  text-wrap: wrap !important;
  text-wrap-mode: wrap !important;
  text-wrap-style: auto !important;

  word-spacing: normal !important;
  letter-spacing: normal !important;
  white-space: normal !important;

  /* NO hyphenation. A visible break hyphen ("engineer-ing") is not wanted in
     this design, in either language. Both the prefixed and unprefixed
     properties are set: Safari and iOS <= 16 read only -webkit-hyphens, while
     Chrome 88+, Edge 88+, Firefox 43+ and Safari 17+ read the unprefixed one.
     Line fill is instead carried by the copy length itself, tuned per
     component, plus the last-line repair in responsive-remediation.js. */
  -webkit-hyphens: none !important;
  hyphens: none !important;

  /* Only engages when a token genuinely cannot fit, so a long URL or code
     cannot blow out the line above it. */
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* (The separate Arabic hyphens override was removed: the base rule above now
   sets hyphens: none for both languages, so it had nothing left to do.) */


/* ==========================================================================
   v34 reported-defect corrections.
   Each block records the measured cause, not just the fix.
   ========================================================================== */

/* Team dialog adopts the project-dialog close convention exactly. The side was
   already right (upper-right EN, upper-left AR); the control was 17% smaller,
   position:fixed on mobile instead of absolute, and rendered as the generic
   .rcs-glass-icon rather than the dark glass disc used by .pmc-m-close. */
html body .lr-modal-content > .lr-modal-close {
  position: absolute !important;
  inset-block-start: clamp(16px, 1.4vw, 24px) !important;
  inset-inline-end: clamp(16px, 1.4vw, 24px) !important;
  inset-inline-start: auto !important;
  inline-size: 58px !important;
  block-size: 58px !important;
  min-inline-size: 58px !important;
  min-block-size: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 50% !important;
  background: rgba(20, 20, 21, 0.68) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
  z-index: 50 !important;
}
html body .lr-modal-content > .lr-modal-close :is(svg, ion-icon) {
  inline-size: 24px !important;
  block-size: 24px !important;
  font-size: 24px !important;
}
html[lang="ar"] body .lr-modal-content > .lr-modal-close {
  inset-inline: auto !important;
  left: clamp(16px, 1.4vw, 24px) !important;
  right: auto !important;
}
html[data-theme="light"] body .lr-modal-content > .lr-modal-close {
  border-color: rgba(140, 24, 42, 0.52) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--rcs-brand-red, #8c182a) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body .lr-modal-content > .lr-modal-close:hover {
    border-color: #fff !important;
    background: #fff !important;
    color: var(--rcs-brand-red, #8c182a) !important;
  }
}
@media (max-width: 900px) {
  html body .lr-modal-content > .lr-modal-close {
    inset-block-start: max(14px, env(safe-area-inset-top, 14px)) !important;
    inset-inline-end: max(14px, env(safe-area-inset-right, 14px)) !important;
    inline-size: 56px !important;
    block-size: 56px !important;
    min-inline-size: 56px !important;
    min-block-size: 56px !important;
  }
  html[lang="ar"] body .lr-modal-content > .lr-modal-close {
    left: max(14px, env(safe-area-inset-left, 14px)) !important;
    right: auto !important;
  }
}

/* The alliance section is introduced by its badge and title. This corner mark
   is attached to the full-bleed SECTION, not a card, so it floated ~200px above
   the heading in empty space. It was the only red marker on the page and was
   already hidden in light mode only. Remove it in every theme, both languages. */
:is(#rcs-alliance-strip, #rcs-alliance-strip-ar)::after {
  content: none !important;
  display: none !important;
}

/* Alliance logos: about-us-arabic.html declares box-sizing:content-box without
   !important, but that page carries a universal `* { box-sizing: border-box
   !important }`, which wins. In light mode the plate padding was then subtracted
   from the 44px box instead of added around it, cutting the artwork to 24px. */
:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-card-logo {
  box-sizing: content-box !important;
}

/* Contact: the red information panel and the glass form are one continuous
   surface. The measured geometric gap was already 0; what read as a gutter was
   opposing corner radii, a 1px seam border, and the form panel's box-shadow
   painting over the red panel. */
:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .contact-grid {
  border-radius: 8px !important;
  overflow: hidden !important;
}
/* Five-id chain: the shared `#rcs-red-final-*` block carries four ids and would
   otherwise keep the 4px radius on .c-info-panel, leaving a lit notch at each
   end of the seam where the grid shows through. */
html:is(#rcs-seam-a, :root):is(#rcs-seam-b, :root):is(#rcs-seam-c, :root):is(#rcs-seam-d, :root):is(#rcs-seam-e, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) :is(.c-info-panel, .c-form-panel) {
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-form-panel {
  box-shadow: none !important;
}

/* Careers intro and the Talent Acquisition / Requirements blocks join the site's
   prose scale. They were 12.6px / 10px / 12px on phones because rem-based clamps
   compound with the fluid root (16px desktop, 14px mobile). px clamps instead. */
:is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-desc {
  font-size: clamp(15px, 1.15vw, 17px) !important;
  line-height: 1.72 !important;
}
html[lang="ar"] :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-desc {
  font-size: clamp(15.5px, 1.2vw, 17.5px) !important;
  line-height: 1.85 !important;
}
:is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-meta-title {
  font-size: clamp(12.5px, 0.95vw, 14px) !important;
  letter-spacing: 1.2px !important;
  line-height: 1.35 !important;
}
html[lang="ar"] :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-meta-title {
  font-size: clamp(14.5px, 1.05vw, 16px) !important;
  letter-spacing: 0 !important;
}
:is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-meta-sub {
  font-size: clamp(14px, 1.05vw, 15.5px) !important;
  line-height: 1.62 !important;
}
html[lang="ar"] :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-meta-sub {
  font-size: clamp(14.5px, 1.1vw, 16px) !important;
  line-height: 1.8 !important;
}

/* Services hero: the rule above the statistics spans the whole column but the
   three stats only filled the first 460px of 648, leaving 187px dead on the
   right (mirrored in Arabic). Centring them as a group closed that gap but
   detached the block from the badge, title and rule, which all start at the
   content edge. Use the same three-column datum as the sector heroes (v22) so
   the stats span the full title measure and the first one starts on that edge.
   Logical start/end alignment mirrors naturally in RTL. */
@media (min-width: 768px) {
  :is(#rcs-hero, #rcs-hero-ar) .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 0 !important;
    row-gap: 12px !important;
    align-items: start !important;
  }
  :is(#rcs-hero, #rcs-hero-ar) .h-stat-item {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
  }
}

/* Services: on PHONES only, the portfolio CTA reads below the project card.
   The markup keeps it in .srv-left (which is where it belongs on laptops and
   desktops, under the tab list), so both columns are flattened into the
   viewport here and the five blocks are ordered explicitly. Desktop layout is
   deliberately untouched. */
@media (max-width: 900px) {
  .rcs-service-sequence > .srv-viewport {
    display: flex !important;
    flex-direction: column !important;
  }
  .rcs-service-sequence .srv-left,
  .rcs-service-sequence .srv-right {
    display: contents !important;
  }
  .rcs-service-sequence .srv-red-card    { order: 1 !important; }
  .rcs-service-sequence .srv-desc        { order: 2 !important; }
  .rcs-service-sequence .srv-nav         { order: 3 !important; }
  .rcs-service-sequence .srv-card-frame  { order: 4 !important; }
  .rcs-service-sequence .srv-global-cta  { order: 5 !important; margin-top: 14px !important; }

  /* The frame was sized to balance a column that no longer exists here. */
  .rcs-service-sequence .srv-card-frame {
    block-size: clamp(440px, 58dvh, 540px) !important;
    min-block-size: 440px !important;
    flex: 0 0 auto !important;
  }
  .rcs-service-sequence .srv-global-cta {
    inline-size: 100% !important;
    max-inline-size: none !important;
  }
}

@media (max-width: 420px) {
  .rcs-service-sequence .srv-card-frame {
    block-size: 560px !important;
    min-block-size: 560px !important;
  }
}

/* Footer world map: absent on phones, and now also on portrait tablets. The map
   needs a wide landscape column; on a vertical iPad it ate a 380px band with
   almost nothing to show. `orientation: portrait` is what separates 768x1024 and
   834x1112 from 1024x768 and 1180x820, which share the same width bracket.
   This must outrank two earlier !important rules that switch the map back on
   (one of them carries no media query), so it reuses the :root-padded
   specificity pattern used elsewhere in this file and is deliberately last. */
@media (max-width: 1024px) and (orientation: portrait) {
  html:is(#rcs-footer-map-a, :root):is(#rcs-footer-map-b, :root):is(#rcs-footer-map-c, :root):is(#rcs-footer-map-d, :root):is(#rcs-footer-map-e, :root):is(#rcs-footer-map-f, :root):is(#rcs-footer-map-g, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-map {
    display: none !important;
  }
}

/* Vision 2030 measure on portrait tablets. Above, the shared tablet block drops
   the max-inline-size entirely, so the paragraph ran to ~90 characters at 768 —
   far past the ~55 this design targets, which is what stretched the justified
   word gaps. Capping all three blocks together keeps the paragraph exactly as
   wide as the red card above it. */
@media (max-width: 1024px) and (orientation: portrait) {
  html body :is(#rcs-giga-projects, #rcs-giga-projects-ar)
    .g3d-col-left > :is(.giga-title-card, .g3d-desc, .g3d-dl-btn) {
    max-inline-size: min(100%, 620px) !important;
  }
}

/* Portrait tablets: no interactive label under 11px, no body label under 10px.
   The uppercase micro-labels keep their tracking; only the floor changes. */
@media (max-width: 1024px) and (orientation: portrait) {
  html body :is(.bp-tab-text, .s-tab-text, .bp-tab-btn, .s-tab-btn,
                .fm-legal a, .c-map-trigger, #uploadText, #uploadText-ar) {
    font-size: 11px !important;
  }
  html body :is(.als-stat-lbl, .srv-lbl, .fm-copy) {
    font-size: 10px !important;
  }
}



/* Hero stat strip: the last item ("DESIGN & ENGINEERING / OUR SERVICES") carried
   a 3px red rule and a 15px indent that no other stat has, and its text was set
   two steps smaller (clamp 1.5-2.1rem vs 2.1-2.9rem). Drop the rule and the
   indent so it sits on the same baseline grid, and bring the type into the stat
   scale. `border-right`/`padding-right` is the Arabic mirror of the same rule. */
html body #hero-home-content .rcs-stat-item.key-highlight,
html body .rcs-bottom-area .rcs-stat-item.key-highlight {
  border-left: 0 !important;
  border-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .rcs-stat-item.key-highlight .rcs-stat-num-wrap.cycler-wrap {
  font-size: calc(clamp(1.85rem, 2.35vw, 2.5rem) * var(--hf, 1)) !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

@media (max-width: 900px) {
  html body .rcs-stat-item.key-highlight .rcs-stat-num-wrap.cycler-wrap {
    font-size: clamp(1.55rem, 3vw, 2rem) !important;
  }
}
@media (max-width: 767px) {
  html body .rcs-stat-item.key-highlight .rcs-stat-num-wrap.cycler-wrap {
    font-size: clamp(1.6rem, 4.4vw, 2.1rem) !important;
  }
}

/* Mobile control labels were 10.27px, set by a two-id chain on
   `.rcs-explore-action` (clamp(0.72rem...) against a 14px mobile root). This
   needs a three-id chain to outrank it. Sizes only; the uppercase tracking and
   glass treatment these buttons rely on are untouched. */
@media (max-width: 767px) {
  html:is(#rcs-btn-size-a, :root):is(#rcs-btn-size-b, :root):is(#rcs-btn-size-c, :root) body
    :is(.rcs-glass-control, .rcs-explore-action, .hf-mob-cta-btn, .srv-global-cta,
        .bp-main-btn, .m-action-btn, .rcs-square-btn, .als-card-btn,
        .g3d-dl-btn, .vo-main-btn, .lr-view-btn, .fm-login-btn, .hf-mob-sublink) {
    font-size: 12.5px !important;
  }
  html[lang="ar"]:is(#rcs-btn-size-a, :root):is(#rcs-btn-size-b, :root):is(#rcs-btn-size-c, :root) body
    :is(.rcs-glass-control, .rcs-explore-action, .hf-mob-cta-btn, .srv-global-cta,
        .bp-main-btn, .m-action-btn, .rcs-square-btn, .als-card-btn,
        .g3d-dl-btn, .vo-main-btn, .lr-view-btn, .fm-login-btn, .hf-mob-sublink) {
    font-size: 13.5px !important;
  }
}

/* Mobile nav bar alignment.
   Two faults measured at 390px:
   1. `.hf-nav-right` carried `padding-right: 19.5px` on top of the navbar's own
      19.5px, so the hamburger stopped 19.5px short of the content edge.
   2. `.hf-theme-btn` was `position: absolute; left: 50%`, i.e. out of the flex
      flow and pinned to the bar's centre, where it overlapped the EN button by
      18px (theme 173-217, EN 199-243). That reads as the odd gap around EN/AR.
   The actions row is already forced to `direction: ltr` for Arabic further up,
   so returning the button to normal flow keeps it in the same physical place in
   both languages, which is the behaviour this nav is supposed to have. */
@media (max-width: 991px) {
  html body .hf-navbar .hf-nav-right {
    padding-inline-end: 0 !important;
  }
  html body .hf-navbar .hf-nav-actions {
    margin-inline-start: 0 !important;
    gap: 10px !important;
    align-items: center !important;
  }
  html body .hf-navbar .hf-theme-btn,
  html[lang="ar"] body .hf-navbar .hf-theme-btn {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  html body .hf-navbar .hf-theme-btn:is(:hover, :active) {
    transform: none !important;
  }
}

/* Project-card buttons ("VIEW PROJECT") sit on top of a dark project photo, so
   they are designed white-on-transparent and only invert on hover. The shared
   glass treatment (`.rcs-explore-action`, applied at runtime by markControls)
   was repainting them brand-red on a translucent white pill, which is unreadable
   over the image and is especially wrong in light mode. Restore the page's own
   resting state and leave :hover exactly as each page defines it.
   Three-id chain: the glass rules that set this use two. */
html:is(#rcs-card-btn-a, :root):is(#rcs-card-btn-b, :root):is(#rcs-card-btn-c, :root) body
  .port-card-btn:not(:hover):not(:focus-visible),
html[data-theme="light"]:is(#rcs-card-btn-a, :root):is(#rcs-card-btn-b, :root):is(#rcs-card-btn-c, :root) body
  .port-card-btn:not(:hover):not(:focus-visible) {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

html:is(#rcs-card-btn-a, :root):is(#rcs-card-btn-b, :root):is(#rcs-card-btn-c, :root) body
  .port-card-btn:not(:hover):not(:focus-visible) :is(svg, svg *, ion-icon, span),
html[data-theme="light"]:is(#rcs-card-btn-a, :root):is(#rcs-card-btn-b, :root):is(#rcs-card-btn-c, :root) body
  .port-card-btn:not(:hover):not(:focus-visible) :is(svg, svg *, ion-icon, span) {
  color: #ffffff !important;
  stroke: currentColor !important;
}

/* Sector-page project cards use `.rcs-square-btn` over the same dark project
   photo. Measured resting state: dark theme = white text / white border
   (correct), light theme = brand-red text on a translucent white pill, which is
   the light glass inversion firing on a control that never sits on a light
   surface. Pin the resting state to the dark-theme treatment in both themes and
   leave :hover to each page. */
html[data-theme="light"]:is(#rcs-card-btn-a, :root):is(#rcs-card-btn-b, :root):is(#rcs-card-btn-c, :root) body
  .rcs-square-btn:not(:hover):not(:focus-visible) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="light"]:is(#rcs-card-btn-a, :root):is(#rcs-card-btn-b, :root):is(#rcs-card-btn-c, :root) body
  .rcs-square-btn:not(:hover):not(:focus-visible) :is(svg, svg *, ion-icon, span) {
  color: #ffffff !important;
  stroke: currentColor !important;
}

/* Contact card outline in light mode. The seam fix above removes the border
   from both panels so they meet flush; that also left the white form panel
   with no edge at all, so it dissolved into the light page background. Put the
   outline back on the wrapper instead: one continuous 1px edge around the
   whole card, no seam between the two panels. Colour is the page's own light
   token (rgba(0,0,0,0.1)); the wrapper already carries the 8px radius and
   overflow:hidden, so the corners stay clean.
   Six ids: the pre-existing `#rcs-contact-v13-*` block uses four and sets
   `border: 0 !important` on this element. */
html[data-theme="light"]:is(#rcs-contact-edge-a, :root):is(#rcs-contact-edge-b, :root):is(#rcs-contact-edge-c, :root):is(#rcs-contact-edge-d, :root):is(#rcs-contact-edge-e, :root):is(#rcs-contact-edge-f, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .contact-grid {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 18px 42px rgba(38, 38, 38, 0.08) !important;
}

/* ==========================================================================
   v54 — service stacks and contact card on short desktop-width windows
   ========================================================================== */
/* Every short-viewport rule for the three service stacks stops at
   `max-width: 900px`, including the landscape one (`min-width: 560px and
   max-width: 900px`). Above that width the unconditional floor governs:
   `min-block-size: clamp(720px, 90svh, 900px)` — clamp's first argument is a
   minimum, so the section can never be shorter than 720px — plus a flat 560px
   project card. A Windows laptop is 1536x864 CSS px at 125% scaling and a
   bookmarks bar leaves roughly 610-706px of viewport, so the section rendered
   813px tall (720px floor + 93px padding) inside a 610px window. The card and
   its View Project button therefore sat below the fold with no way to reach
   them, and the bookmarks bar made it worse by shortening the window further.
   iPad landscape and short Mac windows hit the same floor.
   Size the section to the window instead and let the card follow it. The
   sections keep `block-size: auto`, so they still grow if content genuinely
   needs more room rather than clipping it. */
@media (min-width: 901px) and (max-height: 900px) {
  html:is(#rcs-srv-fit-a, :root):is(#rcs-srv-fit-b, :root):is(#rcs-srv-fit-c, :root) body
    .rcs-service-sequence > .srv-viewport {
    min-block-size: 100svh !important;
    padding-block: calc(var(--nav-height, 80px) + 8px) 14px !important;
  }

  /* The left column's own stack is what decides whether the section still
     overflows: at 610px its four blocks needed 519px against 498px of content
     box. Make the rhythm between them proportional to the window height so the
     column compresses with it rather than holding desktop spacing. */
  html:is(#rcs-srv-fit-a, :root):is(#rcs-srv-fit-b, :root):is(#rcs-srv-fit-c, :root) body
    .rcs-service-sequence :is(.srv-red-card, .srv-desc) {
    margin-block-end: clamp(8px, 1.6vh, 25px) !important;
  }

  html:is(#rcs-srv-fit-a, :root):is(#rcs-srv-fit-b, :root):is(#rcs-srv-fit-c, :root) body
    .rcs-service-sequence .srv-nav {
    margin-block-end: clamp(8px, 1.6vh, 30px) !important;
    row-gap: clamp(6px, 1.1vh, 12px) !important;
  }

  /* Supervision carries eight sub-services against Design's seven and
     Advisory's four, so its four nav rows are what still pushed the section
     past a 660px window at the narrow end of this range. The row padding is
     multiplied by four rows, which makes it the effective lever. */
  html:is(#rcs-srv-fit-a, :root):is(#rcs-srv-fit-b, :root):is(#rcs-srv-fit-c, :root) body
    .rcs-service-sequence .srv-nav-item {
    padding-block: clamp(2px, 0.5vh, 6px) !important;
  }

  /* The left column carries the full-height divider between the two columns,
     so it stretches rather than sizing to its own content. */
  html:is(#rcs-srv-fit-a, :root):is(#rcs-srv-fit-b, :root):is(#rcs-srv-fit-c, :root) body
    .rcs-service-sequence :is(.srv-left, .srv-right) {
    min-block-size: 0 !important;
    align-self: stretch !important;
  }

  /* The cards inside the frame are absolutely positioned, so the frame carries
     no intrinsic height and can never be `auto` — it would collapse to zero. */
  html:is(#rcs-srv-fit-a, :root):is(#rcs-srv-fit-b, :root):is(#rcs-srv-fit-c, :root) body
    .rcs-service-sequence .srv-card-frame {
    block-size: min(700px, calc(100svh - var(--nav-height, 80px) - 28px)) !important;
    min-block-size: 300px !important;
    max-block-size: none !important;
  }

  /* The existing `(max-height: 650px)` block collapses the red card to 8px/9px
     padding at any width. That reads as squashed next to a 35px card on a
     desktop-width window, so give it a height-proportional padding instead. */
  html:is(#rcs-srv-fit-a, :root):is(#rcs-srv-fit-b, :root):is(#rcs-srv-fit-c, :root) body
    .rcs-service-sequence .srv-red-card {
    padding: clamp(16px, 2.6vh, 35px) clamp(20px, 2.6vh, 35px) !important;
  }
}

/* The three red cards differed in height purely because the headings wrap to a
   different number of lines — "Design Services" is one line where "Supervision
   & Project Mgmt." and "Technical Advisory" are two, which measured 148px
   against 199px. Reserve two lines on every heading so all three cards match.
   `line-height` is 1.1 here (1.08 under 900px), so two lines is 2.2em, and the
   floor scales with the clamped font size instead of being pinned to a pixel
   height. A heading that genuinely needs three lines still grows. */
.rcs-service-sequence .srv-head {
  min-block-size: 2.2em;
}

/* Contact card on short desktop-width windows. The v16 block above widened the
   card to `min(90vw, 1440px)` and set floors of 50px on the title, 30px on the
   form heading and 40px on the panel padding, because at the former 1200px cap
   it looked miniature on large Mac screens. Those floors answer viewport
   WIDTH only. On a 1366x610 Windows laptop they produced a card 90% of the
   window wide and 114% of it tall — 85px past the bottom of the screen — where
   the same card on a 1728x950 Mac is a comfortable 83% wide and 77% tall.
   Scale the card from viewport height here so short windows get the Mac
   proportion: fully inside the window, with real margin around it. */
@media (min-width: 1025px) and (max-height: 860px) {
  html:is(#rcs-contact-fit-a, :root):is(#rcs-contact-fit-b, :root):is(#rcs-contact-fit-c, :root):is(#rcs-contact-fit-d, :root):is(#rcs-contact-fit-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .contact-grid {
    inline-size: min(88vw, 1240px) !important;
    max-inline-size: 1240px !important;
  }

  html:is(#rcs-contact-fit-a, :root):is(#rcs-contact-fit-b, :root):is(#rcs-contact-fit-c, :root):is(#rcs-contact-fit-d, :root):is(#rcs-contact-fit-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) :is(.c-info-panel, .c-form-panel) {
    padding: clamp(22px, 3.4vh, 44px) clamp(24px, 2.6vw, 46px) !important;
    gap: clamp(12px, 2vh, 26px) !important;
  }

  html:is(#rcs-contact-fit-a, :root):is(#rcs-contact-fit-b, :root):is(#rcs-contact-fit-c, :root):is(#rcs-contact-fit-d, :root):is(#rcs-contact-fit-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-title {
    font-size: clamp(30px, 5vh, 50px) !important;
    line-height: 1.05 !important;
  }

  html:is(#rcs-contact-fit-a, :root):is(#rcs-contact-fit-b, :root):is(#rcs-contact-fit-c, :root):is(#rcs-contact-fit-d, :root):is(#rcs-contact-fit-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .form-intro h3 {
    font-size: clamp(19px, 3vh, 30px) !important;
    line-height: 1.15 !important;
  }

  html:is(#rcs-contact-fit-a, :root):is(#rcs-contact-fit-b, :root):is(#rcs-contact-fit-c, :root):is(#rcs-contact-fit-d, :root):is(#rcs-contact-fit-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) :is(.form-intro p, .c-text p) {
    font-size: clamp(12.5px, 1.6vh, 15px) !important;
  }

  html:is(#rcs-contact-fit-a, :root):is(#rcs-contact-fit-b, :root):is(#rcs-contact-fit-c, :root):is(#rcs-contact-fit-d, :root):is(#rcs-contact-fit-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input {
    font-size: clamp(13.5px, 1.7vh, 16px) !important;
    /* Written as the shorthand, and outranking the `#rcs-contact-v13-*` block,
       because that one sets `padding: 14px 18px !important` at five ids — a
       `padding-block` longhand here lost to it and the field kept its full
       desktop height. The 18px inline padding is v13's boxed-field inset and
       is deliberately preserved; only the vertical rhythm gives way. */
    padding: clamp(7px, 1.2vh, 12px) 18px !important;
  }

  /* Four of the five form rows are a field, so the gap under each one is the
     single largest lever on the panel's height. */
  html:is(#rcs-contact-fit-a, :root):is(#rcs-contact-fit-b, :root):is(#rcs-contact-fit-c, :root):is(#rcs-contact-fit-d, :root):is(#rcs-contact-fit-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input-group {
    margin-block-end: clamp(8px, 1.6vh, 22px) !important;
  }

  html:is(#rcs-contact-fit-a, :root):is(#rcs-contact-fit-b, :root):is(#rcs-contact-fit-c, :root):is(#rcs-contact-fit-d, :root):is(#rcs-contact-fit-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .form-intro {
    margin-block-end: clamp(8px, 1.4vh, 16px) !important;
  }

  html:is(#rcs-contact-fit-a, :root):is(#rcs-contact-fit-b, :root):is(#rcs-contact-fit-c, :root):is(#rcs-contact-fit-d, :root):is(#rcs-contact-fit-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-label {
    font-size: clamp(11.5px, 1.5vh, 14px) !important;
  }
}

/* The project card splits its frame 50/50 between image and text. A two-line
   card title ("Design Management", "Value Engineering") then needs 291px of
   that 285px text half, so View Project was pushed 5px past the frame's
   `overflow: hidden` edge and rendered cut off — the button fault visible in
   the Windows screenshots, on two of the three sections but not the
   single-line "Architecture" one. Give the text half more of a short frame and
   tighten its own padding.
   Bounded below at 651px on purpose: at 650px and under, the existing
   `(max-width: 420px), (max-height: 650px)` block already drops this card into
   a much tighter mode (10px body padding, 11px copy, project label hidden),
   which measures clean, and overriding its padding here would reintroduce the
   overflow it already solves. */
@media (min-width: 901px) and (min-height: 651px) and (max-height: 900px) {
  html:is(#rcs-srv-card-a, :root):is(#rcs-srv-card-b, :root):is(#rcs-srv-card-c, :root) body
    .rcs-service-sequence .srv-card .srv-media {
    block-size: 44% !important;
  }

  html:is(#rcs-srv-card-a, :root):is(#rcs-srv-card-b, :root):is(#rcs-srv-card-c, :root) body
    .rcs-service-sequence .srv-card .srv-body {
    block-size: 56% !important;
    padding: clamp(18px, 3vh, 35px) clamp(22px, 2.4vw, 40px) !important;
  }
}

/* ==========================================================================
   v57 — left column aligned to the project card in the service stacks
   ==========================================================================
   The left column is centred as a block inside a full-height column while the
   project card is centred at its own height, so the two never lined up: the red
   card sat 81px below the top of the card image and the View All button 81px
   above its lower edge (131px on Advisory, which has fewer sub-services and so
   a shorter stack). The button was also capped at 500px against the red card's
   552px, leaving it visibly narrow.
   Give the column an inset equal to the card's own, so its content box is
   exactly the card's height, then anchor the red card to the top of that box
   and push the button to the bottom. The column itself stays full height, which
   keeps its divider and background gradient spanning the whole section. */
@media (min-width: 901px) and (max-height: 900px) {
  .rcs-service-sequence {
    --srv-col-h: calc(100svh - var(--nav-height, 80px) - 22px);
    --srv-frame-h: min(700px, calc(100svh - var(--nav-height, 80px) - 28px));
  }
}

@media (min-width: 901px) and (min-height: 901px) {
  .rcs-service-sequence {
    --srv-col-h: clamp(720px, 90svh, 900px);
    --srv-frame-h: min(700px, calc(100svh - 120px));
  }
}

@media (min-width: 901px) {
  html:is(#rcs-srv-align-a, :root):is(#rcs-srv-align-b, :root):is(#rcs-srv-align-c, :root):is(#rcs-srv-align-d, :root) body
    .rcs-service-sequence .srv-left {
    justify-content: flex-start !important;
    padding-block: calc((var(--srv-col-h) - var(--srv-frame-h)) / 2) !important;
  }

  /* `auto` rather than a fixed gap: the stack between the red card and the
     button differs per section (seven, eight and four sub-services), so only a
     free-space margin lands every button on the card's lower edge. */
  html:is(#rcs-srv-align-a, :root):is(#rcs-srv-align-b, :root):is(#rcs-srv-align-c, :root):is(#rcs-srv-align-d, :root) body
    .rcs-service-sequence .srv-global-cta {
    margin-block-start: auto !important;
    inline-size: 100% !important;
    max-inline-size: none !important;
  }
}

/* ==========================================================================
   v63 — sub-service lists span the red card, with the type scaled up
   ==========================================================================
   The numbered lists (Design 1-7, Supervision 1-8, Advisory 1-4) were capped
   at 520/550px while the red card above them spans the full column measure
   (690px at 1920), so the list stopped short of the card's right edge and the
   two columns never lined up with anything.
   Take the cap off so the list is bounded by exactly the same left and right
   edges as the red card, and keep two equal columns so the second one starts
   at the card's midpoint with real space between them.
   The type scales with the window rather than sitting at one fixed size: each
   label has to fit inside half the card, and the longest one ("01 Design
   Management") carries a fixed 24px of icon and gap on top of its text, so a
   fixed large size wraps it to two lines at laptop widths. The clamp keeps it
   as large as the card can hold at every width. Desktop only — the <=900px
   stacked layout keeps its own two-up grid. */
@media (min-width: 901px) {
  html:is(#rcs-srv-nav-a, :root):is(#rcs-srv-nav-b, :root):is(#rcs-srv-nav-c, :root):is(#rcs-srv-nav-d, :root) body
    .rcs-service-sequence .srv-nav {
    /* Two equal columns spanning the measure, so the first label starts exactly
       on the column's left edge — the same vertical line the red card, the
       paragraph rule and the button all sit on. Centring the pair (an earlier
       attempt) pushed the list ~50px inside that line, which read as a misalign
       against everything stacked above and below it. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    column-gap: clamp(16px, 1.2vw, 28px) !important;
    inline-size: 100% !important;
    max-inline-size: none !important;
  }

  /* The list sat tight under the paragraph with all the slack dumped below it,
     because only the button carried an auto margin. Give the list one too: the
     free space then splits evenly between the two auto margins, so the gap
     above the list equals the gap below it. The paragraph and the list carry
     the same bottom margin so the two gaps stay identical rather than differing
     by the 25px/30px the page set. The button keeps its own auto margin, so it
     still finishes flush with the bottom of the project card. */
  html:is(#rcs-srv-nav-a, :root):is(#rcs-srv-nav-b, :root):is(#rcs-srv-nav-c, :root):is(#rcs-srv-nav-d, :root) body
    .rcs-service-sequence .srv-nav {
    margin-block-start: auto !important;
  }

  html:is(#rcs-srv-nav-a, :root):is(#rcs-srv-nav-b, :root):is(#rcs-srv-nav-c, :root):is(#rcs-srv-nav-d, :root) body
    .rcs-service-sequence :is(.srv-desc, .srv-nav) {
    margin-block-end: clamp(10px, 1.6vh, 26px) !important;
  }

  html:is(#rcs-srv-nav-a, :root):is(#rcs-srv-nav-b, :root):is(#rcs-srv-nav-c, :root):is(#rcs-srv-nav-d, :root) body
    .rcs-service-sequence .srv-nav-item {
    /* 19px at 1520px and up — a clear step over the 16px this was, and still
       shy of the 25px the widest label could take before it reached the edge
       of its column. The 1.15vw slope is set by the narrowest desktop width
       rather than the widest: measured against the real labels, the largest
       size that clears a wrap is ~1.19vw at 912px, easing to ~1.32vw at
       1920px, so the tightest end governs. The floor sits at 10.5px for the
       same reason — 11px overshot 912px's 10.86px ceiling and wrapped
       Supervision's longest label. */
    font-size: clamp(10.5px, 1.15vw, 19px) !important;
    /* Tracking is eased off the page's 1px. On a 20-character uppercase label
       that 1px is ~20px of pure spacing, and spending it on glyph size instead
       buys roughly two full steps of type before the label reaches the edge of
       its column. */
    letter-spacing: 0.5px !important;
  }
}

/* Below ~1200px half the card gets tight enough that the two longest labels
   ("01 Design Management", "03 Technical Advisory") wrapped to a second line.
   The labels are uppercase on 1px of letter-spacing, which on a 20-character
   label is ~20px of pure spacing — more than the shortfall — so tightening the
   tracking and the column gap keeps them on one line without dropping the type
   any further. Above this range the full 1px tracking is untouched. */
@media (min-width: 901px) and (max-width: 1199px) {
  html:is(#rcs-srv-nav-a, :root):is(#rcs-srv-nav-b, :root):is(#rcs-srv-nav-c, :root):is(#rcs-srv-nav-d, :root) body
    .rcs-service-sequence .srv-nav-item {
    letter-spacing: 0.3px !important;
    /* At the very bottom of this range (912px, Surface Pro portrait) the
       longest label was still 2px over its column. The icon sits 10px from
       the text, so trimming that gap covers the shortfall outright and costs
       less visually than squeezing the columns any closer together. */
    gap: 7px !important;
  }

  html:is(#rcs-srv-nav-a, :root):is(#rcs-srv-nav-b, :root):is(#rcs-srv-nav-c, :root):is(#rcs-srv-nav-d, :root) body
    .rcs-service-sequence .srv-nav {
    column-gap: 16px !important;
  }
}

/* ==========================================================================
   v69 — left paragraph matched to the project card's paragraph
   ==========================================================================
   On desktop the two body paragraphs were set differently: the card's copy
   uses `clamp(0.9rem, 0.95vw, 1rem)` while the intro paragraph beside the red
   card was a flat `1rem`. At 1536px that rendered them 16.33px against
   14.70px, so the left column's copy read a step larger than the same-role
   copy in the card next to it. Give the intro the card's own ramp, and its
   1.6 leading, so the two paragraphs are the same size at every width.
   Desktop only: below 900px both already have their own tuned scales for the
   stacked layout. The intro getting slightly shorter only adds slack to the
   left column, which the auto margins absorb, so the red card stays pinned to
   the top of the project card and the button to its bottom. */
@media (min-width: 901px) {
  html:is(#rcs-srv-para-a, :root):is(#rcs-srv-para-b, :root):is(#rcs-srv-para-c, :root):is(#rcs-srv-para-d, :root) body
    .rcs-service-sequence .srv-desc {
    font-size: clamp(0.9rem, 0.95vw, 1rem) !important;
    line-height: 1.6 !important;
  }
}

/* ==========================================================================
   v70 — About Us panels: spec row on the red card's datum, and the short
   laptop's compressed layout
   ==========================================================================
   1) THE SPEC ROW. "Founded / Base / Core" (and Focus/Standard/Result,
   Approach/Tech/Goal) was a flex row with a 34px indent, so the three pairs
   bunched into the first 361px of a 760px card: the middle pair sat 206px
   left of the card's centre and the last one stopped 399px short of its right
   edge. The stat row below it already spans the card at max-width:760px with
   the CTA pushed to the far edge, so the specs get the same datum — three
   equal columns across the card measure, with the first pair anchored to the
   left edge, the middle one centred on the card's centre, and the last one
   finishing flush on the right edge. Logical start/end mirror in RTL. */
@media (min-width: 1200px) {
  html:is(#rcs-vault-spec-a, :root):is(#rcs-vault-spec-b, :root):is(#rcs-vault-spec-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-specs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: clamp(12px, 1.6vw, 28px) !important;
    /* Logical, not `padding-left`: the Arabic page mirrors this indent as
       `padding-right`, so clearing only the left one left the row 34px short
       of the card's right edge there. */
    padding-inline: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 760px !important;
  }

  /* Each pair centres on itself, so the small label sits centred over the word
     beneath it rather than ranged left on the first pair and right on the last.
     The item is a flex column, so `align-items` is what centres the two lines
     against each other; `justify-self` then places the pair as a unit. Because
     the pair is no longer stretched, its box is only as wide as its wider line,
     which is what lets `start`/`end` seat it exactly on the card's edges. */
  html:is(#rcs-vault-spec-a, :root):is(#rcs-vault-spec-b, :root):is(#rcs-vault-spec-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-spec-item {
    align-items: center !important;
    text-align: center !important;
  }

  html:is(#rcs-vault-spec-a, :root):is(#rcs-vault-spec-b, :root):is(#rcs-vault-spec-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-spec-item:nth-child(1) {
    justify-self: start !important;
  }

  html:is(#rcs-vault-spec-a, :root):is(#rcs-vault-spec-b, :root):is(#rcs-vault-spec-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-spec-item:nth-child(2) {
    justify-self: center !important;
  }

  html:is(#rcs-vault-spec-a, :root):is(#rcs-vault-spec-b, :root):is(#rcs-vault-spec-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-spec-item:nth-child(3) {
    justify-self: end !important;
  }
}

/* 2) THE SHORT-LAPTOP COMPRESSION. The panel keeps its height while the
   `max-height: 820px` rules shrink the type and padding hard — at 1536x706 the
   body fell from 23.7px to 17.1px and the red card from 213px to 154px. The
   stat row is pinned to the bottom of the column by `margin-top: auto`, so
   everything the content gave up reappeared as one gap: 196px of dead space
   between the specs and the stats, against 15px on a Mac. That gap is the
   "shrunken" look — the panel is the same size, the content inside it is not.
   Scale the content from viewport height more generously so it fills the panel
   the way it does on a tall screen. There is 196px of measured slack to grow
   into, so this cannot overflow the panel; the auto margin simply absorbs
   whatever is left over, and the stats stay on the bottom edge. */
@media (min-width: 1200px) and (max-height: 820px) {
  /* The headline is the single biggest part of it: capped at `3.4vh` with a
     2rem floor, "OUR VISION" rendered 32.66px here against 65.32px on a tall
     screen — exactly half — which is what makes the whole panel read as
     shrunken. Give it a ramp that reaches a comparable size. */
  html:is(#rcs-vault-fit-a, :root):is(#rcs-vault-fit-b, :root):is(#rcs-vault-fit-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-head {
    font-size: clamp(2rem, 7vh, 4rem) !important;
  }

  html:is(#rcs-vault-fit-a, :root):is(#rcs-vault-fit-b, :root):is(#rcs-vault-fit-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-body {
    font-size: clamp(1.05rem, 3.4vh, 1.5rem) !important;
    margin-bottom: clamp(12px, 2.4vh, 26px) !important;
  }

  html:is(#rcs-vault-fit-a, :root):is(#rcs-vault-fit-b, :root):is(#rcs-vault-fit-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-red-card {
    padding: clamp(40px, 8.2vh, 58px) clamp(28px, 3vw, 48px) !important;
    margin-bottom: clamp(12px, 2.4vh, 26px) !important;
  }

  html:is(#rcs-vault-fit-a, :root):is(#rcs-vault-fit-b, :root):is(#rcs-vault-fit-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-cc-stat h4 {
    font-size: clamp(1.8rem, 6vh, 2.8rem) !important;
  }

  html:is(#rcs-vault-fit-a, :root):is(#rcs-vault-fit-b, :root):is(#rcs-vault-fit-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-spec-val {
    font-size: 16px !important;
  }

  html:is(#rcs-vault-fit-a, :root):is(#rcs-vault-fit-b, :root):is(#rcs-vault-fit-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-specs {
    margin-top: clamp(10px, 2vh, 22px) !important;
  }

  html:is(#rcs-vault-fit-a, :root):is(#rcs-vault-fit-b, :root):is(#rcs-vault-fit-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-card-creds {
    margin-bottom: clamp(12px, 2.2vh, 34px) !important;
    padding-top: clamp(12px, 2vh, 22px) !important;
  }
}

/* ==========================================================================
   v75 — spec row inset and sized up; alliance card stats given the same datum
   ==========================================================================
   The spec pairs sat hard on the card's outer edges, which read as tight, and
   the type was small next to everything around it. Inset the row by the same
   amount the stat row below already uses for its own left inset, so the first
   pair now lines up with the "100+" beneath it rather than with the card's
   bare edge, and the last pair pulls in by the matching amount on the right.
   The middle pair is unaffected — the inset is symmetric, so it stays centred
   on the card. */
@media (min-width: 1200px) {
  html:is(#rcs-vault-spec-a, :root):is(#rcs-vault-spec-b, :root):is(#rcs-vault-spec-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-specs {
    padding-inline: clamp(16px, 1.8vw, 30px) !important;
  }

  html:is(#rcs-vault-spec-a, :root):is(#rcs-vault-spec-b, :root):is(#rcs-vault-spec-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-spec-lbl {
    font-size: 12px !important;
    letter-spacing: 1.4px !important;
  }

  html:is(#rcs-vault-spec-a, :root):is(#rcs-vault-spec-b, :root):is(#rcs-vault-spec-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-spec-val {
    font-size: 19px !important;
  }
}

/* The alliance cards carry the same shape of information — a value over a small
   label — but were a flex row with a 28px gap, so both pairs bunched into the
   left of the card and left the right half empty. Give them the card's full
   measure with the same treatment: two columns, the first seated on the left
   edge, the second on the right, and each label centred over its value. */
#rcs-alliance-strip .als-card-stats,
#rcs-alliance-strip-ar .als-card-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  column-gap: clamp(12px, 1.4vw, 24px) !important;
}

#rcs-alliance-strip .als-card-stats > *,
#rcs-alliance-strip-ar .als-card-stats > * {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

#rcs-alliance-strip .als-card-stats > *:nth-child(1),
#rcs-alliance-strip-ar .als-card-stats > *:nth-child(1) {
  justify-self: start !important;
}

#rcs-alliance-strip .als-card-stats > *:nth-child(2),
#rcs-alliance-strip-ar .als-card-stats > *:nth-child(2) {
  justify-self: end !important;
}

/* Paired with the modal-close handler in js/responsive-remediation.js: while
   the mute is on, a card's hover styling is held back so a stale hover left
   over from the closing overlay cannot paint a red edge on a card that is not
   actually being pointed at. It lifts on the first real pointer move. */
html.rcs-card-hover-muted .lr-member-card:hover .lr-side {
  border-color: var(--c-border) !important;
}

html.rcs-card-hover-muted .lr-member-card:hover .lr-card-flipper {
  transform: none !important;
}

html.rcs-card-hover-muted .lr-member-card:hover .lr-photo {
  transform: none !important;
}

/* ==========================================================================
   v77 — stat-pair treatment made consistent site-wide
   ==========================================================================
   1) THE LABEL COLOUR. Under every hero stat the small caption was red, which
   made it compete with the number above it and with the brand red used for
   emphasis elsewhere. The home page already had the pattern that reads best —
   "KSA / RIYADH", a muted code over a white word — so the captions take the
   same grey the rest of the site uses for labels, leaving the number as the
   only white, and nothing red. Fourteen sector and service pages share this
   markup, so one rule covers them all in both languages. */
:is(#rcs-hero, #rcs-hero-ar, #rcs-hero-commercial, #rcs-hero-commercial-ar,
    #rcs-hero-sports, #rcs-hero-sports-ar, #rcs-hero-hospitality, #rcs-hero-hospitality-ar,
    #rcs-hero-residential, #rcs-hero-residential-ar, #rcs-hero-healthcare, #rcs-hero-healthcare-ar,
    #rcs-hero-education, #rcs-hero-education-ar) .h-stat-item p {
  color: #999999 !important;
}

html[data-theme="light"] :is(#rcs-hero, #rcs-hero-ar, #rcs-hero-commercial, #rcs-hero-commercial-ar,
    #rcs-hero-sports, #rcs-hero-sports-ar, #rcs-hero-hospitality, #rcs-hero-hospitality-ar,
    #rcs-hero-residential, #rcs-hero-residential-ar, #rcs-hero-healthcare, #rcs-hero-healthcare-ar,
    #rcs-hero-education, #rcs-hero-education-ar) .h-stat-item p {
  color: #888888 !important;
}

/* 2) THE HOME VAULT'S TWO STAT ROWS. "Est. 2015 / Forward Thinking" was a flex
   row and the KSA/CAN/LBN row used plain `1fr` tracks, so both bunched into the
   left of a 760px measure. Give them the datum used elsewhere: the row spans
   the card, the first pair sits on the left edge, the last on the right, the
   middle centred, and each small label centres over the word above it. */
@media (min-width: 1200px) {
  html:is(#rcs-vo-spec-a, :root):is(#rcs-vo-spec-b, :root):is(#rcs-vo-spec-c, :root) body
    :is(.vo-specs, .vo-gl-grid) {
    display: grid !important;
    column-gap: clamp(12px, 1.6vw, 28px) !important;
    padding-inline: clamp(16px, 1.8vw, 30px) !important;
    inline-size: 100% !important;
  }

  html:is(#rcs-vo-spec-a, :root):is(#rcs-vo-spec-b, :root):is(#rcs-vo-spec-c, :root) body
    .vo-gl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  html:is(#rcs-vo-spec-a, :root):is(#rcs-vo-spec-b, :root):is(#rcs-vo-spec-c, :root) body
    .vo-specs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  html:is(#rcs-vo-spec-a, :root):is(#rcs-vo-spec-b, :root):is(#rcs-vo-spec-c, :root) body
    :is(.vo-specs, .vo-gl-grid) > * {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  html:is(#rcs-vo-spec-a, :root):is(#rcs-vo-spec-b, :root):is(#rcs-vo-spec-c, :root) body
    :is(.vo-specs, .vo-gl-grid) > *:first-child { justify-self: start !important; }

  html:is(#rcs-vo-spec-a, :root):is(#rcs-vo-spec-b, :root):is(#rcs-vo-spec-c, :root) body
    :is(.vo-specs, .vo-gl-grid) > *:last-child { justify-self: end !important; }

  /* 3) THE VAULT'S LEFT EDGE. The text card is positioned at `5vw` while every
     other section on the page sits in a 90%/1500px centred container — 86.4px
     against 114px at 1728, so the vault hung a step further left than the
     section directly beneath it. Move its left edge onto that shared line and
     take the difference out of its width, so the right edge, and the model
     beside it, do not move. */
  html:is(#rcs-vo-edge-a, :root):is(#rcs-vo-edge-b, :root):is(#rcs-vo-edge-c, :root) body
    .vo-text-card {
    left: calc((100vw - min(90vw, 1500px)) / 2) !important;
    width: calc(5vw + 760px - (100vw - min(90vw, 1500px)) / 2) !important;
    max-width: none !important;
  }
}

/* 4) THE ALLIANCE HEADING AS A RED CARD. "Strategic Network / Our Strategic
   Alliance" was bare type on the page background while every other section
   heading on the site is set in a red card with the white corner bracket.
   Give it the same treatment so the section reads as part of the set. The red,
   padding, radius and bracket are copied from `.v-red-card` on the same page so
   the two match exactly rather than approximately. */
:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head-left {
  background: var(--al-red, #8c182a);
  padding: clamp(28px, 3.4vw, 48px) clamp(26px, 3vw, 46px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  position: relative;
}

html[data-theme="light"] :is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head-left {
  border-color: transparent;
}

:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head-left::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 20px;
  height: 20px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

/* On the card the eyebrow and heading both sit on red, so they take the card's
   own foreground rather than the page's red-on-dark pairing. */
:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head-left .als-badge,
html[data-theme="light"] :is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head-left .als-badge {
  color: rgba(255, 255, 255, 0.85) !important;
}

:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head-left .als-title,
html[data-theme="light"] :is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head-left .als-title {
  color: #ffffff !important;
}

:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head-left .als-badge::before {
  background: rgba(255, 255, 255, 0.85) !important;
}

/* ==========================================================================
   v79 — alliance card corrected, stat rows given one shared rhythm
   ==========================================================================
   FIX FIRST: making the heading a red card in v78 put "Alliance" — which is
   styled `color: var(--al-red)` as the accent word — on a red ground, so it
   disappeared and the title read "Our Strategic". The accent now resolves to a
   white tint, which keeps the two-tone heading and is legible on red. */
:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head .als-title span {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* The card now wraps the whole header row rather than just the left column, so
   the supporting sentence sits inside it the way every other section's red card
   carries its own copy. The styling moves up one level from `.als-head-left`. */
:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head-left {
  background: none;
  padding: 0;
  border: 0;
  border-radius: 0;
}

:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head-left::after {
  content: none;
}

:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head {
  background: var(--al-red, #8c182a);
  padding: clamp(28px, 3.4vw, 48px) clamp(26px, 3vw, 46px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  position: relative;
  align-items: center;
}

html[data-theme="light"] :is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head {
  border-color: transparent;
}

:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 20px;
  height: 20px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

/* The sentence takes the same rule-and-inset treatment the other red cards use
   for their supporting copy. */
:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head-right {
  flex: 1.15;
  min-width: 280px;
}

:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  line-height: 1.7;
  border-inline-start: 3px solid rgba(255, 255, 255, 0.45);
  padding-inline-start: clamp(18px, 1.6vw, 26px);
}

/* ==========================================================================
   One rhythm for every value/label stat row
   ==========================================================================
   Two-item rows were being pushed to opposite edges of the measure, which read
   as a gap rather than a pair — "Est. 2015" at the far left and "Forward
   Thinking" at the far right. Every row now sits on the SAME three-column
   datum regardless of how many pairs it holds: the first pair on the left
   edge, the second on the centre line, the third on the right edge. A two-item
   row therefore fills the first two columns and stops at the centre, so it
   keeps the same rhythm as a three-item row instead of stretching.
   Each label also centres on the value above it. */
@media (min-width: 1000px) {
  html:is(#rcs-stat-row-a, :root):is(#rcs-stat-row-b, :root):is(#rcs-stat-row-c, :root) body
    :is(.vo-specs, .vo-gl-grid, .irc-stats-row, .bpi-stats, .lr-stats-box) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: clamp(12px, 1.6vw, 28px) !important;
    inline-size: 100% !important;
  }

  html:is(#rcs-stat-row-a, :root):is(#rcs-stat-row-b, :root):is(#rcs-stat-row-c, :root) body
    :is(.vo-specs, .vo-gl-grid, .irc-stats-row, .bpi-stats, .lr-stats-box) > * {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  html:is(#rcs-stat-row-a, :root):is(#rcs-stat-row-b, :root):is(#rcs-stat-row-c, :root) body
    :is(.vo-specs, .vo-gl-grid, .irc-stats-row, .bpi-stats, .lr-stats-box) > *:nth-child(1) {
    justify-self: start !important;
  }

  html:is(#rcs-stat-row-a, :root):is(#rcs-stat-row-b, :root):is(#rcs-stat-row-c, :root) body
    :is(.vo-specs, .vo-gl-grid, .irc-stats-row, .bpi-stats, .lr-stats-box) > *:nth-child(2) {
    justify-self: center !important;
  }

  html:is(#rcs-stat-row-a, :root):is(#rcs-stat-row-b, :root):is(#rcs-stat-row-c, :root) body
    :is(.vo-specs, .vo-gl-grid, .irc-stats-row, .bpi-stats, .lr-stats-box) > *:nth-child(3) {
    justify-self: end !important;
  }

  /* The home vault's section eyebrow sat on the old 5vw line while the red card
     below it moved onto the page's shared container line, leaving the dash a
     step to its left. */
  html:is(#rcs-stat-row-a, :root):is(#rcs-stat-row-b, :root):is(#rcs-stat-row-c, :root) body
    .vo-section-tag {
    /* The tag is absolutely positioned and its static origin already sits at
       the column's 5vw padding, so this is the REMAINDER needed to reach the
       shared container line — not the full offset. Setting the full value as
       padding pushed the dash 114px past where it belonged. */
    margin-inline-start: calc((100vw - min(90vw, 1500px)) / 2 - 5vw) !important;
    padding-inline-start: 0 !important;
  }
}

/* ==========================================================================
   v81 — every stat row: each pair centred in its own equal share
   ==========================================================================
   Supersedes the start/centre/end datum above. Rather than pinning the first
   pair to the left edge and the last to the right, the row is divided into as
   many equal shares as it has pairs and each pair is centred inside its own
   share. With two pairs that puts one in the middle of the left half and the
   other in the middle of the right half; with three, each sits on the centre
   of its third. One rule then reads the same everywhere regardless of count.
   `grid-auto-flow: column` with `grid-auto-columns` derives the share count
   from the content, so a row with two, three or four pairs needs no variant —
   and `justify-items: center` is what centres each pair in its share, while
   `align-items: center` on the pair keeps the small label centred on the value
   above it. */
@media (min-width: 1000px) {
  html:is(#rcs-share-a, :root):is(#rcs-share-b, :root):is(#rcs-share-c, :root):is(#rcs-share-d, :root) body
    :is(.vo-specs, .vo-gl-grid, .irc-stats-row, .bpi-stats, .lr-stats-box,
        .als-card-stats, .v-specs-mob, .v-cc-stats, #vault-wrapper .v-specs, #vault-wrapper-ar .v-specs) {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-template-columns: none !important;
    justify-items: center !important;
    column-gap: 0 !important;
    inline-size: 100% !important;
  }

  /* Beats the nth-child `start`/`end` placements set earlier in this file. */
  html:is(#rcs-share-a, :root):is(#rcs-share-b, :root):is(#rcs-share-c, :root):is(#rcs-share-d, :root) body
    :is(.vo-specs, .vo-gl-grid, .irc-stats-row, .bpi-stats, .lr-stats-box,
        .als-card-stats, .v-specs-mob, .v-cc-stats, #vault-wrapper .v-specs, #vault-wrapper-ar .v-specs) > * {
    justify-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   v83 — stat shares measured on the paragraph, not the rule above them
   ==========================================================================
   The shares were being divided across the row's full width, but the row runs
   the width of the card while the paragraph beside it is capped at 650px — 787
   against 650 in Services Overview. So the pairs were spread wider than the
   copy they belong to and the right-hand one sat past the paragraph's right
   edge. Shrink the row's CONTENT box to the paragraph's measure while leaving
   its border box alone, so the shares divide the paragraph's width and the
   rule drawn on the row's top border keeps its full length. */
@media (min-width: 1000px) {
  html:is(#rcs-para-share-a, :root):is(#rcs-para-share-b, :root):is(#rcs-para-share-c, :root) body
    :is(.irc-stats-row, .bpi-stats) {
    padding-inline-end: max(0px, calc(100% - 650px)) !important;
  }
}

/* ==========================================================================
   v83b — one body size for the section paragraphs, a step larger
   ==========================================================================
   These ran at 17.9px, 18.8px and 22.9px depending on the section, so the same
   kind of copy changed size as you moved down a page. They now share one ramp.
   Deliberately excluded: the hero subtitle and the small copy inside the
   service cards, which are different roles in the hierarchy rather than
   inconsistencies — flattening those would remove the contrast that makes the
   hero read as a hero. */
@media (min-width: 1000px) {
  html:is(#rcs-para-std-a, :root):is(#rcs-para-std-b, :root):is(#rcs-para-std-c, :root) body
    :is(.irc-text, .bpi-desc, .vo-body, .lr-description, .als-head-text, .als-card-desc,
        .v-body, .v-body-mob) {
    font-size: clamp(17px, 1.18vw, 20.5px) !important;
    line-height: 1.62 !important;
  }
}

/* ==========================================================================
   v83c — CTA and page-to-page buttons a step larger
   ==========================================================================
   Every one of these sat at 13.39px, small against the copy beside them, in
   both languages. The navbar and its dropdown are deliberately untouched: they
   are excluded by selector rather than by scope, so nothing here can reach
   them. */
html:is(#rcs-btn-up-a, :root):is(#rcs-btn-up-b, :root):is(#rcs-btn-up-c, :root):is(#rcs-btn-up-d, :root) body
  :is(.vo-main-btn, .svc-main-btn, .bp-main-btn, .g3d-dl-btn, .hf-explore-btn,
      .srv-global-cta, .srv-detail-btn, .v-cc-cta, .cta-btn, .rcs-cta-btn,
      .als-card-link, .lr-view-btn, .bp-submit, .c-map-trigger):not(nav *):not(header *) {
  font-size: 15px !important;
  letter-spacing: 1.6px !important;
}

@media (max-width: 767px) {
  html:is(#rcs-btn-up-a, :root):is(#rcs-btn-up-b, :root):is(#rcs-btn-up-c, :root):is(#rcs-btn-up-d, :root) body
  :is(.vo-main-btn, .svc-main-btn, .bp-main-btn, .g3d-dl-btn, .hf-explore-btn,
      .srv-global-cta, .srv-detail-btn, .v-cc-cta, .cta-btn, .rcs-cta-btn,
      .als-card-link, .lr-view-btn, .bp-submit, .c-map-trigger):not(nav *):not(header *) {
    font-size: 13.5px !important;
    letter-spacing: 1.2px !important;
  }
}

/* ==========================================================================
   v86 — label/value pairing corrections
   ==========================================================================
   (1) Hero stats: the caption under each figure was ranged left rather than
   centred on the figure itself. Shrinking the pair to its content lets the
   caption centre on the number while `justify-self: start` keeps the first
   figure on the title's left edge, which is the alignment set earlier. */
@media (min-width: 768px) {
  html:is(#rcs-hstat-a, :root):is(#rcs-hstat-b, :root):is(#rcs-hstat-c, :root):is(#rcs-hstat-d, :root) body
    .h-stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-self: start !important;
    inline-size: max-content !important;
  }
}

/* (5) Story / Mission / Vision: the pair read label-then-value while the same
   pairing everywhere else on the site reads value-then-label. Swap the order
   so the figure leads and its caption sits beneath it. `column-reverse`
   rather than re-ordering the markup, so the two language files stay in sync
   and the reading order for assistive technology is unchanged. */
@media (min-width: 1200px) {
  html:is(#rcs-specflip-a, :root):is(#rcs-specflip-b, :root):is(#rcs-specflip-c, :root):is(#rcs-specflip-d, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-spec-item {
    flex-direction: column-reverse !important;
  }
}

/* (6) The alliance accent word was set back at 72% white, which read as a
   different colour rather than an accent. It matches the rest of the heading
   now. The supporting sentence also centres against the heading block. */
:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head .als-title span {
  color: #ffffff !important;
}

:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head {
  align-items: center !important;
}

:is(#rcs-alliance-strip, #rcs-alliance-strip-ar) .als-head-right {
  align-self: center !important;
}

/* (3b) The "Explore About Us" button spans the red card's measure, so the
   column reads as one edge-to-edge block rather than a button floating at an
   arbitrary width. */
@media (min-width: 1200px) {
  html:is(#rcs-vobtn-a, :root):is(#rcs-vobtn-b, :root):is(#rcs-vobtn-c, :root):is(#rcs-vobtn-d, :root) body
    .vo-main-btn {
    inline-size: 100% !important;
    max-inline-size: 760px !important;
    justify-content: center !important;
  }
}

/* (2) Services: the column's CTA was pinned to the project card's OUTER edge,
   which left it 36px below the "View Project" button sitting inside that card.
   Pull it up by the card's own bottom padding plus its 1px border so the two
   buttons share a baseline. The auto margins then redistribute the freed space,
   which lifts the sub-service list with it. Two bands because the card body's
   padding itself changes on short screens. */
@media (min-width: 901px) {
  html:is(#rcs-ctaline-a, :root):is(#rcs-ctaline-b, :root):is(#rcs-ctaline-c, :root):is(#rcs-ctaline-d, :root) body
    .rcs-service-sequence .srv-global-cta {
    margin-block-end: 36px !important;
  }
}

@media (min-width: 901px) and (min-height: 651px) and (max-height: 900px) {
  html:is(#rcs-ctaline-a, :root):is(#rcs-ctaline-b, :root):is(#rcs-ctaline-c, :root):is(#rcs-ctaline-d, :root) body
    .rcs-service-sequence .srv-global-cta {
    margin-block-end: calc(clamp(18px, 3vh, 35px) + 1px) !important;
  }
}

/* (7) Careers: the two columns sit in a grid set to `align-items: center`, so
   the shorter text column was centred against the taller form and started
   70px below it. Align it to the top of the row instead, so its first line
   meets the top of the form card. */
@media (min-width: 993px) {
  html:is(#rcs-careers-top-a, :root):is(#rcs-careers-top-b, :root):is(#rcs-careers-top-c, :root) body
    :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-left {
    align-self: start !important;
  }
}

/* (3b cont.) The button carries the same 34px indent the body copy uses for
   its rule, so matching the card's width still left it starting 34px inside
   the card's left edge and overshooting on the right. Clear the indent so the
   two edges line up. */
@media (min-width: 1200px) {
  html:is(#rcs-vobtn-a, :root):is(#rcs-vobtn-b, :root):is(#rcs-vobtn-c, :root):is(#rcs-vobtn-d, :root) body
    .vo-main-btn {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
}

/* ==========================================================================
   v90 — the same corrections carried down to phone and tablet
   ==========================================================================
   Everything above was scoped to desktop breakpoints because phone and tablet
   render from separate layouts, which meant none of it reached them: at 390px
   the vault's spec row was still a flex row sitting 30-79px off its shares,
   the other rows were 4-5px out, and the section paragraphs ran 13.3px, 13.3px
   and 15.4px — the same inconsistency the desktop pass removed.
   Same datum as the desktop rule, sized for a small screen rather than copying
   the 20.4px desktop body, which would be oversized here. */
@media (max-width: 999px) {
  html:is(#rcs-mob-share-a, :root):is(#rcs-mob-share-b, :root):is(#rcs-mob-share-c, :root):is(#rcs-mob-share-d, :root) body
    :is(.vo-specs, .vo-gl-grid, .irc-stats-row, .bpi-stats, .lr-stats-box,
        .als-card-stats, .v-specs, .v-specs-mob, .hero-stats, .v-cc-stats) {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-template-columns: none !important;
    justify-items: center !important;
    column-gap: 0 !important;
    inline-size: 100% !important;
    padding-inline: 0 !important;
  }

  html:is(#rcs-mob-share-a, :root):is(#rcs-mob-share-b, :root):is(#rcs-mob-share-c, :root):is(#rcs-mob-share-d, :root) body
    :is(.vo-specs, .vo-gl-grid, .irc-stats-row, .bpi-stats, .lr-stats-box,
        .als-card-stats, .v-specs, .v-specs-mob, .hero-stats, .v-cc-stats) > * {
    justify-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    min-inline-size: 0 !important;
  }

  /* Value above caption here too, matching the desktop pairing. */
  html:is(#rcs-mob-share-a, :root):is(#rcs-mob-share-b, :root):is(#rcs-mob-share-c, :root):is(#rcs-mob-share-d, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) :is(.v-spec-item, .v-spec-item-mob) {
    flex-direction: column-reverse !important;
  }

  /* One body size for the section paragraphs, a step up from the 13.3px some
     of them were running at. */
  html:is(#rcs-mob-para-a, :root):is(#rcs-mob-para-b, :root):is(#rcs-mob-para-c, :root):is(#rcs-mob-para-d, :root) body
    :is(.irc-text, .bpi-desc, .vo-body, .vo-body-mob, .v-body, .v-body-mob,
        .lr-description, .als-head-text, .als-card-desc, .srv-desc) {
    font-size: clamp(15px, 4vw, 16.5px) !important;
    line-height: 1.65 !important;
  }
}

/* ==========================================================================
   v91 — Careers meta block dropped to the form's lower edge
   ==========================================================================
   The text column is 140px shorter than the form beside it, so with the column
   top-aligned the "Talent Acquisition / Requirements" block (and its rule) sat
   140px above the bottom of the form card. Stretch the column to the row height
   and push that block to the bottom, so its lower edge meets the form's — the
   headline stays put at the top because only the meta block carries the auto
   margin. */
@media (min-width: 993px) {
  html:is(#rcs-careers-meta-a, :root):is(#rcs-careers-meta-b, :root):is(#rcs-careers-meta-c, :root) body
    :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-left {
    align-self: stretch !important;
    justify-content: flex-start !important;
  }

  html:is(#rcs-careers-meta-a, :root):is(#rcs-careers-meta-b, :root):is(#rcs-careers-meta-c, :root) body
    :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-meta {
    margin-block-start: auto !important;
  }
}

/* ==========================================================================
   v92 — logo marquee fade aligned to the section's content edge
   ==========================================================================
   The marquee track sat in a 92%/1600px wrapper — 45px wider on each side than
   the red card above it, which uses the site's 1500px container — so its fade
   happened outside the content column and logos bled past the section's edge.
   Match the wrapper to that 1500px measure and let the mask complete its fade
   exactly at those edges, so the logos dissolve on the same vertical line the
   heading and rule sit on. */
:is(#rcs-clients-marquee, #rcs-clients-marquee-ar) .sa-track-wrapper {
  /* min(90vw, 1500px), not max-width:1500, so the wrapper keeps side margins on
     screens narrower than 1500px too. With a flat max-width it went full-bleed
     on a 1366 Windows laptop or an iPad, dropping the fade onto the very bezel
     where it read as "logos arriving from the far edge". This matches the
     site's standard container, so at 1728 it is still exactly 1500 (the Mac
     look) and every narrower screen now gets a proportional margin with the
     fade sitting inside it. */
  inline-size: min(90vw, 1500px) !important;
  max-inline-size: none !important;
  margin-inline: auto !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
  mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
}

/* The clients red card above the marquee uses the same flat max-width, so it too
   went full-bleed on narrower screens. Match it to the container so the card and
   the marquee share the same edges the fade is drawn on. */
:is(#rcs-clients-marquee, #rcs-clients-marquee-ar) .clients-red-card {
  inline-size: min(90vw, 1500px) !important;
  max-inline-size: none !important;
  margin-inline: auto !important;
}

/* ==========================================================================
   v93 — service section fills the viewport; sector section widened to match
   ==========================================================================
   (2) On tall screens each service section was 90svh — 855px in a 950px window
   — so ~95px of the NEXT service showed at the bottom while the first was still
   in view. Fill the viewport instead, so one service occupies the whole frame
   and the next only appears once you scroll to it. The frame stays centred: its
   own height is unchanged and the column's centring padding is derived from the
   same variable, so growing the section only adds symmetric breathing room. The
   short-screen regime (max-height: 900px) already fills its window and scales
   content to fit, so it is left alone. */
@media (min-width: 901px) and (min-height: 901px) {
  html:is(#rcs-srv-fill-a, :root):is(#rcs-srv-fill-b, :root):is(#rcs-srv-fill-c, :root) body
    .rcs-service-sequence {
    --srv-col-h: 100svh !important;
  }

  html:is(#rcs-srv-fill-a, :root):is(#rcs-srv-fill-b, :root):is(#rcs-srv-fill-c, :root) body
    .rcs-service-sequence > .srv-viewport,
  html:is(#rcs-srv-fill-a, :root):is(#rcs-srv-fill-b, :root):is(#rcs-srv-fill-c, :root) body
    .rcs-service-sequence .srv-left,
  html:is(#rcs-srv-fill-a, :root):is(#rcs-srv-fill-b, :root):is(#rcs-srv-fill-c, :root) body
    .rcs-service-sequence .srv-right {
    min-block-size: 100svh !important;
  }
}

/* (6) The sector section on the Services page sat in the site's 1500px centred
   container (114px margins) while the service stacks above it use a 5vw left
   inset (86px), so its red card started a step inside their left edge. Give it
   the same 5vw side inset so the two line up down the page. Covers the header
   panel and the sector cards below it, which share this container. */
@media (min-width: 1200px) {
  html:is(#rcs-sector-w-a, :root):is(#rcs-sector-w-b, :root):is(#rcs-sector-w-c, :root) body
    :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .matrix-container {
    max-inline-size: none !important;
    inline-size: auto !important;
    margin-inline: 5vw !important;
  }
}

/* ==========================================================================
   v94 — landing BIM model balanced between the red card and the edge
   ==========================================================================
   The model sits centred in its own 42% column, which starts well to the right
   of the red card — so measured on rendered pixels it sat ~240px from the red
   card but only ~85px from the viewport edge. Shift it inward by roughly half
   that difference so the two gaps match, and drop it very slightly. The column
   is only opacity-animated on reveal (never transformed), so a static transform
   here does not fight the animation. Mirrored in RTL, where the column and the
   red card swap sides. Desktop only — the 3D model is hidden below 1200px. */
@media (min-width: 1200px) {
  html:is(#rcs-bim-a, :root):is(#rcs-bim-b, :root):is(#rcs-bim-c, :root):is(#rcs-bim-d, :root) body
    #rcs-about-vault .vo-visual-col,
  html:is(#rcs-bim-a, :root):is(#rcs-bim-b, :root):is(#rcs-bim-c, :root):is(#rcs-bim-d, :root) body
    [id*="about-vault"] .vo-visual-col {
    transform: translate(-4.5vw, 20px) !important;
  }

  html[dir="rtl"]:is(#rcs-bim-a, :root):is(#rcs-bim-b, :root):is(#rcs-bim-c, :root):is(#rcs-bim-d, :root) body
    #rcs-about-vault .vo-visual-col,
  html[dir="rtl"]:is(#rcs-bim-a, :root):is(#rcs-bim-b, :root):is(#rcs-bim-c, :root):is(#rcs-bim-d, :root) body
    [id*="about-vault"] .vo-visual-col {
    transform: translate(4.5vw, 20px) !important;
  }
}

/* ==========================================================================
   v97 — sector hero stats: number centred over its caption
   ==========================================================================
   The v22 "sector-stat distribution" block ranges each number to a different
   side (first flex-start, middle centre, last flex-end) so the row spans the
   card, but the captions below stay centred by `align-items: center`. So the
   figure and its caption no longer share a centre — the number sat ~86px left
   of "SQM Engineered", and right of "Compliance". Centre every number within
   its own box so it lines up with the caption beneath it; each figure/caption
   pair then reads as one centred unit in its share of the row. Sector heroes
   only — the Services "Integrated Lifecycle" hero uses a different rule and is
   untouched. No width gate: the ranged layout applies at every size, so the
   correction must too, or phones keep the mismatch. */
html:is(#rcs-hstat-ctr-a, :root):is(#rcs-hstat-ctr-b, :root):is(#rcs-hstat-ctr-c, :root):is(#rcs-hstat-ctr-d, :root):is(#rcs-hstat-ctr-e, :root) body
  :is(#rcs-hero-commercial, #rcs-hero-commercial-ar, #rcs-hero-sports, #rcs-hero-sports-ar,
      #rcs-hero-hospitality, #rcs-hero-hospitality-ar, #rcs-hero-residential, #rcs-hero-residential-ar,
      #rcs-hero-healthcare, #rcs-hero-healthcare-ar, #rcs-hero-education, #rcs-hero-education-ar)
  .h-stat-item h4 {
  justify-content: center !important;
}

html:is(#rcs-hstat-ctr-a, :root):is(#rcs-hstat-ctr-b, :root):is(#rcs-hstat-ctr-c, :root):is(#rcs-hstat-ctr-d, :root):is(#rcs-hstat-ctr-e, :root) body
  :is(#rcs-hero-commercial, #rcs-hero-commercial-ar, #rcs-hero-sports, #rcs-hero-sports-ar,
      #rcs-hero-hospitality, #rcs-hero-hospitality-ar, #rcs-hero-residential, #rcs-hero-residential-ar,
      #rcs-hero-healthcare, #rcs-hero-healthcare-ar, #rcs-hero-education, #rcs-hero-education-ar)
  .h-stat-item {
  align-items: center !important;
  text-align: center !important;
}

/* v99b — the value/caption flip on the About Us mobile vault stopped at 999px,
   but that mobile system stays active up to 1199px, so iPad landscape showed
   the label above the value while every other size shows value-above-label.
   Extend the flip across the gap band. */
@media (min-width: 1000px) and (max-width: 1199px) {
  html:is(#rcs-vflip-a, :root):is(#rcs-vflip-b, :root):is(#rcs-vflip-c, :root):is(#rcs-vflip-d, :root):is(#rcs-vflip-e, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-specs-mob > .v-spec-item-mob,
  html:is(#rcs-vflip-a, :root):is(#rcs-vflip-b, :root):is(#rcs-vflip-c, :root):is(#rcs-vflip-d, :root):is(#rcs-vflip-e, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-specs > .v-spec-item {
    flex-direction: column-reverse !important;
  }
}

/* ==========================================================================
   v102 — footer map city labels white in light mode
   ==========================================================================
   The city labels sitting ON the map (the SVG `.fm-city-label` text) were dark
   (#2b2b2b) in light mode, which read poorly against the map artwork. Make them
   white, with a dark halo so they stay legible over lighter parts of the map.
   Only the on-map labels change — the city list beside the map keeps its dark
   light-mode colour. */
html[data-theme="light"] :is(.fm-city-label, text.fm-city-label) {
  fill: #ffffff !important;
  stroke: rgba(0, 0, 0, 0.55) !important;
}

/* ==========================================================================
   v103 — About Us: "Download Profile" button spans the red-card width (desktop)
   ==========================================================================
   In the desktop 3D vault (>=1200px) the CTA `.v-cc-cta` was fit-content, so it
   sat as a small pill on the left while the red card, paragraph, spec row and
   stat row all ran the full 760px column width. The button was the only element
   narrower than the card, which read as unfinished. Below 1200px it is already
   full width (the card-creds column stretches its children); this extends the
   same treatment to the desktop vault so the button's OUTER width equals the red
   card's — both `.v-red-card` and `.v-card-creds` are `width:100%; max-width:760px`
   direct children of the same `.v-text-side`, and card-creds has no horizontal
   padding at this breakpoint, so a full-width child lines up edge-to-edge with the
   card above. `flex:0 0 100%` drops it onto its own row under the stats; content
   stays centred to match the mobile/tablet CTA. Applies to EN (`#vault-wrapper`)
   and AR (`#vault-wrapper-ar`). */
@media (min-width: 1200px) {
  html:is(#rcs-vault-cta-a, :root):is(#rcs-vault-cta-b, :root):is(#rcs-vault-cta-c, :root) body
    :is(#vault-wrapper, #vault-wrapper-ar) .v-card-creds .v-cc-cta {
    flex: 0 0 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   v104 — Careers: meta block lifted off the form's bottom edge
   ==========================================================================
   v91 stretched the text column to the form's height and pushed the
   "Talent Acquisition / Requirements" block (with its divider rule) to the very
   bottom with margin-block-start:auto, so its lower edge met the form's. On a
   tall desktop viewport that opened a ~200px void between the intro paragraph
   and the rule, which read as broken ("looks weird"). Drop the stretch, let the
   column take its natural height at the top of the row, and give the meta a
   controlled gap under the paragraph instead of the auto push — so the rule and
   the two info rows sit just below the copy rather than pinned to the form's
   base. EN + AR, desktop two-column layout only (below 993px the layout stacks
   and the meta already flows directly under the copy). */
@media (min-width: 993px) {
  html:is(#rcs-careers-metafix-a, :root):is(#rcs-careers-metafix-b, :root):is(#rcs-careers-metafix-c, :root) body
    :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-left {
    align-self: start !important;
    justify-content: flex-start !important;
  }
  html:is(#rcs-careers-metafix-a, :root):is(#rcs-careers-metafix-b, :root):is(#rcs-careers-metafix-c, :root) body
    :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-meta {
    margin-block-start: clamp(26px, 4vh, 46px) !important;
  }
}

/* ==========================================================================
   v105 — Contact + Careers: fit the short Windows / scaled viewport
   ==========================================================================
   On macOS (tall viewport, no bookmark bar) both pages read as one clean screen.
   On Windows, 125–150% display scaling plus a bookmark bar cut the usable
   viewport to ~630–720px, so the form panel (≈580px of fields + ~150px of
   section padding) no longer fit: the section grew and the page scrolled, which
   reads as oversized ("large in Windows"). The earlier max-height:820 pass chose
   to grow-and-scroll rather than shrink; the client wants it to fit like the Mac.
   Below 768px tall — Windows territory, a comfortable Mac viewport is taller and
   stays on the full-size design — trim the vertical rhythm (section padding,
   panel padding, field height, gaps) just enough to bring both pages back to one
   screen down to ~630px, without shrinking type to an unreadable size. The field
   rule is shared by both pages (careers inputs + contact .bp-input); container
   rules are per-section. EN + AR. */
@media (min-width: 1025px) and (max-height: 768px) {
  /* shared field height — careers inputs and contact .bp-input */
  html:is(#rcs-winfit-a, :root):is(#rcs-winfit-b, :root):is(#rcs-winfit-c, :root):is(#rcs-winfit-d, :root):is(#rcs-winfit-e, :root) body
    :is(#rcs-careers-unified, #rcs-careers-unified-ar) .form-field :is(input, textarea),
  html:is(#rcs-winfit-a, :root):is(#rcs-winfit-b, :root):is(#rcs-winfit-c, :root):is(#rcs-winfit-d, :root):is(#rcs-winfit-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-input {
    min-block-size: 42px !important;
    padding: 8px 14px !important;
  }

  /* Careers — section chrome and form panel */
  html:is(#rcs-winfit-a, :root):is(#rcs-winfit-b, :root):is(#rcs-winfit-c, :root):is(#rcs-winfit-d, :root):is(#rcs-winfit-e, :root) body
    :is(#rcs-careers-unified, #rcs-careers-unified-ar) {
    padding-top: calc(var(--nav-height, 80px) + 8px) !important;
    padding-bottom: 16px !important;
  }
  html:is(#rcs-winfit-a, :root):is(#rcs-winfit-b, :root):is(#rcs-winfit-c, :root):is(#rcs-winfit-d, :root):is(#rcs-winfit-e, :root) body
    :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-right {
    padding: 13px clamp(30px, 3vw, 46px) !important;
    gap: 10px !important;
  }
  html:is(#rcs-winfit-a, :root):is(#rcs-winfit-b, :root):is(#rcs-winfit-c, :root):is(#rcs-winfit-d, :root):is(#rcs-winfit-e, :root) body
    :is(#rcs-careers-unified, #rcs-careers-unified-ar) .form-row {
    gap: 12px 18px !important;
  }
  html:is(#rcs-winfit-a, :root):is(#rcs-winfit-b, :root):is(#rcs-winfit-c, :root):is(#rcs-winfit-d, :root):is(#rcs-winfit-e, :root) body
    :is(#rcs-careers-unified, #rcs-careers-unified-ar) .form-head {
    gap: 5px !important;
  }
  html:is(#rcs-winfit-a, :root):is(#rcs-winfit-b, :root):is(#rcs-winfit-c, :root):is(#rcs-winfit-d, :root):is(#rcs-winfit-e, :root) body
    :is(#rcs-careers-unified, #rcs-careers-unified-ar) .form-upload {
    padding: 13px !important;
  }

  /* Contact — section chrome and both panels */
  html:is(#rcs-winfit-a, :root):is(#rcs-winfit-b, :root):is(#rcs-winfit-c, :root):is(#rcs-winfit-d, :root):is(#rcs-winfit-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) {
    padding-top: calc(var(--nav-height, 80px) + 8px) !important;
    padding-bottom: 16px !important;
  }
  html:is(#rcs-winfit-a, :root):is(#rcs-winfit-b, :root):is(#rcs-winfit-c, :root):is(#rcs-winfit-d, :root):is(#rcs-winfit-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) :is(.c-info-panel, .c-form-panel) {
    padding-top: clamp(12px, 1.9vh, 22px) !important;
    padding-bottom: clamp(12px, 1.9vh, 22px) !important;
  }
  html:is(#rcs-winfit-a, :root):is(#rcs-winfit-b, :root):is(#rcs-winfit-c, :root):is(#rcs-winfit-d, :root):is(#rcs-winfit-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-info-panel {
    gap: 13px !important;
  }
}

/* ==========================================================================
   v106 — Footer map: hide the on-map city labels in light mode
   ==========================================================================
   The city names sitting ON the map artwork never read cleanly in light mode:
   dark glyphs vanished into the dark landmasses and a white/haloed version (v102)
   fought the light background. The client's call is to drop them in light mode
   rather than keep fighting the contrast. Dark mode keeps its white labels. Only
   the on-map SVG text (.fm-city-label) is affected — the city list beside the map
   is a separate element and keeps its own light-mode styling. */
html[data-theme="light"] :is(.fm-city-label, text.fm-city-label) {
  fill: transparent !important;
  stroke: none !important;
  text-shadow: none !important;
}

/* ==========================================================================
   v107 — Careers/Contact: keep the corner brackets clear of text (short viewport)
   ==========================================================================
   The form panel's four red corner accents (.careers-right::after /
   .c-form-panel::after) sit at inset:18px. v105 trimmed the panel's vertical
   padding to ~12-13px on short Windows viewports (<=768px tall) so the form fits
   one screen — which pulled the title and the submit button inside that 18px
   inset, so the top/bottom bracket arms cut across the text. Pull the accents in
   to 8px on the same short-viewport range: still clear of the ~30-46px side
   padding, and now above the ~12-13px top/bottom text edge, so they frame the
   corners without touching the copy. EN + AR, both pages. */
@media (min-width: 1025px) and (max-height: 768px) {
  html:is(#rcs-corner-a, :root):is(#rcs-corner-b, :root):is(#rcs-corner-c, :root) body
    :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-right::after,
  html:is(#rcs-corner-a, :root):is(#rcs-corner-b, :root):is(#rcs-corner-c, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-form-panel::after {
    inset: 8px !important;
  }
}

/* ==========================================================================
   v108 (reverted) — Home hero "Our Services" cycler
   ==========================================================================
   The centring added here was removed at the client's request; the hero stats
   and the services cycler keep their original inline layout. See also v110. */

/* ==========================================================================
   v109 — Mobile hamburger menu: socials match the footer floating bar
   ==========================================================================
   The mobile menu footer carried a single grey LinkedIn glyph. It now renders
   LinkedIn / X / Instagram with the same treatment as the footer floating bar
   (`.fm-social-li`): a bordered circle with an :is(ion-icon,svg), hover fills red. The
   markup was switched to `.fm-social-li` in each page's menu builder; this rule
   gives those icons the footer's rendered look inside the mobile menu container
   (overriding the old `.hf-mob-footer-socials a` grey/24px styling). The X uses
   the shared global `.fm-social-x` letter rule, exactly like the footer. */
.hf-mob-footer-socials {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
}
.hf-mob-footer-socials .fm-social-li {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: transparent !important;
  color: #a9a9a9 !important;
  text-decoration: none !important;
  transition: 0.3s !important;
}
.hf-mob-footer-socials .fm-social-li :is(ion-icon,svg) {
  font-size: 20px !important;
  display: block !important;
}
.hf-mob-footer-socials .fm-social-li .fm-social-x {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.hf-mob-footer-socials .fm-social-li:hover {
  background: #8c182a !important;
  border-color: #8c182a !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
}
html[data-theme="light"] .hf-mob-footer-socials .fm-social-li {
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #777777 !important;
}

/* ==========================================================================
   v110 (reverted) — Home hero stats / services cycler
   ==========================================================================
   The mobile centring, the reserved two-line cycler height and the desktop
   min-width were all removed at the client's request ("return it to the
   original ... the padding is off in the hero"). The hero stats and the cycler
   now use only their original inline styles. */

/* ==========================================================================
   v111 — Services page: sub-service nav readable on mobile, bullets aligned
   ==========================================================================
   The `.srv-nav` sub-service lists rendered at 10px on phones. Bump the type to
   13px and centre the two-column grid as a block, but keep each item LEFT-aligned
   so the leading ○ markers line up in a clean vertical column down each column
   (centring the item content made the bullets drift row-to-row). */
@media (max-width: 767px) {
  html:is(#rcs-srvnav-a, :root):is(#rcs-srvnav-b, :root):is(#rcs-srvnav-c, :root) body
    .srv-nav {
    justify-content: center !important;
  }
  html:is(#rcs-srvnav-a, :root):is(#rcs-srvnav-b, :root):is(#rcs-srvnav-c, :root) body
    .srv-nav-item {
    font-size: 13px !important;
    justify-content: flex-start !important;
    text-align: start !important;
  }
}

/* ==========================================================================
   v112 — Contact info panel: social icons circular, map button hover white
   ==========================================================================
   (a) The "Follow Us" icons were rounded squares; the rest of the site uses
   circular social buttons (footer / mobile menu) — make them circles too.
   (b) The "Open in Google Maps" button fills white with red text on hover, per
   the client — a clear CTA hover against the red panel. EN + AR. */
:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-soc-link {
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
}
:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-map-trigger:hover {
  background: #ffffff !important;
  color: #8c182a !important;
  border-color: #ffffff !important;
  transform: translateY(-3px) !important;
}

/* ==========================================================================
   v113 — Home "Start Your Project" CTA button on brand
   ==========================================================================
   The primary CTA in the home closing section was a white block (white fill,
   red text) that hovered to transparent — off-brand against the dark section
   and unlike the site's red primary buttons. Make it a solid red button with a
   clean transparent-hover-and-lift, matching `.hf-explore-btn`. Both themes. */
:is(#rcs-cta-section, #rcs-cta-section-ar) .cta-btn--primary {
  background: #8c182a !important;
  color: #ffffff !important;
  border-color: #8c182a !important;
}
:is(#rcs-cta-section, #rcs-cta-section-ar) .cta-btn--primary:hover {
  background: transparent !important;
  color: #ffffff !important;
  border-color: #8c182a !important;
  transform: translateY(-3px) !important;
}
html[data-theme="light"] :is(#rcs-cta-section, #rcs-cta-section-ar) .cta-btn--primary:hover {
  color: #8c182a !important;
}

/* ==========================================================================
   v117 — Navbar dropdown buttons + "Explore About Us" adopt the card button
   ==========================================================================
   Client request: the buttons inside the navbar dropdown (the FOUNDATION /
   MISSION / TEAM / ALLIANCE style grid and the dropdown's own explore CTA) and
   the home "Explore About Us" button must carry the SAME button design as the
   sector cards' tab button ("View Towers" / "عرض الأبراج"), so the client can
   judge the treatment side by side. The navbar's own theme toggle and EN / AR
   pair are deliberately untouched.

   The reference is the tab button AS RENDERED, not as written in the page's own
   <style> block: v11 (`:is(#rcs-sector-matrix, #rcs-sector-matrix-ar)
   .bp-tab-btn`, above) already overrides the inline rule, so the shipped
   control is a dark translucent chip, not a transparent one:

     rest    background rgba(24,24,24,.58), 1px rgba(255,255,255,.68),
             4px radius, blur(8px) saturate(1.2), 0 8px 24px rgba(0,0,0,.2),
             min-height 46px, padding 10px 18px, white 10px/800 uppercase
             label at 2px tracking, 14px arrow, 10px gap
     hover   white fill, white border, #8c182a label and arrow, arrow +5px
     light   identical — the chip is dark on purpose because it sits on a
             photograph, and it stays legible on the light dropdown panel and
             the light page background, so no light-mode variant is added here
     <768px  padding 8px 14px, label 9px at 1.5px tracking (the card's own step)

   The "Explore About Us" button keeps the width it already had (it spans the
   red card's measure on desktop, full width on phones, per v86 3b); only the
   button design changes. */

/* -- 1. Navbar dropdown buttons (desktop/laptop only — the panel itself is
      hidden below 1200px and phones use the separate mobile menu) ---------- */
@media (min-width: 1200px) {
  html:is(#rcs-megacard-a, :root):is(#rcs-megacard-b, :root):is(#rcs-megacard-c, :root):is(#rcs-megacard-d, :root):is(#rcs-megacard-e, :root) body
    .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-block-size: 46px !important;
    padding: 10px 18px !important;
    background: rgba(24, 24, 24, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
    backdrop-filter: blur(8px) saturate(1.2) !important;
  }

  /* Label type. The grid buttons wrap their label in `.hf-hp-ltitle`; the
     explore button's label is a bare text node, so the type is set on the
     button element itself too — but not its colour, which the rule above owns. */
  html:is(#rcs-megacard-a, :root):is(#rcs-megacard-b, :root):is(#rcs-megacard-c, :root):is(#rcs-megacard-d, :root):is(#rcs-megacard-e, :root) body
    .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn),
  html:is(#rcs-megacard-a, :root):is(#rcs-megacard-b, :root):is(#rcs-megacard-c, :root):is(#rcs-megacard-d, :root):is(#rcs-megacard-e, :root) body
    .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn) :is(.hf-hp-ltitle, span) {
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
  }

  html:is(#rcs-megacard-a, :root):is(#rcs-megacard-b, :root):is(#rcs-megacard-c, :root):is(#rcs-megacard-d, :root):is(#rcs-megacard-e, :root) body
    .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn) :is(.hf-hp-ltitle, span) {
    color: inherit !important;
  }

  html:is(#rcs-megacard-a, :root):is(#rcs-megacard-b, :root):is(#rcs-megacard-c, :root):is(#rcs-megacard-d, :root):is(#rcs-megacard-e, :root) body
    .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn) :is(svg, ion-icon) {
    inline-size: 14px !important;
    block-size: 14px !important;
    font-size: 14px !important;
    color: inherit !important;
    opacity: 1 !important;
    transition: transform 0.3s !important;
  }

  html:is(#rcs-megacard-a, :root):is(#rcs-megacard-b, :root):is(#rcs-megacard-c, :root):is(#rcs-megacard-d, :root):is(#rcs-megacard-e, :root) body
    .hf-takeover-mega .hf-hp-link .hf-hp-info {
    flex-direction: row !important;
    align-items: center !important;
  }

  html:is(#rcs-megacard-a, :root):is(#rcs-megacard-b, :root):is(#rcs-megacard-c, :root):is(#rcs-megacard-d, :root):is(#rcs-megacard-e, :root) body
    .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn):is(:hover, :focus-visible),
  html[data-theme="light"]:is(#rcs-megacard-a, :root):is(#rcs-megacard-b, :root):is(#rcs-megacard-c, :root):is(#rcs-megacard-d, :root):is(#rcs-megacard-e, :root) body
    .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn):is(:hover, :focus-visible) {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #8c182a !important;
    transform: translateY(0) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  }

  html:is(#rcs-megacard-a, :root):is(#rcs-megacard-b, :root):is(#rcs-megacard-c, :root):is(#rcs-megacard-d, :root):is(#rcs-megacard-e, :root) body
    .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn):is(:hover, :focus-visible) :is(.hf-hp-ltitle, span, .hf-hp-info) {
    color: inherit !important;
    transform: none !important;
  }

  html:is(#rcs-megacard-a, :root):is(#rcs-megacard-b, :root):is(#rcs-megacard-c, :root):is(#rcs-megacard-d, :root):is(#rcs-megacard-e, :root) body
    .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn):is(:hover, :focus-visible) :is(svg, ion-icon) {
    transform: translateX(5px) !important;
  }

  html[lang="ar"]:is(#rcs-megacard-a, :root):is(#rcs-megacard-b, :root):is(#rcs-megacard-c, :root):is(#rcs-megacard-d, :root):is(#rcs-megacard-e, :root) body
    .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn),
  html[lang="ar"]:is(#rcs-megacard-a, :root):is(#rcs-megacard-b, :root):is(#rcs-megacard-c, :root):is(#rcs-megacard-d, :root):is(#rcs-megacard-e, :root) body
    .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn) :is(.hf-hp-ltitle, span) {
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }

  html[lang="ar"]:is(#rcs-megacard-a, :root):is(#rcs-megacard-b, :root):is(#rcs-megacard-c, :root):is(#rcs-megacard-d, :root):is(#rcs-megacard-e, :root) body
    .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn):is(:hover, :focus-visible) :is(svg, ion-icon) {
    transform: translateX(-5px) !important;
  }
}

/* -- 2. Home "Explore About Us" CTA, EN and AR. Design only — the existing
      width rules (v86 3b) are left to win, so it still spans the red card. -- */
html:is(#rcs-vocard-a, :root):is(#rcs-vocard-b, :root):is(#rcs-vocard-c, :root):is(#rcs-vocard-d, :root):is(#rcs-vocard-e, :root) body
  .vo-main-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  min-block-size: 46px !important;
  background: rgba(24, 24, 24, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  transform: none !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s !important;
}

html:is(#rcs-vocard-a, :root):is(#rcs-vocard-b, :root):is(#rcs-vocard-c, :root):is(#rcs-vocard-d, :root):is(#rcs-vocard-e, :root) body
  .vo-main-btn :is(:is(ion-icon,svg), svg) {
  font-size: 14px !important;
  inline-size: 14px !important;
  block-size: 14px !important;
  color: inherit !important;
  transition: transform 0.3s !important;
}

html:is(#rcs-vocard-a, :root):is(#rcs-vocard-b, :root):is(#rcs-vocard-c, :root):is(#rcs-vocard-d, :root):is(#rcs-vocard-e, :root) body
  .vo-main-btn:is(:hover, :focus-visible),
html[data-theme="light"]:is(#rcs-vocard-a, :root):is(#rcs-vocard-b, :root):is(#rcs-vocard-c, :root):is(#rcs-vocard-d, :root):is(#rcs-vocard-e, :root) body
  .vo-main-btn:is(:hover, :focus-visible) {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #8c182a !important;
  transform: none !important;
}

html:is(#rcs-vocard-a, :root):is(#rcs-vocard-b, :root):is(#rcs-vocard-c, :root):is(#rcs-vocard-d, :root):is(#rcs-vocard-e, :root) body
  .vo-main-btn:is(:hover, :focus-visible) :is(:is(ion-icon,svg), svg) {
  transform: translateX(5px) !important;
}

/* Arabic follows the Arabic card label: 11px, no tracking, arrow travels RTL. */
html[lang="ar"]:is(#rcs-vocard-a, :root):is(#rcs-vocard-b, :root):is(#rcs-vocard-c, :root):is(#rcs-vocard-d, :root):is(#rcs-vocard-e, :root) body
  .vo-main-btn {
  font-size: 11px !important;
  letter-spacing: 0 !important;
}

html[lang="ar"]:is(#rcs-vocard-a, :root):is(#rcs-vocard-b, :root):is(#rcs-vocard-c, :root):is(#rcs-vocard-d, :root):is(#rcs-vocard-e, :root) body
  .vo-main-btn:is(:hover, :focus-visible) :is(:is(ion-icon,svg), svg) {
  transform: translateX(-5px) !important;
}

/* The card itself steps down under 768px; the CTA steps down with it. */
@media (max-width: 767px) {
  html:is(#rcs-vocard-a, :root):is(#rcs-vocard-b, :root):is(#rcs-vocard-c, :root):is(#rcs-vocard-d, :root):is(#rcs-vocard-e, :root) body
    .vo-main-btn {
    padding: 8px 14px !important;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
  }

  html[lang="ar"]:is(#rcs-vocard-a, :root):is(#rcs-vocard-b, :root):is(#rcs-vocard-c, :root):is(#rcs-vocard-d, :root):is(#rcs-vocard-e, :root) body
    .vo-main-btn {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }
}

/* ==========================================================================
   v118 — English: frosted light-mode buttons, glass navbar in dark mode
   ==========================================================================
   Follow-up to v117, English pages only (`html:not([lang="ar"])`).

   (a) In light mode the card's dark chip sat on a light panel and read as flat
       grey. Those buttons now use the navbar's own glassmorphism recipe —
       rgba(248,249,250,.62) behind blur(14px) saturate(180%) — frosted rather
       than tinted, with the site's established light-glass hairline and red
       label, and the same red-fill hover the rest of the light UI uses.
       Dark mode is unchanged: it already is the sector-card chip.

   (b) The dark-mode navbar was a solid rgba(38,38,38,.98) slab once scrolled.
       It now carries the sector-card button's material — rgba(24,24,24,.58)
       behind blur(8px) saturate(1.2) — so the bar and the buttons read as one
       glass system. Desktop and laptop only (>=1200px): the <=1199px band
       deliberately keeps a solid, blur-free bar because a blurred fixed bar
       re-composites every scroll frame on phones. `.nav-transparent` — the hero
       at-rest state — keeps its fully transparent treatment; the glass appears
       once the bar is scrolled (or hovered, which is how the dropdowns open). */

/* -- (a) Light-mode frosted glass ----------------------------------------- */
html:not([lang="ar"])[data-theme="light"]:is(#rcs-frost-a, :root):is(#rcs-frost-b, :root):is(#rcs-frost-c, :root):is(#rcs-frost-d, :root):is(#rcs-frost-e, :root) body
  :is(.hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn), .vo-main-btn) {
  background: rgba(248, 249, 250, 0.62) !important;
  border: 1px solid rgba(140, 24, 42, 0.42) !important;
  color: #8c182a !important;
  box-shadow: 0 8px 24px rgba(35, 26, 28, 0.10) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
}

html:not([lang="ar"])[data-theme="light"]:is(#rcs-frost-a, :root):is(#rcs-frost-b, :root):is(#rcs-frost-c, :root):is(#rcs-frost-d, :root):is(#rcs-frost-e, :root) body
  :is(.hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn), .vo-main-btn):is(:hover, :focus-visible) {
  background: #8c182a !important;
  border-color: #8c182a !important;
  color: #ffffff !important;
}

/* -- (b) Dark-mode navbar takes the card button's glass ------------------- */
@media (min-width: 1200px) {
  html:not([lang="ar"]):not([data-theme="light"]):is(#rcs-navglass-a, :root):is(#rcs-navglass-b, :root):is(#rcs-navglass-c, :root):is(#rcs-navglass-d, :root):is(#rcs-navglass-e, :root) body
    :is(.hf-navbar:not(.nav-transparent), .hf-navbar.nav-scrolled, .hf-navbar:hover) {
    background: rgba(24, 24, 24, 0.58) !important;
    /* The card's rgba(255,255,255,.68) hairline works around a small chip but
       reads as a bright white rule when stretched across the full bar, so the
       bar keeps its own quiet border. Fill, blur and shadow are the card's. */
    border-bottom: 1px solid var(--c-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
    backdrop-filter: blur(8px) saturate(1.2) !important;
  }
}

/* ==========================================================================
   v119 — One button design site-wide, tags removed, panel/dropdown cleanup
   ==========================================================================
   All 30 pages, EN + AR, light + dark.

   (1) BUTTONS. Every labelled control on the site now carries the sector-card
       button design that v117 established. The hook is `.rcs-glass-control`,
       the class js/responsive-remediation.js already stamps onto every button,
       CTA, submit and card action across the site — so this reaches all 30
       pages without touching page markup. Icon-only controls
       (`.rcs-glass-icon`: navbar theme toggle, modal closes, social discs) are
       excluded, per the earlier instruction to leave those alone.
       This deliberately supersedes v113's red "Start Your Project" primary and
       every per-page button style: the client asked for one design, so the
       primary/secondary distinction is now carried by placement, not colour.

   (2) TAGS. The red category chip on project cards (`.m-tag`, 19 pages;
       `.port-tag`, all-projects EN/AR) and the "Sector" label on the sector
       pages' hero image (`.hero-card-tag`, 12 pages) are removed. Section
       labels that look similar (`.lr-tag`, `.crc-tag`, `.bpi-tag`,
       `.vo-section-tag`, `.srv-badge`) are NOT tags on cards and are kept.

   (3) CONTACT + CAREERS panel. The glass sheen was a 135deg gradient running
       from rgba(255,255,255,.1) at the top-left to nothing by 42% — the panel
       read light at one corner and flat at the other. It is now that same
       top-left value across the whole surface, so the card is one colour. The
       four red corner brackets are removed.

   (4) NAVBAR DROPDOWN. The buttons revealed with a staggered opacity fade.
       They now appear with the panel, no fade and no stagger. */

/* -- (1) One button design ------------------------------------------------ */
html:is(#rcs-btn1, :root):is(#rcs-btn2, :root):is(#rcs-btn3, :root):is(#rcs-btn4, :root):is(#rcs-btn5, :root):is(#rcs-btn6, :root) body
  :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn, .cb-contact-btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-block-size: 46px !important;
  padding: 10px 18px !important;
  background: rgba(24, 24, 24, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  transform: none !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s !important;
}

/* Labels nested inside a button inherit the button's own type and colour. */
html:is(#rcs-btn1, :root):is(#rcs-btn2, :root):is(#rcs-btn3, :root):is(#rcs-btn4, :root):is(#rcs-btn5, :root):is(#rcs-btn6, :root) body
  :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn, .cb-contact-btn) :is(span, div, p, .hf-hp-ltitle, .hf-hp-info) {
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
  background: none !important;
  transform: none !important;
}

html:is(#rcs-btn1, :root):is(#rcs-btn2, :root):is(#rcs-btn3, :root):is(#rcs-btn4, :root):is(#rcs-btn5, :root):is(#rcs-btn6, :root) body
  :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn, .cb-contact-btn) :is(svg, ion-icon) {
  inline-size: 14px !important;
  block-size: 14px !important;
  font-size: 14px !important;
  color: inherit !important;
  opacity: 1 !important;
  transition: transform 0.3s !important;
}

html:is(#rcs-btn1, :root):is(#rcs-btn2, :root):is(#rcs-btn3, :root):is(#rcs-btn4, :root):is(#rcs-btn5, :root):is(#rcs-btn6, :root) body
  :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn, .cb-contact-btn):is(:hover, :focus-visible) {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #8c182a !important;
  transform: none !important;
}

html:is(#rcs-btn1, :root):is(#rcs-btn2, :root):is(#rcs-btn3, :root):is(#rcs-btn4, :root):is(#rcs-btn5, :root):is(#rcs-btn6, :root) body
  :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn, .cb-contact-btn):is(:hover, :focus-visible) :is(svg, ion-icon) {
  transform: translateX(5px) !important;
}

/* Light mode is the navbar's own frosted glass, not the dark chip: a dark chip
   on a light panel read as flat grey. Hairline and label are brand red, and the
   hover fills red — the light-UI grammar already used across the site. */
html[data-theme="light"]:is(#rcs-btn1, :root):is(#rcs-btn2, :root):is(#rcs-btn3, :root):is(#rcs-btn4, :root):is(#rcs-btn5, :root):is(#rcs-btn6, :root) body
  :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn, .cb-contact-btn) {
  background: rgba(248, 249, 250, 0.62) !important;
  border-color: rgba(140, 24, 42, 0.42) !important;
  color: #8c182a !important;
  box-shadow: 0 8px 24px rgba(35, 26, 28, 0.10) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
}

html[data-theme="light"]:is(#rcs-btn1, :root):is(#rcs-btn2, :root):is(#rcs-btn3, :root):is(#rcs-btn4, :root):is(#rcs-btn5, :root):is(#rcs-btn6, :root) body
  :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn, .cb-contact-btn):is(:hover, :focus-visible) {
  background: #8c182a !important;
  border-color: #8c182a !important;
  color: #ffffff !important;
}

/* Arabic keeps the Arabic card label: 11px, no tracking, arrow travels RTL. */
html[lang="ar"]:is(#rcs-btn1, :root):is(#rcs-btn2, :root):is(#rcs-btn3, :root):is(#rcs-btn4, :root):is(#rcs-btn5, :root):is(#rcs-btn6, :root) body
  :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn, .cb-contact-btn) {
  font-size: 11px !important;
  letter-spacing: 0 !important;
}

html[lang="ar"]:is(#rcs-btn1, :root):is(#rcs-btn2, :root):is(#rcs-btn3, :root):is(#rcs-btn4, :root):is(#rcs-btn5, :root):is(#rcs-btn6, :root) body
  :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn, .cb-contact-btn):is(:hover, :focus-visible) :is(svg, ion-icon) {
  transform: translateX(-5px) !important;
}

@media (max-width: 767px) {
  html:is(#rcs-btn1, :root):is(#rcs-btn2, :root):is(#rcs-btn3, :root):is(#rcs-btn4, :root):is(#rcs-btn5, :root):is(#rcs-btn6, :root) body
    :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn, .cb-contact-btn) {
    padding: 8px 14px !important;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
  }
  html[lang="ar"]:is(#rcs-btn1, :root):is(#rcs-btn2, :root):is(#rcs-btn3, :root):is(#rcs-btn4, :root):is(#rcs-btn5, :root):is(#rcs-btn6, :root) body
    :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn, .cb-contact-btn) {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }
}

/* -- (2) Card and hero tags removed --------------------------------------- */
html:is(#rcs-notag-a, :root):is(#rcs-notag-b, :root):is(#rcs-notag-c, :root) body
  :is(.m-tag, .port-tag, .hero-card-tag) {
  display: none !important;
}

/* The tag's wrapper has to STAY a flex item. `.port-info` and `.m-info` are
   `justify-content: space-between` with exactly two children — the tag row and
   the title/location/button block. Removing the first child left one item, and
   space-between puts a lone item at the START, which is what pulled every
   project card's title and button up to the top of the image. The wrapper is
   kept in the layout at zero height instead, so the bottom block stays pinned
   to the bottom exactly as before. */
html:is(#rcs-notag-a, :root):is(#rcs-notag-b, :root):is(#rcs-notag-c, :root) body
  :is(.m-top, .port-top) {
  display: block !important;
  block-size: 0 !important;
  min-block-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* -- (3) Contact + Careers panel: one flat colour, no corner brackets ------ */
html:is(#rcs-panel-a, :root):is(#rcs-panel-b, :root):is(#rcs-panel-c, :root) body
  :is(.rcs-glass-panel, .rcs-dialog-surface)::before {
  background: rgba(255, 255, 255, 0.1) !important;
}

html:is(#rcs-panel-a, :root):is(#rcs-panel-b, :root):is(#rcs-panel-c, :root) body
  :is(:is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-form-panel,
      .careers-right)::after {
  content: none !important;
  display: none !important;
}

/* -- (4) Navbar dropdown buttons appear with the panel, no fade ----------- */
html:is(#rcs-nofade-a, :root):is(#rcs-nofade-b, :root):is(#rcs-nofade-c, :root) body
  .hf-takeover-mega :is(.hf-hp-link, .hf-hp-info, .hf-hp-ltitle) {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0s !important;
  transition-duration: 0s !important;
}

/* ==========================================================================
   v120 — Buttons that sit on red panels or photographs keep the dark chip
   ==========================================================================
   v119 gives every button the frosted light-mode variant, which is right on the
   light page background but wrong inside the contact/careers red panel and on
   the image cards: white-at-62% over red reads as pink, and the red label loses
   contrast. Inside those surfaces the button keeps the sector card's dark chip
   in BOTH themes — which is exactly what the reference button does, since it
   has always lived on a photograph. */
html[data-theme="light"]:is(#rcs-onimg-a, :root):is(#rcs-onimg-b, :root):is(#rcs-onimg-c, :root):is(#rcs-onimg-d, :root):is(#rcs-onimg-e, :root):is(#rcs-onimg-f, :root):is(#rcs-onimg-g, :root) body
  :is(.c-info-panel, .careers-left, .bp-item, .sector-item, .m-card, .port-card, .hf-hero, [class*="hero-"])
  :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn) {
  background: rgba(24, 24, 24, 0.58) !important;
  border-color: rgba(255, 255, 255, 0.68) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
}

html[data-theme="light"]:is(#rcs-onimg-a, :root):is(#rcs-onimg-b, :root):is(#rcs-onimg-c, :root):is(#rcs-onimg-d, :root):is(#rcs-onimg-e, :root):is(#rcs-onimg-f, :root):is(#rcs-onimg-g, :root) body
  :is(.c-info-panel, .careers-left, .bp-item, .sector-item, .m-card, .port-card, .hf-hero, [class*="hero-"])
  :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn):is(:hover, :focus-visible) {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #8c182a !important;
}

/* ==========================================================================
   v121 — Services stacks: the rising card must be fully opaque
   ==========================================================================
   The scroll sequence now slides each `.srv-card` up as one full-height panel
   over the previous one instead of cross-fading its image and sliding its text
   separately. That only reads correctly if the card itself is opaque: the card
   was a transparent wrapper whose only painted areas were the image (top half)
   and the body (bottom half), so any sub-pixel seam between the two let the
   outgoing card show through. Desktop only — below 901px the stacks fall back
   to a plain vertical list and nothing is pinned or animated. */
@media (min-width: 901px) {
  html:is(#rcs-srvcard-a, :root):is(#rcs-srvcard-b, :root):is(#rcs-srvcard-c, :root) body
    :is(#rcs-design-stack, #rcs-sup-stack, #rcs-adv-stack) .srv-card {
    background: #1f1f1f !important;
    will-change: transform;
  }

  html[data-theme="light"]:is(#rcs-srvcard-a, :root):is(#rcs-srvcard-b, :root):is(#rcs-srvcard-c, :root) body
    :is(#rcs-design-stack, #rcs-sup-stack, #rcs-adv-stack) .srv-card {
    background: #ffffff !important;
  }
}

/* ==========================================================================
   v122 — Services stacks: sticky freeze + full rising card
   ==========================================================================
   Pairs with the scroll sequence in js/responsive-remediation.js. The viewport
   sticks for the length of the stack (the "freeze"), and each card sits a full
   height below the frame until the sequence reaches it, then rises to cover the
   card before it outright. Later cards carry a higher z-index (set in JS), so
   the incoming panel is always on top and the outgoing one is never visible
   through it. Below 901px the sequence falls back to the click tabs and none of
   this applies. */
@media (min-width: 901px) {
  html:is(#rcs-srvseq-a, :root):is(#rcs-srvseq-b, :root):is(#rcs-srvseq-c, :root) body
    .rcs-service-sequence[data-rcs-sequence-mode="scroll"] .srv-viewport {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
  }

  html:is(#rcs-srvseq-a, :root):is(#rcs-srvseq-b, :root):is(#rcs-srvseq-c, :root) body
    .rcs-service-sequence[data-rcs-sequence-mode="scroll"] .srv-card {
    transform: translateY(100%);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  html:is(#rcs-srvseq-a, :root):is(#rcs-srvseq-b, :root):is(#rcs-srvseq-c, :root) body
    .rcs-service-sequence[data-rcs-sequence-mode="scroll"] .srv-card.rcs-card-up {
    transform: translateY(0);
  }
}

/* ==========================================================================
   v123 — Scroll mode overrides the click-mode card CSS
   ==========================================================================
   The one-gesture click controller above hides every card outright
   (`visibility: hidden`, `opacity: 0`, `transform: none !important`) and shows
   only the active one, which is right for tabs and wrong for a rising stack:
   the panel has to be painted while it travels. In scroll mode every card up to
   and including the active one is visible and positioned by transform, and the
   transitioning class must not blank the frame mid-step. */
@media (min-width: 901px) {
  html:is(#rcs-seq2-a, :root):is(#rcs-seq2-b, :root):is(#rcs-seq2-c, :root):is(#rcs-seq2-d, :root) body
    .rcs-service-sequence[data-rcs-sequence-mode="scroll"] .srv-card {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(100%) !important;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
    animation: none !important;
  }

  html:is(#rcs-seq2-a, :root):is(#rcs-seq2-b, :root):is(#rcs-seq2-c, :root):is(#rcs-seq2-d, :root) body
    .rcs-service-sequence[data-rcs-sequence-mode="scroll"] .srv-card.rcs-card-up {
    transform: translateY(0) !important;
  }

  html:is(#rcs-seq2-a, :root):is(#rcs-seq2-b, :root):is(#rcs-seq2-c, :root):is(#rcs-seq2-d, :root) body
    .rcs-service-sequence[data-rcs-sequence-mode="scroll"] .srv-card:is(.active, .rcs-active) {
    pointer-events: auto !important;
  }

  html:is(#rcs-seq2-a, :root):is(#rcs-seq2-b, :root):is(#rcs-seq2-c, :root):is(#rcs-seq2-d, :root) body
    .rcs-service-sequence[data-rcs-sequence-mode="scroll"] .srv-card :is(.srv-media, .srv-body) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   v125 — Hero stat strip: the fourth stat sits on the others' lines
   ==========================================================================
   "OUR SERVICES" sat above the other three labels. The cause is the value above
   it: the cycling stat is deliberately set smaller than the numeric ones
   (33.84px vs 37.44px at 1440) so long strings like "SITE SUPERVISION" fit, and
   because each stat is a column flex, a shorter value box pulls its own label
   up with it — measured 817px vs 820px, exactly the 3.6px type difference.

   Matching the font sizes would fix the line but re-introduce wrapping on the
   longer strings. Instead every value box reserves the same line height, so all
   four labels start on the same line whatever the value inside, and the cycling
   value is dropped to the bottom of that reserved box so it shares the numbers'
   bottom edge instead of floating above it. The numeric stats already fill the
   reserved height, so nothing about them moves. */
html body :is(#hero-home-content, .rcs-bottom-area) .rcs-stat-num-wrap {
  /* 1.08x the type size, not 1.0x. At 1.0 the reservation equals the font size,
     which the Latin numerals happen to match but the Arabic ones overshoot by
     1.4px — enough for the numeric stats to grow past the reservation while the
     cycling one stayed at it, leaving "OUR SERVICES" a line high on the Arabic
     home page. The headroom keeps every value box at the reserved height in
     both languages, so all four labels start on one line by construction. */
  min-block-size: calc(clamp(2.1rem, 2.6vw, 2.9rem) * var(--hf, 1) * 1.08) !important;
  margin-block-end: 6px !important;
}

html body :is(#hero-home-content, .rcs-bottom-area)
  .rcs-stat-item.key-highlight .rcs-stat-num-wrap.cycler-wrap {
  align-items: flex-end !important;
}

@media (max-width: 900px) {
  html body :is(#hero-home-content, .rcs-bottom-area) .rcs-stat-num-wrap {
    min-block-size: clamp(1.7rem, 3.2vw, 2.2rem) !important;
  }
}

@media (max-width: 767px) {
  html body :is(#hero-home-content, .rcs-bottom-area) .rcs-stat-num-wrap {
    min-block-size: clamp(1.9rem, 4.8vw, 2.4rem) !important;
  }
}

/* ==========================================================================
   v127 — Button label size back up, dropdown panel, controls on the glass
   ==========================================================================
   (3) LABEL SIZE. v117/v119 copied the sector card button's 10px/2px label onto
       every control site-wide. On a 46px chip that reads as too small once it
       is the whole site's button rather than a caption on a photograph. The
       chip, hairline, blur and hover are unchanged; only the type steps back up
       to 13px (11.5px on phones), which is close to the 13.39px these controls
       carried before the unification. Arabic runs a shade larger with no
       tracking, as it does everywhere else.
   (4) The dropdown's left panel now carries the same glass as the buttons
       inside it, so "01 // FIRM / ABOUT RICHMOND" reads as part of the same
       surface instead of a separate darker block.
   (6) Footer social discs step down from 36px to 30px.
   (7) The theme toggle and the back-to-top control join the site glass: dark
       chip in dark mode, frosted in light, both keeping their circular shape.
*/

/* -- (3) Label size ------------------------------------------------------- */
html:is(#rcs-btnsz-a, :root):is(#rcs-btnsz-b, :root):is(#rcs-btnsz-c, :root):is(#rcs-btnsz-d, :root):is(#rcs-btnsz-e, :root):is(#rcs-btnsz-f, :root):is(#rcs-btnsz-g, :root) body
  :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn,
      .cb-contact-btn, .vo-main-btn,
      .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn)),
html:is(#rcs-btnsz-a, :root):is(#rcs-btnsz-b, :root):is(#rcs-btnsz-c, :root):is(#rcs-btnsz-d, :root):is(#rcs-btnsz-e, :root):is(#rcs-btnsz-f, :root):is(#rcs-btnsz-g, :root) body
  :is(.rcs-glass-control:not(.rcs-glass-icon), .vo-main-btn,
      .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn)) :is(span, .hf-hp-ltitle) {
  font-size: 13px !important;
  letter-spacing: 1.6px !important;
}

html[lang="ar"]:is(#rcs-btnsz-a, :root):is(#rcs-btnsz-b, :root):is(#rcs-btnsz-c, :root):is(#rcs-btnsz-d, :root):is(#rcs-btnsz-e, :root):is(#rcs-btnsz-f, :root):is(#rcs-btnsz-g, :root) body
  :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn,
      .cb-contact-btn, .vo-main-btn,
      .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn)),
html[lang="ar"]:is(#rcs-btnsz-a, :root):is(#rcs-btnsz-b, :root):is(#rcs-btnsz-c, :root):is(#rcs-btnsz-d, :root):is(#rcs-btnsz-e, :root):is(#rcs-btnsz-f, :root):is(#rcs-btnsz-g, :root) body
  :is(.rcs-glass-control:not(.rcs-glass-icon), .vo-main-btn,
      .hf-takeover-mega :is(.hf-hp-link, .hf-explore-btn)) :is(span, .hf-hp-ltitle) {
  font-size: 14px !important;
  letter-spacing: 0 !important;
}

@media (max-width: 767px) {
  html:is(#rcs-btnsz-a, :root):is(#rcs-btnsz-b, :root):is(#rcs-btnsz-c, :root):is(#rcs-btnsz-d, :root):is(#rcs-btnsz-e, :root):is(#rcs-btnsz-f, :root):is(#rcs-btnsz-g, :root) body
    :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn,
        .cb-contact-btn, .vo-main-btn) {
    font-size: 11.5px !important;
    letter-spacing: 1.2px !important;
  }
  html[lang="ar"]:is(#rcs-btnsz-a, :root):is(#rcs-btnsz-b, :root):is(#rcs-btnsz-c, :root):is(#rcs-btnsz-d, :root):is(#rcs-btnsz-e, :root):is(#rcs-btnsz-f, :root):is(#rcs-btnsz-g, :root) body
    :is(.rcs-glass-control:not(.rcs-glass-icon), .c-map-trigger, .port-card-btn,
        .cb-contact-btn, .vo-main-btn) {
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
  }
}

/* -- (4) Dropdown left panel shares the buttons' surface ------------------ */
@media (min-width: 1200px) {
  html:is(#rcs-hpleft-a, :root):is(#rcs-hpleft-b, :root):is(#rcs-hpleft-c, :root) body
    .hf-takeover-mega .hf-hp-left {
    background: rgba(24, 24, 24, 0.58) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
    backdrop-filter: blur(8px) saturate(1.2) !important;
  }

  html[data-theme="light"]:is(#rcs-hpleft-a, :root):is(#rcs-hpleft-b, :root):is(#rcs-hpleft-c, :root) body
    .hf-takeover-mega .hf-hp-left {
    background: rgba(248, 249, 250, 0.62) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
  }
}

/* -- (6) Footer social discs ---------------------------------------------- */
html:is(#rcs-soc-a, :root):is(#rcs-soc-b, :root):is(#rcs-soc-c, :root) body .fm-social-li {
  inline-size: 30px !important;
  block-size: 30px !important;
  min-inline-size: 30px !important;
  min-block-size: 30px !important;
}

html:is(#rcs-soc-a, :root):is(#rcs-soc-b, :root):is(#rcs-soc-c, :root) body
  .fm-social-li :is(:is(ion-icon,svg), svg) {
  font-size: 15px !important;
  inline-size: 15px !important;
  block-size: 15px !important;
}

/* -- (7) Theme toggle and back-to-top on the site glass ------------------- */
html:is(#rcs-ctrl-a, :root):is(#rcs-ctrl-b, :root):is(#rcs-ctrl-c, :root):is(#rcs-ctrl-d, :root) body
  :is(.hf-theme-btn, .hf-back-top) {
  background: rgba(24, 24, 24, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
}

html:is(#rcs-ctrl-a, :root):is(#rcs-ctrl-b, :root):is(#rcs-ctrl-c, :root):is(#rcs-ctrl-d, :root) body
  :is(.hf-theme-btn, .hf-back-top):is(:hover, :focus-visible) {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #8c182a !important;
}

html[data-theme="light"]:is(#rcs-ctrl-a, :root):is(#rcs-ctrl-b, :root):is(#rcs-ctrl-c, :root):is(#rcs-ctrl-d, :root) body
  :is(.hf-theme-btn, .hf-back-top) {
  background: rgba(248, 249, 250, 0.62) !important;
  border-color: rgba(140, 24, 42, 0.42) !important;
  color: #8c182a !important;
  box-shadow: 0 8px 24px rgba(35, 26, 28, 0.10) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
}

html[data-theme="light"]:is(#rcs-ctrl-a, :root):is(#rcs-ctrl-b, :root):is(#rcs-ctrl-c, :root):is(#rcs-ctrl-d, :root) body
  :is(.hf-theme-btn, .hf-back-top):is(:hover, :focus-visible) {
  background: #8c182a !important;
  border-color: #8c182a !important;
  color: #ffffff !important;
}

/* ==========================================================================
   v128 — The red-card-width button keeps that width below 1200px
   ==========================================================================
   "Explore About Us" spans the red card's measure, but v86 gated that at
   `min-width: 1200px` while the two-column About layout itself survives all the
   way down to 768px. So on any window narrower than 1200px — a Windows laptop
   at 1366 with the browser not maximised, which is what the client saw — the
   button dropped back to fit-content and read as a small chip beside a
   full-width card, while the same page looked correct on a wide Mac.

   The width now follows the layout rather than an arbitrary breakpoint: from
   768px up it takes the card's measure, capped at the card's own 760px. Below
   768px the About column goes single-file and the existing full-width rule
   already applies. */
@media (min-width: 768px) and (max-width: 1199px) {
  html:is(#rcs-vowide-a, :root):is(#rcs-vowide-b, :root):is(#rcs-vowide-c, :root):is(#rcs-vowide-d, :root):is(#rcs-vowide-e, :root) body
    .vo-main-btn {
    inline-size: 100% !important;
    max-inline-size: 760px !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   v129 — Footer map city labels legible in BOTH themes
   ==========================================================================
   Three rules had stacked up on `.fm-city-label` and cancelled each other out.
   An earlier pass removed the outline (`stroke: none`, `stroke-width: 0`) and
   swapped in a text-shadow; v102 then set the light-mode fill to white and gave
   back a stroke COLOUR but no width. Net result in light mode: white text with
   a white shadow and no halo, sitting on the light map — invisible, which is
   exactly what was reported.

   One rule per theme now, each with a real halo: white type over a dark halo in
   dark mode, dark type over a white halo in light mode. `paint-order: stroke`
   puts the halo behind the glyph so it never eats the letterforms. This carries
   the Arabic labels (الرياض / بيروت / تورنتو) too, since they share the class. */
html body :is(.fm-city-label, text.fm-city-label) {
  fill: #ffffff !important;
  paint-order: stroke !important;
  stroke: rgba(0, 0, 0, 0.65) !important;
  stroke-width: 3.5px !important;
  stroke-linejoin: round !important;
  text-shadow: none !important;
}

html[data-theme="light"] body :is(.fm-city-label, text.fm-city-label) {
  fill: #231a1c !important;
  stroke: rgba(255, 255, 255, 0.92) !important;
}

/* ==========================================================================
   v130 — No text over imagery, glass buttons on red cards, popup + form parity
   ========================================================================== */

/* (A) NO WORDS ON IMAGES. Two overlays sat on top of photographs: the services
   stacks put a red category chip and a "Featured Project / name / location"
   block over `.srv-media`, and the sector hero put the same treatment over
   `.h-img-frame`. Both are removed. `.srv-badge` is scoped to `.srv-media`
   only — the same class is used for the capability chips inside `.srv-body`,
   which are not on imagery and stay. */
html:is(#rcs-noimgtxt-a, :root):is(#rcs-noimgtxt-b, :root):is(#rcs-noimgtxt-c, :root) body
  :is(.srv-media .srv-badge, .srv-project-overlay, .h-overlay-info,
      .h-ov-label, .h-ov-text) {
  display: none !important;
}

/* (B) BUTTONS ON RED CARDS. A dark chip on brand red reads as a hole, and a
   light frosted chip goes pink. On red the button takes white-tinted frosted
   glass with a white hairline and white label — the original glass treatment,
   which is what these buttons carried before the unification. Covers the home
   "Let's Build Together" card, the contact info panel and the careers panel. */
html:is(#rcs-redbtn-a, :root):is(#rcs-redbtn-b, :root):is(#rcs-redbtn-c, :root):is(#rcs-redbtn-d, :root):is(#rcs-redbtn-e, :root):is(#rcs-redbtn-f, :root):is(#rcs-redbtn-g, :root):is(#rcs-redbtn-h, :root) body
  :is(#rcs-cta-section, #rcs-cta-section-ar) .cta-card :is(.cta-btn, .rcs-glass-control),
html:is(#rcs-redbtn-a, :root):is(#rcs-redbtn-b, :root):is(#rcs-redbtn-c, :root):is(#rcs-redbtn-d, :root):is(#rcs-redbtn-e, :root):is(#rcs-redbtn-f, :root):is(#rcs-redbtn-g, :root):is(#rcs-redbtn-h, :root) body
  :is(.c-info-panel, .careers-left) :is(.c-map-trigger, .rcs-glass-control:not(.rcs-glass-icon)) {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
}

html:is(#rcs-redbtn-a, :root):is(#rcs-redbtn-b, :root):is(#rcs-redbtn-c, :root):is(#rcs-redbtn-d, :root):is(#rcs-redbtn-e, :root):is(#rcs-redbtn-f, :root):is(#rcs-redbtn-g, :root):is(#rcs-redbtn-h, :root) body
  :is(#rcs-cta-section, #rcs-cta-section-ar) .cta-card :is(.cta-btn, .rcs-glass-control):is(:hover, :focus-visible),
html:is(#rcs-redbtn-a, :root):is(#rcs-redbtn-b, :root):is(#rcs-redbtn-c, :root):is(#rcs-redbtn-d, :root):is(#rcs-redbtn-e, :root):is(#rcs-redbtn-f, :root):is(#rcs-redbtn-g, :root):is(#rcs-redbtn-h, :root) body
  :is(.c-info-panel, .careers-left) :is(.c-map-trigger, .rcs-glass-control:not(.rcs-glass-icon)):is(:hover, :focus-visible) {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #8c182a !important;
}

/* The map button is a block in a text column, so it starts on the column's text
   edge and takes its content width rather than floating mid-measure. */
html:is(#rcs-redbtn-a, :root):is(#rcs-redbtn-b, :root):is(#rcs-redbtn-c, :root):is(#rcs-redbtn-d, :root):is(#rcs-redbtn-e, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-map-trigger {
  margin-inline: 0 !important;
  inline-size: fit-content !important;
  align-self: flex-start !important;
}

html[lang="ar"]:is(#rcs-redbtn-a, :root):is(#rcs-redbtn-b, :root):is(#rcs-redbtn-c, :root):is(#rcs-redbtn-d, :root):is(#rcs-redbtn-e, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-map-trigger {
  align-self: flex-end !important;
}

/* (C) Contact field labels take the careers page's type exactly: 12.5px / 800 /
   2px, uppercase (Arabic 16px, no tracking). They were 13px at normal weight
   and 1px tracking, so the two forms read as different components. */
html:is(#rcs-lbl-a, :root):is(#rcs-lbl-b, :root):is(#rcs-lbl-c, :root):is(#rcs-lbl-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-label {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

html[lang="ar"]:is(#rcs-lbl-a, :root):is(#rcs-lbl-b, :root):is(#rcs-lbl-c, :root):is(#rcs-lbl-d, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-label {
  font-size: 16px !important;
  letter-spacing: 0 !important;
}

/* (D) The team pop-up used --c-dark (#262626), a lighter grey than every other
   dialog on the site: the project modals use #1a1a1a dark / #ffffff light.
   Bring it onto the same surface. */
html:is(#rcs-teampop-a, :root):is(#rcs-teampop-b, :root):is(#rcs-teampop-c, :root) body
  .lr-modal-content {
  background: #1a1a1a !important;
}

html[data-theme="light"]:is(#rcs-teampop-a, :root):is(#rcs-teampop-b, :root):is(#rcs-teampop-c, :root) body
  .lr-modal-content {
  background: #ffffff !important;
}

/* (E) FOOTER MAP. The grid centred the map in its cell, so it floated small in
   the middle of a tall row. It now starts at the row's top edge — level with
   "Operational Grid" — and fills the cell's width, which is also widened. */
@media (min-width: 768px) {
  html:is(#rcs-fmap-a, :root):is(#rcs-fmap-b, :root):is(#rcs-fmap-c, :root):is(#rcs-fmap-d, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-grid {
    grid-template-columns: clamp(230px, 22vw, 300px) 1fr !important;
    align-items: start !important;
  }

  html:is(#rcs-fmap-a, :root):is(#rcs-fmap-b, :root):is(#rcs-fmap-c, :root):is(#rcs-fmap-d, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-map {
    align-items: flex-start !important;
    justify-content: stretch !important;
    inline-size: 100% !important;
    margin-block-start: 0 !important;
  }

  html:is(#rcs-fmap-a, :root):is(#rcs-fmap-b, :root):is(#rcs-fmap-c, :root):is(#rcs-fmap-d, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) :is(.fm-mz-map, #fm-d3-map, #fm-d3-map-ar) > svg {
    inline-size: 100% !important;
    block-size: auto !important;
    max-inline-size: none !important;
    display: block !important;
  }
}

/* (F) The dropdown's left panel already carries the buttons' exact fill and blur
   (both measure rgba(24,24,24,.58) over the same rgb(38,38,38) backdrop), so the
   difference the client sees is the EDGE, not the colour: the buttons have a
   68%-white hairline and 4px corners while the panel had a 15% divider, square
   corners and ran edge-to-edge. Give it the button's hairline, radius and inset
   so it reads as one more chip in the same set. */
@media (min-width: 1200px) {
  html:is(#rcs-hpedge-a, :root):is(#rcs-hpedge-b, :root):is(#rcs-hpedge-c, :root):is(#rcs-hpedge-d, :root) body
    .hf-takeover-mega .hf-hp-left {
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    border-radius: 4px !important;
    margin: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  }

  html[data-theme="light"]:is(#rcs-hpedge-a, :root):is(#rcs-hpedge-b, :root):is(#rcs-hpedge-c, :root):is(#rcs-hpedge-d, :root) body
    .hf-takeover-mega .hf-hp-left {
    border-color: rgba(140, 24, 42, 0.42) !important;
    box-shadow: 0 8px 24px rgba(35, 26, 28, 0.10) !important;
  }
}

/* ==========================================================================
   v132 — Corrections: plain dropdown panel, solid red-card button, map, form
   ==========================================================================
   Undoing two things I over-built in v127/v130 and finishing the rest. */

/* (1) DROPDOWN LEFT PANEL. It should simply carry the colour that sits BEHIND
   the buttons — `.hf-hp-middle`'s `var(--c-dark)`. v127 gave it the buttons'
   translucent fill and v130 added their hairline, radius and inset, which made
   it read as a card. Both are reverted: flat fill, no glass, no border, no
   radius, no inset, so the panel and the button field are one continuous
   surface. `.hf-hp-middle` has no light-theme override, so one declaration
   covers both themes exactly as that element does. */
@media (min-width: 1200px) {
  html:is(#rcs-hpflat-a, :root):is(#rcs-hpflat-b, :root):is(#rcs-hpflat-c, :root):is(#rcs-hpflat-d, :root):is(#rcs-hpflat-e, :root) body
    .hf-takeover-mega .hf-hp-left {
    background: var(--c-dark) !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* (7) The dropdown closes on pointer-out, so the round X in its top-right was
     a control with nothing to do on desktop. */
  html:is(#rcs-hpflat-a, :root):is(#rcs-hpflat-b, :root):is(#rcs-hpflat-c, :root):is(#rcs-hpflat-d, :root):is(#rcs-hpflat-e, :root) body
    .hf-takeover-mega .hf-mega-close {
    display: none !important;
  }
}

/* (3) BUTTON ON A RED CARD. Not glass. Frosting over brand red just muddied it.
   A clean outline instead — transparent, white hairline, white label — filling
   white with a red label on hover. No blur, no tint, nothing behind it. */
html:is(#rcs-redsolid-a, :root):is(#rcs-redsolid-b, :root):is(#rcs-redsolid-c, :root):is(#rcs-redsolid-d, :root):is(#rcs-redsolid-e, :root):is(#rcs-redsolid-f, :root):is(#rcs-redsolid-g, :root):is(#rcs-redsolid-h, :root):is(#rcs-redsolid-i, :root) body
  :is(:is(#rcs-cta-section, #rcs-cta-section-ar) .cta-card, .c-info-panel, .careers-left)
  :is(.cta-btn, .c-map-trigger, .rcs-glass-control:not(.rcs-glass-icon)) {
  background: transparent !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html:is(#rcs-redsolid-a, :root):is(#rcs-redsolid-b, :root):is(#rcs-redsolid-c, :root):is(#rcs-redsolid-d, :root):is(#rcs-redsolid-e, :root):is(#rcs-redsolid-f, :root):is(#rcs-redsolid-g, :root):is(#rcs-redsolid-h, :root):is(#rcs-redsolid-i, :root) body
  :is(:is(#rcs-cta-section, #rcs-cta-section-ar) .cta-card, .c-info-panel, .careers-left)
  :is(.cta-btn, .c-map-trigger, .rcs-glass-control:not(.rcs-glass-icon)):is(:hover, :focus-visible) {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #8c182a !important;
}

/* (5) The careers required marker, now wrapped by the shared script. */
html body :is(#rcs-careers-unified, #rcs-careers-unified-ar) .form-field label .rcs-req {
  color: #8c182a !important;
  font-weight: 900 !important;
  margin-inline-start: 3px !important;
}

/* (2) A wider map cell now that Antarctica no longer pads the artwork out. */
@media (min-width: 768px) {
  html:is(#rcs-fmap2-a, :root):is(#rcs-fmap2-b, :root):is(#rcs-fmap2-c, :root):is(#rcs-fmap2-d, :root):is(#rcs-fmap2-e, :root) body
    :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-grid {
    grid-template-columns: clamp(200px, 18vw, 260px) 1fr !important;
    gap: clamp(24px, 3vw, 48px) !important;
  }
}

/* ==========================================================================
   v134 — Footer divider, asterisk size, map-button hover, submit width
   ========================================================================== */

/* (1) Every city card carries a bottom rule, so the last one (Toronto) drew a
   line with nothing under it, closing the column against empty space. */
html:is(#rcs-fmcity-a, :root):is(#rcs-fmcity-b, :root):is(#rcs-fmcity-c, :root) body
  :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-mz-card:last-child {
  border-block-end: 0 !important;
}

/* (2) The required marker read as a stray speck at the label's own size. It is
   now larger than the label and sits on the text baseline in both forms. */
html:is(#rcs-req-a, :root):is(#rcs-req-b, :root):is(#rcs-req-c, :root):is(#rcs-req-d, :root) body
  :is(:is(#rcs-careers-unified, #rcs-careers-unified-ar) .form-field label .rcs-req,
      :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-label span) {
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 0 !important;
  color: #8c182a !important;
  margin-inline-start: 4px !important;
  vertical-align: middle !important;
}

/* (4) The map button hovered to white everywhere except here, where the page's
   own `#rcs-contact-matrix .c-map-trigger:hover` sits later in the document
   than the shared sheet and was re-asserting its own fill. Settle it explicitly
   for both the resting outline and the white hover, and drop the 3px lift that
   no other button on the site does. */
html:is(#rcs-maphov-a, :root):is(#rcs-maphov-b, :root):is(#rcs-maphov-c, :root):is(#rcs-maphov-d, :root):is(#rcs-maphov-e, :root):is(#rcs-maphov-f, :root):is(#rcs-maphov-g, :root):is(#rcs-maphov-h, :root):is(#rcs-maphov-i, :root):is(#rcs-maphov-j, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-map-trigger:is(:hover, :focus-visible) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #8c182a !important;
  transform: none !important;
}

/* (5) The submit button was fit-content while every field above it ran the full
   measure of the form, so it read as a stray chip under a full-width column. */
html:is(#rcs-sub-a, :root):is(#rcs-sub-b, :root):is(#rcs-sub-c, :root):is(#rcs-sub-d, :root):is(#rcs-sub-e, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-submit {
  inline-size: 100% !important;
  max-inline-size: none !important;
  justify-content: center !important;
}

/* ==========================================================================
   v135 — Map label halo off, map button hover + placement
   ==========================================================================

   (1) The city labels carried a 3.5px painted outline. It was added to make them
   legible in light mode, but it reads as a heavy black slab around the word.
   The fill already contrasts with the map in both themes — white on the dark
   map, near-black on the light one — so the outline is dropped entirely and a
   soft shadow does the remaining work. */
html body :is(.fm-city-label, text.fm-city-label) {
  stroke: none !important;
  stroke-width: 0 !important;
  paint-order: normal !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="light"] body :is(.fm-city-label, text.fm-city-label) {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85) !important;
}

/* (2) HOVER. Earlier passes set an opaque white fill but left the resting
   `backdrop-filter` and drop shadow in place through the hover, so the button
   never matched the flat white every other control turns. Every property that
   can tint or soften the fill is settled here in one rule — filter, shadow and
   opacity included — for hover, focus and the held-down state. */
html:is(#rcs-mapb-a, :root):is(#rcs-mapb-b, :root):is(#rcs-mapb-c, :root):is(#rcs-mapb-d, :root):is(#rcs-mapb-e, :root):is(#rcs-mapb-f, :root):is(#rcs-mapb-g, :root):is(#rcs-mapb-h, :root):is(#rcs-mapb-i, :root):is(#rcs-mapb-j, :root):is(#rcs-mapb-k, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-map-trigger:is(:hover, :focus-visible, :active) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #ffffff !important;
  color: #8c182a !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* (3) PLACEMENT. The button sat inside `.c-text`, so it started at the text
   column and stopped at its own content width — indented past the icons and
   short of the panel. `.c-item` is a 16px-gap flex row with a fixed 38px icon
   box, so pulling back that 54px and adding it to the width lands the button on
   the icons' left edge and runs it to the panel's inner right edge, matching the
   heading rows above it. Mirrored for Arabic. */
html:is(#rcs-mapb-a, :root):is(#rcs-mapb-b, :root):is(#rcs-mapb-c, :root):is(#rcs-mapb-d, :root):is(#rcs-mapb-e, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-map-trigger {
  margin-inline-start: -54px !important;
  inline-size: calc(100% + 54px) !important;
  max-inline-size: none !important;
  justify-content: center !important;
  align-self: stretch !important;
}

@media (max-width: 767px) {
  html:is(#rcs-mapb-a, :root):is(#rcs-mapb-b, :root):is(#rcs-mapb-c, :root):is(#rcs-mapb-d, :root):is(#rcs-mapb-e, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-map-trigger {
    margin-inline-start: 0 !important;
    inline-size: 100% !important;
  }
}

/* (3b) `.c-item` is a flex row and `.c-text` was shrink-to-fit, so it measured
   only as wide as the address lines (178px). The button's `calc(100% + 54px)`
   therefore resolved against 178px, not the panel, and stopped short. Letting
   the text column grow gives the percentage the full measure to work from, and
   the button reaches the panel's inner right edge. Text stays start-aligned, so
   the other rows are unchanged. */
html:is(#rcs-mapb-a, :root):is(#rcs-mapb-b, :root):is(#rcs-mapb-c, :root):is(#rcs-mapb-d, :root):is(#rcs-mapb-e, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-item > .c-text {
  flex: 1 1 auto !important;
  min-inline-size: 0 !important;
}

/* ==========================================================================
   v137 — Map button spans the icon to the end of the heading's text
   ==========================================================================
   Not the panel's full width: from the left edge of the icon box to exactly
   where "Headquarters, Riyadh" ends. The heading is a block element, so its box
   fills the column and gives CSS nothing to measure; the shared script writes
   the painted text width to `--rcs-map-label-w` on the row and the button adds
   back the row's 54px (38px icon + 16px gap). The fallback keeps it sane if the
   script has not run yet. */
html:is(#rcs-mapw-a, :root):is(#rcs-mapw-b, :root):is(#rcs-mapw-c, :root):is(#rcs-mapw-d, :root):is(#rcs-mapw-e, :root):is(#rcs-mapw-f, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-map-trigger {
  inline-size: calc(var(--rcs-map-label-w, 152px) + 54px) !important;
  max-inline-size: 100% !important;
}

@media (max-width: 767px) {
  html:is(#rcs-mapw-a, :root):is(#rcs-mapw-b, :root):is(#rcs-mapw-c, :root):is(#rcs-mapw-d, :root):is(#rcs-mapw-e, :root):is(#rcs-mapw-f, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-map-trigger {
    inline-size: 100% !important;
  }
}

/* (v137b) At the heading's width the 13px label no longer fits "Open in Google
   Maps" on one line and broke across two. The button keeps the requested width,
   so the label steps down and the padding tightens to sit inside it on a single
   line. `nowrap` guarantees it, and the arrow keeps its size. */
html:is(#rcs-mapw-a, :root):is(#rcs-mapw-b, :root):is(#rcs-mapw-c, :root):is(#rcs-mapw-d, :root):is(#rcs-mapw-e, :root):is(#rcs-mapw-f, :root):is(#rcs-mapw-g, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-map-trigger {
  font-size: 11px !important;
  letter-spacing: 0.6px !important;
  padding-inline: 10px !important;
  gap: 8px !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* ==========================================================================
   v140 — Select labels match the rest of the contact form
   ==========================================================================
   "Service Interest" and "Sector Interest" rendered at weight 700, sentence
   case, no tracking, while every other label on the form was 800 / uppercase /
   2px. The two selects sit BEFORE their labels in the markup, so a floating
   label rule aimed at that pairing was landing on them and undoing the shared
   type. Every `.bp-label` is settled here regardless of which control precedes
   it. */
html:is(#rcs-sellbl-a, :root):is(#rcs-sellbl-b, :root):is(#rcs-sellbl-c, :root):is(#rcs-sellbl-d, :root):is(#rcs-sellbl-e, :root):is(#rcs-sellbl-f, :root):is(#rcs-sellbl-g, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .bp-label,
html:is(#rcs-sellbl-a, :root):is(#rcs-sellbl-b, :root):is(#rcs-sellbl-c, :root):is(#rcs-sellbl-d, :root):is(#rcs-sellbl-e, :root):is(#rcs-sellbl-f, :root):is(#rcs-sellbl-g, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) :is(select, .bp-input) ~ .bp-label {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

html[lang="ar"]:is(#rcs-sellbl-a, :root):is(#rcs-sellbl-b, :root):is(#rcs-sellbl-c, :root):is(#rcs-sellbl-d, :root):is(#rcs-sellbl-e, :root):is(#rcs-sellbl-f, :root):is(#rcs-sellbl-g, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) :is(.bp-label, :is(select, .bp-input) ~ .bp-label) {
  font-size: 16px !important;
  letter-spacing: 0 !important;
}

/* ==========================================================================
   v142 — Dropdown on the navbar's own colour, team modal, careers badge, map
   ========================================================================== */

/* (1) The dropdown panel used `--c-dark-elevated`, a lighter tone than the bar
   it hangs from. It now carries the navbar's exact surface in both themes, so
   the bar and the panel read as one piece of chrome. */
@media (min-width: 1200px) {
  html:is(#rcs-megabg-a, :root):is(#rcs-megabg-b, :root):is(#rcs-megabg-c, :root):is(#rcs-megabg-d, :root) body
    :is(.hf-takeover-mega, .hf-takeover-mega .hf-hp-left, .hf-takeover-mega .hf-hp-middle,
        .hf-takeover-mega .hf-hp-bottom-ui) {
    background: rgba(38, 38, 38, 0.98) !important;
    background-color: rgba(38, 38, 38, 0.98) !important;
  }

  html[data-theme="light"]:is(#rcs-megabg-a, :root):is(#rcs-megabg-b, :root):is(#rcs-megabg-c, :root):is(#rcs-megabg-d, :root) body
    :is(.hf-takeover-mega, .hf-takeover-mega .hf-hp-left, .hf-takeover-mega .hf-hp-middle,
        .hf-takeover-mega .hf-hp-bottom-ui) {
    background: rgba(248, 249, 250, 0.98) !important;
    background-color: rgba(248, 249, 250, 0.98) !important;
  }
}

/* (0) The team pop-up still sat on `--c-dark` (#262626) — lighter than every
   other dialog. The project modal surface is #1a1a1a dark / #ffffff light, so
   the team card and its two columns take exactly that. */
html:is(#rcs-teamsurf-a, :root):is(#rcs-teamsurf-b, :root):is(#rcs-teamsurf-c, :root):is(#rcs-teamsurf-d, :root):is(#rcs-teamsurf-e, :root) body
  :is(.lr-modal-content, .lr-modal-text-col, .lr-modal-img-col) {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
}

html[data-theme="light"]:is(#rcs-teamsurf-a, :root):is(#rcs-teamsurf-b, :root):is(#rcs-teamsurf-c, :root):is(#rcs-teamsurf-d, :root):is(#rcs-teamsurf-e, :root) body
  :is(.lr-modal-content, .lr-modal-text-col, .lr-modal-img-col) {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* (8) "Careers / The Standard" was a bare red text label while the equivalent
   on Services ("Service Ecosystem") is a red badge card. Same treatment here. */
html:is(#rcs-cartag-a, :root):is(#rcs-cartag-b, :root):is(#rcs-cartag-c, :root):is(#rcs-cartag-d, :root) body
  :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-tag {
  display: inline-block !important;
  inline-size: fit-content !important;
  background: #8c182a !important;
  color: #ffffff !important;
  padding: 8px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-block-end: 25px !important;
}

html[data-theme="light"]:is(#rcs-cartag-a, :root):is(#rcs-cartag-b, :root):is(#rcs-cartag-c, :root):is(#rcs-cartag-d, :root) body
  :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-tag {
  border-color: transparent !important;
}

html:is(#rcs-cartag-a, :root):is(#rcs-cartag-b, :root):is(#rcs-cartag-c, :root):is(#rcs-cartag-d, :root) body
  :is(#rcs-careers-unified, #rcs-careers-unified-ar) .careers-tag::before {
  content: none !important;
}

/* (3b) The white glow behind the map labels in light mode. */
html[data-theme="light"] body :is(.fm-city-label, text.fm-city-label) {
  text-shadow: none !important;
}

/* (5) LOAD MORE — hiding it actually works now. Every page's script hides the
   button by setting `style.display = 'none'` when the list is exhausted, but
   the unified button rule sets `display: inline-flex !important`, which an
   inline style cannot beat. So the button stayed on screen at the end of every
   gallery on all 20 pages. Matching the inline declaration lets the script's
   intent win without touching twenty separate inline scripts. */
html body #loadMoreBtn[style*="display: none"],
html body #loadMoreBtn[style*="display:none"],
html body :is(.bp-submit, .m-action-btn, .rcs-glass-control)[style*="display: none"] {
  display: none !important;
}

/* (5b) The rule above matched but still lost: the unified button rule carries
   six id-level segments, so a plain `#id[style]` selector never outranked it.
   Same technique, higher rank. */
html:is(#rcs-lm-a, :root):is(#rcs-lm-b, :root):is(#rcs-lm-c, :root):is(#rcs-lm-d, :root):is(#rcs-lm-e, :root):is(#rcs-lm-f, :root):is(#rcs-lm-g, :root) body
  [style*="display: none"],
html:is(#rcs-lm-a, :root):is(#rcs-lm-b, :root):is(#rcs-lm-c, :root):is(#rcs-lm-d, :root):is(#rcs-lm-e, :root):is(#rcs-lm-f, :root):is(#rcs-lm-g, :root) body
  [style*="display:none"] {
  display: none !important;
}

/* ==========================================================================
   v145 — Contact dropdowns: one design on every OS, always opening downward
   ==========================================================================
   Replaces the native select popup, which the OS draws and positions itself.
   The native control stays in the DOM (hidden) so the form still posts and
   validates; everything visible here is ours, so Windows and macOS render the
   same card, it always opens DOWNWARD, and the highlight is brand red with
   white text instead of the system blue. */

/* The native control is kept for form semantics but never shown. */
html:is(#rcs-sel-a, :root):is(#rcs-sel-b, :root):is(#rcs-sel-c, :root):is(#rcs-sel-d, :root):is(#rcs-sel-e, :root):is(#rcs-sel-f, :root):is(#rcs-sel-g, :root) body
  .rcs-select > select.bp-input {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

.rcs-select { position: relative; inline-size: 100%; }

html:is(#rcs-sel-a, :root):is(#rcs-sel-b, :root):is(#rcs-sel-c, :root):is(#rcs-sel-d, :root):is(#rcs-sel-e, :root):is(#rcs-sel-f, :root):is(#rcs-sel-g, :root) body
  .rcs-select-trigger {
  inline-size: 100% !important;
  min-block-size: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: transparent !important;
  border: 1px solid var(--c-border, rgba(255, 255, 255, 0.25)) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-family: var(--rcs-font-primary) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: start !important;
  cursor: pointer !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="light"] body .rcs-select-trigger {
  border-color: rgba(0, 0, 0, 0.22) !important;
  color: #2b2b2b !important;
}

html body .rcs-select.is-open .rcs-select-trigger,
html body .rcs-select-trigger:focus-visible { border-color: #8c182a !important; }
html body .rcs-select.is-invalid .rcs-select-trigger { border-color: #8c182a !important; }

html body .rcs-select-caret {
  inline-size: 16px; block-size: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.22s ease; opacity: 0.75;
}
html body .rcs-select.is-open .rcs-select-caret { transform: rotate(180deg); }

/* The list is absolutely positioned under the trigger — never above it. */
html body .rcs-select-list {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline: 0;
  z-index: 60;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-block-size: 260px;
  overflow-y: auto;
  background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] body .rcs-select-list {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 18px 44px rgba(35, 26, 28, 0.18);
}

html body .rcs-select-list[hidden] { display: none; }

html body .rcs-select-option {
  padding: 10px 12px;
  border-radius: 6px;
  color: #eaeaea;
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
}

html[data-theme="light"] body .rcs-select-option { color: #2b2b2b; }

/* Brand red with white text — not the OS blue. */
html body .rcs-select-option.is-active,
html body .rcs-select-option[aria-selected="true"] {
  background: #8c182a;
  color: #ffffff;
}

@media (max-width: 767px) {
  html body .rcs-select-list { max-block-size: 210px; }
  html body :is(.rcs-select-trigger, .rcs-select-option) { font-size: 14px !important; }
}

/* (v145b) The trigger has to be indistinguishable from the text fields beside
   it. Measured against a sibling `.bp-input`: 56px tall, 14px/18px padding,
   16px type, 5px radius, and the field's own translucent fill and hairline —
   which differ per theme, so both are set here rather than left to a
   lower-ranked override that the base rule was beating. */
html:is(#rcs-seltrg-a, :root):is(#rcs-seltrg-b, :root):is(#rcs-seltrg-c, :root):is(#rcs-seltrg-d, :root):is(#rcs-seltrg-e, :root):is(#rcs-seltrg-f, :root):is(#rcs-seltrg-g, :root):is(#rcs-seltrg-h, :root) body
  .rcs-select-trigger {
  min-block-size: 56px !important;
  padding: 14px 18px !important;
  font-size: 16px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
}

html[data-theme="light"]:is(#rcs-seltrg-a, :root):is(#rcs-seltrg-b, :root):is(#rcs-seltrg-c, :root):is(#rcs-seltrg-d, :root):is(#rcs-seltrg-e, :root):is(#rcs-seltrg-f, :root):is(#rcs-seltrg-g, :root):is(#rcs-seltrg-h, :root) body
  .rcs-select-trigger {
  border-color: rgba(38, 38, 38, 0.22) !important;
  background: rgba(255, 255, 255, 0.64) !important;
  color: #2b2b2b !important;
}

html:is(#rcs-seltrg-a, :root):is(#rcs-seltrg-b, :root):is(#rcs-seltrg-c, :root):is(#rcs-seltrg-d, :root):is(#rcs-seltrg-e, :root):is(#rcs-seltrg-f, :root):is(#rcs-seltrg-g, :root):is(#rcs-seltrg-h, :root) body
  :is(.rcs-select.is-open, .rcs-select.is-invalid) .rcs-select-trigger,
html:is(#rcs-seltrg-a, :root):is(#rcs-seltrg-b, :root):is(#rcs-seltrg-c, :root):is(#rcs-seltrg-d, :root):is(#rcs-seltrg-e, :root):is(#rcs-seltrg-f, :root):is(#rcs-seltrg-g, :root):is(#rcs-seltrg-h, :root) body
  .rcs-select-trigger:focus-visible {
  border-color: #8c182a !important;
}

/* ==========================================================================
   v147 — Services: the two stack buttons level and equal width
   ==========================================================================
   They already shared a baseline (measured 0px apart), but the left CTA ran the
   full column at 517px while the card's "View Project" was fit-content at 166px
   — a 352px difference that read as two unrelated controls. Both now run the
   full width of their own container, which is the only way two buttons in
   columns of different widths stay equal-looking at every viewport. The left
   column is 648px and the card's inner measure 679px, so they land within 31px
   of each other instead of 352px, and both keep the 46px height they share. */
@media (min-width: 901px) {
  html:is(#rcs-srvbtn-a, :root):is(#rcs-srvbtn-b, :root):is(#rcs-srvbtn-c, :root):is(#rcs-srvbtn-d, :root):is(#rcs-srvbtn-e, :root):is(#rcs-srvbtn-f, :root) body
    :is(#rcs-design-stack, #rcs-sup-stack, #rcs-adv-stack,
        #ar-stack-design, #ar-stack-sup, #ar-stack-adv)
    :is(.srv-global-cta, .srv-detail-btn) {
    inline-size: 100% !important;
    max-inline-size: none !important;
    min-block-size: 46px !important;
    justify-content: center !important;
    align-self: stretch !important;
  }
}

/* (v147b) Both buttons take the shared width the script publishes on the stack —
   the narrower of the left column and the card's inner measure — so they are
   genuinely the same size, not merely "100%" of two different boxes. */
@media (min-width: 901px) {
  html:is(#rcs-srvbtn-a, :root):is(#rcs-srvbtn-b, :root):is(#rcs-srvbtn-c, :root):is(#rcs-srvbtn-d, :root):is(#rcs-srvbtn-e, :root):is(#rcs-srvbtn-f, :root):is(#rcs-srvbtn-g, :root) body
    :is(#rcs-design-stack, #rcs-sup-stack, #rcs-adv-stack,
        #ar-stack-design, #ar-stack-sup, #ar-stack-adv)
    :is(.srv-global-cta, .srv-detail-btn) {
    inline-size: var(--rcs-srv-btn-w, 100%) !important;
    max-inline-size: var(--rcs-srv-btn-w, none) !important;
  }
}

/* (v149) While open the list lives on <body>, so it needs its own stacking
   context above the page chrome and must not inherit the shell's positioning. */
html body > .rcs-select-list {
  position: fixed;
  z-index: 10050;
  inset-inline: auto;
}

/* ==========================================================================
   v150 — Dropdown surface identical to the navbar; card CTA matches its rule
   ==========================================================================
   (1) Two faults made the panel read darker than the bar it hangs from. Its
   alpha was 0.98 against the navbar's 0.62, and it carried no blur — so it was
   a near-solid slab rather than the same glass. On top of that, the left, middle
   and bottom sections each painted their OWN background over it, so the alphas
   stacked and drove it toward black. The mega now carries the navbar's exact
   surface and blur, and every section inside it is transparent so only that one
   surface is painted. */
@media (min-width: 1200px) {
  html:is(#rcs-megasurf-a, :root):is(#rcs-megasurf-b, :root):is(#rcs-megasurf-c, :root):is(#rcs-megasurf-d, :root):is(#rcs-megasurf-e, :root) body
    .hf-takeover-mega {
    background: rgba(24, 24, 24, 0.58) !important;
    background-color: rgba(24, 24, 24, 0.58) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
    backdrop-filter: blur(8px) saturate(1.2) !important;
  }

  html[data-theme="light"]:is(#rcs-megasurf-a, :root):is(#rcs-megasurf-b, :root):is(#rcs-megasurf-c, :root):is(#rcs-megasurf-d, :root):is(#rcs-megasurf-e, :root) body
    .hf-takeover-mega {
    background: rgba(248, 249, 250, 0.62) !important;
    background-color: rgba(248, 249, 250, 0.62) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
  }

  html:is(#rcs-megasurf-a, :root):is(#rcs-megasurf-b, :root):is(#rcs-megasurf-c, :root):is(#rcs-megasurf-d, :root):is(#rcs-megasurf-e, :root) body
    .hf-takeover-mega :is(.hf-hp-left, .hf-hp-middle, .hf-hp-bottom-ui, .hf-mega-footer) {
    background: transparent !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* (2) The card's "View Project" now runs the full width of the rule above it —
   `.srv-c-foot`'s top border spans the card's 679px inner measure while the
   button stopped at 518px. The left column's CTA does the same against its own
   column, so each button is flush with its own container rather than the two
   being pinned to one shared number. */
@media (min-width: 901px) {
  html:is(#rcs-srvfull-a, :root):is(#rcs-srvfull-b, :root):is(#rcs-srvfull-c, :root):is(#rcs-srvfull-d, :root):is(#rcs-srvfull-e, :root):is(#rcs-srvfull-f, :root):is(#rcs-srvfull-g, :root):is(#rcs-srvfull-h, :root) body
    :is(#rcs-design-stack, #rcs-sup-stack, #rcs-adv-stack,
        #ar-stack-design, #ar-stack-sup, #ar-stack-adv)
    :is(.srv-global-cta, .srv-detail-btn) {
    inline-size: 100% !important;
    max-inline-size: none !important;
  }
}

/* ==========================================================================
   v157 — Sector Expertise panel: square ends
   ==========================================================================
   The red intro panel carried a 4px radius, which rounded off its left and
   right ends. Squared so the block reads edge to edge. EN + AR. */
html:is(#rcs-sqpanel-a, :root):is(#rcs-sqpanel-b, :root):is(#rcs-sqpanel-c, :root):is(#rcs-sqpanel-d, :root) body
  :is(#rcs-sector-matrix, #rcs-sector-matrix-ar) .bp-intro-panel {
  border-radius: 0 !important;
}

/* ==========================================================================
   v158 — Dropdown: square ends, and no stale-backdrop ghosting
   ==========================================================================
   The pseudo-element approach is gone. Putting `backdrop-filter` on a child of
   the navbar meant the blur sampled a layer the navbar had already promoted for
   its scroll animation (`will-change: transform` + `translate3d`), and WebKit
   served a STALE snapshot of that layer — the smeared ghost of the previous
   scroll position that appeared on hover after scrolling back up. The glass is
   back on the navbar's own box, where it samples live, and the panel carries the
   same values on its own box, which is the arrangement that never ghosted.

   Square ends on the panel: it inherited a radius that rounded its left and
   right edges. */
@media (min-width: 1200px) {
  html:is(#rcs-megasq-a, :root):is(#rcs-megasq-b, :root):is(#rcs-megasq-c, :root):is(#rcs-megasq-d, :root):is(#rcs-megasq-e, :root) body
    .hf-takeover-mega {
    border-radius: 0 !important;
    border-start-start-radius: 0 !important;
    border-start-end-radius: 0 !important;
    border-end-start-radius: 0 !important;
    border-end-end-radius: 0 !important;
    overflow: hidden !important;
  }
}

/* ==========================================================================
   v159 — The bar stops being a backdrop root
   ==========================================================================
   `.hf-navbar` is an ANCESTOR of the dropdown. An ancestor carrying
   `backdrop-filter` becomes a backdrop root, and a nested element then samples
   that ancestor's composited output rather than the page. Identical values
   therefore render differently — which is why matching the numbers failed every
   time, and why the panel always looked less transparent than the bar.

   The bar's glass now lives on `.rcs-nav-glass`, a sibling placed in <body> by
   the script. A sibling is not an ancestor, so nothing about the panel is nested
   under a backdrop-filter any more: both sample the page directly and the same
   declarations finally produce the same result. It also sits outside the bar's
   promoted scroll layer, which is what produced the stale-backdrop ghosting when
   the blur briefly lived on a child pseudo-element. */
@media (min-width: 1200px) {
  html:is(#rcs-glassd-a, :root):is(#rcs-glassd-b, :root):is(#rcs-glassd-c, :root):is(#rcs-glassd-d, :root):is(#rcs-glassd-e, :root):is(#rcs-glassd-f, :root):is(#rcs-glassd-g, :root) body
    .hf-navbar {
    background: transparent !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body .rcs-nav-glass {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 9990;
    pointer-events: none;
    will-change: auto;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
    background: rgba(24, 24, 24, 0.58);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    backdrop-filter: blur(8px) saturate(1.2);
  }

  html[data-theme="light"] body .rcs-nav-glass {
    background: rgba(248, 249, 250, 0.62);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
  }

  html body .rcs-nav-glass.nav-transparent {
    background: transparent;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
  }

  html body .rcs-nav-glass.nav-hidden { transform: translateY(-100%); }
}

@media (max-width: 1199px) {
  html body .rcs-nav-glass { display: none; }
}

/* (v159b) With the backdrop root gone, the panel only has to follow the bar's
   STATE. Over the hero the bar is fully transparent with a 15px blur, so the
   panel takes exactly that; scrolled and light-mode values are already matched
   above. Now both sample the page and carry the same declarations in every
   state, which is the whole of what was asked for. */
@media (min-width: 1200px) {
  html:is(#rcs-megastate-a, :root):is(#rcs-megastate-b, :root):is(#rcs-megastate-c, :root):is(#rcs-megastate-d, :root):is(#rcs-megastate-e, :root):is(#rcs-megastate-f, :root) body
    .hf-navbar.nav-transparent .hf-takeover-mega {
    background: transparent !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: blur(15px) !important;
    backdrop-filter: blur(15px) !important;
  }
}

/* ==========================================================================
   v162 — Mobile browser chrome and safe-area reserve at the end of the page
   ==========================================================================
   Confirmed on a real handset: on Home, Services and Contact the last stretch
   of the page sits underneath the phone browser's bottom URL bar. Nothing on
   the site reserved space for it, so the final row of content was unreachable.

   The reserve is expressed as `(100lvh - 100svh)`, which is exactly the height
   of the retractable browser chrome: the large viewport minus the small one.
   On any surface without such chrome — desktop, laptop, iPad Safari, a phone
   in a chrome-less PWA — the two are identical and the term resolves to 0px,
   so this costs nothing anywhere it is not needed and needs no width query.
   `env(safe-area-inset-bottom)` is added for the iOS home indicator and is
   likewise 0 where it does not apply.

   Two placements, because the page ending differs:
   - 28 of the 30 pages have no footer element; their sections are transparent
     and the colour comes from `body`, so the reserve goes on `body` and the
     page background simply continues. No seam is possible.
   - Home (EN + AR) ends in the magnetic footer, which carries its own darker
     surface (#1f1f1f against the body's #262626). Padding `body` there would
     expose a band of the wrong colour below the footer, so those two pages
     move the reserve inside `.fm-bottom` instead and the footer surface grows
     to cover it.

   The reserve is published as a custom property so both placements stay in
   sync and so it can be inspected (or forced, when testing on a machine with
   no browser chrome) from one place.
*/

:root {
  --rcs-chrome-reserve: calc(env(safe-area-inset-bottom, 0px) + (100lvh - 100svh));
}

html:is(#rcs-chrome-a, :root):is(#rcs-chrome-b, :root):is(#rcs-chrome-c, :root) body {
  padding-block-end: var(--rcs-chrome-reserve) !important;
}

html:is(#rcs-chrome-a, :root):is(#rcs-chrome-b, :root):is(#rcs-chrome-c, :root) body:has(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) {
  padding-block-end: 0 !important;
}

html:is(#rcs-chrome-a, :root):is(#rcs-chrome-b, :root):is(#rcs-chrome-c, :root) body
  :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-bottom {
  padding-block-end: calc(22px + var(--rcs-chrome-reserve)) !important;
}

/* ==========================================================================
   v163 — Contact map button: carry the desktop geometry down to the phone
   ==========================================================================
   (A) PLACEMENT. v139(3) pulls the button back over `.c-item`'s 54px icon rail
       (38px icon + 16px gap) so it starts on the icons' left edge and runs to
       the panel's inner right edge, matching the heading rows above it. A
       `max-width: 767px` block then cancelled exactly that — `margin-inline-
       start: 0; inline-size: 100%` — so on a phone the button resolved against
       the text column only. Measured at 390px: the button ran 99 → 345 while
       the icon rail and the submit button both start at 45. Its right edge was
       already correct, so it read as a short, indented button under a full-
       width one. Restoring the pull makes it 45 → 345, i.e. exactly the submit
       button's 300px measure, which is what §11 asks for. Both properties are
       logical, so Arabic mirrors without a separate rule.

   (B) LABEL SIZE. v137b sets 11px / 0.6px on this button with no media query,
       to fit "Open in Google Maps" at the heading's width on desktop. It also
       won on phones, making the map button the only control on the site that
       missed the unified 11.5px (12.5px Arabic) mobile label. There is room:
       measured at 390px the label sets on one line at 11.5px / 1.2px with the
       content box at 244px and no overflow, so the button rejoins the system.
*/

html:is(#rcs-mapm-a, :root):is(#rcs-mapm-b, :root):is(#rcs-mapm-c, :root):is(#rcs-mapm-d, :root):is(#rcs-mapm-e, :root):is(#rcs-mapm-f, :root):is(#rcs-mapm-g, :root):is(#rcs-mapm-h, :root) body
  :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-map-trigger {
  font-size: 11px !important;
  letter-spacing: 0.6px !important;
}

@media (max-width: 767px) {
  html:is(#rcs-mapm-a, :root):is(#rcs-mapm-b, :root):is(#rcs-mapm-c, :root):is(#rcs-mapm-d, :root):is(#rcs-mapm-e, :root):is(#rcs-mapm-f, :root):is(#rcs-mapm-g, :root):is(#rcs-mapm-h, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-map-trigger {
    /* (v166) Same rule desktop uses: from the icon's left edge to exactly where
       the "Headquarters, Riyadh" heading's text run ends — NOT the panel's full
       width. The script publishes that run's painted width on the row; measured
       at 390px it is 153px, so the button is 153 + 54 = 207px running 45 → 251.
       It was briefly forced to 100% here, which stretched it to 300px. */
    margin-inline-start: -54px !important;
    inline-size: calc(var(--rcs-map-label-w, 152px) + 54px) !important;
    max-inline-size: calc(100% + 54px) !important;
    font-size: 11.5px !important;
    letter-spacing: 1.2px !important;
  }

  html[lang="ar"]:is(#rcs-mapm-a, :root):is(#rcs-mapm-b, :root):is(#rcs-mapm-c, :root):is(#rcs-mapm-d, :root):is(#rcs-mapm-e, :root):is(#rcs-mapm-f, :root):is(#rcs-mapm-g, :root):is(#rcs-mapm-h, :root) body
    :is(#rcs-contact-matrix, #rcs-contact-matrix-ar) .c-map-trigger {
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
  }
}

/* ==========================================================================
   v165 — Mobile navbar and hamburger panel get the desktop glass
   ==========================================================================
   Requested directly: the mobile bar should read as the same glass surface as
   the desktop bar, and the open hamburger panel should match it rather than
   looking like a separate flat component.

   This supersedes the earlier "no backdrop-filter below 1200px" decision, but
   it does NOT reintroduce what that decision was protecting against. The blur
   is not placed on `.hf-navbar`: that element is a promoted scroll layer
   (`will-change: transform`), and a blur on it or on a descendant is exactly
   what produced the smeared stale-backdrop ghosting in WebKit. Instead this
   reuses the mechanism desktop already uses — `.rcs-nav-glass`, a div the shared
   script inserts as the first child of <body>. Verified at 390px: the element is
   already created, already has its height synced to the bar (80px) and already
   carries the bar's state classes at mobile; only CSS was hiding it. So the bar
   itself goes transparent and its sibling carries the glass, one layer, outside
   the transformed bar.

   The panel is safe for the same reason: `.hf-mob-menu` is a sibling of
   `.hf-navbar` inside `#global-ui-layer`, not a descendant, and an ancestor walk
   from it finds no backdrop-filter. Nothing is nested under a backdrop root, so
   both surfaces sample the page directly and identical declarations render
   identically. The panel is tinted denser than the bar because it covers the
   whole viewport and its links must stay legible over arbitrary page content.
*/

@media (max-width: 1199px) {
  /* (1) The bar hands its surface to the sibling layer. */
  html:is(#rcs-mglass-a, :root):is(#rcs-mglass-b, :root):is(#rcs-mglass-c, :root):is(#rcs-mglass-d, :root):is(#rcs-mglass-e, :root):is(#rcs-mglass-f, :root):is(#rcs-mglass-g, :root) body
    .hf-navbar {
    background: transparent !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* (2) The glass layer itself — same declarations as the ≥1200px block. */
  html:is(#rcs-mglass-a, :root):is(#rcs-mglass-b, :root):is(#rcs-mglass-c, :root):is(#rcs-mglass-d, :root):is(#rcs-mglass-e, :root):is(#rcs-mglass-f, :root):is(#rcs-mglass-g, :root) body
    .rcs-nav-glass {
    display: block !important;
    position: fixed !important;
    inset-block-start: 0 !important;
    inset-inline: 0 !important;
    z-index: 9990 !important;
    pointer-events: none !important;
    will-change: auto !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease !important;
    background: rgba(24, 24, 24, 0.58) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
    backdrop-filter: blur(8px) saturate(1.2) !important;
  }

  html[data-theme="light"]:is(#rcs-mglass-a, :root):is(#rcs-mglass-b, :root):is(#rcs-mglass-c, :root):is(#rcs-mglass-d, :root):is(#rcs-mglass-e, :root):is(#rcs-mglass-f, :root):is(#rcs-mglass-g, :root) body
    .rcs-nav-glass {
    background: rgba(248, 249, 250, 0.62) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
  }

  /* Over the hero the bar is fully clear with blur only, as on desktop. */
  html:is(#rcs-mglass-a, :root):is(#rcs-mglass-b, :root):is(#rcs-mglass-c, :root):is(#rcs-mglass-d, :root):is(#rcs-mglass-e, :root):is(#rcs-mglass-f, :root):is(#rcs-mglass-g, :root) body
    .rcs-nav-glass.nav-transparent {
    background: transparent !important;
    -webkit-backdrop-filter: blur(15px) !important;
    backdrop-filter: blur(15px) !important;
  }

  html:is(#rcs-mglass-a, :root):is(#rcs-mglass-b, :root):is(#rcs-mglass-c, :root):is(#rcs-mglass-d, :root):is(#rcs-mglass-e, :root):is(#rcs-mglass-f, :root):is(#rcs-mglass-g, :root) body
    .rcs-nav-glass.nav-hidden {
    transform: translateY(-100%) !important;
  }

  /* (3) The hamburger panel takes the same material, denser for legibility. */
  html:is(#rcs-mmenu-a, :root):is(#rcs-mmenu-b, :root):is(#rcs-mmenu-c, :root):is(#rcs-mmenu-d, :root):is(#rcs-mmenu-e, :root):is(#rcs-mmenu-f, :root):is(#rcs-mmenu-g, :root) body
    .hf-mob-menu {
    background: rgba(24, 24, 24, 0.78) !important;
    background-color: rgba(24, 24, 24, 0.78) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
    backdrop-filter: blur(18px) saturate(1.2) !important;
  }

  html[data-theme="light"]:is(#rcs-mmenu-a, :root):is(#rcs-mmenu-b, :root):is(#rcs-mmenu-c, :root):is(#rcs-mmenu-d, :root):is(#rcs-mmenu-e, :root):is(#rcs-mmenu-f, :root):is(#rcs-mmenu-g, :root) body
    .hf-mob-menu {
    background: rgba(248, 249, 250, 0.82) !important;
    background-color: rgba(248, 249, 250, 0.82) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
  }
}

/* ==========================================================================
   v166 — Final mobile alignment pass
   ==========================================================================
   Six measured corrections, all at phone width. Every selector below is
   class-based (or already names both ID families), so the English and Arabic
   twins are covered by the same rule; the properties used are either logical
   or direction-neutral, so RTL mirrors without a counterpart rule.

   (2) HOME SECTOR CTA. `.bp-intro-panel` and `.bp-gallery` both sit on
       `margin-inline: 5vw; max-inline-size: 1500px` (20 → 371 at 390px), but
       `.bp-cta-container` was full-bleed 0 → 390 and centred a shrink-to-fit
       button, so "Explore All Projects" measured 200px against the 351px card
       above it. The container now takes the same measure and the button fills
       it, so its edges land on the card's edges at every width.

   (3a) SERVICE CARD CTA. `.srv-detail-btn` was 143px inside `.srv-c-foot`,
       whose top rule is the divider directly above the button — 314px at
       390px. The button now spans its foot, so button and rule share edges.

   (3b) SUB-SERVICE LIST. `.srv-nav` is a two-column grid. Design Services has
       seven items, so the seventh sat alone in column one and the block read
       as pulled to the left. An odd last item now spans both columns and
       centres, which balances the list whatever the count is.

   (4) HERO STAT ROWS. The fourth stat is `.key-highlight`, whose value sets at
       22.4px against 30.8px for the other three. With `align-items: flex-start`
       its box was 46px against 50px, so "Our Services" rode 4px above "Project
       Value Managed" (772 vs 776). Stretching the items to a common row height
       and pushing value to the top and label to the bottom puts both values on
       one line and both labels on another, without touching either type size.

   (5) ALL-PROJECTS CARD BUTTON. `.port-card-btn` is painted at opacity 0 and
       revealed on hover. There is no hover on a touch screen, so the button
       never appeared — while the sector pages' equivalent is opacity 1 and
       always visible. Same 143x46 chip, so this only restores the reveal.

   (6) TEAM MODAL "CROP". The card sizes to its content (v7a.4) and sat on a
       scrim of a different colour — card #1a1a1a on rgba(12,12,14,.82), white
       on rgba(244,242,240,.86). That colour change at the card's end read as
       the card being cut off. The scrim now takes the card's own surface, so
       the sheet ends without a visible edge. The card still hugs its content,
       so the empty band that was reported earlier does not come back.
*/

@media (max-width: 767px) {
  /* (2) */
  html:is(#rcs-fa-a, :root):is(#rcs-fa-b, :root):is(#rcs-fa-c, :root):is(#rcs-fa-d, :root):is(#rcs-fa-e, :root):is(#rcs-fa-f, :root) body
    .bp-cta-container {
    /* `.matrix-content-layer` is a column flex with `align-items: center`, so a
       width of `auto` here shrink-wraps to the button. `align-self: stretch` is
       what gives `.bp-gallery` its 351px, so the CTA row takes the same. */
    align-self: stretch !important;
    margin-inline: 5vw !important;
    max-inline-size: 1500px !important;
    inline-size: auto !important;
  }

  html:is(#rcs-fa-a, :root):is(#rcs-fa-b, :root):is(#rcs-fa-c, :root):is(#rcs-fa-d, :root):is(#rcs-fa-e, :root):is(#rcs-fa-f, :root) body
    .bp-cta-container .bp-main-btn {
    inline-size: 100% !important;
    max-inline-size: none !important;
  }

  /* (3a) */
  html:is(#rcs-fa-a, :root):is(#rcs-fa-b, :root):is(#rcs-fa-c, :root):is(#rcs-fa-d, :root):is(#rcs-fa-e, :root):is(#rcs-fa-f, :root) body
    .srv-c-foot .srv-detail-btn {
    inline-size: 100% !important;
    max-inline-size: none !important;
  }

  /* (3b) */
  html:is(#rcs-fa-a, :root):is(#rcs-fa-b, :root):is(#rcs-fa-c, :root):is(#rcs-fa-d, :root):is(#rcs-fa-e, :root):is(#rcs-fa-f, :root) body
    .srv-nav .srv-nav-item:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* (4) */
  html:is(#rcs-fa-a, :root):is(#rcs-fa-b, :root):is(#rcs-fa-c, :root):is(#rcs-fa-d, :root):is(#rcs-fa-e, :root):is(#rcs-fa-f, :root) body
    .rcs-stats-bar {
    align-items: stretch !important;
  }

  html:is(#rcs-fa-a, :root):is(#rcs-fa-b, :root):is(#rcs-fa-c, :root):is(#rcs-fa-d, :root):is(#rcs-fa-e, :root):is(#rcs-fa-f, :root) body
    .rcs-stats-bar .rcs-stat-item {
    justify-content: space-between !important;
  }

  /* (5) */
  html:is(#rcs-fa-a, :root):is(#rcs-fa-b, :root):is(#rcs-fa-c, :root):is(#rcs-fa-d, :root):is(#rcs-fa-e, :root):is(#rcs-fa-f, :root) body
    .port-card .port-card-btn {
    opacity: 1 !important;
    transform: none !important;
    /* and the same surface the sector card button carries over its image:
       clear, a 50% white hairline, white label. Size, blur, radius and type
       already matched at 143x46 / blur(8px) / 4px / 11.5px. */
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
  }

  /* (6) */
  html:is(#rcs-fa-a, :root):is(#rcs-fa-b, :root):is(#rcs-fa-c, :root):is(#rcs-fa-d, :root):is(#rcs-fa-e, :root):is(#rcs-fa-f, :root) body
    .lr-modal-overlay {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html[data-theme="light"]:is(#rcs-fa-a, :root):is(#rcs-fa-b, :root):is(#rcs-fa-c, :root):is(#rcs-fa-d, :root):is(#rcs-fa-e, :root):is(#rcs-fa-f, :root) body
    .lr-modal-overlay {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
}

/* ==========================================================================
   v167 — Home hero fills the phone screen; no next-section bleed
   ==========================================================================
   Reported on a real handset in EN and AR, both themes: the section after the
   hero shows inside the first screen.

   `#hero-home-content` (the same id on both language pages) is set to
   `min-height: 100vh` with `min-height: 100dvh` immediately after it, so the
   dynamic unit wins. `dvh` tracks the CURRENT viewport, which is the small one
   while the browser's bottom bar is on screen. As soon as that bar retracts the
   visible area grows toward the large viewport, and a hero pinned to the value
   `dvh` last reported is shorter than what the user can see — so the next
   section rises into the fold. That is exactly the reported symptom, and it is
   why it appears in every language and theme: it is a unit choice, not styling.

   `lvh` is the LARGEST viewport, so a hero at `100lvh` is never shorter than
   the visible area in any chrome state and the section below can never peek.
   That is the whole fix — height only.

   NOTE, learned the hard way: do NOT also add the v162 chrome reserve as bottom
   padding here. It was tried, to keep the stat row above the bottom bar, and it
   is wrong: the hero's background layers do not paint into that padding, so it
   rendered as a band of flat `--h-dark` between the photograph and the next
   section — a worse defect than the one being fixed. The hero is a full-bleed
   image; let it run under the browser bar the way a full-screen hero should.

   Scoped to <=1199px. Above that `lvh`, `svh` and `dvh` are equal, so the
   desktop hero is untouched either way.
*/

@media (max-width: 1199px) {
  html:is(#rcs-herofill-a, :root):is(#rcs-herofill-b, :root):is(#rcs-herofill-c, :root):is(#rcs-herofill-d, :root):is(#rcs-herofill-e, :root) body
    :is(.rcs-hero-section, #home.rcs-hero-section, #hero-home-content) {
    /* THE OUTER SECTION MATTERS, not just the inner content. An earlier block
       ("Homepage: one uninterrupted first screen", ~line 1539) pins all three of
       these to `block-size: 100dvh; min-block-size: 100dvh` at <=767px. A fixed
       `block-size` ends the section at the SMALL viewport, so the section after
       it begins exactly at that line — which on a phone is the strip sitting
       under the browser's bottom bar. Fixing only `#hero-home-content` left the
       wrapper pinned, which is why this survived the first attempt.

       `block-size: auto` releases the fixed height. `100vh` comes FIRST and
       `100lvh` second on purpose: on iOS Safari `vh` has always resolved against
       the tall viewport — bottom bar retracted — which is exactly what is wanted
       here, and it is supported everywhere. `lvh` states it explicitly where
       available; where it is not, that declaration is dropped as invalid and
       `100vh` still stands. Either way the hero can never fall back to `100dvh`
       and stop above the bar. */
    block-size: auto !important;
    min-height: 100vh !important;
    min-block-size: 100lvh !important;
    max-block-size: none !important;
  }

  /* The background layers are what must sit under the bar, so pin them to the
     hero's full border box. `inset: 0` on an absolutely positioned child
     resolves against the containing block's PADDING box, so they keep covering
     even once the padding below is applied. */
  html:is(#rcs-herofill-a, :root):is(#rcs-herofill-b, :root):is(#rcs-herofill-c, :root):is(#rcs-herofill-d, :root):is(#rcs-herofill-e, :root) body
    #hero-home-content :is(.hg-bg-video-wrap, .hg-bg-image, .hg-grid-container) {
    position: absolute !important;
    inset: 0 !important;
    block-size: 100% !important;
    min-block-size: 100% !important;
  }

  /* Keep the CONTENT inside the visible area. `#hero-home-content` is a column
     flex whose last child `.rcs-bottom-area` carries the stat rows, so it lands
     on the bottom of whatever the box measures. With the box at 100lvh that put
     the second stat row below the fold — reported in Chrome as "the 2nd row
     doesn't appear on entering the page".

     (v172) The reserve goes on `.rcs-bottom-area`, NOT on `#hero-home-content`.
     Putting it on the hero was the cause of the unmasked strip along the bottom
     of the picture: `.rcs-bottom-area` carries the closing gradient
     (`to top, rgba(38,38,38,0.9) -> transparent`), and padding the hero pushed
     the hero's box end past the gradient's end. Measured with a 90px bar: hero
     box ended at 844 while the gradient stopped at 754, leaving a 90px strip
     with only the tile scrim over it — a hard edge and a visibly brighter band,
     exactly as reported, in both Safari and Chrome.

     On `.rcs-bottom-area` the padding sits INSIDE the element that paints the
     gradient, so the darkening now runs to the very bottom of the hero while
     the stat rows are still lifted clear of the browser bar. Same result for
     the stats, no gap. The reserve is 0 without retractable chrome, so desktop
     is unchanged. */
  html:is(#rcs-herofill-a, :root):is(#rcs-herofill-b, :root):is(#rcs-herofill-c, :root):is(#rcs-herofill-d, :root):is(#rcs-herofill-e, :root) body
    #hero-home-content .rcs-bottom-area {
    box-sizing: border-box !important;
    padding-block-end: var(--rcs-chrome-reserve) !important;
  }

  /* (v172) The red `+` corner marks are a desktop detail. They read as stray
     red specks on a phone, and became far more obvious when a previous attempt
     lifted the tiles to opacity 1. The tiles keep their own fill and 0.52
     opacity (reverted), and the marks are simply dropped at mobile sizes. */
  html:is(#rcs-herofill-a, :root):is(#rcs-herofill-b, :root):is(#rcs-herofill-c, :root):is(#rcs-herofill-d, :root):is(#rcs-herofill-e, :root) body
    #hero-home-content .hg-tile::after {
    content: none !important;
    display: none !important;
  }
}

/* (v167b) The About Us hero has the same defect in a stronger form. Its mobile
   rule is `height: 100svh; min-height: 100svh` — `svh` is the SMALLEST viewport,
   i.e. the height with the browser bar shown, so that hero is shorter than the
   visible area every time the bar retracts, not just sometimes. Same treatment,
   naming both ID families. `height` has to be released to `auto` as well, since
   the page rule sets it alongside min-height. */
@media (max-width: 1199px) {
  html:is(#rcs-herofill-a, :root):is(#rcs-herofill-b, :root):is(#rcs-herofill-c, :root):is(#rcs-herofill-d, :root):is(#rcs-herofill-e, :root) body
    :is(#rcs-hero-about, #rcs-hero-about-ar) {
    block-size: auto !important;
    min-height: 100vh !important;
    min-block-size: 100lvh !important;
  }
}

/* ==========================================================================
   v168 — Footer utility bar: light mode stops assuming a light surface
   ==========================================================================
   Reported as the floating bar being broken on mobile, worst in light mode.
   Two defects, one cause.

   The magnetic footer does NOT change with the theme: it is rgb(31,31,31) in
   dark AND in light, measured on both. Light-mode rules written for it assumed
   a pale background, so on that permanently dark surface they misfire:

   (1) v13 gave `.fm-bottom` `border: 1px solid #8c182a` in light mode only, as
       a "red edge". `border` is all four sides, so on a phone — where the bar
       wraps to two rows and stands 167px tall — it draws a red rectangle around
       the whole block. Dark mode has no border at all. Measured light
       border-top AND border-bottom = 1px rgb(140,24,42); dark = 0px.

   (2) `.fm-bottom-right`'s divider is set to rgba(38,38,38,0.14) in light —
       a near-black line on a near-black surface, so the separator simply
       disappears. Dark correctly uses rgba(255,255,255,0.14).

   Since the surface is identical in both themes, the correct treatment is
   identical too: the bar carries no box, and the divider is the same white
   hairline. This also resolves the long-standing "light-mode floating-bar red
   border" item. Not width-scoped — the red box is wrong at every size, it is
   simply most obvious on a phone where the bar is tallest.
*/

html[data-theme="light"]:is(#rcs-fbar-a, :root):is(#rcs-fbar-b, :root):is(#rcs-fbar-c, :root):is(#rcs-fbar-d, :root):is(#rcs-fbar-e, :root):is(#rcs-fbar-f, :root) body
  :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-bottom {
  border: 0 !important;
}

html[data-theme="light"]:is(#rcs-fbar-a, :root):is(#rcs-fbar-b, :root):is(#rcs-fbar-c, :root):is(#rcs-fbar-d, :root):is(#rcs-fbar-e, :root):is(#rcs-fbar-f, :root) body
  :is(#rcs-footer-magnetic, #rcs-footer-magnetic-ar) .fm-bottom-right {
  border-top-color: rgba(255, 255, 255, 0.14) !important;
}

/* ==========================================================================
   v169 — Hero mask grid: no stuck hover reveal on touch
   ==========================================================================
   Reported as the mask grid not covering part of the hero image, in Safari AND
   Chrome, with the uncovered patch in a different place each time.

   The mask is the grid itself: 24 `.hg-tile` divs, each `--h-dark` at
   `opacity: 0.52` (0.2 in light). The page also gives them a reveal:

       .hg-tile:hover { opacity: 0; transition: opacity 0s; }

   which is a nice desktop effect and a bug on a phone. Touch browsers apply
   `:hover` to whatever the finger last touched and keep it applied until
   something else is tapped, so a tap or the start of a scroll leaves one tile
   at opacity 0 — a single tile-sized rectangle of un-masked, much brighter
   image. Tile-shaped, wherever the finger landed, on every touch browser.
   That is exactly the reported symptom, and it is why the grid measured as
   fully covering: it does cover, one tile is just transparent.

   The grid geometry needed no change — verified that the tracks are `1fr` and
   restretch correctly (forcing the hero to 1000px moved the rows from 105.5px
   to 125px with zero uncovered area top, bottom or side).

   Guarded on pointer capability, which is the property that actually matters,
   plus a width guard so every phone and tablet is covered even if a browser
   misreports its pointer. Desktop keeps the reveal.
*/

@media (hover: none), (pointer: coarse) {
  html:is(#rcs-tile-a, :root):is(#rcs-tile-b, :root):is(#rcs-tile-c, :root):is(#rcs-tile-d, :root) body
    .hg-tile:is(:hover, :focus, :focus-visible, :active) {
    opacity: 0.52 !important;
  }

  html[data-theme="light"]:is(#rcs-tile-a, :root):is(#rcs-tile-b, :root):is(#rcs-tile-c, :root):is(#rcs-tile-d, :root) body
    .hg-tile:is(:hover, :focus, :focus-visible, :active) {
    opacity: 0.2 !important;
  }
}

@media (max-width: 1199px) {
  html:is(#rcs-tile-a, :root):is(#rcs-tile-b, :root):is(#rcs-tile-c, :root):is(#rcs-tile-d, :root) body
    .hg-tile:is(:hover, :focus, :focus-visible, :active) {
    opacity: 0.52 !important;
  }

  html[data-theme="light"]:is(#rcs-tile-a, :root):is(#rcs-tile-b, :root):is(#rcs-tile-c, :root):is(#rcs-tile-d, :root) body
    .hg-tile:is(:hover, :focus, :focus-visible, :active) {
    opacity: 0.2 !important;
  }
}

/* ==========================================================================
   v171 — Light mode: navbar text over the HOME HERO must be white
   ==========================================================================
   Reported: the navbar is hard to read on the home page hero in light mode.

   Measured on the live site at 1903px. Over the hero the bar carries
   `.nav-transparent`, and in light mode its links resolve to rgb(43,43,43) and
   the language buttons to rgba(38,38,38,0.72) — dark grey type sitting directly
   on a dark dusk photograph. In dark mode the same links are rgb(234,234,234),
   which is why only light mode reads as broken.

   `.nav-transparent` is applied ONLY while the bar sits over the home hero —
   verified: About Us reports `base` at scroll 0, home reports `nav-transparent`.
   So this rule cannot leak to any other page or to the scrolled state, and no
   other section is touched.

   The active link keeps the brand red. It is unchanged from dark mode, where it
   already sits on the same photograph and was not reported as a problem;
   recolouring it would remove the active-page indicator.
*/

@media (min-width: 1200px) {
  html[data-theme="light"]:is(#rcs-navtxt-a, :root):is(#rcs-navtxt-b, :root):is(#rcs-navtxt-c, :root):is(#rcs-navtxt-d, :root):is(#rcs-navtxt-e, :root) body
    .hf-navbar.nav-transparent :is(.hf-nav-link, .hf-hp-title):not(.active):not(.w--current) {
    color: #ffffff !important;
  }

  html[data-theme="light"]:is(#rcs-navtxt-a, :root):is(#rcs-navtxt-b, :root):is(#rcs-navtxt-c, :root):is(#rcs-navtxt-d, :root):is(#rcs-navtxt-e, :root) body
    .hf-navbar.nav-transparent .hf-lang-btn:not(.active) {
    color: rgba(255, 255, 255, 0.72) !important;
  }

  html[data-theme="light"]:is(#rcs-navtxt-a, :root):is(#rcs-navtxt-b, :root):is(#rcs-navtxt-c, :root):is(#rcs-navtxt-d, :root):is(#rcs-navtxt-e, :root) body
    .hf-navbar.nav-transparent :is(.hf-nav-link, .hf-lang-btn):is(:hover, :focus-visible):not(.active) {
    color: #ffffff !important;
  }
}

/* Below 1200px the mobile bar carries its own glass surface (v165) rather than
   sitting transparent on the photograph, so its existing colours are correct
   and are deliberately left alone. */