:root{
  --rr-nav-h: 72px;
  --font-heading: 'Oswald', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* R&R Marauders (Foxhole / Siege Camp inspired) */
  --bg: #06080b;
  --panel: rgba(12, 14, 18, 0.86);
  --panel2: rgba(16, 19, 26, 0.72);
  --text: #ffffff;
  --heading: #ffffff;
  --muted: #ffffff;
  --border: rgba(255,255,255,0.10);

  /* Accents: keep our flag (red / black / white), add subtle military tones */
  --rr-red: #b4001e;
  --rr-black: #050507;
  --rr-white: #f7f8ff;
  --olive: #6f7b3e;
  --sand: #c9b37d;

  --ink: var(--bg);
  --ink2: var(--panel);
  --ink3: var(--border);
  --marauder: var(--rr-red);
  --marauder2: #d11b2d;

  --radius: 18px;

  /* Heart palette (menu button accent) */
  --heart-left: #314f67;
  --heart-mid:  #007272;
  --heart-right:#41553a;
}
.bg-ink{background:var(--ink)!important;}
.bg-ink-2{background:var(--ink2)!important;}
.bg-ink-3{background:var(--ink3)!important;}
.border-ink-3{border-color:var(--ink3)!important;}
.text-muted{color:var(--muted)!important;}

/* Method.gg-inspired layout */
body{
  font-family: var(--font-body);
  letter-spacing: .1px;
  background:
    radial-gradient(1200px 800px at 15% 5%, rgba(201,179,125,.18), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, rgba(111,123,62,.14), transparent 65%),
    radial-gradient(800px 600px at 40% 110%, rgba(180,0,30,.12), transparent 55%),
    linear-gradient(180deg, #07090c 0%, #050507 45%, #07090c 100%);
  color: var(--heading);
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Subtle map-grid + haze (modern Foxhole UI vibe) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 46px);
  opacity: 0.07;
  mix-blend-mode: overlay;
  z-index: 0;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.09), transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.07), transparent 55%);
  opacity: 0.06;
  z-index: 0;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(128,0,0,.18), transparent 60%),
    radial-gradient(900px 600px at 0% 60%, rgba(255,255,255,.04), transparent 55%),
    radial-gradient(900px 600px at 100% 80%, rgba(0,0,0,.35), transparent 60%);
  mix-blend-mode: normal;
  opacity:1;
  z-index:0;
}

body > *{ position:relative; z-index:1; }
h1,h2,h3,h4,h5,h6,.display-5,.display-6,.card-title,.modal-title{
  font-family: var(--font-heading);
  letter-spacing: .06em;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--heading);
  -webkit-text-stroke: 0.25px rgba(0,0,0,.15);
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}


/* =========================
   v34: Heading visibility + brand ampersand consistency
   ========================= */
h1,h2,h3,h4,h5,h6,
.display-5,.display-6,
.card-title,.modal-title,
.section-title,.mini-title,
.rr-loader-title,.rr-splash-title,
.navbar .navbar-brand,.rr-brand-text{
  color: #ffffff !important;
  font-synthesis: none;
}
/* Make the navbar brand use the heading font so "R&R" renders consistently (ampersand included) */
.navbar .navbar-brand, .navbar .navbar-brand .fw-bold{
  font-family: var(--font-heading);
  letter-spacing: .06em;
}

