/* ==========================================================================
   ReadyForRole — rfr-additions.css  (added September 2026)
   ADDITIVE ONLY. Loaded after premium.css. Does not override any existing
   brand token, component or layout. Covers:
     1. Home  · Clientele marquee (below hero slider)
     2. Home  · Insights & Resources teaser
     3. Service pages · ICP "buyer questions" section + "What happens next"
     4. Blog / Resource Hub · hub cards + article typography
     5. Footer · YouTube icon (inherits existing .social-icon styling)
   ========================================================================== */

/* ---------- 1. CLIENTELE MARQUEE ---------- */
.rfr-clientele {
  position: relative;
  padding: 2.25rem 0 1.25rem;
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-2-050, #f2f8fc) 100%);
}
.rfr-clientele-head {
  text-align: center;
  margin-bottom: 1rem;
}
.rfr-clientele-kicker {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-2, #2380B9);
  margin-bottom: .35rem;
}
.rfr-clientele-title {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  color: var(--rfr-ink-2, #132a47);
  margin: 0;
}
.rfr-clientele-box {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--rfr-line, rgba(22,53,111,.10));
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(22, 53, 111, .06);
  padding: 1rem 0;
  /* soft fade on both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.rfr-clientele-track {
  display: flex;
  width: max-content;
  gap: .9rem;
  animation: rfr-clientele-scroll 38s linear infinite;
  will-change: transform;
}
.rfr-clientele-box:hover .rfr-clientele-track,
.rfr-clientele-box:focus-within .rfr-clientele-track {
  animation-play-state: paused;
}
.rfr-clientele-list {
  display: flex;
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rfr-clientele-item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
  padding: .65rem 1.15rem;
  border-radius: 999px;
  background: var(--brand-2-050, #f2f8fc);
  border: 1px solid rgba(35, 128, 185, .16);
  color: var(--rfr-ink-2, #132a47);
  font-weight: 600;
  font-size: .95rem;
}
.rfr-clientele-item i {
  color: var(--brand-3, #25B786);
  font-size: 1rem;
}
/* right-to-left: content moves toward the left edge */
@keyframes rfr-clientele-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - .45rem), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .rfr-clientele-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding: 0 1rem; }
  .rfr-clientele-list { flex-wrap: wrap; justify-content: center; }
  .rfr-clientele-list[aria-hidden="true"] { display: none; }
  .rfr-clientele-box { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 575.98px) {
  .rfr-clientele-item { font-size: .85rem; padding: .55rem .95rem; }
  .rfr-clientele-track { animation-duration: 30s; }
}

/* ---------- 2. HOME · INSIGHTS & RESOURCES ---------- */
.rfr-res-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--rfr-line, rgba(22,53,111,.10));
  border-radius: 18px;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rfr-res-card:hover,
