/*--------------------------------------------------------------
# ReadyForRole — Premium Brand UI Layer
# Palette extracted from company logo (logonew.webp):
#   --brand-1  #16356F  deep navy   (hexagon edge)
#   --brand-2  #2380B9  cyan blue   (ladder / gradient edge)
#   --brand-3  #25B786  emerald     (hexagon edge / person)
# Only these 3 colors + white/neutral tints & shades are used.
--------------------------------------------------------------*/

:root {
  --brand-1: #16356F;
  --brand-2: #2380B9;
  --brand-3: #25B786;

  /* shades */
  --brand-1-deep: #0d1b31;
  --brand-1-800: #112a58;
  --brand-2-deep: #175d87;
  --brand-3-deep: #178a64;

  /* tints */
  --brand-1-100: #e3e9f4;
  --brand-2-100: #e2f0f8;
  --brand-2-050: #f2f8fc;
  --brand-3-100: #ddf4ec;
  --brand-3-050: #f0fbf7;

  /* neutrals derived from navy */
  --rfr-ink: #0d1b31;
  --rfr-ink-2: #132a47;
  --rfr-muted: #51648a;
  --rfr-muted-2: #6d7f9f;
  --rfr-line: rgba(22, 53, 111, 0.10);
  --rfr-glass: rgba(255, 255, 255, 0.72);
  --rfr-glass-border: rgba(255, 255, 255, 0.55);

  --rfr-grad: linear-gradient(100deg, var(--brand-1) 0%, var(--brand-2) 50%, var(--brand-3) 100%);
  --rfr-grad-soft: linear-gradient(135deg, rgba(35,128,185,.12), rgba(37,183,134,.12));

  --rfr-display: "Space Grotesk", "Montserrat", system-ui, sans-serif;
  --rfr-body: "Inter", "Roboto", system-ui, sans-serif;

  --rfr-radius: 22px;
  --rfr-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rfr-shadow-sm: 0 2px 10px rgba(22, 53, 111, 0.06);
  --rfr-shadow-md: 0 14px 40px rgba(22, 53, 111, 0.10);
  --rfr-shadow-lg: 0 24px 70px rgba(22, 53, 111, 0.16);
}

/* ---- Global typography & template variable remap (brand-only) ---- */
:root {
  --default-font: var(--rfr-body);
  --heading-font: var(--rfr-display);
  --nav-font: var(--rfr-body);
  --accent-color: var(--brand-2);
  --heading-color: var(--rfr-ink-2);
  --nav-color: #3c517a;
  --nav-hover-color: var(--brand-2);
  --nav-dropdown-hover-color: var(--brand-2);
}

body.index-page {
  font-family: var(--rfr-body);
  color: #45587c;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.index-page h1, .index-page h2, .index-page h3,
.index-page h4, .index-page h5, .index-page h6 {
  font-family: var(--rfr-display);
  letter-spacing: -0.015em;
}

.index-page .text-muted { color: var(--rfr-muted) !important; }
.index-page .text-secondary { color: #4d6084 !important; }
.index-page .text-primary { color: var(--brand-2) !important; }
.index-page .text-success { color: var(--brand-3-deep) !important; }
.index-page .text-info { color: var(--brand-2) !important; }
.index-page .text-warning { color: var(--brand-2-deep) !important; }
.index-page .text-danger { color: var(--brand-1) !important; }

/* keep the footer EXACTLY as designed — restore its palette scope */
#footer, #footer * { font-family: var(--rfr-body); }
#footer .text-primary { color: #5bb8e8 !important; }

/* selection + scrollbar accents */
::selection { background: rgba(35, 128, 185, 0.22); color: var(--rfr-ink); }

/* Scroll top button on-brand */
.scroll-top { background: var(--rfr-grad) !important; border: none; }
.scroll-top:hover { filter: brightness(1.08); }

/* Preloader on-brand */
#preloader:before { border-color: var(--brand-2) transparent var(--brand-3) transparent !important; }

/* utility: shared reveal state (GSAP drives transform/opacity) */
.rfr-gs-hidden { opacity: 0; visibility: hidden; }

/*--------------------------------------------------------------
# 1. NAVBAR — premium sticky glass
--------------------------------------------------------------*/
.header.rfr-header {
  isolation: isolate;
  padding: 20px 0;
  transition: padding .45s var(--rfr-ease), background .45s ease, transform .45s var(--rfr-ease);
}
.header.rfr-header > .container-fluid {
  z-index: 1;
}
.scrolled .header.rfr-header { padding: 10px 0; }
/* fully transparent at the top of the page — content floats over the hero */
.header.rfr-header::before {
  content: "";
  position: absolute;
  inset: 8px clamp(16px, 3vw, 44px);
  z-index: -1;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  transition: background .45s ease, box-shadow .45s ease, border-color .45s ease,
              inset .45s var(--rfr-ease), backdrop-filter .45s ease;
}
/* animated gradient hairline under the transparent nav */
.header.rfr-header::after {
  content: "";
  position: absolute;
  left: clamp(16px, 3vw, 44px);
  right: clamp(16px, 3vw, 44px);
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(22, 53, 111, 0.4) 18%,
    rgba(35, 128, 185, 0.65) 42%,
    rgba(37, 183, 134, 0.65) 62%,
    rgba(22, 53, 111, 0.4) 84%,
    transparent 100%);
  background-size: 220% 100%;
  animation: rfr-divider-flow 6s linear infinite;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity .45s ease;
}
/* on scroll the hairline fades out and the glass pill fades in */
.scrolled .header.rfr-header::after { opacity: 0; }
.scrolled .header.rfr-header::before {
  border-color: rgba(22, 53, 111, 0.08);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,255,255,0.82)),
    radial-gradient(circle at 18% 22%, rgba(37,183,134,0.11), transparent 31%),
    radial-gradient(circle at 82% 0%, rgba(35,128,185,0.14), transparent 34%);
  box-shadow: 0 18px 52px -34px rgba(22, 53, 111, 0.38);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  inset: 5px clamp(14px, 2.4vw, 36px);
}

.rfr-header .logo img {
  max-height: 58px;
  filter: drop-shadow(0 3px 8px rgba(22, 53, 111, 0.12));
  transition: transform .5s var(--rfr-ease);
}
.rfr-header .logo:hover img { transform: translateY(-1px) scale(1.03); }

.rfr-brand-name {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  font-size: clamp(1.42rem, 1.65vw, 1.78rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-1); /* fallback */
}
/* company name carries all 3 logo colors: navy / cyan / emerald */
.rfr-brand-name .rfr-nm-1 { color: var(--brand-1); }
.rfr-brand-name .rfr-nm-2 { color: var(--brand-2); }
.rfr-brand-name .rfr-nm-3 { color: var(--brand-3); }
.rfr-header .rfr-brand-name .rfr-nm-1 { color: var(--brand-1); }
.rfr-header .rfr-brand-name .rfr-nm-2 { color: var(--brand-2); }
.rfr-header .rfr-brand-name .rfr-nm-3 { color: var(--brand-3); }
.rfr-brand-tag {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: clamp(0.7rem, 0.78vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  margin-top: 3px;
  white-space: normal;
  color: #000 !important;
}

/* nav link premium hover: gradient underline glow */
@media (min-width: 1200px) {
  .rfr-header .navmenu > ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 650;
    font-size: 15px;
    position: relative;
    min-height: 46px;
    padding: 12px 17px !important;
    border-radius: 10px;
    color: var(--rfr-ink-2);
    transition: color .25s ease, background .25s ease, transform .25s var(--rfr-ease);
  }
  .rfr-header .navmenu > ul > li > a > i:not(.toggle-dropdown) {
    display: none;
  }
  .rfr-header .navmenu > ul > li > a:hover,
  .rfr-header .navmenu > ul > li > a.active {
    background: rgba(35, 128, 185, 0.08);
    color: var(--brand-1);
    transform: translateY(-1px);
  }
  .rfr-header .navmenu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--rfr-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--rfr-ease), box-shadow .35s ease;
  }
  .rfr-header .navmenu > ul > li > a:hover::after,
  .rfr-header .navmenu > ul > li > a.active::after {
    transform: scaleX(1);
    box-shadow: 0 3px 12px rgba(37, 183, 134, 0.45);
  }
  .rfr-header .navmenu li:last-child a.request-talent-btn::after { display: none; }

  .rfr-header .navmenu .dropdown ul {
    border-radius: 14px;
    border: 1px solid rgba(35, 128, 185, 0.12);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 60px -20px rgba(22, 53, 111, 0.28);
    padding: 8px;
  }
  .rfr-header .navmenu .dropdown ul a {
    border-radius: 9px;
    font-size: 15px;
    transition: background .25s ease, color .25s ease, padding-left .25s ease;
  }
  .rfr-header .navmenu .dropdown ul a:hover {
    background: linear-gradient(90deg, rgba(35,128,185,.09), rgba(37,183,134,.09));
    color: var(--brand-2);
    padding-left: 26px;
  }
}

/* Access Talent CTA pill */
.rfr-header .request-talent-btn {
  background: var(--rfr-grad);
  color: #fff !important;
  border-radius: 10px;
  padding: 12px 22px !important;
  margin-left: 10px;
  font-weight: 750 !important;
  box-shadow: 0 10px 24px -12px rgba(35, 128, 185, 0.58);
  transition: transform .3s var(--rfr-ease), box-shadow .3s ease;
  background-size: 160% 100%;
}
.rfr-header .request-talent-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(37, 183, 134, 0.55);
  background-position: 100% 0;
}

/* mobile menu polish */
@media (max-width: 1199px) {
  .header.rfr-header {
    padding: 10px 0;
  }
  .header.rfr-header::before {
    inset: 7px 10px;
    border-radius: 16px;
  }
  .mobile-nav-toggle { color: var(--brand-1); }
  .navmenu ul {
    border-radius: 18px;
    border: 1px solid rgba(35, 128, 185, 0.14);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 30px 80px -20px rgba(13, 27, 49, 0.5);
  }
  .mobile-nav-active .navmenu { background: rgba(13, 27, 49, 0.72); backdrop-filter: blur(6px); }
  .navmenu a, .navmenu a:focus { font-weight: 500; color: var(--rfr-ink-2); }
  .navmenu a:hover, .navmenu .active, .navmenu .active:focus { color: var(--brand-2); }
  .rfr-header .request-talent-btn { display: inline-flex; margin: 8px 20px; width: max-content; }
}

