/* =========================================================
   R&R FINANCIAL SERVICES — Design Tokens & Core Styles
   Palette: Navy Ink / Royal Blue / Antique Gold / Paper White
   Type: Fraunces (display) + Inter (body/UI) + IBM Plex Mono (data)
   Signature element: the "Ledger Card" — a glass card with a
   gold foil edge and a monospace statement, echoed across hero,
   services, testimonials and calculators to unify the site.
   ========================================================= */

:root{
  --navy-950:#081527;
  --navy-900:#0B1F3A;
  --navy-800:#122A4E;
  --navy-700:#1B3A66;
  --blue-600:#14539A;
  --blue-500:#1E6BC0;
  --blue-100:#E8F0FA;
  --gold-600:#B8873A;
  --gold-500:#C9A24B;
  --gold-300:#E4C77E;
  --gold-100:#F7ECD3;
  --paper-0:#FFFFFF;
  --paper-50:#F7F8FA;
  --paper-100:#F0F3F7;
  --ink-900:#1C2530;
  --ink-600:#4B5768;
  --ink-400:#7C8899;
  --success-600:#2E7D5B;
  --danger-600:#B3432E;
  --shadow-card: 0 20px 45px -18px rgba(11,31,58,0.35);
  --shadow-soft: 0 8px 24px -12px rgba(11,31,58,0.18);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --maxw: 1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  font-family:'Inter', system-ui, sans-serif;
  color:var(--ink-900);
  background:var(--paper-50);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,.font-display{
  font-family:'Fraunces', Georgia, serif;
  letter-spacing:-0.01em;
  color:var(--navy-900);
  line-height:1.08;
}

.font-mono{ font-family:'IBM Plex Mono', monospace; }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold-600);
  font-weight:600;
}

.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

a{ color:inherit; text-decoration:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:0.95rem;
  padding:14px 28px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn:focus-visible{ outline:3px solid var(--gold-300); outline-offset:2px; }
.btn-gold{
  background:linear-gradient(135deg, var(--gold-300), var(--gold-600));
  color:var(--navy-950); box-shadow:var(--shadow-soft);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(201,162,75,0.55); }
.btn-navy{ background:var(--navy-900); color:var(--paper-0); }
.btn-navy:hover{ background:var(--navy-800); transform:translateY(-2px); }
.btn-outline{ border-color:rgba(255,255,255,0.4); color:var(--paper-0); background:transparent; }
.btn-outline:hover{ background:rgba(255,255,255,0.12); }
.btn-outline-navy{ border-color:var(--navy-900); color:var(--navy-900); background:transparent; }
.btn-outline-navy:hover{ background:var(--navy-900); color:var(--paper-0); }
.btn-sm{ padding:10px 20px; font-size:0.85rem; }

/* ---------- Sticky Nav ---------- */
#site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,31,58,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,162,75,0.25);
  transition:box-shadow .3s ease, background .3s ease;
}
#site-header.scrolled{ box-shadow:0 10px 30px -14px rgba(0,0,0,0.5); }
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:40px; height:40px; border-radius:10px;
  background:linear-gradient(135deg, var(--gold-300), var(--gold-600));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:700; color:var(--navy-950); font-size:1.1rem;
}
.brand-mark-img{
  height:44px; width:auto; display:block; border-radius:8px;
}
.brand-name{ color:var(--paper-0); font-family:'Fraunces', serif; font-size:1.15rem; font-weight:600; }
.brand-name span{ color:var(--gold-300); }

.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{
  color:rgba(255,255,255,0.82); font-size:0.92rem; font-weight:500; position:relative; padding:6px 0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--gold-400,var(--gold-500)); transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--paper-0); }
.nav-cta{ display:flex; align-items:center; gap:12px; }

.nav-toggle{ display:none; background:none; border:none; color:var(--paper-0); font-size:1.4rem; cursor:pointer; }