/* R&R v32: headings contrast */
.section-title, .section-kicker, .navbar .navbar-brand, .rr-brand-text{
  color: var(--heading) !important;
}
.text-muted, .muted{ color: var(--muted) !important; }
.card-title{ color: var(--heading) !important; }
.btn-ghost, .btn-outline-light{ text-shadow: 0 1px 10px rgba(0,0,0,.35); }
/* Improve readability on dark gradients */
.hero h1, .hero h2, .hero h3{
  text-shadow: 0 2px 18px rgba(0,0,0,.65);
}
.card h1, .card h2, .card h3{
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
a{ text-decoration:none; }
.section{
  padding: 2.5rem 0;
}

.section-title h1,.section-title h2,.section-title h3,.section-title h4,.section-title h5,.section-title h6{ color: var(--heading); text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.section-title{
  display:flex; align-items:center; gap:.75rem;
  margin-bottom:1rem;
}
.section-title .bar{
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(240,90,90,.9), rgba(255,255,255,.35), rgba(240,90,90,.9));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 30px rgba(240,90,90,.18);
  position: relative;
  overflow: hidden;
}
.bar:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-130%);
  animation: rrShimmer 2.2s var(--easing-out) infinite;
  opacity: .7;
}
@keyframes rrShimmer{
  0%{ transform: translateX(-130%); }
  55%{ transform: translateX(130%); }
  100%{ transform: translateX(130%); }
}
.hero{
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 50%),
    radial-gradient(900px 450px at 15% 10%, rgba(201,179,125,.20), transparent 62%),
    radial-gradient(900px 450px at 85% 10%, rgba(111,123,62,.14), transparent 64%),
    radial-gradient(1100px 520px at 50% 120%, rgba(180,0,30,.12), transparent 60%),
    linear-gradient(180deg, rgba(12,14,18,.92), rgba(8,9,12,.85));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(-25deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 14px);
  opacity: 0.06;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 20% 35%, rgba(255,255,255,0.10), transparent 55%);
  opacity: 0.05;
  pointer-events:none;
}
.hero > *{
  position: relative;
  z-index: 1;
}
.btn-marauder{
  font-weight:700;
  text-transform: uppercase;
  letter-spacing:.6px;
}
.btn-outline-light{
  text-transform: uppercase;
  letter-spacing:.6px;
  font-weight:700;
  border-color: rgba(244,244,244,.35) !important;
}
.btn-outline-light:hover{ border-color: rgba(244,244,244,.6) !important; }
.navbar-brand{
  letter-spacing:.8px;
  text-transform: uppercase;
  font-family: var(--font-heading);
}

/* Discord brand button */
.btn-discord{
  background:#5865F2 !important;
  border-color:#5865F2 !important;
  color:#fff !important;
}
.btn-discord:hover,
.btn-discord:focus{
  background:#4752C4 !important;
  border-color:#4752C4 !important;
  color:#fff !important;
}


/* NAV: darker glass + subtle faction line */
.navbar.navbar-dark{
  background: rgba(12, 14, 18, 0.88) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  position: sticky;
  top: 0;
  z-index: 6500;
}
.navbar.navbar-dark::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(201,179,125,0.55), rgba(180,0,30,0.60), transparent);
  opacity: .55;
  pointer-events:none;
}

/* Make sure content sits above the background overlays */
header.hero, main, footer{
  position: relative;
  z-index: 1;
}