/*--------------------------------------------------------------
# 2. HERO — brand background + interactive logo reveal
--------------------------------------------------------------*/
.hero.rfr-hero {
  position: relative;
  isolation: isolate;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse 52% 44% at 6% -8%, rgba(35, 128, 185, 0.14), transparent 68%),
    radial-gradient(ellipse 48% 54% at 102% 14%, rgba(37, 183, 134, 0.15), transparent 66%),
    radial-gradient(ellipse 42% 38% at 84% 100%, rgba(22, 53, 111, 0.10), transparent 70%),
    radial-gradient(ellipse 32% 32% at 34% 88%, rgba(124, 111, 224, 0.08), transparent 72%),
    linear-gradient(155deg, #ffffff 0%, #f4faff 46%, #edfaf4 100%);
  overflow: hidden;
}
.hero.rfr-hero::before,
.hero.rfr-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* fine blueprint grid, fading out towards the edges */
.hero.rfr-hero::before {
  z-index: -1;
  background-image:
    linear-gradient(rgba(22, 53, 111, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 53, 111, 0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 92% 82% at 50% 38%, #000 0%, rgba(0,0,0,.22) 58%, transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse 92% 82% at 50% 38%, #000 0%, rgba(0,0,0,.22) 58%, transparent 84%);
}
/* soft light sweep + bottom fade into the next section */
.hero.rfr-hero::after {
  z-index: -1;
  background:
    conic-gradient(from 205deg at 78% 30%, rgba(37,183,134,0.06), transparent 24%, transparent 76%, rgba(35,128,185,0.07)),
    linear-gradient(180deg, transparent 78%, rgba(255,255,255,0.85) 100%);
}
/* legacy photo layers retired — hero is now a pure gradient composition */
.rfr-hero-bg,
.rfr-hero-veil {
  display: none;
}

/* badge chips — brand-cycled */
.rfr-chip-row {
  flex-wrap: wrap;
  align-items: center;
  width: auto;
  max-width: 100%;
}
.rfr-chip {
  font-family: var(--rfr-body);
  font-weight: 600;
  font-size: 0.68rem !important;
  letter-spacing: 0.02em;
  border-radius: 50px;
  padding: 7px 11px;
  border: 1px solid;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .3s var(--rfr-ease), box-shadow .3s ease;
}
.rfr-chip:hover { transform: translateY(-2px); box-shadow: var(--rfr-shadow-sm); }
.rfr-chip-1 { color: var(--brand-1) !important; background: rgba(22, 53, 111, 0.06) !important; border-color: rgba(22, 53, 111, 0.18) !important; }
.rfr-chip-2 { color: var(--brand-2-deep) !important; background: rgba(35, 128, 185, 0.07) !important; border-color: rgba(35, 128, 185, 0.22) !important; }
.rfr-chip-3 { color: var(--brand-3-deep) !important; background: rgba(37, 183, 134, 0.08) !important; border-color: rgba(37, 183, 134, 0.24) !important; }

/* headline: navy base + tri-gradient accent = all 3 logo colors */
.rfr-hero .rfr-ink { color: var(--brand-1-deep) !important; }
.rfr-grad-text {
  background: linear-gradient(93deg, var(--brand-1) 0%, var(--brand-2) 46%, var(--brand-3) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand-2);
}
.rfr-hero h2.display-5 {
  font-family: var(--rfr-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* subheadline gradient rule */
.rfr-lead-rule {
  font-size: 1.1rem;
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--brand-2), var(--brand-3)) 1;
  padding-left: 15px;
  color: var(--rfr-ink-2) !important;
  font-weight: 500;
}

/* glowing gradient CTA */
.rfr-cta-btn {
  position: relative;
  background: var(--rfr-grad);
  background-size: 180% 100%;
  background-position: 0% 0;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 12px 34px -10px rgba(35, 128, 185, 0.6);
  transition: background-position .5s var(--rfr-ease), transform .3s var(--rfr-ease), box-shadow .3s ease;
  overflow: hidden;
}
.rfr-cta-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--rfr-ease);
}
.rfr-cta-btn:hover {
  color: #fff;
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -10px rgba(37, 183, 134, 0.65);
}
.rfr-cta-btn:hover::after { left: 130%; }

/* --- student + SaaS stage --- */
.rfr-student-stage {
  position: relative;
  display: inline-grid;
  place-items: end center;
  width: min(100%, 590px);
  min-height: clamp(430px, 44vw, 680px);
  isolation: isolate;
}
/* organic aurora blob behind the student — no card, no borders */
.rfr-student-stage::before {
  content: "";
  position: absolute;
  right: clamp(-16px, 2vw, 30px);
  top: clamp(18px, 4vw, 54px);
  bottom: clamp(4px, 2vw, 28px);
  width: min(96%, 560px);
  border-radius: 54% 46% 42% 58% / 48% 56% 44% 52%;
  background:
    radial-gradient(circle at 30% 26%, rgba(35, 128, 185, 0.26), transparent 58%),
    radial-gradient(circle at 74% 60%, rgba(37, 183, 134, 0.24), transparent 60%),
    radial-gradient(circle at 54% 92%, rgba(22, 53, 111, 0.14), transparent 62%),
    radial-gradient(circle at 82% 16%, rgba(124, 111, 224, 0.14), transparent 55%);
  animation: rfr-blob-drift 14s ease-in-out infinite alternate;
  z-index: -2;
}
@keyframes rfr-blob-drift {
  0%   { border-radius: 54% 46% 42% 58% / 48% 56% 44% 52%; transform: translateY(0) rotate(0deg); }
  50%  { border-radius: 44% 56% 58% 42% / 56% 44% 54% 46%; transform: translateY(-12px) rotate(1.6deg); }
  100% { border-radius: 58% 42% 48% 52% / 42% 54% 46% 58%; transform: translateY(8px) rotate(-1.4deg); }
}
/* soft ground glow under the student */
.rfr-student-stage::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 8%;
  bottom: 1%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(22, 53, 111, 0.20), transparent 66%);
  filter: blur(10px);
  z-index: -3;
}
.rfr-student-img {
  position: relative;
  z-index: 2;
  width: min(72%, 410px);
  height: auto;
  margin-right: clamp(0px, 3vw, 46px);
  filter: drop-shadow(0 28px 42px rgba(13, 27, 49, 0.24));
  animation: rfr-student-float 7s ease-in-out infinite;
}
@keyframes rfr-student-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
/* --- falling colours layer, covers the full hero --- */
.rfr-hero-rain {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.rfr-hero-rain span {
  position: absolute;
  top: 0;
  display: block;
  width: var(--w, 14px);
  height: var(--h, 14px);
  left: var(--x, 50%);
  border-radius: 999px;
  background: var(--c, rgba(35, 128, 185, 0.8));
  box-shadow: 0 0 14px 2px var(--c, rgba(35, 128, 185, 0.8));
  opacity: 0;
  animation: rfr-fall var(--t, 10s) linear infinite;
  animation-delay: var(--d, 0s);
  will-change: transform;
}
@keyframes rfr-fall {
  0%   { transform: translate3d(0, -14vh, 0); opacity: 0; }
  5%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate3d(var(--dx, 0px), 106vh, 0); opacity: 0; }
}
/* dots */
.rfr-hero-rain span:nth-child(1)  { --x: 4%;  --w: 14px; --h: 14px; --c: rgba(35, 128, 185, 0.8);  --t: 9s;    --d: -2s;    --dx: 30px; }
.rfr-hero-rain span:nth-child(2)  { --x: 12%; --w: 10px; --h: 10px; --c: rgba(37, 183, 134, 0.85); --t: 12s;   --d: -9s;    --dx: -22px; }
.rfr-hero-rain span:nth-child(3)  { --x: 21%; --w: 17px; --h: 17px; --c: rgba(245, 181, 74, 0.85); --t: 10.5s; --d: -5s;    --dx: 26px; }
.rfr-hero-rain span:nth-child(4)  { --x: 30%; --w: 11px; --h: 11px; --c: rgba(124, 111, 224, 0.8); --t: 13s;   --d: -12s;   --dx: -28px; }
.rfr-hero-rain span:nth-child(5)  { --x: 38%; --w: 15px; --h: 15px; --c: rgba(22, 53, 111, 0.7);   --t: 11s;   --d: -1s;    --dx: 20px; }
.rfr-hero-rain span:nth-child(6)  { --x: 47%; --w: 10px; --h: 10px; --c: rgba(37, 183, 134, 0.8);  --t: 8.5s;  --d: -7s;    --dx: -18px; }
.rfr-hero-rain span:nth-child(7)  { --x: 55%; --w: 16px; --h: 16px; --c: rgba(240, 98, 146, 0.75); --t: 12.5s; --d: -4s;    --dx: 32px; }
.rfr-hero-rain span:nth-child(8)  { --x: 63%; --w: 12px; --h: 12px; --c: rgba(35, 128, 185, 0.8);  --t: 10s;   --d: -10s;   --dx: -24px; }
.rfr-hero-rain span:nth-child(9)  { --x: 72%; --w: 10px; --h: 10px; --c: rgba(245, 181, 74, 0.8);  --t: 13.5s; --d: -6s;    --dx: 22px; }
.rfr-hero-rain span:nth-child(10) { --x: 80%; --w: 15px; --h: 15px; --c: rgba(124, 111, 224, 0.75);--t: 9.5s;  --d: -3s;    --dx: -30px; }
.rfr-hero-rain span:nth-child(11) { --x: 88%; --w: 11px; --h: 11px; --c: rgba(37, 183, 134, 0.85); --t: 11.5s; --d: -11s;   --dx: 24px; }
.rfr-hero-rain span:nth-child(12) { --x: 95%; --w: 13px; --h: 13px; --c: rgba(240, 98, 146, 0.7);  --t: 10.8s; --d: -8s;    --dx: -20px; }
/* streaks — thin vertical trails for a "raining colour" feel */
.rfr-hero-rain span:nth-child(n+13) {
  border-radius: 4px;
  background: linear-gradient(180deg, transparent, var(--c));
  box-shadow: none;
}
.rfr-hero-rain span:nth-child(13) { --x: 8%;  --w: 4px; --h: 96px;  --c: rgba(35, 128, 185, 0.8);  --t: 6.5s;  --d: -3.5s;  --dx: 14px; }
.rfr-hero-rain span:nth-child(14) { --x: 26%; --w: 3px; --h: 74px;  --c: rgba(37, 183, 134, 0.85); --t: 8s;    --d: -6.5s;  --dx: -12px; }
.rfr-hero-rain span:nth-child(15) { --x: 43%; --w: 4px; --h: 112px; --c: rgba(245, 181, 74, 0.8);  --t: 6s;    --d: -1.5s;  --dx: 16px; }
.rfr-hero-rain span:nth-child(16) { --x: 59%; --w: 3px; --h: 84px;  --c: rgba(124, 111, 224, 0.8); --t: 8.5s;  --d: -5s;    --dx: -14px; }
.rfr-hero-rain span:nth-child(17) { --x: 76%; --w: 4px; --h: 104px; --c: rgba(240, 98, 146, 0.75); --t: 7.2s;  --d: -8s;    --dx: 12px; }
.rfr-hero-rain span:nth-child(18) { --x: 92%; --w: 3px; --h: 78px;  --c: rgba(22, 53, 111, 0.75);  --t: 7.6s;  --d: -2.5s;  --dx: -16px; }
.rfr-saas-panel {
  position: absolute;
  z-index: 1;
  display: none;
  gap: 9px;
  width: clamp(128px, 15vw, 184px);
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: 8px;
  background: rgba(255,255,255,0.68);
  box-shadow: 0 22px 60px rgba(22, 53, 111, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.rfr-saas-panel-a {
  left: 0;
  top: 22%;
  transform: rotate(-4deg);
}
.rfr-saas-panel-b {
  right: 2%;
  top: 14%;
  transform: rotate(5deg);
}
.rfr-panel-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  aspect-ratio: 1;
  border-radius: 8px;
  color: #fff;
  background: var(--rfr-grad);
  box-shadow: 0 14px 28px rgba(35, 128, 185, 0.24);
}
.rfr-panel-line {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(22, 53, 111, 0.26), rgba(37, 183, 134, 0.26));
}
.rfr-panel-line.w-70 { width: 70%; }
.rfr-panel-line.w-45 { width: 45%; }
.rfr-mini-chart {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 48px;
}
.rfr-mini-chart i {
  display: block;
  flex: 1;
  min-width: 12px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--brand-3), var(--brand-2));
}
.rfr-mini-chart i:nth-child(1) { height: 38%; opacity: .62; }
.rfr-mini-chart i:nth-child(2) { height: 58%; opacity: .76; }
.rfr-mini-chart i:nth-child(3) { height: 78%; opacity: .9; }
.rfr-mini-chart i:nth-child(4) { height: 100%; }
/* orbit rings — slowly spinning, each carrying a glowing satellite dot */
.rfr-saas-orbit {
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.rfr-saas-orbit::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.rfr-saas-orbit-1 {
  width: 86%;
  aspect-ratio: 1;
  right: 0;
  bottom: 10%;
  border: 1.5px dashed rgba(35, 128, 185, 0.34);
  animation: rfr-orbit-spin 38s linear infinite;
}
.rfr-saas-orbit-1::before {
  background: var(--brand-2);
  box-shadow: 0 0 14px 3px rgba(35, 128, 185, 0.5);
}
.rfr-saas-orbit-2 {
  width: 64%;
  aspect-ratio: 1;
  right: 12%;
  bottom: 18%;
  border: 1.5px dashed rgba(37, 183, 134, 0.38);
  animation: rfr-orbit-spin 26s linear infinite reverse;
}
.rfr-saas-orbit-2::before {
  background: var(--brand-3);
  box-shadow: 0 0 14px 3px rgba(37, 183, 134, 0.5);
}
@keyframes rfr-orbit-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rfr-student-stage::before,
  .rfr-student-img,
  .rfr-saas-orbit { animation: none; }
}
.rfr-hero-target {
  position: absolute;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  width: clamp(48px, 5vw, 66px);
  aspect-ratio: 1;
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.78);
  background:
    linear-gradient(135deg, rgba(22,53,111,0.96), rgba(35,128,185,0.92) 52%, rgba(37,183,134,0.92)),
    rgba(255,255,255,0.7);
  box-shadow: 0 20px 42px -18px rgba(22, 53, 111, 0.46);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .3s var(--rfr-ease), box-shadow .3s ease, filter .3s ease;
}
.rfr-hero-target i {
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
}
.rfr-hero-target:hover,
.rfr-hero-target:focus {
  color: #fff;
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 28px 56px -20px rgba(37, 183, 134, 0.56);
  filter: saturate(1.08);
}
.rfr-hero-target:focus-visible {
  outline: 3px solid rgba(35,128,185,0.28);
  outline-offset: 4px;
}
.rfr-hero-target-1 { left: 7%; top: 36%; }
.rfr-hero-target-2 { left: 16%; bottom: 20%; }
.rfr-hero-target-3 { right: 11%; top: 34%; }
.rfr-hero-target-4 { right: 5%; bottom: 22%; }
@keyframes rfr-pulse {
  0%   { transform: scale(0.82); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scale(1.18); opacity: 0; }
}
@media (max-width: 991.98px) {
  .rfr-chip-row {
    flex-wrap: wrap;
    width: auto;
    white-space: normal;
  }
  .rfr-student-stage {
    min-height: clamp(390px, 82vw, 560px);
    width: min(100%, 520px);
    margin-inline: auto;
  }
  .rfr-student-img {
    width: min(68%, 340px);
    margin-right: 0;
  }
  .rfr-hero-rain span:nth-child(n+13) { display: none; }
  .rfr-saas-panel-a { left: 3%; top: 18%; }
  .rfr-saas-panel-b { right: 1%; top: 20%; }
  .rfr-hero-target-1 { left: 7%; top: 30%; }
  .rfr-hero-target-2 { left: 12%; bottom: 18%; }
  .rfr-hero-target-3 { right: 8%; top: 31%; }
  .rfr-hero-target-4 { right: 9%; bottom: 18%; }
}
@media (max-width: 575.98px) {
  .rfr-student-stage {
    min-height: 360px;
  }
  .rfr-student-img {
    width: min(72%, 282px);
  }
  .rfr-hero-rain span:nth-child(even) { display: none; }
  .rfr-saas-panel {
    width: 118px;
    padding: 11px;
  }
  .rfr-saas-panel-a { left: 0; top: 13%; }
  .rfr-saas-panel-b { right: 0; top: 19%; }
  .rfr-hero-target {
    width: 46px;
    border-radius: 14px;
  }
  .rfr-hero-target-1 { left: 2%; top: 31%; }
  .rfr-hero-target-2 { left: 8%; bottom: 15%; }
  .rfr-hero-target-3 { right: 2%; top: 34%; }
  .rfr-hero-target-4 { right: 6%; bottom: 15%; }
}

