/* ============================================================
   BETTROI — GLOBAL BRAND OVERRIDES (site-wide)
   Ported verbatim from the per-page <style> blocks of the
   legacy static site so the Next.js build matches 1:1.
   Page-specific overrides live in /assets/css/page-*.css
   ============================================================ */

:root {
  --primary:     #001F54;
  --secondary:   #475569;
  --theme:       #1855D4;
  --action:      #1855D4;
  --black:       #0A1128;
  --bg:          #0A1128;
  --border:      rgba(0, 31, 84, 0.12);
  --white:       #FFFFFF;
  --bright-blue: #2967EA;
  --navy:        #001F54;
  --ink:         #0A1128;
  --off-white:   #F4F6F9;
  --cream:       #FEFCFB;
  --slate:       #475569;
  --lt-slate:    #94A3B8;
  --bt-border:   #E2E8F0;
}

/* ── Loader + custom cursor are disabled in the Bettroi design ── */
.loader-wrap { display: none !important; }
.custom-cursor { display: none !important; }
body, body * { cursor: default !important; }
a, button, .work-box .image, [role="button"] { cursor: pointer !important; }

/* ── Scroll-to-top progress ring ── */
.progress-wrap svg.progress-circle path { stroke: var(--bright-blue); }
.progress-wrap::after { background-color: var(--navy); color: var(--bright-blue); }

/* ── Global buttons ── */
.rr-btn { background-color: var(--theme) !important; }
.rr-btn-underline::after { background-color: var(--bright-blue); }

/* ── Inner-page container padding ── */
.rr-container-1650 { padding-left: 40px !important; padding-right: 40px !important; }
@media (min-width: 1400px) { .rr-container-1650 { padding-left: 60px !important; padding-right: 60px !important; } }
@media (max-width: 767px)  { .rr-container-1650 { padding-left: 20px !important; padding-right: 20px !important; } }

/* ── Footer — white bg, navy content (site-wide) ── */
.footer-chevron { transition: transform .3s ease; display: inline-block; margin-left: 6px; font-size: 11px; }
.footer-accordion-title { cursor: pointer; user-select: none; }
.footer-area { background-color: #fff !important; }
.footer-area, .footer-area * { color: var(--navy) !important; }
.footer-area .title,
.footer-area .title span,
.footer-area .title div { color: var(--navy) !important; }
.footer-area .footer-widget-box.content .title,
.footer-area .footer-widget-box.content .title span,
.footer-area .footer-widget-box.content .title div { color: var(--bright-blue) !important; }
.footer-area .footer-nav-list li a:hover { color: var(--bright-blue) !important; }
.footer-area .rr-btn-underline,
.footer-area .rr-btn-underline::before { color: var(--navy) !important; }
.footer-area .copyright-area { background-color: var(--off-white); border-top-color: var(--bt-border); }

/* ── Header main border tint (dark-on-hero) ── */
.header-area .header-main { border-bottom-color: rgba(255,255,255,0.08); }

/* ── Scroll-reveal (React RevealInit replaces GSAP .fade-anim) ──
   The `.rv` hidden state is added by JS only, so content is never
   stuck invisible without JS. Direction honours data-direction/data-fade-from. */
.fade-anim.rv {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.fade-anim.rv[data-direction="left"],
.fade-anim.rv[data-fade-from="left"]  { transform: translateX(40px); }
.fade-anim.rv[data-direction="right"],
.fade-anim.rv[data-fade-from="right"] { transform: translateX(-40px); }
.fade-anim.rv[data-direction="top"],
.fade-anim.rv[data-fade-from="top"]   { transform: translateY(-40px); }
.fade-anim.rv.rv-in { opacity: 1; transform: none; }

/* Skip-to-content link (a11y) - hidden until keyboard focus */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:#001F54;color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-size:14px;text-decoration:none}
.skip-link:focus{left:0;color:#fff}

/* a11y contrast fixes (WCAG AA) - minimal color adjustments */
.exec-team__eyebrow,.network-section__eyebrow{color:#4080FF}
.team-box-1 .content .post{color:#9AA5B8}
.contact-info-item__label{color:#96A5C0}
.trust-stat-l{color:rgba(255,255,255,.62)}

/* a11y tap targets: 24px hit area, same 8px visible dot */
.swiper-pagination-bullet{width:24px;height:24px;border:8px solid transparent;background-clip:content-box}