@media (max-width: 960px){
  .nav-links{
    position:fixed; inset:64px 0 0 0; flex-direction:column; align-items:flex-start;
    background:var(--navy-900); padding:28px 24px; gap:20px; transform:translateX(100%);
    transition:transform .35s ease; overflow-y:auto;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
  .nav-cta .btn-outline{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; background:radial-gradient(1200px 600px at 80% -10%, rgba(30,107,192,0.35), transparent), linear-gradient(160deg, var(--navy-950), var(--navy-900) 55%, var(--navy-800));
  color:var(--paper-0); overflow:hidden;
  padding:88px 0 110px;
}
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
@media (max-width: 960px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  background:rgba(201,162,75,0.12); border:1px solid rgba(201,162,75,0.4); color:var(--gold-300);
  font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; font-family:'IBM Plex Mono',monospace;
  margin-bottom:20px;
}
.hero h1{ color:var(--paper-0); font-size:clamp(2.2rem, 4.2vw, 3.4rem); margin:0 0 20px; }
.hero h1 em{ font-style:italic; color:var(--gold-300); }
.hero p.lead{ color:rgba(255,255,255,0.78); font-size:1.08rem; max-width:52ch; margin:0 0 32px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:40px; }
.hero-trust{ display:flex; gap:28px; flex-wrap:wrap; }
.hero-trust .stat b{ display:block; font-family:'Fraunces',serif; font-size:1.5rem; color:var(--gold-300); }
.hero-trust .stat span{ font-size:0.8rem; color:rgba(255,255,255,0.65); }

/* Signature: Ledger Card */
.ledger-card{
  position:relative; background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border:1px solid rgba(201,162,75,0.35); border-radius:var(--radius-lg);
  padding:28px 26px; backdrop-filter:blur(14px); box-shadow:var(--shadow-card);
}
.ledger-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px; border-radius:20px 20px 0 0;
  background:linear-gradient(90deg, var(--gold-300), var(--gold-600), var(--gold-300));
}
.ledger-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.ledger-head .eyebrow{ color:var(--gold-300); }
.ledger-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px dashed rgba(255,255,255,0.14); font-size:0.9rem; color:rgba(255,255,255,0.75); }
.ledger-row:last-of-type{ border-bottom:none; }
.ledger-row b{ color:var(--paper-0); font-family:'IBM Plex Mono',monospace; }
.ledger-total{ margin-top:16px; padding-top:16px; border-top:1px solid rgba(201,162,75,0.35); display:flex; justify-content:space-between; align-items:baseline; }
.ledger-total .amt{ font-family:'IBM Plex Mono',monospace; font-size:1.9rem; color:var(--gold-300); font-weight:600; }
.ledger-total .label{ color:rgba(255,255,255,0.65); font-size:0.82rem; }

/* Card motif reused across site */
.rr-card{
  background:var(--paper-0); border-radius:var(--radius-md); padding:30px 26px;
  box-shadow:var(--shadow-soft); border:1px solid var(--paper-100); position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
}
.rr-card::before{
  content:''; position:absolute; top:0; left:24px; width:34px; height:4px; border-radius:0 0 6px 6px;
  background:linear-gradient(90deg, var(--gold-300), var(--gold-600));
}
.rr-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.rr-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-100); color:var(--blue-600); font-size:1.3rem; margin-bottom:18px;
}

/* ---------- Sections ---------- */
section{ padding:88px 0; }
.section-tight{ padding:64px 0; }
.section-navy{ background:var(--navy-900); color:var(--paper-0); }
.section-navy h2{ color:var(--paper-0); }
.section-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.section-head p{ color:var(--ink-600); margin-top:14px; }
.section-navy .section-head p{ color:rgba(255,255,255,0.7); }

.grid{ display:grid; gap:26px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:960px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; } }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Testimonials ---------- */
.testimonial{ background:var(--paper-0); border-radius:var(--radius-md); padding:28px; box-shadow:var(--shadow-soft); }
.testimonial .stars{ color:var(--gold-500); letter-spacing:2px; margin-bottom:12px; }
.testimonial .who{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.avatar-badge{
  width:44px; height:44px; border-radius:50%; background:var(--navy-900); color:var(--gold-300);
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600;
}

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--paper-100); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:20px 0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; font-weight:600; color:var(--navy-900); font-size:1rem;
}
.faq-q .plus{ transition:transform .3s ease; color:var(--gold-600); font-size:1.2rem; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; color:var(--ink-600); font-size:0.95rem; }
.faq-a-inner{ padding-bottom:20px; }