/* hero carousel text — keep template mechanics, just typography */
#heroTextCarousel .carousel-item span { font-family: var(--rfr-display); }

/*--------------------------------------------------------------
# Shared section chrome
--------------------------------------------------------------*/
.rfr-section-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.rfr-section-bg::before {
  /* faint grid */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(35, 128, 185, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 128, 185, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
}
.rfr-bg-white-blue { background: linear-gradient(180deg, #ffffff 0%, var(--brand-2-050) 60%, #ffffff 100%); }
.rfr-bg-blue-white { background: linear-gradient(180deg, var(--brand-2-050) 0%, #ffffff 100%); }

/* decorative blurred orbs — GPU-only float */
.rfr-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
  animation: rfr-orb-float 14s ease-in-out infinite alternate;
  will-change: transform;
}
.rfr-orb-blue  { background: radial-gradient(circle, rgba(35,128,185,.35), transparent 70%); }
.rfr-orb-green { background: radial-gradient(circle, rgba(37,183,134,.32), transparent 70%); }
.rfr-orb-navy  { background: radial-gradient(circle, rgba(22,53,111,.25), transparent 70%); }
@keyframes rfr-orb-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(30px, -34px, 0) scale(1.12); }
}

/* AI network nodes layer (inline SVG container) */
.rfr-net {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
}
.rfr-net svg { width: 100%; height: 100%; }
.rfr-net .n { animation: rfr-node 5s ease-in-out infinite alternate; transform-origin: center; will-change: transform, opacity; }
.rfr-net .n:nth-child(3n) { animation-delay: 1.6s; }
.rfr-net .n:nth-child(3n+1) { animation-delay: 3s; }
@keyframes rfr-node {
  from { opacity: .25; transform: scale(.8); }
  to   { opacity: .9;  transform: scale(1.25); }
}

/* section badge pill */
.rfr-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--rfr-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-2-deep);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(35, 128, 185, 0.22);
  border-radius: 50px;
  padding: 7px 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px -6px rgba(35, 128, 185, 0.3);
}
.rfr-badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rfr-grad);
  box-shadow: 0 0 10px rgba(37, 183, 134, 0.8);
}

/* glowing animated divider */
.rfr-divider {
  width: 96px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 3px;
  background: var(--rfr-grad);
  background-size: 220% 100%;
  animation: rfr-divider-flow 3.2s linear infinite;
  box-shadow: 0 2px 14px rgba(35, 128, 185, 0.55);
}
@keyframes rfr-divider-flow {
  from { background-position: 0% 0; }
  to   { background-position: 220% 0; }
}

/* section titles */
.rfr-title-grad {
  background: linear-gradient(95deg, var(--rfr-ink-2) 20%, var(--brand-2) 65%, var(--brand-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--rfr-ink-2);
}

/* glass card base */
.rfr-glass {
  background: var(--rfr-glass);
  border: 1px solid var(--rfr-glass-border);
  border-radius: var(--rfr-radius);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--rfr-shadow-sm), inset 0 1px 0 rgba(255,255,255,.8);
  transition: transform .45s var(--rfr-ease), box-shadow .45s ease, border-color .45s ease;
}
.rfr-glass:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: var(--rfr-shadow-lg);
  border-color: rgba(35, 128, 185, 0.35);
}

/* mouse-follow spotlight inside cards */
.rfr-spot { position: relative; overflow: hidden; }
.rfr-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
      rgba(35, 128, 185, 0.13), rgba(37, 183, 134, 0.07) 45%, transparent 70%);
}
.rfr-spot:hover::after { opacity: 1; }
.rfr-spot > * { position: relative; z-index: 1; }

/* gradient icon bubble */
.rfr-icon-bubble {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
  box-shadow: 0 10px 26px -8px rgba(35, 128, 185, 0.65), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .5s var(--rfr-ease);
}
.rfr-icon-bubble.alt-1 { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); box-shadow: 0 10px 26px -8px rgba(22,53,111,.6), inset 0 1px 0 rgba(255,255,255,.35); }
.rfr-icon-bubble.alt-3 { background: linear-gradient(135deg, var(--brand-3), var(--brand-2)); box-shadow: 0 10px 26px -8px rgba(37,183,134,.6), inset 0 1px 0 rgba(255,255,255,.35); }
.rfr-glass:hover .rfr-icon-bubble { transform: rotate(-8deg) scale(1.1) translateY(-2px); }

/* floating icon animation */
@keyframes rfr-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.rfr-floaty { animation: rfr-float 4.5s ease-in-out infinite; will-change: transform; }