.card.bg-ink-2, .mini-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
}
.border-ink-3{ border-color: rgba(255,255,255,.08)!important; }
.bg-ink-3{ background: rgba(255,255,255,.06)!important; }
.hero-meta .dot{width:.55rem; height:.55rem; border-radius:999px; background: var(--marauder2); box-shadow:0 0 0 4px rgba(255,107,107,.15);}
.btn-marauder{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--marauder);
  --bs-btn-border-color: var(--marauder);
  --bs-btn-hover-bg: #b92f2f;
  --bs-btn-hover-border-color: #b92f2f;
  --bs-btn-focus-shadow-rgb: 208,59,59;
  --bs-btn-active-bg:#9e2626;
  --bs-btn-active-border-color:#9e2626;
}
.card{border-width:1px;}
.rounded-4{border-radius:1rem!important;}
.mini-card{
  background:var(--ink); border:1px solid var(--ink3);
  border-radius:1rem; padding:1rem;
}
.mini-title{font-weight:700; margin-bottom:.25rem;
  color: var(--heading);
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mini-text{color:var(--text); font-size:.95rem;}
.callout{
  background: linear-gradient(180deg, rgba(208,59,59,.12), rgba(208,59,59,.05));
  border:1px solid var(--ink3);
  border-radius:1rem;
  padding:1rem;
}
.callout-title{font-weight:700; margin-bottom:.35rem;}
.fact{display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--ink3);}
.fact:last-child{border-bottom:0;}
.fact-k{color:var(--text);}
.fact-v{font-weight:600;}
.shot img{display:block; aspect-ratio: 16/9; object-fit: cover;}
.skip-link{
  position:absolute; left:-999px; top:10px;
  background:#fff; color:#000; padding:.5rem .75rem; border-radius:.5rem;
}
.skip-link:focus{left:10px; z-index:9999;}
.form-control, .form-select{
  background:var(--ink); border-color:var(--ink3); color:var(--text);
}
.form-control:focus, .form-select:focus{
  background:var(--ink);
  border-color: var(--marauder2);
  box-shadow: 0 0 0 .25rem var(--ring);
  color:var(--text);
}
.accordion-button{
  background:var(--ink); color:var(--text);
  border-bottom:1px solid var(--ink3);
}
.accordion-button:not(.collapsed){
  background:rgba(208,59,59,.15);
  color:var(--text);
}
.accordion-body{background:var(--ink2);}
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .65rem;
  border:1px solid var(--ink3);
  border-radius:999px;
  background:var(--ink);
  color:var(--text);
  user-select:none;
}
.chip input{accent-color:var(--marauder);}
code{color:#ffb3b3;}


/* Contrast tweaks */
.navbar-dark .navbar-nav .nav-link{
  color: rgba(243,247,255,.85);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus{
  color: var(--text);
}
.navbar-dark .navbar-nav .nav-link.active{
  color: var(--marauder2);
}
.badge.bg-ink-3{background:var(--ink3)!important;}
.card.bg-ink-2{box-shadow: 0 10px 30px rgba(0,0,0,.25);}
.mini-text,.fact-k{color:var(--text)!important;}

/* ------------------------------------------------------------
   Mobile menu button (inspired by StarWars.com)
   ------------------------------------------------------------ */
.rr-menu-btn{
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,12,16,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .12s ease;

  position: relative;
  z-index: 6600;}
.rr-menu-btn:focus{ box-shadow: 0 0 0 .25rem var(--ring); }
.rr-menu-btn:hover{
  background: rgba(10,12,16,.55);
  border-color: rgba(255,255,255,.22);
}
.rr-menu-btn:active{ transform: translateY(1px); }

.rr-menu-btn .rr-menu-icon{
  width: 24px;
  height: 18px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}
.rr-menu-btn .rr-menu-icon > span{
  display:block;
  height: 2px;
  width: 24px;
  border-radius: 99px;
  transform-origin: center;
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease,
    width .32s cubic-bezier(.2,.8,.2,1);
}
.rr-menu-btn .rr-menu-icon > span:nth-child(1){ background: var(--heart-left); }
.rr-menu-btn .rr-menu-icon > span:nth-child(2){ background: var(--heart-mid); }
.rr-menu-btn .rr-menu-icon > span:nth-child(3){ background: var(--heart-right); }

/* open state -> animated X */
.rr-menu-btn.is-open{
  background: rgba(10,12,16,.70);
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 0 0 .22rem rgba(208,59,59,.18);
}
.rr-menu-btn.is-open .rr-menu-icon > span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.rr-menu-btn.is-open .rr-menu-icon > span:nth-child(2){
  opacity: 0;
  width: 0;
}
.rr-menu-btn.is-open .rr-menu-icon > span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* =========================
   Poster / art-forward tweaks
   ========================= */
.kicker{
  display:inline-block;
  padding:.35rem .6rem;
  border:1px solid var(--ink-3);
  border-radius:999px;
  background:rgba(0,0,0,.35);
  color:#ffffff;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.letter-wide{ letter-spacing:.12em; }

.poster-img{
  width:100%;
  height:auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: contrast(1.05) saturate(.95);
}

.carousel-control-prev,
.carousel-control-next{
  width: 12%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.8));
  opacity:.85;
}

.hero-card{
  position:relative;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(1200px 600px at 20% 30%, rgba(128,0,0,.22), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.65));
  pointer-events:none;
}
.hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}
.hero-card > .card-body{ position:relative; z-index:1; }



/* Media grid */
.media-tile{
  background:#000;
}
.media-tile video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.rrm-media-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.rrm-media-card{
  text-align:left;
  width:100%;
  padding:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(0,0,0,.35);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.rrm-media-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 36px rgba(0,0,0,.55);
}

.rrm-media-thumb{
  width:100%;
  aspect-ratio: 16 / 9;
  display:block;
  object-fit: cover;
  object-position: center;
  background: rgba(0,0,0,.6);
}

