/* ==========================================================================
   RB DesignTech — Warm Editorial Design System  (Robin Hood-inspired)
   Palette: cream #F6EFDF · deep navy #002F6C · signature lime #BDE724
   Type:    Ubuntu (display + UI)  /  Playfair Display italic (editorial accent)
   Note:    Ubuntu ships 300/400/500/700 only — headings use 700 & 500 (not 600/800)
   ========================================================================== */

:root {
  /* Surfaces */
  --cream:      #F6EFDF;
  --cream-2:    #FBF6EA;
  --sand:       #EFE5D0;
  --paper:      #FFFFFF;

  /* Deep tones */
  --navy:       #002F6C;
  --navy-2:     #03203F;
  --navy-3:     #0A3A78;

  /* Text */
  --ink:        #1B160D;
  --ink-soft:   #4B4438;
  --muted:      #7C7566;
  --muted-lt:   #9A9384;

  /* Brand accents */
  --blue:       #2563EB;
  --blue-dk:    #1D4ED8;
  --lime:       #BDE724;
  --lime-dk:    #A6D019;
  --lime-soft:  #ECF6B7;
  --gold:       #E0A226;

  /* Lines & light */
  --border:     rgba(0, 47, 108, 0.12);
  --border-2:   rgba(0, 47, 108, 0.22);
  --shadow-sm:  0 2px 10px -4px rgba(0, 47, 108, 0.20);
  --shadow:     0 26px 60px -30px rgba(0, 47, 108, 0.42);

  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background-color: var(--cream);
  color: var(--ink);
  font-family: 'Ubuntu', system-ui, sans-serif;
  font-weight: 400;
  font-feature-settings: "cv11", "ss01";
  overflow-x: hidden;
  position: relative;
}

/* Soft ambient warmth — barely-there accent orbs on the cream */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(48rem 42rem at 8% -8%, rgba(37, 99, 235, 0.06), transparent 60%),
    radial-gradient(40rem 40rem at 100% 4%, rgba(189, 231, 36, 0.10), transparent 58%);
  pointer-events: none;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, .font-display { font-family: 'Ubuntu', system-ui, sans-serif; color: var(--navy); }

h1, h2 { font-weight: 300 !important; letter-spacing: -0.032em; line-height: 1.02; }
h1 { font-size: clamp(2.7rem, 6.2vw, 5.2rem) !important; }
/* Homepage hero headline — sized so line 1 fits on a single line (desktop) */
.hero-headline { font-size: clamp(1.85rem, 3.9vw, 3.4rem) !important; line-height: 1.06; }
/* Line 2 (serif) enlarged to match line 1's width */
.hero-headline .grad-text { font-size: 1.52em; }
h2 { font-size: clamp(2.05rem, 4.2vw, 3.5rem) !important; }
h3 { font-weight: 300 !important; letter-spacing: -0.02em; line-height: 1.12; }
h4 { font-weight: 300 !important; letter-spacing: -0.01em; }

/* Editorial highlight — elegant serif italic, set in blue (or navy) */
.grad-text, .grad-text-gold {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-size: 1.02em;
}
.grad-text      { color: var(--blue); }
.grad-text-gold { color: var(--navy); }
.on-navy .grad-text, .on-navy .grad-text-gold { color: var(--lime); }

/* ---------- Layout primitives ---------- */
.container-rb { max-width: 1320px; margin-inline: auto; padding-inline: 1.5rem; }
.container-wide { max-width: 1600px; margin-inline: auto; padding-inline: 1.5rem; }

/* Dark section wrapper: flips text to light-on-navy */
.on-navy { background: var(--navy); color: rgba(255,255,255,0.82); }
.on-navy h1, .on-navy h2, .on-navy h3, .on-navy h4 { color: #fff; }
.section-cream-2 { background: var(--cream-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; font-size: .95rem; line-height: 1;
  border-radius: 999px; padding: .95rem 1.6rem; cursor: pointer;
  white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .2s var(--ease);
  border: 1px solid transparent;
}
/* Signature lime CTA (Robin Hood-style) */
.btn-primary, .btn-gold {
  background: var(--lime); color: var(--navy-2);
  box-shadow: 0 12px 30px -14px rgba(166, 208, 25, 0.9);
}
.btn-primary:hover, .btn-gold:hover { background: var(--lime-dk); transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(166, 208, 25, 1); }

/* Solid navy CTA */
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-3); transform: translateY(-2px); box-shadow: var(--shadow); }