/*--------------------------------------------------------------
# 3. WHAT WE DO — static grid
--------------------------------------------------------------*/
#about.rfr-about { padding-bottom: 90px; }

.rfr-mcard {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--rfr-radius);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(35, 128, 185, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--rfr-shadow-sm);
  transition: transform .5s var(--rfr-ease), box-shadow .5s ease, border-color .5s ease;
}
/* animated RGB-style brand glow behind hovered card */
.rfr-mcard::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%; left: 50%;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      var(--brand-2), var(--brand-3), var(--brand-1),
      var(--brand-2), var(--brand-3), var(--brand-2));
  filter: blur(34px);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: opacity .5s ease;
  animation: rfr-glow-spin 5s linear infinite;
  animation-play-state: paused;
  will-change: transform;
  pointer-events: none;
}
@keyframes rfr-glow-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.rfr-mcard:hover {
  transform: translateY(-12px) scale(1.03);
  border-color: rgba(37, 183, 134, 0.4);
  box-shadow: 0 30px 70px -18px rgba(22, 53, 111, 0.35);
}
.rfr-mcard:hover::before { opacity: 0.55; animation-play-state: running; }
.rfr-mcard.is-active-target {
  transform: translateY(-12px) scale(1.04);
  border-color: rgba(37, 183, 134, 0.54);
  box-shadow: 0 32px 78px -18px rgba(22, 53, 111, 0.38);
}
.rfr-mcard.is-active-target::before {
  opacity: 0.55;
  animation-play-state: running;
}
.rfr-mcard[id] {
  scroll-margin-top: 130px;
}

.rfr-mcard .rfr-mcard-icon {
  width: 54px; height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 1.45rem;
  color: #fff;
  margin-bottom: 16px;
  box-shadow: 0 10px 22px -8px rgba(22, 53, 111, 0.5);
}
.rfr-mcard h3 { color: var(--rfr-ink-2); font-weight: 700; }
.rfr-mcard .rfr-mcard-desc { color: var(--rfr-muted); line-height: 1.55; }
.rfr-mcard-explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-2);
  pointer-events: none; /* purely a visual affordance — let clicks fall through to the stretched-link below */
}
.rfr-mcard:hover .rfr-mcard-explore { color: var(--brand-3-deep); }
.rfr-mcard:hover .rfr-mcard-explore i { transform: translateX(3px); }
/* .rfr-spot > * forces position:relative on every direct child (to sit above the
   glow overlay) — but that turns the empty stretched-link <a> into its own 0x0
   containing block, so its ::after can't stretch to cover the card. Let it stay
   static so the overlay stretches to the nearest positioned ancestor (.rfr-mcard). */
.rfr-spot > .stretched-link { position: static; }
.rfr-mcard-explore i { transition: transform .25s ease; }

/* premium callouts inside marquee cards */
.rfr-callout {
  border-radius: 14px;
  padding: 13px 15px;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(242,248,252,.9));
  border: 1px solid rgba(35, 128, 185, 0.12);
  border-left-width: 3px;
}
.rfr-callout .rfr-callout-label {
  display: block;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  margin-bottom: 4px;
}
.rfr-callout p { font-size: 0.8rem; line-height: 1.35; color: var(--rfr-ink-2); font-weight: 600; }
.rfr-callout.rfr-callout-soft { background: rgba(246, 250, 253, 0.85); }
.rfr-callout.rfr-callout-soft p { color: #4d6084; font-weight: 500; font-size: 0.75rem; }

/* per-card accents (brand trio + a deep-blue variant) */
.rfr-mcard.tone-a .rfr-mcard-icon { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); }
.rfr-mcard.tone-a .rfr-callout { border-left-color: var(--brand-1); }
.rfr-mcard.tone-a .rfr-callout-label { color: var(--brand-1); }
.rfr-mcard.tone-b .rfr-mcard-icon { background: linear-gradient(135deg, var(--brand-3), var(--brand-3-deep)); }
.rfr-mcard.tone-b .rfr-callout { border-left-color: var(--brand-3); }
.rfr-mcard.tone-b .rfr-callout-label { color: var(--brand-3-deep); }
.rfr-mcard.tone-c .rfr-mcard-icon { background: linear-gradient(135deg, var(--brand-2), var(--brand-2-deep)); }
.rfr-mcard.tone-c .rfr-callout { border-left-color: var(--brand-2); }
.rfr-mcard.tone-c .rfr-callout-label { color: var(--brand-2-deep); }
.rfr-mcard.tone-d .rfr-mcard-icon { background: linear-gradient(135deg, var(--brand-2), var(--brand-3)); }
.rfr-mcard.tone-d .rfr-callout { border-left-color: var(--brand-3); }
.rfr-mcard.tone-d .rfr-callout-label { color: var(--brand-2-deep); }

/*--------------------------------------------------------------
# 4. ENTERPRISE EXPERTISE — glass + network ambience
--------------------------------------------------------------*/
/* Enterprise Expertise — technology Lottie motion panel (header right side)
   frameless: the animation floats directly on the section background */
.rfr-ee-visual {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.rfr-ee-lottie {
  width: 100%;
  aspect-ratio: 16 / 10;
}
.rfr-ee-lottie svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
  filter: drop-shadow(0 26px 44px rgba(22, 53, 111, 0.16));
}
.rfr-ee-visual-chip {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-1);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(35, 128, 185, 0.18);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -14px rgba(22, 53, 111, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .rfr-ee-visual::before { animation: none; }
}

/* the two decoupled engines — intro mini cards */
.rfr-engine-card {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(35, 128, 185, 0.13);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -14px rgba(22, 53, 111, 0.18);
  transition: transform .35s var(--rfr-ease), box-shadow .35s ease, border-color .35s ease;
}
.rfr-engine-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37, 183, 134, 0.35);
  box-shadow: 0 18px 40px -16px rgba(22, 53, 111, 0.28);
}

#enterprise-expertise .rfr-ee-card {
  background: var(--rfr-glass);
  border: 1px solid rgba(35, 128, 185, 0.13) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--rfr-shadow-sm) !important;
  transition: transform .45s var(--rfr-ease), box-shadow .45s ease, border-color .45s ease;
  position: relative;
  overflow: hidden;
}
#enterprise-expertise .rfr-ee-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rfr-grad);
  background-size: 200% 100%;
  animation: rfr-divider-flow 4s linear infinite;
  opacity: 0;
  transition: opacity .4s ease;
}
#enterprise-expertise .rfr-ee-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--rfr-shadow-lg) !important;
  border-color: rgba(37, 183, 134, 0.35) !important;
}
#enterprise-expertise .rfr-ee-card:hover::before { opacity: 1; }

.rfr-banner-pill {
  position: relative;
  border-radius: 60px;
  padding: 16px 30px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 14px 44px -14px rgba(22, 53, 111, 0.3);
  overflow: hidden;
}
.rfr-banner-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 60px;
  padding: 1.5px;
  background: var(--rfr-grad);
  background-size: 220% 100%;
  animation: rfr-divider-flow 4.5s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/*--------------------------------------------------------------
# 5. VISION & MISSION + CORE VALUES
--------------------------------------------------------------*/
#vision-mission { position: relative; }

#vision-mission .section-title h2 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
}

/* heading backdrop illustration (compass/network) */
.rfr-vm-heading-art {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 170px;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

/* vision / mission glass cards */
.rfr-vm-card {
  position: relative;
  height: 100%;
  padding: 44px 40px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--rfr-shadow-md), inset 0 1px 0 rgba(255,255,255,.9);
  overflow: hidden;
  transition: transform .5s var(--rfr-ease), box-shadow .5s ease, border-color .5s ease;
}
.rfr-vm-card:hover {
  transform: translateY(-9px) scale(1.012);
  box-shadow: var(--rfr-shadow-lg);
}
/* animated glowing left border */
.rfr-vm-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background-size: 100% 250%;
  animation: rfr-border-flow 4s linear infinite;
}
@keyframes rfr-border-flow {
  from { background-position: 0 0; }
  to   { background-position: 0 250%; }
}
.rfr-vm-vision::before {
  background-image: linear-gradient(180deg, var(--brand-2), var(--brand-1), var(--brand-2), var(--brand-2));
  box-shadow: 2px 0 18px rgba(35, 128, 185, 0.55);
}
.rfr-vm-mission::before {
  background-image: linear-gradient(180deg, var(--brand-3), var(--brand-3-deep), var(--brand-3), var(--brand-3));
  box-shadow: 2px 0 18px rgba(37, 183, 134, 0.55);
}
.rfr-vm-vision:hover { border-color: rgba(35, 128, 185, 0.4); }
.rfr-vm-mission:hover { border-color: rgba(37, 183, 134, 0.4); }

.rfr-vm-icon {
  width: 64px; height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  flex-shrink: 0;
  transition: transform .6s var(--rfr-ease);
}
.rfr-vm-icon svg { width: 30px; height: 30px; }
.rfr-vm-vision .rfr-vm-icon { background: linear-gradient(135deg, var(--brand-2), var(--brand-1)); box-shadow: 0 12px 30px -8px rgba(35,128,185,.7); }
.rfr-vm-mission .rfr-vm-icon { background: linear-gradient(135deg, var(--brand-3), var(--brand-3-deep)); box-shadow: 0 12px 30px -8px rgba(37,183,134,.7); }
.rfr-vm-card:hover .rfr-vm-icon { transform: rotate(-10deg) scale(1.08); }