.rrm-media-meta{
  padding: .75rem .85rem;
}

.rrm-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0,0,0,.72);
  z-index: 2000;
  pointer-events: none;
}
.rrm-modal[aria-hidden="false"]{ display:flex; }

.rrm-modal-dialog{
  width: min(1100px, 100%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(10,12,16,.35);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
}

.rrm-modal-toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: .5rem;
  padding: .65rem .75rem;
  background: rgba(0,0,0,.35);
}

.rrm-modal-title{ min-width:0; }

.rrm-modal-body{
  background: rgba(0,0,0,.25);
}

.rrm-modal-body img,
.rrm-modal-body video{
  width: 100%;
  height: auto;
  display:block;
  max-height: calc(100vh - 180px);
  object-fit: contain;
  background: rgba(0,0,0,.55);
}

@media (min-width: 992px){
  .rrm-media-grid{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}


/* Media page: wider, centered grid for large displays */
.rrm-media-grid{
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 992px){
  .rrm-media-grid{
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}


.rrm-media-grid-wrap{
  padding-left: 8px;
  padding-right: 8px;
}
@media (min-width: 768px){
  .rrm-media-grid-wrap{
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* Mobile overlay navigation (overlaps instead of pushing content) */
html.rr-menu-open,
body.rr-menu-open{
  overflow: hidden;
}

@media (max-width: 991.98px){
  /* iOS/Safari quirk: backdrop-filter on the navbar can create a containing
     block that breaks position:fixed descendants. Disable it here and use
     the overlay blur instead. */
  .navbar.navbar-dark{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Mobile nav becomes a true overlay (does not push content) */
  #nav.rr-mobile-nav{
    display: block !important; /* override bootstrap .collapse display:none */
    position: fixed;
  top: var(--rr-nav-h, 64px);
  left: 0;
  right: 0;
  bottom: 0;
padding: 1rem 1.25rem 1.25rem;
    background: rgba(10,12,16,.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow-y: auto;
    z-index: 6400; /* below navbar (3000), above hero */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }

/* Mobile menu backdrop */
.rr-menu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 6300;
}
.rr-menu-backdrop.show{
  opacity: 1;
  pointer-events: auto;
}
  #nav.rr-mobile-nav.show{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease;
  }

  #nav.rr-mobile-nav .navbar-nav{
    gap: .35rem;
    padding: 0;
  }
  #nav.rr-mobile-nav .nav-link{
    font-size: 1.15rem;
    padding: .9rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
}

@media (min-width: 992px){
  /* Desktop should behave like normal navbar collapse */
  #nav.rr-mobile-nav{
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    padding: 0;
    background: transparent;
    border-top: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    z-index: auto;
  }
}


/* R&R v32: motion + parallax */
:root{
  --rr-nav-h: 72px;
  --font-heading: 'Oswald', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --motion-fast: 220ms;
  --motion-med: 520ms;
  --motion-slow: 900ms;
  --easing-out: cubic-bezier(.2,.8,.2,1);
  --easing-snap: cubic-bezier(.22,1,.36,1);
  --film-grain: radial-gradient(circle at 20% 10%, rgba(255,255,255,.06), transparent 45%),
                radial-gradient(circle at 80% 30%, rgba(255,255,255,.04), transparent 55%),
                radial-gradient(circle at 40% 80%, rgba(0,0,0,.25), transparent 55%),
                repeating-linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 1px, transparent 3px);
}