/* Blue brand CTA */
.btn-blue { background: var(--blue); color: #fff; box-shadow: 0 12px 30px -14px rgba(37,99,235,0.8); }
.btn-blue:hover { background: var(--blue-dk); transform: translateY(-2px); }

/* Outline / ghost — adapts to light or dark surfaces */
.btn-ghost { background: transparent; border-color: var(--border-2); color: var(--navy); }
.btn-ghost:hover { background: rgba(0,47,108,0.05); border-color: var(--navy); transform: translateY(-2px); }
.on-navy .btn-ghost, .btn-ghost.on-dark { border-color: rgba(255,255,255,0.35); color: #fff; }
.on-navy .btn-ghost:hover, .btn-ghost.on-dark:hover { background: rgba(255,255,255,0.10); border-color: #fff; }

/* ---------- Eyebrow label ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy);
}
.eyebrow .dot { width: .5rem; height: .5rem; border-radius: 2px; background: var(--lime); }
.on-navy .eyebrow { color: rgba(255,255,255,0.9); }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
  overflow: hidden;
}
.card:hover { transform: translateY(-6px); border-color: var(--border-2); box-shadow: var(--shadow); }
.on-navy .card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
}
.on-navy .card:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.24); }

/* Icon chip */
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; border-radius: 14px;
  background: var(--navy); color: var(--lime);
}
.icon-chip svg { width: 1.5rem; height: 1.5rem; }
.on-navy .icon-chip { background: rgba(189,231,36,0.14); color: var(--lime); }

/* ---------- Nav ---------- */
[data-nav] { transition: background-color .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
/* Transparent over the hero video — light text */
[data-nav] .nav-link,
[data-nav] .brand-word { color: rgba(255,255,255,0.92); }
/* Serif wordmark logo (no emblem); color is inherited from .brand-word so it
   flips white-over-hero → navy-when-scrolled, and is white in the footer */
.brand-name { font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
  font-size: 1.6rem; letter-spacing: -0.005em; line-height: 1; }
/* After scroll — cream glass, navy text */
[data-nav].nav-scrolled {
  background: rgba(246, 239, 223, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 30px -24px rgba(0,47,108,0.5);
}
[data-nav].nav-scrolled .nav-link,
[data-nav].nav-scrolled .brand-word { color: var(--navy); }

.nav-link { position: relative; font-weight: 500; transition: color .2s var(--ease); }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--lime); transition: width .3s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Divider */
.hr-glow { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--border-2), transparent); }
.on-navy .hr-glow { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); }

/* ---------- HERO VIDEO ---------- */
.hero-video-wrap { position: absolute; inset: 0; overflow: hidden; z-index: -1; background: var(--navy-2); }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  opacity: 0; transition: opacity 1.1s var(--ease);
  animation: heroZoom 26s ease-in-out infinite alternate;
}
.hero-video.is-ready { opacity: 1; }
@keyframes heroZoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
/* Legibility scrim: dark at top (for nav) + dark at bottom (for headline), navy tint overall */
.hero-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,32,63,0.72) 0%, rgba(3,32,63,0.20) 22%, rgba(3,32,63,0.10) 50%, rgba(3,32,63,0.62) 82%, rgba(3,32,63,0.88) 100%),
    linear-gradient(90deg, rgba(3,32,63,0.55), transparent 55%);
}
/* ---------- Hero mask-shrink transition (robinhood.org-style corner reveal) ----------
   On scroll past a threshold (see main.js), four navy bars close in from the
   edges, shrinking the full-bleed video into a small window pinned near the
   top-right; reverses on scroll back up. Window sits below our fixed 76px nav
   (top offset 96/90/84px vs. the 40/30/15px reference values) so it never
   collides with it. */