.rfr-vm-card h3 { font-weight: 700; color: var(--rfr-ink-2); }
.rfr-vm-card .lead { color: #43567b !important; font-size: 1.06rem; line-height: 1.65; }

/* Vision → Mission connector (desktop) */
.rfr-vm-connector {
  display: none;
}
@media (min-width: 992px) {
  .rfr-vm-connector {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 2px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, var(--brand-2), var(--brand-3));
    background-size: 200% 100%;
    animation: rfr-divider-flow 2.4s linear infinite;
    z-index: 3;
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(35, 128, 185, 0.5);
  }
  .rfr-vm-connector::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 9px; height: 9px;
    border-top: 2px solid var(--brand-3);
    border-right: 2px solid var(--brand-3);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* five-step mission strip */
.rfr-step-card {
  position: relative;
  border-radius: 18px !important;
  border: 1px solid rgba(35, 128, 185, 0.14) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--rfr-shadow-sm);
  transition: transform .4s var(--rfr-ease), box-shadow .4s ease, border-color .4s ease;
  overflow: hidden;
}
.rfr-step-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rfr-grad);
  background-size: 220% 100%;
  animation: rfr-divider-flow 3.6s linear infinite;
}
.rfr-step-card:hover {
  transform: translateY(-6px);
  border-color: rgba(37, 183, 134, 0.4) !important;
  box-shadow: var(--rfr-shadow-md);
}
.rfr-step-card > div:first-of-type {
  font-family: var(--rfr-display);
  background: linear-gradient(92deg, var(--brand-2), var(--brand-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rfr-step-card small { color: var(--rfr-muted); }
.rfr-step-arrow { color: var(--brand-2) !important; opacity: .55; animation: rfr-arrow-nudge 1.8s ease-in-out infinite; will-change: transform; }
@keyframes rfr-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
@media (max-width: 768px) {
  .rfr-step-arrow { transform: rotate(90deg); }
  @keyframes rfr-arrow-nudge {
    0%, 100% { transform: rotate(90deg) translateX(0); }
    50%      { transform: rotate(90deg) translateX(5px); }
  }
}

/* --- core values --- */
.rfr-values-row { position: relative; }
/* dotted continuity path behind cards */
@media (min-width: 1200px) {
  .rfr-values-row::before {
    content: "";
    position: absolute;
    top: 58%;
    left: 4%;
    right: 4%;
    border-top: 2px dashed rgba(35, 128, 185, 0.22);
    z-index: 0;
  }
}
.rfr-value-card {
  position: relative;
  height: 100%;
  padding: 30px 26px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--rfr-shadow-sm);
  transition: transform .5s var(--rfr-ease), box-shadow .5s ease, border-color .5s ease;
  overflow: hidden;
}
.rfr-value-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rfr-grad);
  background-size: 240% 100%;
  animation: rfr-divider-flow 4.2s linear infinite;
  opacity: .85;
}
.rfr-value-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: rgba(35, 128, 185, 0.35);
  box-shadow: var(--rfr-shadow-lg);
}
.rfr-value-card .rfr-icon-bubble { width: 58px; height: 58px; font-size: 1.4rem; margin-bottom: 18px; }
.rfr-value-card:hover .rfr-icon-bubble { transform: rotate(-10deg) scale(1.12); }
.rfr-value-card h4 { color: var(--rfr-ink-2); font-weight: 700; }

/* section-level cursor glow */
.rfr-cursor-glow {
  position: absolute;
  z-index: 0;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(35,128,185,.10), rgba(37,183,134,.06) 45%, transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .5s ease;
  will-change: transform;
}
#vision-mission:hover .rfr-cursor-glow { opacity: 1; }

/*--------------------------------------------------------------
# 7. WHY PARTNER WITH US — comparison table
--------------------------------------------------------------*/
.rfr-compare-wrap {
  overflow-x: auto;
  border-radius: var(--rfr-radius);
  box-shadow: var(--rfr-shadow-md);
  background: #fff;
}
.rfr-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font-family: var(--rfr-body);
}
.rfr-compare-table thead th {
  padding: 20px 24px;
  font-family: var(--rfr-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: left;
  border-bottom: 2px solid var(--rfr-line);
}
.rfr-compare-table thead .rfr-compare-old { color: var(--rfr-muted); }
.rfr-compare-table thead .rfr-compare-new {
  background: linear-gradient(95deg, var(--brand-1) 15%, var(--brand-2) 60%, var(--brand-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rfr-compare-table td {
  padding: 18px 24px;
  vertical-align: top;
  font-size: 0.92rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--rfr-line);
}
.rfr-compare-table tbody tr:last-child td { border-bottom: none; }
.rfr-compare-table tbody tr:hover { background: var(--brand-2-050); }
.rfr-compare-label {
  font-weight: 700;
  color: var(--rfr-ink-2);
  white-space: nowrap;
  width: 160px;
}
.rfr-compare-old {
  color: var(--rfr-muted);
  width: 34%;
}
.rfr-compare-old i { color: #b0473f; margin-right: 8px; } /* neutral negative indicator, not a brand accent */
.rfr-compare-new {
  color: var(--rfr-ink-2);
  font-weight: 500;
}
.rfr-compare-new i { color: var(--brand-3); margin-right: 8px; }
@media (max-width: 767.98px) {
  .rfr-compare-table thead .rfr-compare-label { display: none; }
  .rfr-compare-label { display: none; }
  .rfr-compare-table, .rfr-compare-table tbody, .rfr-compare-table tr, .rfr-compare-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .rfr-compare-table thead { display: none; }
  .rfr-compare-table tbody tr {
    padding: 16px 20px;
    border-bottom: 1px solid var(--rfr-line);
  }
  .rfr-compare-table td { padding: 4px 0; border: none; }
  .rfr-compare-old::before { content: "Traditional: "; font-weight: 700; }
  .rfr-compare-new::before { content: "ReadyForRole: "; font-weight: 700; display: block; margin-top: 6px; }
}

/*--------------------------------------------------------------
# 8. SERVICES — pinned horizontal showcase
--------------------------------------------------------------*/
#services.rfr-services { overflow: clip; }

.rfr-svc-progress {
  position: relative;
  height: 4px;
  max-width: 420px;
  margin: 26px auto 0;
  border-radius: 4px;
  background: rgba(35, 128, 185, 0.14);
  overflow: hidden;
}
.rfr-svc-progress i {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--rfr-grad);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* default (mobile / reduced motion): vertical stack */
.rfr-svc-track {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.rfr-svc-slide { width: 100%; }

/* horizontal mode gets applied by JS on desktop */
.rfr-svc-horizontal .rfr-svc-track {
  flex-direction: row;
  align-items: stretch;
  width: max-content;
  gap: 36px;
  padding: 8px 4px 24px;
}
.rfr-svc-horizontal .rfr-svc-slide {
  width: min(660px, 78vw);
  flex-shrink: 0;
  display: flex;
}

.rfr-svc-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 34px 34px 28px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px) saturate(145%);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  box-shadow: 0 6px 30px -10px rgba(22, 53, 111, 0.14), inset 0 1px 0 rgba(255,255,255,.85);
  overflow: hidden;
  transition: transform .5s var(--rfr-ease), box-shadow .5s ease, border-color .5s ease;
}
.rfr-svc-horizontal .rfr-svc-card {
  max-height: 74vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(35,128,185,.35) transparent;
}
.rfr-svc-card::-webkit-scrollbar { width: 6px; }
.rfr-svc-card::-webkit-scrollbar-thumb { background: rgba(35,128,185,.3); border-radius: 6px; }
.rfr-svc-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--rfr-shadow-lg);
}
.rfr-svc-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--svc-accent-grad, var(--rfr-grad));
  background-size: 200% 100%;
  animation: rfr-divider-flow 4.4s linear infinite;
}
.rfr-svc-card:hover { border-color: var(--svc-accent-soft, rgba(35,128,185,.35)); }

/* per-service accents — strictly brand trio permutations */
.svc-tone-1 { --svc-accent: var(--brand-1);      --svc-accent-grad: linear-gradient(90deg, var(--brand-1), var(--brand-2)); --svc-accent-soft: rgba(22,53,111,.35);  --svc-accent-bg: rgba(22,53,111,.07); }
.svc-tone-2 { --svc-accent: var(--brand-3-deep); --svc-accent-grad: linear-gradient(90deg, var(--brand-3), var(--brand-3-deep)); --svc-accent-soft: rgba(37,183,134,.4);  --svc-accent-bg: rgba(37,183,134,.08); }
.svc-tone-3 { --svc-accent: var(--brand-2);      --svc-accent-grad: linear-gradient(90deg, var(--brand-2), var(--brand-3)); --svc-accent-soft: rgba(35,128,185,.4);  --svc-accent-bg: rgba(35,128,185,.08); }
.svc-tone-4 { --svc-accent: var(--brand-2-deep); --svc-accent-grad: linear-gradient(90deg, var(--brand-2-deep), var(--brand-2)); --svc-accent-soft: rgba(23,93,135,.4);   --svc-accent-bg: rgba(23,93,135,.08); }
.svc-tone-5 { --svc-accent: var(--brand-1-800);  --svc-accent-grad: linear-gradient(90deg, var(--brand-1-800), var(--brand-3)); --svc-accent-soft: rgba(17,42,88,.35);   --svc-accent-bg: rgba(17,42,88,.07); }
.svc-tone-6 { --svc-accent: var(--brand-3);      --svc-accent-grad: linear-gradient(90deg, var(--brand-3), var(--brand-2)); --svc-accent-soft: rgba(37,183,134,.4);  --svc-accent-bg: rgba(37,183,134,.08); }

.rfr-svc-icon {
  width: 58px; height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.4rem;
  color: #fff;
  background: var(--svc-accent-grad, var(--rfr-grad));
  box-shadow: 0 12px 28px -10px var(--svc-accent-soft, rgba(35,128,185,.5)), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .55s var(--rfr-ease);
  flex-shrink: 0;
}
.rfr-svc-card:hover .rfr-svc-icon { transform: rotate(-9deg) scale(1.1); }
.rfr-svc-card h3 { color: var(--rfr-ink-2); }

.rfr-svc-tag {
  font-size: 0.73rem !important;
  font-weight: 600 !important;
  color: var(--svc-accent, var(--brand-2)) !important;
  background: var(--svc-accent-bg, rgba(35,128,185,.07)) !important;
  border: 1px solid var(--svc-accent-soft, rgba(35,128,185,.25)) !important;
  border-radius: 50px !important;
  padding: 6px 14px !important;
}

.rfr-svc-target {
  border-radius: 14px;
  padding: 12px 15px;
  background: rgba(246, 250, 253, 0.9);
  border: 1px solid rgba(35, 128, 185, 0.1);
}
.rfr-svc-challenge {
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(22,53,111,.05), rgba(35,128,185,.05)) !important;
  border-left: 3px solid var(--svc-accent, var(--brand-1)) !important;
}
.rfr-svc-card .focus-pill {
  background: var(--svc-accent-grad, var(--rfr-grad)) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 22px -8px var(--svc-accent-soft, rgba(35,128,185,.5));
}
.rfr-svc-card .btn-methodology-zone button,
.rfr-svc-card .methodology-zone button {
  border-radius: 12px !important;
  border: 1px solid rgba(35, 128, 185, 0.2) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  color: var(--rfr-ink-2) !important;
  transition: border-color .3s ease, box-shadow .3s ease !important;
}
.rfr-svc-card .methodology-zone button:hover {
  border-color: var(--svc-accent-soft, rgba(35,128,185,.45)) !important;
  box-shadow: 0 6px 18px -8px var(--svc-accent-soft, rgba(35,128,185,.45));
}
.rfr-svc-card .method-content {
  border-radius: 14px !important;
  background: rgba(246, 250, 253, 0.9) !important;
  border: 1px solid rgba(35, 128, 185, 0.12) !important;
}