/* Loading overlay */
.rr-preloader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(10,14,22,.98), rgba(10,14,22,.92));
  backdrop-filter: blur(10px);
  transition: opacity var(--motion-med) var(--easing-out), visibility var(--motion-med) var(--easing-out);
}
.rr-preloader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.rr-loader{
  width: min(520px, 86vw);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
}
.rr-loader:before{
  content:"";
  position:absolute;
  inset:-40%;
  background: var(--film-grain);
  opacity:.55;
  mix-blend-mode: overlay;
  filter: saturate(1.1) contrast(1.15);
  animation: rrGrain 2.6s steps(2,end) infinite;
  pointer-events:none;
}
.rr-loader-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.rr-loader-title{
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--heading);
  font-size: 18px;
  margin: 0;
}
.rr-loader-chip{
  font-size: 12px;
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.16);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  text-transform: uppercase;
  letter-spacing: .7px;
  white-space: nowrap;
}
.rr-loader-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}
.rr-loader-bar > span{
  display:block;
  height:100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(240,90,90,.35), rgba(255,255,255,.30), rgba(240,90,90,.35));
  filter: saturate(1.1);
  animation: rrLoad 1.15s var(--easing-snap) infinite;
}
.rr-loader-sub{
  margin-top: 12px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  letter-spacing: .3px;
}
@keyframes rrLoad{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(320%); }
}
@keyframes rrGrain{
  0%{ transform: translate(0,0) rotate(0deg); }
  50%{ transform: translate(2%, -3%) rotate(0.25deg); }
  100%{ transform: translate(-2%, 2%) rotate(-0.25deg); }
}

/* Optional splash overlay (first visit per session) */
.rr-splash{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(1200px 800px at 30% 20%, rgba(240,90,90,.18), transparent 55%),
              radial-gradient(900px 700px at 80% 50%, rgba(120,170,255,.16), transparent 60%),
              linear-gradient(180deg, rgba(10,14,22,.92), rgba(10,14,22,.84));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--motion-med) var(--easing-out), visibility var(--motion-med) var(--easing-out);
}
.rr-splash.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
html.rr-splash-open,
html.rr-splash-open body{
  overflow: hidden;
}
.rr-splash-card{
  width: min(860px, 92vw);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  position: relative;
  overflow: hidden;
}
.rr-splash-card:before{
  content:"";
  position:absolute;
  inset:-40%;
  background: var(--film-grain);
  opacity:.45;
  mix-blend-mode: overlay;
  animation: rrGrain 2.4s steps(2,end) infinite;
  pointer-events:none;
}
.rr-splash-inner{
  padding: 26px 26px 22px;
  position: relative;
}
.rr-splash-kicker{
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 8px;
}
.rr-splash-title{
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--heading);
  font-size: clamp(26px, 4vw, 46px);
  margin: 0 0 10px;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.rr-splash-sub{
  color: rgba(255,255,255,.80);
  font-size: 14px;
  max-width: 70ch;
  margin: 0 0 18px;
}
.rr-splash-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  justify-content:flex-start;
}
.rr-splash-skip{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--easing-out), background var(--motion-fast) var(--easing-out);
}
.rr-splash-skip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }

/* Scroll reveal */
.rr-reveal{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(1px);
  transition: opacity var(--motion-med) var(--easing-out),
              transform var(--motion-med) var(--easing-out),
              filter var(--motion-med) var(--easing-out);
  will-change: opacity, transform;
}
.rr-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.rr-reveal.delay-1{ transition-delay: 90ms; }
.rr-reveal.delay-2{ transition-delay: 160ms; }
.rr-reveal.delay-3{ transition-delay: 240ms; }

/* Parallax layers */
.rr-parallax{
  will-change: transform;
  transform: translate3d(0,0,0);
}


/* Home hero video background (clipped to container stage) */
.rr-hero-video{
  position: relative;
  --rr-grain-opacity: .55;
  --rr-vignette-opacity: .85;
}
.rr-hero-stage{
  position: relative;
  overflow: hidden;
  border-radius: 1rem; /* matches .rounded-4 */
  isolation: isolate;  /* keep blends contained */
}
.rr-hero-stage .rr-hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.rr-hero-stage video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.08) brightness(.82);
  transform: scale(1.02);
}
.rr-hero-stage .rr-hero-filter{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 20% 15%, rgba(240,90,90,.18), transparent 55%),
    radial-gradient(900px 650px at 80% 55%, rgba(120,170,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(10,14,22,.80), rgba(10,14,22,.55));
  mix-blend-mode: normal;
  z-index: 1;
}
.rr-hero-stage .rr-hero-grain{
  position: absolute;
  inset: -40%;
  background: var(--film-grain);
  opacity: var(--rr-grain-opacity);
  mix-blend-mode: overlay;
  animation: rrGrain 2.8s steps(2,end) infinite;
  z-index: 2;
}
.rr-hero-stage .rr-hero-vignette{
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 88%);
  opacity: var(--rr-vignette-opacity);
  z-index: 3;
}
.rr-hero-stage .rr-hero-content{
  position: relative;
  z-index: 4;
}