.hero-mask-holder { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-mask-holder span { position: absolute; width: 0; height: 0; background: var(--navy); display: block; }
.hero-mask-holder .hero-mask-top    { left: 0; top: 0; width: 100%; transition: height .45s .2s var(--ease); }
.hero-mask-holder .hero-mask-left   { left: 0; top: 0; height: 100%; transition: width .65s var(--ease); }
.hero-mask-holder .hero-mask-right  { right: 0; top: 0; height: 100%; transition: width .45s .2s var(--ease); }
.hero-mask-holder .hero-mask-bottom { left: 0; bottom: 0; width: 100%; transition: height .6s .05s var(--ease); }

.hero-video-wrap.masked .hero-mask-top    { height: 96px; }
.hero-video-wrap.masked .hero-mask-right  { width: 40px; }
.hero-video-wrap.masked .hero-mask-left   { width: calc(100% - 40px - 285px); }
.hero-video-wrap.masked .hero-mask-bottom { height: calc(100% - 96px - 285px); }

.hero-video.scaledown {
  position: absolute; top: 96px; right: 40px; bottom: auto; left: auto;
  width: 285px; height: 285px; animation: none !important;
}

@media (max-width: 1279.98px) and (min-width: 769px) {
  .hero-video-wrap.masked .hero-mask-top    { height: 90px; }
  .hero-video-wrap.masked .hero-mask-right  { width: 30px; }
  .hero-video-wrap.masked .hero-mask-left   { width: calc(100% - 30px - 200px); }
  .hero-video-wrap.masked .hero-mask-bottom { height: calc(100% - 90px - 200px); }
  .hero-video.scaledown { top: 90px; right: 30px; width: 200px; height: 200px; }
}
@media (max-width: 768.98px) {
  .hero-video-wrap.masked .hero-mask-top    { height: 84px; }
  .hero-video-wrap.masked .hero-mask-right  { width: 15px; }
  .hero-video-wrap.masked .hero-mask-left   { width: calc(100% - 15px - 167px); }
  .hero-video-wrap.masked .hero-mask-bottom { height: calc(100% - 84px - 167px); }
  .hero-video.scaledown { top: 84px; right: 15px; width: 167px; height: 167px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mask-holder span { transition: none !important; }
}

/* Hero copy sits on the dark video — flip accents to light */
.hero-text .eyebrow { color: rgba(255,255,255,0.92); }
.hero-text .eyebrow .dot { background: var(--lime); }
.hero-text .grad-text, .hero-text .grad-text-gold { color: var(--lime); }
.hero-chip { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------- Big impact stats ---------- */
.stat-num { font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; color: var(--navy); }
.on-navy .stat-num { color: #fff; }
.stat-num em { font-style: normal; color: var(--lime-dk); }
.on-navy .stat-num em { color: var(--lime); }
.stat-rule { height: 3px; width: 2.5rem; background: var(--lime); border-radius: 3px; }

/* Editorial pull-quote */
.pullquote { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 500; line-height: 1.28; letter-spacing: -0.01em; }

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  transform: translateY(110%); transition: transform .5s var(--ease);
  padding: 1.25rem;
}
.cookie-banner.in { transform: translateY(0); }
.cookie-banner-card {
  max-width: 980px; margin-inline: auto;
  background: var(--navy-2); color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 20px;
  padding: 1.5rem 1.75rem; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
}
.cookie-banner-card p { font-size: .92rem; line-height: 1.55; max-width: 640px; }
.cookie-banner-card a { color: var(--lime); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } }

/* Reopen link in footer for revisiting cookie choices */
.cookie-settings-btn { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }

/* ---------- Legal / policy pages ---------- */
.legal-toc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.legal-toc a { color: var(--muted); font-size: .92rem; transition: color .2s var(--ease); }
.legal-toc a:hover { color: var(--blue); }
.legal-body h2 { font-size: 1.4rem !important; margin-top: 2.5rem; padding-top: .5rem; scroll-margin-top: 6.5rem; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1.08rem !important; margin-top: 1.75rem; font-weight: 600 !important; color: var(--navy); }
.legal-body p, .legal-body li { color: var(--inksoft); line-height: 1.75; }
.legal-body p { margin-top: .9rem; }
.legal-body ul, .legal-body ol { margin-top: .9rem; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.legal-body strong { color: var(--navy); font-weight: 600; }

/* ---------- Marquee ---------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }

/* ---------- Motion utilities ---------- */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.animate-floaty { animation: floaty 7s ease-in-out infinite; }
@keyframes pulseGlow { 0%,100% { opacity: .45; } 50% { opacity: .9; } }
.animate-pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spinSlow 44s linear infinite; }

/* ---------- Reveal on scroll ---------- */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--sand); }
::-webkit-scrollbar-thumb { background: #c9bfa6; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #b6ac91; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  .hero-video { animation: none !important; }
}