/* Small services grid — home page teaser cards */
.rfr-svc-mini {
  position: relative;
  border-radius: 18px;
  padding: 1.5px; /* gradient border thickness */
  background: linear-gradient(120deg,
    var(--brand-1) 0%, var(--brand-2) 25%, var(--brand-3) 50%, var(--brand-2) 75%, var(--brand-1) 100%);
  background-size: 300% 300%;
  background-position: 0% 50%;
  height: 100%;
  transition: background-position 1s var(--rfr-ease), transform .35s var(--rfr-ease), box-shadow .35s ease;
}
.rfr-svc-mini:hover {
  background-position: 100% 50%;
  transform: translateY(-6px);
  box-shadow: 0 22px 46px -18px rgba(22, 53, 111, 0.4);
}
.rfr-svc-mini-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16.5px;
  padding: 28px 24px;
  height: 100%;
  overflow: hidden;
  transition: background .45s ease;
}
/* subtle tinted wash on hover so the card itself visibly reacts, not just the border */
.rfr-svc-mini:hover .rfr-svc-mini-inner {
  background: linear-gradient(160deg, #ffffff 55%, var(--brand-2-050) 100%);
}
.rfr-svc-mini-inner .rfr-icon-bubble {
  transition: transform .45s var(--rfr-ease), box-shadow .35s ease;
}
.rfr-svc-mini:hover .rfr-icon-bubble {
  transform: scale(1.08) rotate(-6deg);
  box-shadow: 0 14px 30px -8px rgba(35, 128, 185, 0.55);
}
.rfr-svc-mini-inner h3 {
  transition: color .3s ease;
}
.rfr-svc-mini:hover .rfr-svc-mini-inner h3 {
  color: var(--brand-2) !important;
}
/* shine sweep */
.rfr-svc-mini-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-20deg);
  transition: left .85s var(--rfr-ease);
  pointer-events: none;
  z-index: 1;
}
.rfr-svc-mini:hover .rfr-svc-mini-inner::before {
  left: 130%;
}
.rfr-svc-mini-inner > * {
  position: relative;
  z-index: 2;
}
.rfr-svc-mini-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--brand-2);
  text-decoration: none;
  transition: gap .25s ease, color .25s ease;
}
.rfr-svc-mini-link i { transition: transform .25s ease; }
.rfr-svc-mini-link:hover {
  color: var(--brand-3-deep);
  gap: 10px;
}
.rfr-svc-mini-link:hover i { transform: translateX(3px); }
.rfr-svc-mini-cta {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff !important;
  background: linear-gradient(90deg, var(--brand-2), var(--brand-3));
  border-radius: 50px;
  padding: 6px 14px;
  text-decoration: none;
  box-shadow: 0 6px 16px -6px rgba(35, 128, 185, 0.5);
  transition: transform .3s ease, box-shadow .3s ease;
}
.rfr-svc-mini-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -6px rgba(37, 183, 134, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .rfr-svc-mini-inner::before { display: none; }
  .rfr-svc-mini, .rfr-svc-mini:hover { transition: none; background-position: 0% 50%; }
}

/*--------------------------------------------------------------
# 8b. SERVICE SUBPAGES — business challenge cards & process steps
--------------------------------------------------------------*/
.rfr-problem-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  padding: 28px 30px 26px 32px;
  box-shadow: var(--rfr-shadow-sm);
  border: 1px solid var(--rfr-line);
  transition: transform .4s var(--rfr-ease), box-shadow .4s ease, border-color .4s ease;
}
.rfr-problem-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
  transition: width .35s var(--rfr-ease);
}
.rfr-problem-card:has(.rfr-problem-tag.tone-b)::before {
  background: linear-gradient(180deg, var(--brand-2), var(--brand-3));
}
.rfr-problem-card::after {
  content: counter(rfr-problem-index, decimal-leading-zero);
  position: absolute;
  top: 6px;
  right: 18px;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-1);
  opacity: 0.06;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.rfr-problem-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--rfr-shadow-lg);
  border-color: rgba(35, 128, 185, 0.22);
}
.rfr-problem-card:hover::before {
  width: 6px;
}
.rfr-problem-card:hover::after {
  opacity: 0.12;
  transform: translateY(-2px);
}
.row:has(> * > .rfr-problem-card) {
  counter-reset: rfr-problem-index;
}
.rfr-problem-card {
  counter-increment: rfr-problem-index;
}
.rfr-problem-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-2-deep);
  margin-bottom: 12px;
}
.rfr-problem-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 0 0 4px var(--brand-2-050);
}
.rfr-problem-tag.tone-b {
  color: var(--brand-3-deep);
}
.rfr-problem-tag.tone-b::before {
  background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
  box-shadow: 0 0 0 4px var(--brand-3-050);
}
.rfr-problem-body {
  padding: 0;
  flex: 1;
  position: relative;
  z-index: 1;
}
.rfr-problem-body p {
  line-height: 1.7;
}
.rfr-problem-body strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #132a47;
  margin-bottom: 3px;
}

.rfr-step-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2), var(--brand-3));
  box-shadow: 0 10px 24px -8px rgba(35, 128, 185, 0.5);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  transition: transform .35s var(--rfr-ease), box-shadow .35s ease;
}
.rfr-process-step:hover .rfr-step-icon {
  transform: scale(1.1);
  box-shadow: 0 14px 30px -6px rgba(37, 183, 134, 0.6);
}
@media (min-width: 768px) {
  .rfr-process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 27px;
    left: 60%;
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-2), var(--brand-3));
    opacity: 0.35;
    z-index: 0;
  }
}
/* mobile: switch to a vertical timeline instead of a cramped horizontal row */
@media (max-width: 767.98px) {
  .rfr-process-track {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
    padding-left: 34px;
  }
  .rfr-process-track::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg, var(--brand-1), var(--brand-2), var(--brand-3));
    opacity: 0.35;
  }
  .rfr-process-step {
    text-align: left !important;
  }
  .rfr-step-icon {
    position: absolute;
    left: -34px;
    top: 0;
    margin: 0;
    width: 44px;
    height: 44px;
    font-size: 0.9rem;
  }
  .rfr-process-step h3,
  .rfr-process-step p {
    margin-left: 20px;
  }
}

/*--------------------------------------------------------------
# 9. CONNECT WITH US — bento contact hub
--------------------------------------------------------------*/
#contact.rfr-contact { position: relative; }

/* world-presence dotted watermark */
.rfr-worldmap {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.35;
  pointer-events: none;
  background-image: radial-gradient(rgba(35, 128, 185, 0.22) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000, transparent 75%);
}

.rfr-contact-bento {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "call call call cta  cta  cta"
    "mail mail office office office office";
}
@media (max-width: 991.98px) {
  .rfr-contact-bento {
    grid-template-columns: 1fr;
    grid-template-areas: "call" "cta" "mail" "office";
  }
}
.rfr-contact-bento .c-call   { grid-area: call; }
.rfr-contact-bento .c-cta    { grid-area: cta; }
.rfr-contact-bento .c-mail   { grid-area: mail; }
.rfr-contact-bento .c-office { grid-area: office; }

.rfr-contact-card {
  position: relative;
  height: 100%;
  padding: 34px 30px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--rfr-shadow-sm);
  overflow: hidden;
  transition: transform .5s var(--rfr-ease), box-shadow .5s ease, border-color .5s ease;
}
.rfr-contact-card:hover {
  transform: translateY(-8px) scale(1.014);
  box-shadow: var(--rfr-shadow-lg);
  border-color: rgba(35, 128, 185, 0.35);
}
.rfr-contact-card h6 { color: var(--rfr-ink-2); font-weight: 700; font-size: 1.05rem; }

/* featured primary card */
.rfr-contact-card.featured-contact {
  background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(240,251,247,.85));
}
.rfr-contact-card.featured-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1.5px;
  background: var(--rfr-grad);
  background-size: 240% 100%;
  animation: rfr-divider-flow 5s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .6;
  pointer-events: none;
}
.rfr-contact-card .rfr-icon-bubble { margin: 0 auto 16px; }
.rfr-contact-card .rfr-contact-value { color: var(--brand-2-deep); font-weight: 600; }
.featured-contact .rfr-contact-value { color: var(--brand-3-deep); font-size: 1.06rem; }

/* office card map embed */
.rfr-map-embed {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--rfr-line);
  box-shadow: var(--rfr-shadow-sm);
}
.rfr-map-embed iframe {
  filter: saturate(0.9);
  transition: filter .3s ease;
}
.rfr-contact-card:hover .rfr-map-embed iframe {
  filter: saturate(1.05);
}
.rfr-map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-2);
  text-decoration: none;
  transition: color .25s ease, gap .25s ease;
}
.rfr-map-link:hover {
  color: var(--brand-3-deep);
  gap: 10px;
}

/* CTA card gradient panel */
.rfr-contact-card.c-cta {
  background: linear-gradient(145deg, var(--brand-1) 0%, var(--brand-1-800) 45%, var(--brand-2-deep) 100%);
  border-color: rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.rfr-contact-card.c-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 70% 20%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 20%, #000, transparent 70%);
  pointer-events: none;
}
.rfr-contact-card.c-cta h6 { color: #fff; font-size: 1.3rem; }
.rfr-contact-card.c-cta p { color: rgba(255, 255, 255, 0.75); }
.rfr-cta-btn.rfr-cta-sm { padding: 13px 28px; border-radius: 50px; display: inline-flex; align-items: center; gap: 8px; }

/*--------------------------------------------------------------
# Motion safety — respect prefers-reduced-motion
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  :root { scroll-behavior: auto; }
  .rfr-reveal-stage .rfr-reveal-img {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .rfr-logo-hotspot, .rfr-reveal-stage::after { display: none !important; }
  .rfr-gs-hidden { opacity: 1; visibility: visible; }
}

/*--------------------------------------------------------------
# HERO RIGHT — transformation journey illustration
--------------------------------------------------------------*/
.rfr-journey-stage {
  position: relative;
  display: inline-block;
  width: min(100%, 580px);
  isolation: isolate;
}
.rfr-journey-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 34px 60px rgba(22, 53, 111, 0.14));
}
@media (max-width: 991.98px) {
  .rfr-journey-stage { width: min(100%, 480px); margin-inline: auto; }
}
/* desktop: clear the fixed navbar and keep the full journey (step 01 to 07) inside the fold */
@media (min-width: 992px) {
  .hero.rfr-hero {
    padding-top: 112px !important;
    padding-bottom: 20px !important;
  }
  /* 0.7525 = viewBox aspect (760 / 1010); caps the art so its full height fits the viewport */
  .rfr-journey-stage {
    width: min(100%, 580px, calc((100vh - 210px) * 0.7525));
  }
}