.rr-hero-video{
  /* Home hero fills the *visible* viewport (below sticky nav) */
  height: calc(100vh - var(--rr-nav-h, 72px));
  min-height: calc(100vh - var(--rr-nav-h, 72px));
  border: 0;
  box-shadow: none;
}
.rr-hero-video .rr-hero-stage{
  height: 100%;
  min-height: calc(100vh - var(--rr-nav-h, 72px));
  border-radius: 0;
}
.rr-hero-video .rr-hero-content{
  height: 100%;
  min-height: calc(100vh - var(--rr-nav-h, 72px));
  display: flex;
  align-items: center;
}
.rr-hero-video .rr-hero-container{
  width: 100%;
  /* keep the home hero content fitting at 100% zoom across browsers */
  padding: clamp(1.0rem, 2.2vh, 2.25rem) 0;
}
/* Home hero card sizing + readability tweaks */
.rr-hero-video .rr-hero-content .col-lg-7 .card .card-body{
  padding: clamp(1.25rem, 2.4vh, 2.15rem) !important;
}
.rr-hero-video .rr-hero-content .col-lg-5 .card .card-body{
  padding: clamp(1.0rem, 2.1vh, 1.75rem) !important;
}
.rr-hero-video .rr-hero-content .display-5{
  font-size: clamp(2.05rem, 2.7vw, 3.05rem);
}
.rr-hero-video .rr-hero-content .lead{
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  margin-bottom: 0.95rem !important;
}
.rr-hero-video .rr-hero-content hr{
  margin: 1.15rem 0 !important;
}
.rr-hero-video .mini-card{
  padding: .85rem .95rem;
}
.rr-hero-video .mini-text{
  font-size: .92rem;
}
.rr-hero-video .small{
  margin-top: .85rem !important;
}
/* Slightly less transparency on the home hero cards */
.rr-hero-video .rr-panel{
  background: rgba(12, 14, 18, 0.92) !important;
}
.rr-hero-video .rr-panel:before{
  opacity: .58;
}
@media (max-width: 991.98px){
  /* Mobile: do not force viewport hero sizing */
  .rr-hero-video{ height: auto; min-height: auto; }
  .rr-hero-video .rr-hero-stage{ height: auto; min-height: auto; border-radius: 1rem; }
  .rr-hero-video .rr-hero-content{ height: auto; min-height: auto; }
  .rr-hero-video .rr-hero-container{ padding: 2.25rem 0; }
}
  .rr-hero-video .rr-hero-stage{ min-height: auto; }
  .rr-hero-video .rr-hero-content{ min-height: auto; }
  .rr-hero-video .rr-hero-container{ padding: 2.25rem 0; }
}



/* Foxhole-inspired UI textures (original, vector/gradient based) */
.rr-grid-bg{
  position: relative;
}
.rr-grid-bg:before{
  border-radius: inherit;
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .18;
  pointer-events:none;
  mix-blend-mode: overlay;

  z-index: 1;
  pointer-events:none;
}
.rr-panel{
  position: relative;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.05) !important;
  overflow: hidden;
}
.rr-panel:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20px 20px, rgba(255,255,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 20px) 20px, rgba(255,255,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 20px calc(100% - 20px), rgba(255,255,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 20px) calc(100% - 20px), rgba(255,255,255,.18) 0 2px, transparent 3px),
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 35%),
    linear-gradient(315deg, rgba(0,0,0,.25), transparent 35%);
  opacity: .75;
  pointer-events:none;
}
.rr-panel > *{ position: relative; z-index: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .rr-reveal{ opacity: 1; transform:none; filter:none; }
  .rr-loader:before, .rr-splash-card:before, .rr-hero-video .rr-hero-grain{ animation: none; }
  .rr-loader-bar > span{ animation: none; width: 100%; }
}


/* Hero overlay toggle */
.rr-hero-video.rr-no-overlay .rr-hero-filter,
.rr-hero-video.rr-no-overlay .rr-hero-grain,
.rr-hero-video.rr-no-overlay .rr-hero-vignette{
  display:none;
}