/* ---------- Forms ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:0.85rem; font-weight:600; color:var(--navy-900); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border-radius:10px; border:1.5px solid #DCE2EA; font-family:'Inter',sans-serif;
  font-size:0.95rem; background:var(--paper-0); transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--blue-500); box-shadow:0 0 0 4px rgba(30,107,192,0.12);
}
.form-card{ background:var(--paper-0); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-card); }
.form-note{ font-size:0.8rem; color:var(--ink-400); margin-top:10px; }
.form-success{ display:none; background:var(--blue-100); border:1px solid var(--blue-500); color:var(--navy-900); padding:16px; border-radius:10px; margin-top:16px; font-size:0.9rem; }

/* ---------- Footer ---------- */
footer{ background:var(--navy-950); color:rgba(255,255,255,0.72); padding:64px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.08); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color:var(--paper-0); font-size:0.95rem; margin-bottom:16px; font-family:'Inter',sans-serif; font-weight:600; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a:hover{ color:var(--gold-300); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:24px 0; font-size:0.8rem; flex-wrap:wrap; gap:10px; }
.social-row{ display:flex; gap:12px; }
.social-row a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; transition:background .2s ease; }
.social-row a:hover{ background:var(--gold-500); color:var(--navy-950); }

/* ---------- Floating buttons ---------- */
.float-stack{ position:fixed; right:22px; bottom:22px; z-index:200; display:flex; flex-direction:column; gap:14px; }
.float-btn{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:#fff; box-shadow:0 10px 24px -8px rgba(0,0,0,0.4); transition:transform .25s ease;
}
.float-btn:hover{ transform:scale(1.08); }
.float-whatsapp{ background:#25D366; }
.float-call{ background:var(--gold-600); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  background:linear-gradient(160deg, var(--navy-950), var(--navy-800));
  color:var(--paper-0); padding:64px 0 56px; text-align:center;
}
.page-hero h1{ color:var(--paper-0); }
.breadcrumb{ font-size:0.85rem; color:rgba(255,255,255,0.6); margin-bottom:14px; font-family:'IBM Plex Mono',monospace; }
.breadcrumb a:hover{ color:var(--gold-300); }

/* ---------- Utility ---------- */
.text-gold{ color:var(--gold-500); }
.badge{ display:inline-block; padding:5px 12px; border-radius:999px; font-size:0.72rem; font-weight:700; letter-spacing:0.04em; }
.badge-blue{ background:var(--blue-100); color:var(--blue-600); }
.divider-gold{ width:60px; height:3px; background:linear-gradient(90deg,var(--gold-300),var(--gold-600)); border-radius:3px; margin:0 auto 18px; }
.table-doc{ width:100%; border-collapse:collapse; }
.table-doc th,.table-doc td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--paper-100); font-size:0.92rem; }
.table-doc th{ background:var(--paper-100); color:var(--navy-900); font-weight:700; }
.tab-btn{ padding:10px 20px; border-radius:999px; border:1.5px solid #DCE2EA; background:var(--paper-0); font-weight:600; cursor:pointer; font-size:0.88rem; color:var(--ink-600); }
.tab-btn.active{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.blog-card img, .rr-card img{ width:100%; border-radius:var(--radius-md) var(--radius-md) 0 0; display:block; }
.range-slider{ width:100%; accent-color:var(--gold-600); }

/* ---------- Trusted Partners Marquee ---------- */
.partner-strip{ background:var(--paper-0); border-top:1px solid var(--paper-100); border-bottom:1px solid var(--paper-100); }
.partner-marquee{
  overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partner-track{
  display:flex; align-items:center; gap:16px; width:max-content;
  animation:partner-scroll 42s linear infinite;
}
.partner-marquee:hover .partner-track{ animation-play-state:paused; }
@keyframes partner-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.partner-chip{
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  background:var(--paper-0); border:1px solid var(--paper-100); border-radius:999px;
  padding:12px 22px; font-family:'Fraunces',serif; font-weight:600; font-size:0.95rem; color:var(--navy-800);
  box-shadow:var(--shadow-soft); flex:0 0 auto;
}
.partner-ico{
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--blue-100); font-size:0.95rem; flex:0 0 auto;
}
@media (max-width:640px){
  .partner-chip{ padding:10px 16px; font-size:0.85rem; }
}

/* ---------- Loan Product Slider (5 slides) ---------- */
.slider-wrap{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.slider-track{ display:flex; width:500%; transition:transform .6s cubic-bezier(.65,0,.35,1); }
.slide{ width:20%; flex:0 0 20%; min-height:380px; display:flex; align-items:center; color:#fff; position:relative; }
.slide::after{ content:''; position:absolute; inset:0; background:radial-gradient(700px 400px at 85% 15%, rgba(255,255,255,0.12), transparent); pointer-events:none; }
.slide-1{ background:linear-gradient(135deg, var(--navy-950), var(--navy-800) 60%, var(--blue-600)); }
.slide-2{ background:linear-gradient(135deg, #14213B, #1B3A66 55%, #2E7D5B); }
.slide-3{ background:linear-gradient(135deg, #241636, #4A2A6B 55%, #B8873A); }
.slide-4{ background:linear-gradient(135deg, #0F2438, #14539A 55%, #1E6BC0); }
.slide-5{ background:linear-gradient(135deg, #1C1508, #4A3413 55%, #C9A24B); }
.slide-inner{ padding:52px 56px; max-width:100%; width:100%; position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.slide-text{ max-width:520px; }
.slide-icon{ font-size:2.4rem; display:block; margin-bottom:14px; }
.slide-text h3{ color:#fff; font-size:clamp(1.5rem, 2.6vw, 2.1rem); margin:10px 0 12px; }
.slide-text p{ color:rgba(255,255,255,0.8); font-size:0.98rem; max-width:48ch; margin-bottom:22px; }
.slide-stats{ display:flex; gap:26px; margin-bottom:26px; flex-wrap:wrap; }
.slide-stat b{ display:block; font-family:'IBM Plex Mono',monospace; font-size:1.3rem; color:var(--gold-300); }
.slide-stat span{ font-size:0.76rem; color:rgba(255,255,255,0.65); text-transform:uppercase; letter-spacing:0.05em; }

.slide-visual{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.slide-visual-circle{
  width:220px; height:220px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.28);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 45px -18px rgba(0,0,0,0.45), inset 0 0 0 6px rgba(255,255,255,0.03);
}
.ico-gold{ fill:var(--gold-500); }
.ico-navy{ fill:rgba(255,255,255,0.16); }
.ico-blue{ fill:var(--blue-500); }
.ico-white-soft{ fill:rgba(255,255,255,0.92); }
.ico-outline{ fill:none; stroke:rgba(255,255,255,0.35); stroke-width:2; }
.ico-line-thin{ fill:none; stroke:var(--gold-300); stroke-width:3; stroke-linecap:round; }
.ico-arc{ fill:none; stroke:var(--gold-300); stroke-width:9; stroke-linecap:round; }
.ico-check{ fill:none; stroke:var(--navy-950); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.ico-text{ font-family:'IBM Plex Mono',monospace; font-size:16px; fill:var(--navy-950); font-weight:700; }
.ico-text-lg{ font-family:'IBM Plex Mono',monospace; font-size:34px; fill:var(--gold-300); font-weight:700; }

@media (max-width:820px){
  .slide-visual{ display:none; }
  .slide-inner{ justify-content:flex-start; }
}
.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.35); color:#fff; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(6px);
  transition:background .2s ease;
  z-index:2;
}
.slider-arrow:hover{ background:rgba(255,255,255,0.28); }
.slider-prev{ left:18px; }
.slider-next{ right:18px; }
.slider-dots{ display:flex; justify-content:center; gap:10px; margin-top:22px; }
.slider-dot{ width:9px; height:9px; border-radius:50%; background:#D9DEE6; border:none; cursor:pointer; transition:all .25s ease; padding:0; }
.slider-dot.active{ background:var(--gold-600); width:26px; border-radius:6px; }
@media (max-width:720px){
  .slide{ min-height:460px; }
  .slide-inner{ padding:36px 26px; }
  .slide-stats{ gap:18px; }
}