/* --- journey micro-animations (scoped to the SVG) --- */
.rfr-journey-svg .rfrj-fl-a { animation: rfrj-float 6s ease-in-out infinite; }
.rfr-journey-svg .rfrj-fl-b { animation: rfrj-float 7s ease-in-out -1.8s infinite; }
.rfr-journey-svg .rfrj-fl-c { animation: rfrj-float 8s ease-in-out -3.4s infinite; }
@keyframes rfrj-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.rfr-journey-svg .rfrj-dash {
  stroke-dasharray: 3 11;
  animation: rfrj-dash 2.6s linear infinite;
}
@keyframes rfrj-dash { to { stroke-dashoffset: -140; } }
.rfr-journey-svg .rfrj-orbit { animation: rfrj-spin 42s linear infinite; }
.rfr-journey-svg .rfrj-orb {
  transform-box: fill-box;
  transform-origin: center;
  animation: rfrj-spin-r 42s linear infinite;
}
@keyframes rfrj-spin   { to { transform: rotate(360deg); } }
@keyframes rfrj-spin-r { to { transform: rotate(-360deg); } }
.rfr-journey-svg .rfrj-scan { animation: rfrj-scan 3.2s ease-in-out infinite alternate; }
@keyframes rfrj-scan {
  from { transform: translateY(-58px); }
  to   { transform: translateY(58px); }
}
.rfr-journey-svg .rfrj-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: rfrj-pulse-ring 3s ease-out infinite;
}
@keyframes rfrj-pulse-ring {
  0%   { transform: scale(0.86); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1.14); opacity: 0; }
}
.rfr-journey-svg .rfrj-tw { animation: rfrj-twinkle 4.5s ease-in-out infinite; }
@keyframes rfrj-twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.9; }
}
.rfr-journey-svg .rfrj-cf { animation: rfrj-confetti 5.5s linear infinite; }
@keyframes rfrj-confetti {
  0%   { transform: translateY(-8px) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translateY(66px) rotate(200deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rfr-journey-svg * { animation: none !important; }
}

/*--------------------------------------------------------------
# NAVBAR — dark navy brand bar
--------------------------------------------------------------*/
.header.rfr-header::before {
  inset: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 183, 134, 0.16), transparent 34%),
    radial-gradient(circle at 88% 120%, rgba(35, 128, 185, 0.30), transparent 46%),
    linear-gradient(135deg, #0d1b31 0%, #112a58 52%, #16356F 100%);
  box-shadow: 0 16px 42px -24px rgba(13, 27, 49, 0.9);
}
.scrolled .header.rfr-header::before {
  inset: 0;
  border-radius: 0;
  border-color: rgba(255, 255, 255, 0.10);
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 183, 134, 0.14), transparent 34%),
    radial-gradient(circle at 88% 120%, rgba(35, 128, 185, 0.26), transparent 46%),
    linear-gradient(135deg, rgba(13, 27, 49, 0.94) 0%, rgba(17, 42, 88, 0.94) 52%, rgba(22, 53, 111, 0.94) 100%);
  box-shadow: 0 18px 48px -22px rgba(13, 27, 49, 0.95);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.scrolled .header.rfr-header { border-bottom-color: transparent; }

/* brand lockup readable on navy */
.rfr-header .rfr-brand-name .rfr-nm-1 { color: #ffffff; }
.rfr-header .rfr-brand-name .rfr-nm-2 { color: #5bb8e8; }
.rfr-header .rfr-brand-name .rfr-nm-3 { color: #3fd6a3; }
.rfr-header .rfr-brand-tag { color: rgba(255, 255, 255, 0.72) !important; }
.rfr-header .logo img { filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.35)); }

/*--------------------------------------------------------------
# FOOTER — mirrors the navy header bar
--------------------------------------------------------------*/
.footer.rfr-footer {
  position: relative;
  color: #cbd5e1;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 183, 134, 0.16), transparent 34%),
    radial-gradient(circle at 88% 120%, rgba(35, 128, 185, 0.30), transparent 46%),
    linear-gradient(135deg, #0d1b31 0%, #112a58 52%, #16356F 100%);
  box-shadow: 0 -16px 42px -24px rgba(13, 27, 49, 0.9);
}
.footer.rfr-footer .rfr-brand-name .rfr-nm-1 { color: #ffffff; }
.footer.rfr-footer .rfr-brand-name .rfr-nm-2 { color: #5bb8e8; }
.footer.rfr-footer .rfr-brand-name .rfr-nm-3 { color: #3fd6a3; }
.footer.rfr-footer .logo img { filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.35)); }
.footer.rfr-footer .copyright { color: rgba(255, 255, 255, 0.78); }

/*--------------------------------------------------------------
# HERO BANNER — full-width photo carousel
--------------------------------------------------------------*/
.rfr-hero-banner {
  position: relative;
  padding: 0 !important;
  margin: 0;
  overflow: hidden;
}
.rfr-hero-banner .carousel,
.rfr-hero-banner .carousel-inner,
.rfr-hero-banner .carousel-item {
  height: 100vh;
  min-height: 660px;
}
/* soft hand-off into the light section below */
.rfr-hero-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(248, 252, 255, 0.9));
}
.rfr-banner-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* slow cinematic zoom on the active slide */
.rfr-hero-banner .carousel-item.active .rfr-banner-slide {
  animation: rfr-kenburns 8s ease-out forwards;
}
/* service pages: no bottom fade hand-off, no Ken Burns zoom */
body.service-page .rfr-hero-banner::after {
  display: none;
}
body.service-page .rfr-hero-banner .carousel-item.active .rfr-banner-slide {
  animation: none;
  transform: none;
}
@keyframes rfr-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
/* Slide 0 (intro) — clean photo only: no dark tint, no zoom, no bottom fade */
.rfr-hero-banner .rfr-intro-slide .rfr-banner-overlay {
  display: none !important;
}
.rfr-hero-banner .rfr-intro-slide .rfr-banner-slide {
  animation: none !important;
  transform: none !important;
  background-size: cover !important;
  background-position: center !important;
  width: 100%;
  height: 100%;
}
.rfr-hero-banner:has(.rfr-intro-slide.active)::after {
  display: none !important;
}
.rfr-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(13, 27, 49, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(13, 27, 49, 0.62) 0%, rgba(13, 27, 49, 0.40) 45%, rgba(13, 27, 49, 0.66) 100%);
}
.rfr-banner-content {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  /* sits low enough to keep the photo's subject visible above the headline */
  padding-top: clamp(170px, 32vh, 340px);
  pointer-events: none;
}
.rfr-banner-content a { pointer-events: auto; }
.rfr-banner-title {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  max-width: 1050px;
  margin: 0 auto;
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.5);
}
.rfr-banner-sub {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  line-height: 1.55;
  max-width: 820px;
  margin: 18px auto 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
/* glass kicker pill above the headline */
.rfr-banner-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  padding: 9px 20px;
  margin-bottom: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.rfr-banner-kicker .bi { color: #3fd6a3; }
/* bright brand gradient on the headline keyword */
.rfr-banner-grad {
  background: linear-gradient(92deg, #5bb8e8 0%, #3fd6a3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* secondary ghost CTA */
.rfr-banner-btn-ghost {
  color: #ffffff;
  font-weight: 600;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .3s ease;
}
.rfr-banner-btn-ghost:hover {
  color: #0d1b31;
  background: #ffffff;
  border-color: #ffffff;
  transform: translateY(-2px);
}
/* glass trust-stats strip */
.rfr-banner-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 46px;
}
.rfr-bstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 150px;
  padding: 14px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(13, 27, 49, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.rfr-bstat strong {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(92deg, #5bb8e8 0%, #3fd6a3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rfr-bstat span {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}
/* staged entrance on page load — text slides up from below */
.rfr-banner-content .container > * {
  animation: rfr-banner-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.15s;
}
.rfr-banner-content .container > *:nth-child(2) { animation-delay: 0.35s; }
.rfr-banner-content .container > *:nth-child(3) { animation-delay: 0.55s; }
.rfr-banner-content .container > *:nth-child(4) { animation-delay: 0.75s; }
.rfr-banner-content .container > *:nth-child(5) { animation-delay: 0.95s; }
@keyframes rfr-banner-rise {
  from { opacity: 0; transform: translateY(80px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rfr-banner-content .container > * { animation: none; }
}
.rfr-banner-dots {
  z-index: 6;
  margin-bottom: 22px;
}
.rfr-banner-dots [data-bs-target] {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.55);
  opacity: 1;
  transition: background-color .3s ease, transform .3s ease;
}
.rfr-banner-dots .active {
  background-color: #25B786;
  transform: scale(1.15);
}
/* Service pages only (body.service-page), all widths: .rfr-banner-overlay
   and .rfr-banner-content are DOM siblings of .carousel-inner (all children
   of .carousel), not nested inside .carousel-item. So .carousel itself
   must be the box whose height is driven by the content — .carousel-inner/
   .carousel-item become the absolutely-positioned photo layer that
   stretches to match. Without this, the shared base rule above
   (.rfr-hero-banner .carousel-item { height: 100vh }) leaves the CTA
   button pinned inside a fixed-height box, so longer headlines (e.g. the
   ITES page, which wraps to 4 lines) push it past the bottom edge and it
   gets clipped/overlapped instead of the hero growing to fit.
   NOTE: the home hero (#home) has a different DOM — .rfr-banner-overlay
   and .rfr-banner-content are nested INSIDE .carousel-item there — so it
   is intentionally excluded here and gets its own rules below. */
body.service-page .rfr-hero-banner .carousel {
  height: auto !important;
  min-height: 100vh !important;
}
body.service-page .rfr-hero-banner .carousel-inner,
body.service-page .rfr-hero-banner .carousel-item {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
body.service-page .rfr-hero-banner .rfr-banner-slide,
body.service-page .rfr-hero-banner .rfr-banner-overlay {
  position: absolute !important;
  inset: 0 !important;
}
body.service-page .rfr-hero-banner .rfr-banner-content {
  position: relative !important;
  display: block !important;
  padding: 130px 20px 90px !important;
}
body.service-page .rfr-hero-banner .rfr-banner-content .container {
  text-align: center;
}
@media (max-width: 767.98px) {
  body.service-page .rfr-hero-banner .carousel {
    min-height: 620px !important;
  }
  body.service-page .rfr-hero-banner .rfr-banner-content {
    padding: 90px 20px 56px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rfr-hero-banner .carousel-item.active .rfr-banner-slide { animation: none; }
}

/*--------------------------------------------------------------
# HOME HERO ONLY (#home.rfr-hero-banner) — content-driven height
# with a min-height floor, so long headlines (e.g. the ITES slide,
# which wraps to 3 lines) grow the hero instead of the buttons
# clipping or overlapping the dots. On the home hero, .rfr-banner-slide/
# .rfr-banner-overlay/.rfr-banner-content are nested INSIDE each
# .carousel-item (unlike service pages), so .carousel-item itself is
# made the content-driven flex box here; no !important needed since
# the #home ID gives these rules higher specificity than the shared
# .rfr-hero-banner rules above. Service-page heroes are untouched.
--------------------------------------------------------------*/
#home.rfr-hero-banner .carousel,
#home.rfr-hero-banner .carousel-inner {
  height: auto;
  min-height: 100vh;
}
#home.rfr-hero-banner .carousel-item {
  position: relative;
  overflow: hidden;
}
/* Only the item(s) Bootstrap actually displays (.active, plus
   .carousel-item-next/-prev during a fade transition) — mirroring
   Bootstrap's own display-toggle selector avoids overriding its
   "display: none" on the other (off-screen) slides. */
#home.rfr-hero-banner .carousel-item.active,
#home.rfr-hero-banner .carousel-item-next,
#home.rfr-hero-banner .carousel-item-prev {
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#home.rfr-hero-banner .rfr-banner-slide,
#home.rfr-hero-banner .rfr-banner-overlay {
  position: absolute;
  inset: 0;
}
#home.rfr-hero-banner .rfr-banner-content {
  position: relative;
  z-index: 2;
  padding: 120px 20px 90px;
}
/* Slides 1 and 4 contain the tallest desktop copy. Balance their
   vertical padding so their CTA row remains safely above the viewport
   edge, matching the visual placement of the other home-hero slides. */
#home.rfr-hero-banner .rfr-hero-compact-slide .rfr-banner-content {
  padding-top: 88px;
  padding-bottom: 72px;
}
#home.rfr-hero-banner .rfr-banner-dots {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  z-index: 6;
}
@media (max-width: 767.98px) {
  #home.rfr-hero-banner .carousel,
  #home.rfr-hero-banner .carousel-inner {
    min-height: 640px;
  }
  #home.rfr-hero-banner .carousel-item.active,
  #home.rfr-hero-banner .carousel-item-next,
  #home.rfr-hero-banner .carousel-item-prev {
    min-height: 640px;
  }
  #home.rfr-hero-banner .rfr-banner-content {
    padding: 100px 20px 80px;
  }
  #home.rfr-hero-banner .rfr-hero-compact-slide .rfr-banner-content {
    padding-top: 78px;
    padding-bottom: 62px;
  }
}