.rr-hero-bg-image{position:absolute; inset:0; z-index:0; pointer-events:none; background-size:cover; background-position:center; filter: saturate(1.05) contrast(1.08) brightness(.70); transform: scale(1.02);} 


/* Firefox performance: reduce expensive blur + grain animation */
@supports (-moz-appearance: none) {
  .navbar.navbar-dark{ backdrop-filter: none; -webkit-backdrop-filter: none; }
  .rr-menu-btn{ backdrop-filter: none; -webkit-backdrop-filter: none; }
  #nav.rr-mobile-nav{ backdrop-filter: none; -webkit-backdrop-filter: none; }
  .rr-menu-backdrop{ backdrop-filter: none; }
  .rr-hero-stage .rr-hero-grain{ animation: none !important; }
  .rr-hero-stage video{ filter: none !important; transform: none !important; }
}


/* Firefox-only perf trims (LibreWolf excluded via JS UA check) */
html.rr-firefox *{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.rr-firefox .rr-hero-grain{ display: none !important; }
html.rr-firefox .rr-grid-bg:before{
  mix-blend-mode: normal !important;
  opacity: .12 !important;
}
html.rr-firefox .hero::before,
html.rr-firefox .hero::after{ display: none !important; }
html.rr-firefox .rr-hero-stage video{
  filter: none !important;
  transform: none !important;
}
html.rr-firefox .hero{ box-shadow: none !important; }



/* Home layout: allow hero to span full viewport */
.rr-main-home{ padding:0; margin:0; }

/* Footer social icon buttons */
.rr-social-icons { margin-left: .25rem; }
.rr-social-btn{
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
}
.rr-social-btn i{ font-size: 1rem; line-height: 1; }


/* Force non-gray text (requested): muted/secondary/help text should be white */
.text-muted, .text-secondary, .form-text { color: #ffffff !important; opacity: 1 !important; }


/* Force white text on Recruitment + Regiment (no gray / no muted) */
.page-join,
.page-regiment{
  color: #ffffff !important;
}
.page-join p, .page-join li, .page-join div, .page-join span, .page-join small, .page-join label,
.page-regiment p, .page-regiment li, .page-regiment div, .page-regiment span, .page-regiment small, .page-regiment label{
  color: #ffffff !important;
  opacity: 1 !important;
}
.page-join .text-muted, .page-join .text-secondary, .page-join .text-body-secondary,
.page-regiment .text-muted, .page-regiment .text-secondary, .page-regiment .text-body-secondary{
  color: #ffffff !important;
  opacity: 1 !important;
}
.page-join .form-text, .page-regiment .form-text{
  color: #ffffff !important;
  opacity: 1 !important;
}
.page-join .opacity-75, .page-join .opacity-50, .page-join .opacity-25,
.page-regiment .opacity-75, .page-regiment .opacity-50, .page-regiment .opacity-25{
  opacity: 1 !important;
}


/* Quick application form: keep labels/help/status text white (but keep error colors) */
.rr-apply-form .form-label,
.rr-apply-form .form-check-label,
.rr-apply-form .form-text,
.rr-apply-form #applyStatus,
.rr-apply-form .small{
  color: #ffffff !important;
  opacity: 1 !important;
}
.rr-apply-form .invalid-feedback{
  color: #ffb3b3 !important; /* keep errors readable */
}


/* Dark form controls (fix admin inputs turning white) */
.bg-ink .form-control,
.bg-ink .form-select,
.bg-ink .form-control-sm,
.bg-ink .form-select-sm{
  background-color: var(--ink-2);
  color: #fff;
  border-color: var(--ink-3);
}
.bg-ink .form-control::placeholder,
.bg-ink .form-select::placeholder{
  color: rgba(255,255,255,.55);
}
.bg-ink .form-control:focus,
.bg-ink .form-select:focus,
.bg-ink .form-control-sm:focus,
.bg-ink .form-select-sm:focus{
  background-color: var(--ink-2);
  color: #fff;
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.08);
}
.table-dark .form-control,
.table-dark .form-select{
  background-color: var(--ink-2);
  color: #fff;
  border-color: var(--ink-3);
}