.rfr-res-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(22, 53, 111, .10);
  border-color: var(--brand-2, #2380B9);
  color: inherit;
}
.rfr-res-tag {
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-2-deep, #175d87);
  background: var(--brand-2-100, #e2f0f8);
  border-radius: 999px;
  padding: .3rem .75rem;
  margin-bottom: .9rem;
}
.rfr-res-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--rfr-ink-2, #132a47);
  margin-bottom: .6rem;
}
.rfr-res-card p {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--rfr-muted, #51648a);
  flex-grow: 1;
}
.rfr-res-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--rfr-muted-2, #6d7f9f);
  margin-top: .75rem;
}
.rfr-res-meta .rfr-res-go {
  font-weight: 700;
  color: var(--brand-2, #2380B9);
}

/* ---------- 3. SERVICE PAGES · ICP + NEXT STEPS ---------- */
.rfr-icp-card {
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--rfr-line, rgba(22,53,111,.10));
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(22, 53, 111, .05);
}
.rfr-icp-ask {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-weight: 700;
  color: var(--rfr-ink-2, #132a47);
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: .75rem;
}
.rfr-icp-ask i { color: var(--brand-2, #2380B9); font-size: 1.15rem; margin-top: .1rem; }
.rfr-icp-answer {
  font-size: .9rem;
  line-height: 1.65;
  color: #45587c;
  margin: 0;
  padding-left: 1.75rem;
  border-left: 3px solid var(--brand-3, #25B786);
}
.rfr-icp-role {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--brand-1, #16356F);
  background: var(--brand-1-100, #e3e9f4);
  border-radius: 999px;
  padding: .3rem .8rem;
  margin: .2rem;
}
.rfr-next-step {
  position: relative;
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--rfr-line, rgba(22,53,111,.10));
  border-radius: 18px;
  padding: 1.5rem 1.25rem 1.25rem;
  text-align: left;
}
.rfr-next-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--rfr-grad, linear-gradient(100deg,#16356F,#2380B9,#25B786));
  color: #fff;
  font-weight: 700;
  margin-bottom: .75rem;
}
.rfr-next-step h3 { font-size: 1rem; font-weight: 700; color: var(--rfr-ink-2, #132a47); margin-bottom: .4rem; }
.rfr-next-step p { font-size: .88rem; line-height: 1.6; color: #45587c; margin: 0; }
.rfr-assurance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.25rem;
  font-size: .85rem;
  color: var(--rfr-muted, #51648a);
}
.rfr-assurance span { display: inline-flex; align-items: center; gap: .35rem; }
.rfr-assurance i { color: var(--brand-3, #25B786); }

/* ---------- 3b. FOOTER SOCIAL TILES (Sept 2026) ----------
   Same tile language as the article share row: light rounded squares that
   lift on hover, each network taking its own colour. Works with both footer
   markups (.social-icon on the main pages, bare <a> on 404/starter). */
.footer .social-links { gap: .6rem; flex-wrap: wrap; }
.footer .social-links a,
.footer .social-links a.social-icon {
  width: 44px;
  height: 44px;
  margin-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #eaf6f1 100%);
  border: 1px solid rgba(255, 255, 255, .55);
  color: var(--brand-1, #16356F);
  font-size: 1.08rem;
  text-decoration: none;
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .75), inset 0 1px 0 #fff;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, color .25s ease, border-color .25s ease;
}
.footer .social-links a:hover,
.footer .social-links a:focus-visible,
.footer .social-links a.social-icon:hover,
.footer .social-links a.social-icon:focus-visible {
  transform: translateY(-3px);
  background: #ffffff;
  box-shadow: 0 16px 26px -14px rgba(0, 0, 0, .85), inset 0 1px 0 #fff;
}
/* each network keeps its own colour on hover */
.footer .social-links a[aria-label*="LinkedIn"]:hover { color: #0A66C2; border-color: rgba(10, 102, 194, .55); }
.footer .social-links a[aria-label*="Instagram"]:hover { color: #C13584; border-color: rgba(193, 53, 132, .55); }
.footer .social-links a[aria-label*="Facebook"]:hover { color: #1877F2; border-color: rgba(24, 119, 242, .55); }
.footer .social-links a[aria-label*="X ("]:hover { color: #0d1b31; border-color: rgba(13, 27, 49, .45); }
.footer .social-links a[aria-label*="YouTube"]:hover { color: #FF0000; border-color: rgba(255, 0, 0, .45); }
/* footers without aria-labels (404 / starter page) fall back to brand blue */
.footer .social-links a:not([aria-label]):hover { color: var(--brand-2, #2380B9); border-color: rgba(35, 128, 185, .55); }
@media (max-width: 575.98px) {
  .footer .social-links a, .footer .social-links a.social-icon { width: 40px; height: 40px; font-size: 1rem; }
}

/* ---------- 3b2. BUTTON BASE (Sept 2026) ----------
   .rfr-action-btn and its outline variant were only ever sized inside the
   inline <style> block of index.html and the service pages, so the blog hub
   and article pages rendered them with no padding. These are the same values,
   moved into the shared stylesheet so every page gets a proper button. */
.rfr-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
}
.rfr-action-btn.rfr-btn-outline {
  background: #ffffff;
  background-image: none;
  color: var(--brand-2, #2380B9) !important;
  border: 2px solid var(--brand-2, #2380B9);
  box-shadow: none;
}
.rfr-action-btn.rfr-btn-outline:hover,
.rfr-action-btn.rfr-btn-outline:focus-visible {
  background: rgba(35, 128, 185, .06);
  background-image: none;
  color: var(--brand-1, #16356F) !important;
  border-color: var(--brand-1, #16356F);
  box-shadow: 0 12px 24px -16px rgba(22, 53, 111, .6);
}
.rfr-action-btn.rfr-btn-outline::after { display: none; }
/* long labels: step the type down on small screens */
@media (max-width: 767.98px) {
  .rfr-action-btn { padding: 13px 22px; font-size: .94rem; gap: 8px; }
}
@media (max-width: 400px) {
  .rfr-action-btn { padding: 12px 16px; font-size: .86rem; }
}

/* ---------- 3c. PREMIUM BRAND BUTTON (Sept 2026) ----------
   .rfr-action-btn is the site's primary CTA (home, service pages, blog).
   Repainted in the logo gradient — navy -> blue -> green — replacing the
   flat blue and its off-brand indigo hover. The outline variant
   (.rfr-btn-outline) and the white button inside dark CTA bands are
   unaffected: both are defined with higher specificity elsewhere. */
.rfr-action-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .005em;
  color: #ffffff !important;
  background: linear-gradient(100deg, var(--brand-1, #16356F) 0%, var(--brand-2, #2380B9) 52%, var(--brand-3, #25B786) 100%);
  background-size: 200% 100%;
  background-position: 0% 0;
  border: 0;
  box-shadow: 0 10px 26px -12px rgba(22, 53, 111, .75), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: background-position .55s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
/* moving sheen on hover */
.rfr-action-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%;
  height: 100%;
  z-index: -1;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transition: left .65s cubic-bezier(.22, 1, .36, 1);
}
.rfr-action-btn:hover,
.rfr-action-btn:focus-visible {
  background: linear-gradient(100deg, var(--brand-1, #16356F) 0%, var(--brand-2, #2380B9) 52%, var(--brand-3, #25B786) 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(35, 128, 185, .8), inset 0 1px 0 rgba(255, 255, 255, .28);
  color: #ffffff !important;
}
.rfr-action-btn:hover::after, .rfr-action-btn:focus-visible::after { left: 115%; }
.rfr-action-btn:active { transform: translateY(0); box-shadow: 0 8px 18px -12px rgba(22, 53, 111, .8); }
.rfr-action-btn:focus-visible { outline: 3px solid rgba(37, 183, 134, .45); outline-offset: 3px; }
.rfr-action-btn i { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.rfr-action-btn:hover i.bi-arrow-right, .rfr-action-btn:hover i.bi-arrow-right-short { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .rfr-action-btn, .rfr-action-btn::after, .rfr-action-btn i { transition: none; }
  .rfr-action-btn:hover { transform: none; }
}

/* ---------- 4. BLOG / RESOURCE HUB ---------- */
.rfr-blog-hero {
  padding: 150px 0 60px;
  background: linear-gradient(135deg, var(--brand-1-deep, #0d1b31) 0%, var(--brand-1, #16356F) 55%, var(--brand-2-deep, #175d87) 100%);
  color: #ffffff;
}
.rfr-blog-hero h1 { color: #ffffff; font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.75rem); line-height: 1.2; }
.rfr-blog-hero p { color: rgba(255,255,255,.82); max-width: 760px; }
.rfr-blog-hero .rfr-crumbs { font-size: .85rem; margin-bottom: 1rem; }
.rfr-blog-hero .rfr-crumbs a { color: #9fd3f3; text-decoration: none; }
.rfr-blog-hero .rfr-crumbs span { color: rgba(255,255,255,.7); }
.rfr-blog-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .88rem; color: rgba(255,255,255,.78); margin-top: 1rem; }
.rfr-blog-meta i { margin-right: .3rem; }

.rfr-article { max-width: 780px; margin: 0 auto; font-size: 1.04rem; line-height: 1.8; color: #334766; }
.rfr-article h2 { font-size: 1.55rem; font-weight: 800; color: var(--rfr-ink-2, #132a47); margin: 2.5rem 0 1rem; line-height: 1.3; scroll-margin-top: 110px; }
.rfr-article h3 { font-size: 1.2rem; font-weight: 700; color: var(--rfr-ink-2, #132a47); margin: 1.75rem 0 .6rem; scroll-margin-top: 110px; }
.rfr-article p { margin-bottom: 1.1rem; }
.rfr-article ul, .rfr-article ol { margin-bottom: 1.2rem; padding-left: 1.3rem; }
.rfr-article li { margin-bottom: .45rem; }
.rfr-article a { color: var(--brand-2, #2380B9); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rfr-article a:hover { color: var(--brand-1, #16356F); }
.rfr-article sup a { text-decoration: none; font-weight: 700; }

.rfr-tldr {
  background: var(--brand-3-050, #f0fbf7);
  border: 1px solid rgba(37,183,134,.25);
  border-left: 5px solid var(--brand-3, #25B786);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2rem;
}
.rfr-tldr strong.rfr-tldr-label { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-3-deep, #178a64); margin-bottom: .4rem; }
.rfr-tldr p:last-child, .rfr-tldr ul:last-child { margin-bottom: 0; }

.rfr-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.rfr-stat {
  background: #ffffff;
  border: 1px solid var(--rfr-line, rgba(22,53,111,.10));
  border-radius: 16px;
  padding: 1.1rem 1.1rem 1rem;
  box-shadow: 0 6px 18px rgba(22,53,111,.05);
}
.rfr-stat b { display: block; font-size: 1.75rem; line-height: 1.1; font-weight: 800; background: var(--rfr-grad, linear-gradient(100deg,#16356F,#2380B9,#25B786)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rfr-stat span { display: block; font-size: .85rem; line-height: 1.45; color: var(--rfr-muted, #51648a); margin-top: .35rem; }
.rfr-stat small { display: block; font-size: .72rem; color: var(--rfr-muted-2, #6d7f9f); margin-top: .4rem; }

.rfr-article table { width: 100%; border-collapse: collapse; margin: 1.25rem 0 1.75rem; font-size: .92rem; }
.rfr-article .rfr-tbl-wrap { overflow-x: auto; border: 1px solid var(--rfr-line, rgba(22,53,111,.10)); border-radius: 14px; margin: 1.25rem 0 1.75rem; }
.rfr-article .rfr-tbl-wrap table { margin: 0; }
.rfr-article th { background: var(--brand-1, #16356F); color: #fff; text-align: left; padding: .7rem .9rem; font-weight: 600; }
.rfr-article td { padding: .7rem .9rem; border-top: 1px solid var(--rfr-line, rgba(22,53,111,.10)); vertical-align: top; }
.rfr-article tr:nth-child(even) td { background: var(--brand-2-050, #f2f8fc); }

.rfr-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--brand-2-050, #f2f8fc), #ffffff);
  border: 2px dashed rgba(35,128,185,.35);
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
  margin: 2rem 0;
}
.rfr-download i.bi-file-earmark-arrow-down { font-size: 2.2rem; color: var(--brand-2, #2380B9); }
.rfr-download div { flex: 1 1 260px; }
.rfr-download h3 { margin: 0 0 .25rem !important; font-size: 1.1rem !important; }
.rfr-download p { margin: 0; font-size: .92rem; }
.rfr-download a.rfr-action-btn, .rfr-article a.rfr-action-btn { color: #fff !important; text-decoration: none; }

.rfr-selfcheck { background: #fff; border: 1px solid var(--rfr-line, rgba(22,53,111,.10)); border-radius: 18px; padding: 1.4rem 1.5rem; margin: 2rem 0; box-shadow: 0 8px 24px rgba(22,53,111,.05); }
.rfr-selfcheck label { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; line-height: 1.5; padding: .45rem 0; border-bottom: 1px solid var(--rfr-line, rgba(22,53,111,.08)); cursor: pointer; }
.rfr-selfcheck label:last-of-type { border-bottom: 0; }
.rfr-selfcheck input { margin-top: .3rem; width: 18px; height: 18px; accent-color: var(--brand-3, #25B786); flex-shrink: 0; }
.rfr-selfcheck-result { margin-top: 1rem; padding: .9rem 1.1rem; border-radius: 12px; background: var(--brand-2-050, #f2f8fc); font-weight: 600; color: var(--rfr-ink-2, #132a47); font-size: .95rem; }

.rfr-article-cta {
  background: linear-gradient(135deg, var(--brand-1, #16356F), var(--brand-2, #2380B9));
  color: #fff;
  border-radius: 20px;
  padding: 2rem;
  margin: 2.5rem 0;
  text-align: center;
}
.rfr-article-cta h2, .rfr-article-cta h3 { color: #fff !important; margin-top: 0 !important; }
.rfr-article-cta p { color: rgba(255,255,255,.85); }
.rfr-article-cta a.rfr-action-btn { background: #ffffff; color: var(--brand-1, #16356F) !important; }

.rfr-sources { font-size: .85rem; line-height: 1.6; color: var(--rfr-muted, #51648a); border-top: 1px solid var(--rfr-line, rgba(22,53,111,.10)); padding-top: 1.25rem; margin-top: 2.5rem; }
.rfr-sources ol { padding-left: 1.2rem; }
.rfr-sources a { font-weight: 500 !important; word-break: break-word; }

.rfr-toc { background: #fff; border: 1px solid var(--rfr-line, rgba(22,53,111,.10)); border-radius: 16px; padding: 1.1rem 1.4rem; margin: 0 0 2rem; font-size: .93rem; }
.rfr-toc strong { display: block; margin-bottom: .4rem; color: var(--rfr-ink-2, #132a47); }
.rfr-toc ol { margin: 0; padding-left: 1.2rem; }
.rfr-toc a { text-decoration: none !important; font-weight: 500 !important; }

.rfr-article .rfr-faq-list details { border: 1px solid var(--rfr-line, rgba(22,53,111,.10)); border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: .75rem; background: #fff; }
.rfr-article .rfr-faq-list summary { font-weight: 700; color: var(--rfr-ink-2, #132a47); cursor: pointer; }
.rfr-article .rfr-faq-list details p { margin: .6rem 0 0; font-size: .95rem; }

.rfr-updated-note { font-size: .82rem; color: var(--rfr-muted-2, #6d7f9f); }

@media print {
  .rfr-header, .rfr-footer, .rfr-article-cta, .rfr-download, #scroll-top, #preloader { display: none !important; }
  .rfr-blog-hero { padding: 20px 0; background: none; color: #000; }
  .rfr-blog-hero h1, .rfr-blog-hero p { color: #000; }
}