/*--------------------------------------------------------------
# HERO CTA BUTTON ROW (.rfr-hero-cta-group) — shared markup across
# the home hero and all 6 service-page heroes. Centralized here
# (previously duplicated in a per-page <style> block on every page,
# which is also why it could drift/go stale independently of this
# file's cache-busted version query string).
--------------------------------------------------------------*/
.rfr-hero-cta-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.rfr-hero-cta-group > .btn {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  text-align: center;
  line-height: 1.25;
}
.rfr-hero-cta-group > .btn > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 575.98px) {
  .rfr-hero-cta-group {
    gap: 10px;
    max-width: 100%;
  }
  .rfr-hero-cta-group > .btn {
    white-space: normal;
    padding: 12px 14px !important;
    font-size: 0.9rem;
  }
}
/* Below ~400px this used to force each button onto its own
   full-width row (flex-wrap: wrap + flex: 1 1 100%), which read as
   oversized pills stacked next to the much smaller body copy above
   them. Keep the row side-by-side all the way to 320px and scale
   text/padding down smoothly instead. */
@media (max-width: 399.98px) {
  .rfr-hero-cta-group {
    gap: 8px;
  }
  .rfr-hero-cta-group > .btn {
    font-size: 0.8rem;
    padding: 10px 12px !important;
  }
}
@media (max-width: 359.98px) {
  .rfr-hero-cta-group > .btn {
    font-size: 0.74rem;
    padding: 9px 10px !important;
  }
}

/* desktop nav links: light on navy */
@media (min-width: 1200px) {
  .rfr-header .navmenu > ul > li > a { color: rgba(255, 255, 255, 0.88); }
  .rfr-header .navmenu > ul > li > a:hover,
  .rfr-header .navmenu > ul > li > a.active {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
  }
  .rfr-header .navmenu > ul > li > a::after {
    background: linear-gradient(90deg, #5bb8e8, #3fd6a3);
  }
  /* dropdown panel: navy glass */
  .rfr-header .navmenu .dropdown ul {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(13, 27, 49, 0.94);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.55);
  }
  .rfr-header .navmenu .dropdown ul a { color: rgba(255, 255, 255, 0.85); }
  .rfr-header .navmenu .dropdown ul a:hover,
  .rfr-header .navmenu .dropdown ul .active,
  .rfr-header .navmenu .dropdown ul li:hover > a {
    background: rgba(255, 255, 255, 0.07);
    color: #3fd6a3;
  }
}

/*--------------------------------------------------------------
# SERVICES NAV — single-column flyout (desktop) / flat list (mobile)
--------------------------------------------------------------*/
@media (min-width: 1200px) {
  .rfr-services-mega .rfr-services-flyout {
    display: block;
    width: 380px; /* fits the longer full names without cramping */
    padding: 0 !important;
    overflow: hidden;
  }
  /* base .navmenu .dropdown ul rule anchors dropdowns to their trigger's
     left edge with left:14px (and out-specificities a plain class
     selector here) — at 380px wide that runs off the right edge of the
     viewport for a nav item positioned mid/right in the bar, so
     right-align to the trigger instead. Scoped to .rfr-services-mega so
     it only ever affects this one flyout. */
  .rfr-services-mega .rfr-services-flyout {
    left: auto !important;
    right: 0 !important;
  }
  /* mobile-only list markup lives inside the same <ul> — keep it out of
     the desktop layout entirely. It also reuses the .rfr-services-flyout
     class (see markup), so without this it would inherit the width/
     right-align rules above too. */
  .rfr-svc-mobile-list {
    display: none !important;
  }
  .rfr-services-flyout-list {
    width: 100%;
    padding: 10px;
  }
  /* .rfr-header .navmenu prefix needed to out-specificity the base
     template's .navmenu .dropdown ul a rule (which carries its own
     padding/font-size) — see body.service-page precedent above. */
  .rfr-header .navmenu .rfr-services-flyout-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 9px;
    /* !important: all 6 items share one <li class="rfr-services-flyout-list">
       (see markup), so the base template's .navmenu .dropdown ul li:hover>a
       rule — matching the shared li, not the individual item — would
       otherwise recolor every sibling anchor green the moment the cursor
       enters the list, not just the one actually under the pointer. */
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .rfr-services-flyout-item .rfr-services-flyout-label {
    white-space: normal;
    line-height: 1.3;
  }
  .rfr-services-flyout-item .bi-chevron-right {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.5;
  }
  /* !important: the base template's .navmenu .dropdown ul li:hover>a
     hover-color rule nests three element selectors deep, which out-ranks
     this class-only rule on specificity alone even with the .rfr-header
     .navmenu prefix — !important is the reliable way to win here. */
  .rfr-header .navmenu .rfr-services-flyout-item:hover,
  .rfr-header .navmenu .rfr-services-flyout-item.active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
  }
}

/* Mobile/tablet: flat list — same items/labels as the desktop list,
   just full-width and stacked (touch has no hover, so no category
   grouping/collapsing). */
@media (max-width: 1199.98px) {
  .rfr-services-flyout {
    display: block;
    width: 100%;
  }
  .rfr-services-flyout-list {
    display: none;
  }

  /* .rfr-svc-mobile-list sits inside the mobile nav's <ul>, which the
     base template paints with a near-white glass background — paint a
     dark panel on top so it matches the desktop flyout's navy theme. */
  .rfr-svc-mobile-list {
    display: flex;
    flex-direction: column;
    background: rgba(13, 27, 49, 0.96);
    border-radius: 14px;
    padding: 8px;
  }
  .rfr-svc-mobile-list .rfr-services-flyout-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
  }
  .rfr-svc-mobile-list .rfr-services-flyout-item .rfr-services-flyout-label {
    white-space: normal;
    line-height: 1.3;
  }
  .rfr-svc-mobile-list .rfr-services-flyout-item .bi-chevron-right {
    margin-left: auto;
    font-size: 0.78rem;
    opacity: 0.5;
  }
  .rfr-svc-mobile-list .rfr-services-flyout-item:hover,
  .rfr-svc-mobile-list .rfr-services-flyout-item:active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }
}

/* Access Talent CTA pops on navy */
.rfr-header .request-talent-btn {
  background: linear-gradient(100deg, #2380B9 0%, #25B786 100%);
  background-size: 160% 100%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 28px -12px rgba(37, 183, 134, 0.6);
}

/* mobile: white toggle on navy bar (menu panel itself stays light) */
@media (max-width: 1199px) {
  .rfr-header .mobile-nav-toggle { color: #ffffff; }
}

/* rain layer toned down: the journey illustration carries its own particles */
.rfr-hero-rain span { opacity: 0; animation-name: rfr-fall-soft; }
.rfr-hero-rain span:nth-child(n+13) { display: none; }
@keyframes rfr-fall-soft {
  0%   { transform: translate3d(0, -14vh, 0); opacity: 0; }
  5%   { opacity: 0.35; }
  88%  { opacity: 0.35; }
  100% { transform: translate3d(var(--dx, 0px), 106vh, 0); opacity: 0; }
}

/*--------------------------------------------------------------
# MOBILE FIXES
--------------------------------------------------------------*/

/* Nav: leading item icons are decorative only — hide them at every
   width, not just desktop, so mobile items keep the plain label+chevron
   layout .navmenu a's justify-content:space-between was designed for. */
.navmenu > ul > li > a > i:not(.toggle-dropdown) {
  display: none;
}

/* rfr-banner-badge never had CSS of its own (the real "pill" styling
   lives on .rfr-banner-kicker) — give it the same glass-pill treatment
   so every hero badge actually renders instead of sitting unstyled. */
.rfr-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Hero CTA row: tighten spacing on mobile now that the content flows
   normally instead of being vertically centered in a fixed-height box.
   (Vertical offset itself is handled by .rfr-banner-content's padding
   in the mobile hero rule above.) */
@media (max-width: 767.98px) {
  .rfr-hero-cta-group.mt-4 {
    margin-top: 1rem !important;
  }
}