:root {
  --bg: #070707;
  --bg-soft: #0d0d0d;
  --panel: rgba(18, 18, 18, 0.78);
  --text: #f3f1ee;
  --muted: #aaa5a0;
  --line: rgba(255,255,255,0.12);
  --red: #c51f1f;
  --red-bright: #ef2d25;
  --max: 1180px;
  --header: 78px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -10%, rgba(197,31,31,.16), transparent 28rem),
    linear-gradient(180deg, #090909 0%, #050505 45%, #090909 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 90%);
}

.page-noise {
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: .045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

a { color: inherit; }
img { display: block; max-width: 100%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 64px);
  background: rgba(7,7,7,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.brand {
  text-decoration: none;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand-rbc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 10px 1px;
  border: 1px solid rgba(255,255,255,.34);
  border-left: 3px solid var(--red-bright);
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.015));
  box-shadow: inset 0 0 0 1px rgba(197,31,31,.12), 0 8px 28px rgba(0,0,0,.22);
  color: white;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -.035em;
}
.brand-copy {
  display: grid;
  align-content: center;
  line-height: 1;
  min-width: 0;
}
.brand-title {
  color: #f1efec;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .145em;
  white-space: nowrap;
}
.brand-collision {
  margin-top: 3px;
  color: var(--red-bright);
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 1.16rem;
  letter-spacing: .055em;
  white-space: nowrap;
}
.brand-tagline {
  margin-top: 4px;
  color: #746f6b;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .025em;
  white-space: nowrap;
}
.club-link {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  color: #d7d3cf;
  transition: color .2s ease;
}
.club-link:hover { color: white; }

.section-shell {
  width: min(calc(100% - 40px), var(--max));
  margin: 0 auto;
}

.hero {
  min-height: calc(100svh - var(--header));
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .55fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
  position: relative;
  padding-block: clamp(70px, 10vw, 150px);
}

.hero-copy { position: relative; z-index: 3; }
.hero h1,
.section-heading h2,
.flyer-copy h2,
.details-panel h2,
.club-section h2,
.closing h2 {
  margin: 0;
  text-transform: uppercase;
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  font-stretch: condensed;
  line-height: .88;
  letter-spacing: -.045em;
}
.hero h1 { font-size: clamp(4.2rem, 10.2vw, 9.5rem); max-width: 9ch; }
.hero h1 strong,
.section-heading strong,
.flyer-copy strong,
.details-panel strong,
.club-section strong { color: var(--red-bright); font-weight: inherit; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: #d6d1cc;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .17em;
}
.eyebrow span { width: 34px; height: 2px; background: var(--red-bright); display: inline-block; }

.lead {
  max-width: 660px;
  margin: 30px 0 0;
  color: #beb9b4;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.72;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border-radius: 4px;
  border: 1px solid transparent;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .1em;
  font-weight: 900;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--red); color: white; box-shadow: 0 14px 40px rgba(197,31,31,.2); }
.button-primary:hover { background: var(--red-bright); }
.button-ghost { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.15); color: #eeeae6; }
.button-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.28); }
.button-large { min-height: 58px; padding-inline: 28px; white-space: nowrap; }

.hero-side {
  border-left: 1px solid rgba(255,255,255,.14);
  padding-left: clamp(24px, 4vw, 46px);
  position: relative;
  z-index: 2;
}
.side-kicker { margin: 0; color: #aaa49f; font-size: .72rem; font-weight: 850; letter-spacing: .18em; }
.side-big {
  margin: 8px 0 -4px;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(5rem, 11vw, 9rem);
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.7);
}
.side-note { max-width: 220px; margin: 12px 0 0; color: #8f8984; line-height: 1.55; font-size: .9rem; }

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  opacity: .5;
}
.hero-glow-one { width: 300px; height: 300px; background: rgba(197,31,31,.16); right: 2%; top: 18%; animation: floatGlow 8s ease-in-out infinite; }
.hero-glow-two { width: 180px; height: 180px; background: rgba(255,255,255,.06); left: 20%; bottom: 8%; animation: floatGlow 10s ease-in-out infinite reverse; }
@keyframes floatGlow { 50% { transform: translate3d(18px,-16px,0) scale(1.08); } }

.ticker-wrap {
  overflow: hidden;
  border-block: 1px solid rgba(255,255,255,.1);
  background: #0d0d0d;
  transform: rotate(-1.25deg) scale(1.02);
  margin-block: 12px 100px;
}
.ticker {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 13px 0;
  animation: ticker 28s linear infinite;
  font: 900 .77rem/1 Arial, sans-serif;
  letter-spacing: .16em;
  color: #e5e1dd;
}
.ticker i { color: var(--red-bright); font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

.tease { padding: 70px 0 140px; }
.section-heading { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: end; margin-bottom: 44px; }
.section-heading .eyebrow { align-self: start; }
.section-heading h2,
.flyer-copy h2,
.details-panel h2,
.club-section h2 { font-size: clamp(3rem, 6.6vw, 6.4rem); }
.tease-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tease-card {
  min-height: 325px;
  padding: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  border: 1px solid var(--line);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.tease-card::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(197,31,31,.11);
  filter: blur(30px);
  right: -70px;
  bottom: -80px;
}
.card-number { color: var(--red-bright); font: 900 .7rem/1 Arial, sans-serif; letter-spacing: .15em; }
.tease-card h3 { margin: 54px 0 12px; font-size: 1.25rem; text-transform: uppercase; letter-spacing: -.02em; }
.tease-card p { margin: 0; color: #a9a39e; line-height: 1.65; font-size: .96rem; }

.flyer-section {
  display: grid;
  grid-template-columns: .72fr 1.1fr;
  gap: clamp(50px, 8vw, 110px);
  align-items: center;
  padding: 80px 0 150px;
}
.flyer-copy { position: sticky; top: 130px; align-self: start; }
.flyer-copy p:last-child { color: #aaa49f; line-height: 1.7; font-size: 1rem; max-width: 470px; margin-top: 28px; }
.flyer-frame {
  margin: 0;
  position: relative;
  padding: 12px;
  border: 1px solid rgba(197,31,31,.92);
  background: #0c0c0c;
  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 80px rgba(197,31,31,.16);
}
.flyer-frame picture { display: block; position: relative; z-index: 2; }
.flyer-frame img { width: 100%; height: auto; }
.flyer-frame figcaption {
  padding: 14px 6px 4px;
  color: #77716d;
  font-size: .67rem;
  letter-spacing: .15em;
  text-align: center;
}
.poster-light {
  position: absolute;
  z-index: 1;
  inset: -50px;
  background: radial-gradient(circle, rgba(197,31,31,.12), transparent 60%);
  filter: blur(15px);
}

.reveal-details { padding: 80px 0 150px; }
.details-panel {
  border-block: 1px solid var(--line);
  padding: clamp(45px, 7vw, 90px) 0;
}
.details-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 46px;
}
.details-list span {
  padding: 18px 16px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.025);
  font: 900 .78rem/1.1 Arial, sans-serif;
  letter-spacing: .08em;
}
.details-list b { display: block; color: #716c68; font-size: .67rem; margin-top: 8px; font-weight: 700; letter-spacing: .12em; }
.details-text { color: #aaa49f; max-width: 610px; line-height: 1.7; margin: 28px 0 0; }

.club-section {
  padding: 90px 0 120px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 60px;
}
.club-section p:not(.eyebrow) { max-width: 710px; color: #aaa49f; line-height: 1.7; margin: 26px 0 0; }

.closing {
  text-align: center;
  padding: 150px 0 170px;
  position: relative;
}
.closing::before {
  content: "";
  width: min(650px, 70vw);
  height: 250px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(197,31,31,.13), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
}
.closing-small { color: #857f7a; font-size: .72rem; font-weight: 850; letter-spacing: .18em; }
.closing h2 { font-size: clamp(4.5rem, 11vw, 10rem); position: relative; }
.closing > p:last-child { color: var(--red-bright); text-transform: uppercase; letter-spacing: .14em; font-weight: 900; font-size: .8rem; position: relative; }

.site-footer {
  min-height: 110px;
  padding: 26px clamp(20px, 4vw, 64px);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  color: #77716c;
  font-size: .75rem;
}
.site-footer div { display: grid; gap: 5px; }
.footer-copyright { color: #625d59; font-size: .68rem; line-height: 1.45; letter-spacing: .015em; }
.site-footer strong { color: #c4bfba; letter-spacing: .12em; }
.site-footer nav { display: flex; gap: 20px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: white; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.65,.3,1);
}
.reveal[data-delay="1"] { transition-delay: .13s; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  :root { --header: 68px; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 88px; }
  .hero-side { display: none; }
  .hero h1 { font-size: clamp(4.1rem, 18vw, 7.5rem); }
  .section-heading { grid-template-columns: 1fr; gap: 16px; }
  .tease-grid { grid-template-columns: 1fr; }
  .tease-card { min-height: auto; }
  .tease-card h3 { margin-top: 42px; }
  .flyer-section { grid-template-columns: 1fr; }
  .flyer-copy { position: static; }
  .details-list { grid-template-columns: repeat(2,1fr); }
  .club-section { grid-template-columns: 1fr; align-items: start; }
  .button-large { width: fit-content; }
}

@media (max-width: 560px) {
  .section-shell { width: min(calc(100% - 28px), var(--max)); }
  .site-header { padding-inline: 14px; }
  .brand-lockup { gap: 8px; }
  .brand-rbc { height: 40px; padding-inline: 8px; font-size: 1.45rem; }
  .brand-title { font-size: .56rem; letter-spacing: .11em; }
  .brand-collision { font-size: 1rem; }
  .brand-tagline { display: none; }
  .club-link { font-size: .61rem; letter-spacing: .045em; }
  .hero { padding-block: 72px 90px; }
  .hero h1 { font-size: clamp(3.7rem, 19vw, 6rem); }
  .lead { font-size: 1rem; line-height: 1.65; }
  .hero-actions .button { width: 100%; }
  .ticker-wrap { margin-bottom: 64px; }
  .tease { padding: 42px 0 95px; }
  .section-heading h2,
  .flyer-copy h2,
  .details-panel h2,
  .club-section h2 { font-size: clamp(3.1rem, 15vw, 5.2rem); }
  .flyer-section { padding: 48px 0 90px; gap: 42px; }
  .flyer-frame { padding: 7px; }
  .reveal-details { padding: 45px 0 90px; }
  .details-list { grid-template-columns: 1fr 1fr; }
  .details-list span { font-size: .7rem; padding-inline: 12px; }
  .club-section { padding: 55px 0 90px; gap: 32px; }
  .button-large { width: 100%; }
  .closing { padding: 100px 0 120px; }
  .closing h2 { font-size: clamp(4rem, 20vw, 7rem); }
  .site-footer { flex-direction: column; align-items: flex-start; padding-block: 28px; }
}

@media (max-width: 410px) {
  .site-header { padding-inline: 10px; }
  .brand-lockup { gap: 7px; }
  .brand-rbc { height: 37px; padding-inline: 7px; font-size: 1.3rem; }
  .brand-title { font-size: .49rem; letter-spacing: .08em; }
  .brand-collision { font-size: .88rem; letter-spacing: .04em; }
  .club-link { font-size: .56rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker, .hero-glow { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .button { transition: none; }
}

/* Retro experience section */
.retro-promise {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(50px, 8vw, 110px);
  align-items: center;
  margin-top: -50px;
  margin-bottom: 70px;
  padding: clamp(55px, 7vw, 90px) clamp(28px, 5vw, 70px);
  border: 1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(115deg, rgba(197,31,31,.12), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  overflow: hidden;
}
.retro-promise::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.012) 6px);
  opacity: .55;
}
.retro-promise-copy,
.retro-stamp { position: relative; z-index: 1; }
.retro-promise h2 {
  margin: 0;
  max-width: 11ch;
  text-transform: uppercase;
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  font-size: clamp(3rem, 6.4vw, 6rem);
  font-stretch: condensed;
  line-height: .9;
  letter-spacing: -.045em;
}
.retro-promise h2 strong { color: var(--red-bright); font-weight: inherit; }
.retro-promise-copy > p:not(.eyebrow) {
  max-width: 760px;
  margin: 26px 0 0;
  color: #aaa49f;
  font-size: 1rem;
  line-height: 1.75;
}
.retro-stamp {
  aspect-ratio: 1 / 1;
  width: min(100%, 330px);
  justify-self: end;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,.32);
  outline: 1px solid rgba(197,31,31,.48);
  outline-offset: -10px;
  border-radius: 50%;
  transform: rotate(-3deg);
  background: radial-gradient(circle, rgba(197,31,31,.16), rgba(0,0,0,.2) 60%, transparent 61%);
  box-shadow: 0 25px 70px rgba(0,0,0,.35), inset 0 0 60px rgba(197,31,31,.08);
}
.retro-stamp-small,
.retro-stamp-bottom {
  color: #a8a29d;
  font: 850 .64rem/1.3 Arial, sans-serif;
  letter-spacing: .16em;
}
.retro-stamp strong {
  margin: 12px 0;
  color: #f0ede9;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  line-height: .78;
  letter-spacing: .01em;
  text-shadow: 0 2px 0 #000, 0 0 22px rgba(197,31,31,.12);
}
.retro-stamp strong::first-line { color: var(--red-bright); }

/* Footer social links */
.footer-links {
  display: grid;
  justify-items: end;
  gap: 14px !important;
}
.site-footer .social-links,
.site-footer .legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}
.site-footer .social-links a {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.025);
  color: #aaa49f;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.site-footer .social-links a:hover {
  color: white;
  border-color: rgba(239,45,37,.55);
  background: rgba(197,31,31,.09);
}
.site-footer .legal-links { gap: 20px; }

@media (max-width: 1050px) {
  .tease-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .tease-grid { grid-template-columns: 1fr; }
  .retro-promise {
    grid-template-columns: 1fr;
    margin-top: -20px;
  }
  .retro-stamp { justify-self: start; width: min(78vw, 310px); }
}

@media (max-width: 560px) {
  .retro-promise {
    padding: 42px 22px;
    margin-bottom: 30px;
  }
  .retro-promise h2 { font-size: clamp(3rem, 14.5vw, 5rem); }
  .retro-stamp { justify-self: center; width: min(75vw, 280px); }
  .footer-links { justify-items: start; width: 100%; }
  .site-footer .social-links,
  .site-footer .legal-links { justify-content: flex-start; }
}


/* Full-page background image with a soft lower transition */
.page-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/rbc-background.webp");
  background-repeat: no-repeat;
  background-position: center calc(var(--header) + 18px);
  background-size: min(86vw, 1120px) auto;
  opacity: .92;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 56%,
    rgba(0,0,0,.96) 64%,
    rgba(0,0,0,.78) 72%,
    rgba(0,0,0,.48) 80%,
    rgba(0,0,0,.18) 88%,
    transparent 96%);
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 56%,
    rgba(0,0,0,.96) 64%,
    rgba(0,0,0,.78) 72%,
    rgba(0,0,0,.48) 80%,
    rgba(0,0,0,.18) 88%,
    transparent 96%);
}

/* Dark veil keeps text readable and blends the photo into the page. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,4,4,.56) 0%, rgba(4,4,4,.66) 28%, rgba(4,4,4,.75) 54%, rgba(4,4,4,.88) 78%, rgba(4,4,4,.96) 100%),
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.07), transparent 34%);
}

main,
.site-footer {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .page-background {
    background-position: center calc(var(--header) + 10px);
    background-size: min(96vw, 1000px) auto;
    -webkit-mask-image: linear-gradient(to bottom,
      #000 0%, #000 54%, rgba(0,0,0,.92) 64%, rgba(0,0,0,.65) 76%, rgba(0,0,0,.28) 87%, transparent 97%);
    mask-image: linear-gradient(to bottom,
      #000 0%, #000 54%, rgba(0,0,0,.92) 64%, rgba(0,0,0,.65) 76%, rgba(0,0,0,.28) 87%, transparent 97%);
  }
}

@media (max-width: 560px) {
  .page-background {
    background-position: center calc(var(--header) + 8px);
    background-size: 118% auto;
    -webkit-mask-image: linear-gradient(to bottom,
      #000 0%, #000 50%, rgba(0,0,0,.90) 61%, rgba(0,0,0,.58) 75%, rgba(0,0,0,.20) 88%, transparent 98%);
    mask-image: linear-gradient(to bottom,
      #000 0%, #000 50%, rgba(0,0,0,.90) 61%, rgba(0,0,0,.58) 75%, rgba(0,0,0,.20) 88%, transparent 98%);
  }
}


/* RBC + RETRO BOXING brand refinements */
.brand-rbc-wrap {
  display: grid;
  justify-items: center;
  gap: 3px;
  flex: 0 0 auto;
}
.brand-domain {
  color: #77716d;
  font-size: .47rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .085em;
  text-transform: lowercase;
  white-space: nowrap;
}
.side-domain {
  display: inline-block;
  margin: 0 0 10px 2px;
  color: #716c68;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: lowercase;
  transition: color .2s ease;
}
.side-domain:hover { color: #bcb6b1; }

.club-brand-heading .club-name { color: #f2efec; }
.club-brand-heading .club-initial {
  color: var(--red-bright);
}
.club-brand-heading .club-ev {
  display: inline-block;
  text-transform: lowercase;
  margin-left: .16em;
  color: #8d8782;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .38em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .025em;
  vertical-align: .34em;
}

@media (max-width: 560px) {
  .brand-rbc-wrap { gap: 2px; }
  .brand-domain { font-size: .39rem; letter-spacing: .055em; }
  .club-brand-heading .club-ev { font-size: .34em; }
}

@media (max-width: 410px) {
  .brand-domain { display: none; }
}


/* v9: subtle suspense labels + stronger closing line */
.details-list span {
  position: relative;
  overflow: hidden;
}
.details-list span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 1px;
  background: rgba(239,45,37,.72);
}
.details-list b {
  color: #8d8782;
  text-transform: none;
  letter-spacing: .06em;
}
.details-pulse {
  display: block;
  margin-top: 12px;
  color: #d2ccc7;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.closing .closing-ringline {
  margin: 20px 0 0;
  color: #e6e1dc;
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  font-size: clamp(1.35rem, 2.7vw, 2.25rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: .02em;
  text-transform: uppercase;
  position: relative;
}
.closing .closing-ringline span {
  color: var(--red-bright);
}


/* v10: wider RBC location promise + guaranteed lowercase e. v. */
.location-reach {
  display: block;
  max-width: 690px;
  margin-top: 12px;
  color: #8f8984;
  font-size: .92rem;
  line-height: 1.65;
}
.club-brand-heading .club-ev {
  text-transform: lowercase !important;
}


/* v12: consistent RETRO BOXING e. V. branding across the page */
.rb-club-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
  text-transform: none !important;
}
.rb-club-inline .rb-r,
.rb-club-inline .rb-b {
  color: var(--red-bright);
}
.rb-club-inline .rb-ev {
  display: inline-block;
  margin-left: .16em;
  color: #8d8782;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .72em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  vertical-align: .28em;
  text-transform: none !important;
}
.brand-tagline .rb-club-inline { color: inherit; }
.brand-tagline .rb-club-inline .rb-ev { font-size: .92em; }
.club-link .rb-club-inline { color: inherit; }
.club-link .rb-club-inline .rb-ev { font-size: .78em; }
.side-note .rb-club-inline { color: inherit; }
.side-note .rb-club-inline .rb-ev { font-size: .8em; }
.footer-brand .rb-club-inline { color: #c4bfba; }
.footer-brand .rb-club-inline .rb-ev { font-size: .76em; }
.footer-copyright .rb-club-inline { color: inherit; }
.footer-copyright .rb-club-inline .rb-ev { font-size: .82em; }


/* v13: correct e. V. styling and softer footer */
.rb-club-inline {
  display: inline-flex;
  align-items: baseline;
  gap: .22em;
  white-space: nowrap;
  text-transform: none !important;
}
.rb-club-inline .rb-word {
  display: inline-block;
}
.rb-club-inline .rb-r,
.rb-club-inline .rb-b {
  color: var(--red-bright);
}
.rb-club-inline .rb-ev {
  display: inline-block;
  margin-left: .02em;
  color: #8d8782;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .58em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  vertical-align: .34em;
  text-transform: none !important;
}
.brand-tagline .rb-club-inline { color: inherit; }
.brand-tagline .rb-club-inline .rb-ev { font-size: .88em; }
.club-link .rb-club-inline { color: inherit; }
.club-link .rb-club-inline .rb-ev { font-size: .74em; }
.side-note .rb-club-inline { color: inherit; }
.side-note .rb-club-inline .rb-ev { font-size: .76em; }
.club-brand-heading .rb-club-inline { gap: .24em; }
.club-brand-heading .rb-club-inline .rb-ev { font-size: .46em; }
.footer-brand .rb-club-inline { color: inherit; }
.footer-brand .rb-club-inline .rb-ev { font-size: .74em; }
.footer-copyright .rb-club-inline { color: inherit; }
.footer-copyright .rb-club-inline .rb-ev { font-size: .78em; }

.site-footer {
  color: rgba(199, 193, 188, .70);
}
.site-footer .footer-brand,
.site-footer .footer-links,
.site-footer .social-links a,
.site-footer .legal-links a,
.site-footer .footer-copyright {
  opacity: .70;
}
.site-footer .social-links a:hover,
.site-footer .legal-links a:hover {
  opacity: 1;
}
.footer-domain {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  color: rgba(244, 240, 235, .70);
}
.footer-domain-rb {
  color: rgba(244, 240, 235, .70);
}
.footer-domain-collision {
  color: rgba(239,45,37,.70);
}
.footer-domain-dot {
  color: rgba(244, 240, 235, .70);
}

@media (max-width: 560px) {
  .club-brand-heading .rb-club-inline .rb-ev { font-size: .42em; }
}


/* v14: collision emphasis in copyright */
.footer-collision-inline {
  color: rgba(239,45,37,.70);
}


/* v15: rbcollision.com directly under RBC */
.hero-side .side-big {
  margin-bottom: -10px;
}
.hero-side .side-domain {
  margin-top: 0;
  margin-bottom: 8px;
  line-height: 1;
}


/* v17: footer unified, no red accents, 90% opacity */
.site-footer {
  color: rgba(199, 193, 188, .90);
}
.site-footer .footer-brand,
.site-footer .footer-links,
.site-footer .social-links a,
.site-footer .legal-links a,
.site-footer .footer-copyright {
  opacity: .90;
}
.site-footer .footer-domain,
.site-footer .footer-domain-rb,
.site-footer .footer-domain-collision,
.site-footer .footer-domain-dot,
.site-footer .footer-collision-inline,
.site-footer .rb-club-inline,
.site-footer .rb-club-inline .rb-r,
.site-footer .rb-club-inline .rb-b,
.site-footer .rb-club-inline .rb-ev,
.site-footer strong {
  color: rgba(244, 240, 235, .90) !important;
}


/* v18: bigger RBC and domain closer underneath */
.hero-side .side-big {
  font-size: clamp(5.9rem, 13vw, 10.4rem);
  margin: 4px 0 -14px;
  line-height: .86;
}
.hero-side .side-domain {
  display: inline-block;
  margin: 0 0 8px 3px;
  font-size: .78rem;
  letter-spacing: .16em;
  position: relative;
  top: -8px;
}
.hero-side .side-note {
  margin-top: 2px;
}
@media (max-width: 560px) {
  .hero-side .side-big {
    font-size: clamp(5rem, 18vw, 8rem);
  }
  .hero-side .side-domain {
    top: -6px;
    font-size: .7rem;
  }
}


/* v19: domain clearly below RBC, no overlap */
.hero-side .side-big {
  font-size: clamp(5.9rem, 13vw, 10.4rem);
  margin: 4px 0 6px;
  line-height: .9;
}
.hero-side .side-domain {
  display: block;
  position: static;
  top: auto;
  margin: 0 0 12px 3px;
  font-size: .76rem;
  line-height: 1.15;
  letter-spacing: .16em;
}
.hero-side .side-note {
  margin-top: 0;
}
@media (max-width: 560px) {
  .hero-side .side-big {
    font-size: clamp(5rem, 18vw, 8rem);
    margin-bottom: 5px;
  }
  .hero-side .side-domain {
    font-size: .68rem;
    margin-bottom: 10px;
  }
}


/* v20: subtle background music control */
.music-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 2px solid rgba(197,31,31,.92);
  border-radius: 999px;
  background: rgba(7,7,7,.76);
  color: rgba(244,240,235,.84);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  font: 800 .64rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, opacity .2s ease, transform .2s ease;
}
.music-toggle:hover {
  border-color: rgba(255,255,255,.3);
  background: rgba(13,13,13,.9);
  transform: translateY(-1px);
}
.music-toggle-icon {
  color: var(--red-bright);
  font-size: .95rem;
  line-height: 1;
}
.music-toggle.is-playing .music-toggle-icon {
  animation: musicPulse 1.8s ease-in-out infinite;
}
@keyframes musicPulse {
  50% { opacity: .45; transform: scale(.92); }
}
@media (max-width: 560px) {
  .music-toggle {
    right: 12px;
    bottom: 12px;
    min-height: 36px;
    padding-inline: 11px;
    font-size: .6rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .music-toggle.is-playing .music-toggle-icon { animation: none; }
}


/* v21: no visible music controls */
.music-control,
.music-toggle,
.audio-toggle,
.music-button {
  display: none !important;
}


/* v27: stacked RB / COLLISION mark in the top logo */
.brand-rbc-stacked {
  min-width: 72px;
  height: 54px;
  padding: 5px 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.brand-rbc-stacked .brand-rb-main {
  display: block;
  font: inherit;
  font-size: 1.68rem;
  line-height: .82;
  letter-spacing: -.04em;
}
.brand-rbc-stacked .brand-rb-sub {
  display: block;
  color: var(--red-bright);
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: .58rem;
  line-height: 1;
  letter-spacing: .10em;
}
@media (max-width: 560px) {
  .brand-rbc-stacked { min-width: 62px; height: 46px; padding: 4px 7px 5px; }
  .brand-rbc-stacked .brand-rb-main { font-size: 1.42rem; }
  .brand-rbc-stacked .brand-rb-sub { font-size: .49rem; letter-spacing: .08em; }
}
@media (max-width: 410px) {
  .brand-rbc-stacked { min-width: 58px; height: 43px; }
  .brand-rbc-stacked .brand-rb-main { font-size: 1.3rem; }
  .brand-rbc-stacked .brand-rb-sub { font-size: .45rem; }
}


/* v28: bigger stacked RB/COLLISION mark in hero and header */
.brand-rbc-stacked {
  min-width: 86px;
  height: 64px;
  padding: 6px 12px 7px;
  gap: 2px;
}
.brand-rbc-stacked .brand-rb-main {
  font-size: 2rem;
  line-height: .8;
  letter-spacing: -.045em;
}
.brand-rbc-stacked .brand-rb-sub {
  color: #f1efec;
  font-size: .68rem;
  line-height: .95;
  letter-spacing: .08em;
}
.hero-mark-stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  margin: 8px 0 6px;
}
.hero-mark-main {
  display: block;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(6.4rem, 14.5vw, 11rem);
  line-height: .82;
  letter-spacing: -.055em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.76);
}
.hero-mark-sub {
  display: block;
  width: 100%;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(1.22rem, 2.45vw, 1.9rem);
  line-height: .94;
  letter-spacing: .12em;
  color: #f1efec;
  text-align: left;
}
.hero-side .side-domain {
  margin: 2px 0 12px 2px;
}
@media (max-width: 560px) {
  .brand-rbc-stacked { min-width: 73px; height: 54px; padding: 5px 10px 6px; }
  .brand-rbc-stacked .brand-rb-main { font-size: 1.68rem; }
  .brand-rbc-stacked .brand-rb-sub { font-size: .56rem; }
  .hero-mark-main { font-size: clamp(5.2rem, 18vw, 8rem); }
  .hero-mark-sub { font-size: clamp(1rem, 4.6vw, 1.35rem); }
}
@media (max-width: 410px) {
  .brand-rbc-stacked { min-width: 68px; height: 50px; }
  .brand-rbc-stacked .brand-rb-main { font-size: 1.52rem; }
  .brand-rbc-stacked .brand-rb-sub { font-size: .51rem; }
}


/* v29: soft recurring fade to the glowing-eyes background */
.page-background-normal {
  opacity: .92;
}
.page-background-eyes {
  background-image: url("assets/rbc-background-eyes.webp");
  opacity: 0;
  animation: rbcEyesFade 18s ease-in-out infinite;
  will-change: opacity;
}
@keyframes rbcEyesFade {
  0%, 28%   { opacity: 0; }
  44%, 58%  { opacity: .88; }
  74%, 100% { opacity: 0; }
}

/* COLLISION spans exactly from the left edge of R to the right edge of B. */
.mark-word-stretch {
  box-sizing: border-box;
  display: flex !important;
  width: 100% !important;
  justify-content: space-between;
  align-items: baseline;
  letter-spacing: 0 !important;
  white-space: nowrap;
}
.mark-word-stretch > span {
  display: block;
  flex: 0 0 auto;
}

/* Hero RB establishes the exact mark width; COLLISION uses that same width. */
.hero-mark-stacked {
  width: max-content;
  align-items: stretch;
}
.hero-mark-main {
  display: block;
  width: max-content;
}
.hero-mark-sub {
  align-self: stretch;
  padding-inline: .015em;
}

/* Top-left logo follows the same edge-to-edge RB / COLLISION construction. */
.brand-rbc-wrap {
  display: grid !important;
  justify-items: center;
}
.brand-rbc-stacked {
  width: max-content;
  min-width: 92px;
  height: 68px;
  align-items: stretch;
}
.brand-rbc-stacked .brand-rb-main {
  width: max-content;
  align-self: center;
}
.brand-rbc-stacked .brand-rb-sub {
  align-self: stretch;
  padding-inline: .02em;
}

@media (max-width: 560px) {
  .brand-rbc-stacked {
    min-width: 78px;
    height: 57px;
  }
}
@media (max-width: 410px) {
  .brand-rbc-stacked {
    min-width: 72px;
    height: 53px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-background-eyes {
    animation: none;
    opacity: 0;
  }
}


/* v29.1: measure RB and make COLLISION visually use exactly the same width. */
.mark-word-stretch {
  width: auto !important;
  align-self: center !important;
}
.hero-mark-sub,
.brand-rbc-stacked .brand-rb-sub {
  align-self: center !important;
}


/* v30: final RB COLLISION identity + larger marks */
.brand-rbc-stacked {
  min-width: 112px !important;
  height: 82px !important;
  padding: 7px 13px 8px !important;
}
.brand-rbc-stacked .brand-rb-main {
  font-size: 2.55rem !important;
  line-height: .79 !important;
}
.brand-rbc-stacked .brand-rb-sub {
  font-size: .78rem !important;
  line-height: .95 !important;
}
.hero-mark-main {
  font-size: clamp(7.4rem, 16vw, 12.6rem) !important;
}
.hero-mark-sub {
  font-size: clamp(1.42rem, 2.85vw, 2.25rem) !important;
}
@media (max-width: 560px) {
  .brand-rbc-stacked { min-width: 90px !important; height: 66px !important; }
  .brand-rbc-stacked .brand-rb-main { font-size: 2rem !important; }
  .brand-rbc-stacked .brand-rb-sub { font-size: .63rem !important; }
  .hero-mark-main { font-size: clamp(5.8rem, 20vw, 8.6rem) !important; }
  .hero-mark-sub { font-size: clamp(1.08rem, 5vw, 1.5rem) !important; }
}
@media (max-width: 410px) {
  .brand-rbc-stacked { min-width: 84px !important; height: 61px !important; }
  .brand-rbc-stacked .brand-rb-main { font-size: 1.82rem !important; }
  .brand-rbc-stacked .brand-rb-sub { font-size: .58rem !important; }
}


/* v31: no duplicate RB COLLISION wording + full-width COLLISION under RB */
.mark-word-stretch {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-self: stretch !important;
  text-align: justify;
}
.mark-word-stretch > span {
  display: block;
  flex: 0 0 auto;
}
.hero-mark-sub,
.brand-rbc-stacked .brand-rb-sub {
  width: 100% !important;
  align-self: stretch !important;
  padding-inline: 0 !important;
}
.hero-mark-stacked {
  align-items: stretch !important;
}
.brand-rbc-wrap {
  justify-items: stretch !important;
}
.brand-rbc-stacked {
  align-items: stretch !important;
}
.side-kicker,
.closing-small {
  letter-spacing: .14em;
}


/* v32: keep the eye-shadow transition only while music is playing */
body.audio-finished .page-background-eyes {
  animation: none !important;
  opacity: 0 !important;
  transition: opacity 1.4s ease;
}

/* v32: ensure RB/COLLISION is edge-aligned, not centered */
.hero-mark-stacked {
  width: max-content !important;
  align-items: stretch !important;
  justify-items: start !important;
}
.hero-mark-main,
.hero-mark-sub {
  text-align: left !important;
}
.brand-rbc-wrap {
  display: grid !important;
  justify-items: start !important;
}
.brand-rbc-stacked {
  width: max-content !important;
  align-items: stretch !important;
}
.brand-rbc-stacked .brand-rb-main,
.brand-rbc-stacked .brand-rb-sub {
  text-align: left !important;
}
.mark-word-stretch {
  justify-content: space-between !important;
  width: 100% !important;
}


/* v33: exact RB/COLLISION logo geometry using one SVG coordinate system */
.brand-lockup {
  gap: 0 !important;
}
.brand-mark-wrap {
  display: grid;
  justify-items: start;
  gap: 0;
}
.rb-mark {
  display: block;
  overflow: visible;
}
.rb-mark-rb,
.rb-mark-collision {
  font-family: Impact, "Arial Narrow", sans-serif;
  font-weight: 900;
}
.rb-mark-rb {
  fill: rgba(0,0,0,0);
  stroke: rgba(242,239,236,.82);
  stroke-width: 1.6;
  paint-order: stroke;
  letter-spacing: 0;
}
.rb-mark-collision {
  fill: #f2efec;
  stroke: none;
  font-size: 44px;
  letter-spacing: 0;
}
.rb-mark-header {
  width: 118px;
  height: auto;
}
.brand-mark-wrap .brand-domain {
  width: 118px;
  margin-top: -2px;
  text-align: center;
  font-size: .49rem;
  letter-spacing: .10em;
}
.rb-mark-hero {
  width: clamp(210px, 22vw, 330px);
  height: auto;
}
.hero-mark-svg-wrap {
  width: max-content;
  margin: 8px 0 4px;
}
.hero-side .side-domain {
  margin: 0 0 11px 2px !important;
}

/* Eye background only while the audio sequence is actually playing. */
.page-background-eyes {
  animation: none !important;
  opacity: 0;
}
body.audio-playing:not(.audio-finished) .page-background-eyes {
  animation: rbcEyesFade 18s ease-in-out infinite !important;
}
body.audio-finished .page-background-eyes {
  animation: none !important;
  opacity: 0 !important;
  transition: opacity 1.4s ease;
}

@media (max-width: 560px) {
  .rb-mark-header { width: 96px; }
  .brand-mark-wrap .brand-domain { width: 96px; font-size: .43rem; }
  .rb-mark-hero { width: min(62vw, 275px); }
}
@media (max-width: 410px) {
  .rb-mark-header { width: 88px; }
  .brand-mark-wrap .brand-domain { width: 88px; font-size: .40rem; }
}


/* v34: clean final logo using HTML text, crisp and bündig */
.brand-mark-wrap-final {
  display: grid !important;
  justify-items: start !important;
  gap: 0 !important;
}
.rb-mark-final {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
}
.rb-mark-final .rb-mark-top {
  display: block;
  width: max-content;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .78;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(242,239,236,.86);
  text-shadow: 0 0 0 rgba(242,239,236,.02);
}
.rb-mark-final .rb-mark-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  margin-top: 1px;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-weight: 900;
  line-height: .92;
  letter-spacing: 0;
  color: #f2efec;
  white-space: nowrap;
}
.rb-mark-final .rb-mark-bottom span {
  display: block;
  flex: 0 0 auto;
}
.rb-mark-header-final {
  min-width: 122px;
}
.rb-mark-header-final .rb-mark-top {
  font-size: 2.68rem;
}
.rb-mark-header-final .rb-mark-bottom {
  font-size: .98rem;
}
.brand-mark-wrap-final .brand-domain {
  width: auto !important;
  margin-top: 2px !important;
  text-align: left !important;
  font-size: .49rem;
  letter-spacing: .10em;
}
.hero-mark-final-wrap {
  display: block;
  width: max-content;
  margin: 8px 0 4px;
}
.rb-mark-hero-final {
  min-width: 250px;
}
.rb-mark-hero-final .rb-mark-top {
  font-size: clamp(7rem, 16vw, 12.2rem);
  -webkit-text-stroke: 2px rgba(242,239,236,.88);
}
.rb-mark-hero-final .rb-mark-bottom {
  font-size: clamp(1.66rem, 3vw, 2.45rem);
  margin-top: 2px;
}
.hero-side .side-domain {
  margin: 1px 0 11px 0 !important;
  display: block;
  width: max-content;
  text-align: left;
}
@media (max-width: 560px) {
  .rb-mark-header-final { min-width: 98px; }
  .rb-mark-header-final .rb-mark-top { font-size: 2.06rem; }
  .rb-mark-header-final .rb-mark-bottom { font-size: .78rem; }
  .brand-mark-wrap-final .brand-domain { font-size: .42rem; }
  .rb-mark-hero-final { min-width: 205px; }
  .rb-mark-hero-final .rb-mark-top { font-size: clamp(5.1rem, 18vw, 8.6rem); }
  .rb-mark-hero-final .rb-mark-bottom { font-size: clamp(1.18rem, 5vw, 1.64rem); }
}
@media (max-width: 410px) {
  .rb-mark-header-final { min-width: 88px; }
  .rb-mark-header-final .rb-mark-top { font-size: 1.84rem; }
  .rb-mark-header-final .rb-mark-bottom { font-size: .69rem; }
}


/* v35: cleaner hero mark, thinner outline, no duplicate kicker */
.rb-mark-final .rb-mark-top {
  -webkit-text-stroke: .85px rgba(242,239,236,.78) !important;
}
.rb-mark-hero-final .rb-mark-top {
  -webkit-text-stroke: 1.15px rgba(242,239,236,.80) !important;
}
.hero-side {
  border-left-color: rgba(255,255,255,.085) !important;
}


/* v36: true vertical edge alignment, thinner lines, small gap, crisp header */
.rb-mark-final {
  width: var(--rb-mark-width) !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.rb-mark-final .rb-mark-top {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  letter-spacing: 0 !important;
  line-height: .78 !important;
  text-align: left !important;
}
.rb-mark-final .rb-mark-top > span {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
.rb-mark-final .rb-mark-top > span:first-child { transform: translateX(-.018em); }
.rb-mark-final .rb-mark-top > span:last-child  { transform: translateX(.018em); }
.rb-mark-final .rb-mark-bottom {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-top: 5px !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
  line-height: .9 !important;
}
.rb-mark-final .rb-mark-bottom > span:first-child { transform: translateX(-.012em); }
.rb-mark-final .rb-mark-bottom > span:last-child  { transform: translateX(.012em); }

/* Large right-hand mark */
.rb-mark-hero-final {
  --rb-mark-width: clamp(238px, 19.2vw, 315px);
}
.rb-mark-hero-final .rb-mark-top {
  font-size: clamp(7rem, 15.2vw, 11.8rem) !important;
  -webkit-text-stroke: .62px rgba(242,239,236,.90) !important;
  text-shadow: none !important;
}
.rb-mark-hero-final .rb-mark-bottom {
  font-size: clamp(1.48rem, 2.65vw, 2.18rem) !important;
}

/* Small top-left mark: slightly larger, sharper and with an ultra-fine outline. */
.rb-mark-header-final {
  --rb-mark-width: 124px;
}
.rb-mark-header-final .rb-mark-top {
  font-size: 2.82rem !important;
  -webkit-text-stroke: .42px rgba(246,244,241,.98) !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.rb-mark-header-final .rb-mark-bottom {
  margin-top: 2px !important;
  font-size: .91rem !important;
  color: rgba(246,244,241,.98) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.brand-mark-wrap-final .brand-domain {
  width: var(--rb-mark-width, 124px) !important;
  margin-top: 3px !important;
  text-align: left !important;
  opacity: .72;
}
.hero-mark-final-wrap {
  margin-top: 8px !important;
}
.hero-side .side-domain {
  margin-top: 3px !important;
}

@media (max-width: 560px) {
  .rb-mark-header-final { --rb-mark-width: 102px; }
  .rb-mark-header-final .rb-mark-top { font-size: 2.26rem !important; }
  .rb-mark-header-final .rb-mark-bottom { font-size: .75rem !important; margin-top: 2px !important; }
  .rb-mark-hero-final { --rb-mark-width: min(58vw, 245px); }
  .rb-mark-hero-final .rb-mark-top { font-size: clamp(5.1rem, 18vw, 8.2rem) !important; }
  .rb-mark-hero-final .rb-mark-bottom { font-size: clamp(1.12rem, 4.6vw, 1.55rem) !important; margin-top: 4px !important; }
}
@media (max-width: 410px) {
  .rb-mark-header-final { --rb-mark-width: 94px; }
  .rb-mark-header-final .rb-mark-top { font-size: 2.02rem !important; }
  .rb-mark-header-final .rb-mark-bottom { font-size: .68rem !important; }
}


/* v39: RB slightly closer together / larger so the mark feels more natural */
.rb-mark-hero-final {
  --rb-mark-width: clamp(226px, 18.4vw, 300px) !important;
}
.rb-mark-hero-final .rb-mark-top {
  font-size: clamp(7.2rem, 15.6vw, 12rem) !important;
}
.rb-mark-header-final {
  --rb-mark-width: 118px !important;
}
.rb-mark-header-final .rb-mark-top {
  font-size: 2.9rem !important;
}
.brand-mark-wrap-final .brand-domain {
  width: var(--rb-mark-width, 118px) !important;
}
@media (max-width: 560px) {
  .rb-mark-header-final { --rb-mark-width: 98px !important; }
  .rb-mark-header-final .rb-mark-top { font-size: 2.32rem !important; }
  .rb-mark-hero-final { --rb-mark-width: min(56vw, 236px) !important; }
  .rb-mark-hero-final .rb-mark-top { font-size: clamp(5.25rem, 18.4vw, 8.35rem) !important; }
}
@media (max-width: 410px) {
  .rb-mark-header-final { --rb-mark-width: 90px !important; }
  .rb-mark-header-final .rb-mark-top { font-size: 2.08rem !important; }
}


/* v40: R and B directly next to each other */
.rb-mark-final .rb-mark-top {
  width: max-content !important;
  display: inline-flex !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  gap: 0 !important;
  letter-spacing: 0 !important;
}
.rb-mark-final .rb-mark-top > span {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
.rb-mark-final .rb-mark-top > span + span {
  margin-left: -0.085em !important;
}
.rb-mark-final {
  width: max-content !important;
  align-items: flex-start !important;
}
.rb-mark-final .rb-mark-bottom {
  margin-top: 4px !important;
}
.brand-mark-wrap-final,
.hero-mark-final-wrap {
  width: max-content !important;
}

/* v41: tiny additional spacing between R and B only */
.rb-mark-final .rb-mark-top > span + span {
  margin-left: -0.025em !important;
}

/* v42: one small step more spacing between R and B only */
.rb-mark-final .rb-mark-top > span + span {
  margin-left: 0.015em !important;
}


/* v43: tiny refinement only — RB slightly bigger, outline thinner, COLLISION optically aligned */
.rb-mark-hero-final .rb-mark-top {
  font-size: clamp(7.45rem, 16.0vw, 12.35rem) !important;
  -webkit-text-stroke: .45px rgba(242,239,236,.92) !important;
}
.rb-mark-header-final .rb-mark-top {
  font-size: 3.02rem !important;
  -webkit-text-stroke: .30px rgba(246,244,241,.98) !important;
}
.rb-mark-final .rb-mark-bottom {
  margin-top: 4px !important;
}
@media (max-width: 560px) {
  .rb-mark-header-final .rb-mark-top {
    font-size: 2.42rem !important;
    -webkit-text-stroke: .28px rgba(246,244,241,.98) !important;
  }
  .rb-mark-hero-final .rb-mark-top {
    font-size: clamp(5.42rem, 18.8vw, 8.6rem) !important;
    -webkit-text-stroke: .42px rgba(242,239,236,.92) !important;
  }
}
@media (max-width: 410px) {
  .rb-mark-header-final .rb-mark-top { font-size: 2.16rem !important; }
}


/* v44: exact logo rectangle — RB defines width, COLLISION locks to the same vertical edges */
.rb-mark-final {
  position: relative !important;
  display: inline-block !important;
  width: max-content !important;
  min-width: 0 !important;
  align-items: initial !important;
  overflow: visible !important;
}
.rb-mark-final .rb-mark-top {
  position: relative !important;
  display: inline-flex !important;
  width: max-content !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
  line-height: .78 !important;
  white-space: nowrap !important;
}
.rb-mark-final .rb-mark-top > span {
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
/* Keep the v42 spacing: a small, natural gap between R and B. */
.rb-mark-final .rb-mark-top > span + span {
  margin-left: .015em !important;
}
.rb-mark-final .rb-mark-bottom {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  transform: none !important;
  box-sizing: border-box !important;
}
.rb-mark-final .rb-mark-bottom > span {
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Large content mark */
.rb-mark-hero-final {
  padding-bottom: 2.35rem !important;
}
.rb-mark-hero-final .rb-mark-top {
  font-size: clamp(7.45rem, 16vw, 12.35rem) !important;
  -webkit-text-stroke: .38px rgba(242,239,236,.93) !important;
  text-shadow: none !important;
}
.rb-mark-hero-final .rb-mark-bottom {
  bottom: 0 !important;
  font-size: clamp(1.48rem, 2.65vw, 2.18rem) !important;
  line-height: .90 !important;
}
.hero-mark-final-wrap {
  display: inline-block !important;
  width: max-content !important;
  margin: 8px 0 4px !important;
}
.hero-side .side-domain {
  margin: 3px 0 11px 0 !important;
}

/* Small top-left mark: same geometry, scaled down and extra crisp. */
.brand-mark-wrap-final {
  display: inline-grid !important;
  grid-template-columns: max-content !important;
  justify-items: start !important;
  width: max-content !important;
  gap: 0 !important;
}
.rb-mark-header-final {
  padding-bottom: 1.05rem !important;
}
.rb-mark-header-final .rb-mark-top {
  font-size: 3.02rem !important;
  -webkit-text-stroke: .22px rgba(248,246,243,.99) !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}
.rb-mark-header-final .rb-mark-bottom {
  bottom: 0 !important;
  font-size: .91rem !important;
  line-height: .92 !important;
  color: rgba(248,246,243,.99) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}
.brand-mark-wrap-final .brand-domain {
  width: 100% !important;
  margin: 3px 0 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

@media (max-width: 560px) {
  .rb-mark-header-final { padding-bottom: .90rem !important; }
  .rb-mark-header-final .rb-mark-top {
    font-size: 2.42rem !important;
    -webkit-text-stroke: .20px rgba(248,246,243,.99) !important;
  }
  .rb-mark-header-final .rb-mark-bottom { font-size: .75rem !important; }
  .rb-mark-hero-final { padding-bottom: 1.80rem !important; }
  .rb-mark-hero-final .rb-mark-top {
    font-size: clamp(5.35rem, 18.6vw, 8.55rem) !important;
    -webkit-text-stroke: .34px rgba(242,239,236,.93) !important;
  }
  .rb-mark-hero-final .rb-mark-bottom {
    font-size: clamp(1.12rem, 4.6vw, 1.55rem) !important;
  }
}
@media (max-width: 410px) {
  .rb-mark-header-final .rb-mark-top { font-size: 2.16rem !important; }
  .rb-mark-header-final .rb-mark-bottom { font-size: .68rem !important; }
}

/* v45: only RB slightly larger; exact COLLISION alignment remains unchanged */
.rb-mark-hero-final .rb-mark-top {
  font-size: clamp(8.05rem, 17.2vw, 13.25rem) !important;
}
.rb-mark-header-final .rb-mark-top {
  font-size: 3.28rem !important;
}
@media (max-width: 560px) {
  .rb-mark-header-final .rb-mark-top {
    font-size: 2.62rem !important;
  }
  .rb-mark-hero-final .rb-mark-top {
    font-size: clamp(5.75rem, 19.6vw, 9.15rem) !important;
  }
}
@media (max-width: 410px) {
  .rb-mark-header-final .rb-mark-top {
    font-size: 2.34rem !important;
  }
}


/* v46: one small step larger RB, ultra-thin outline, visual edge correction */
.rb-mark-hero-final .rb-mark-top {
  font-size: clamp(8.35rem, 17.8vw, 13.7rem) !important;
  -webkit-text-stroke: .25px rgba(242,239,236,.94) !important;
}
.rb-mark-header-final .rb-mark-top {
  font-size: 3.42rem !important;
  -webkit-text-stroke: .14px rgba(248,246,243,.99) !important;
}

/* COLLISION uses exactly the RB box and its visible first/last glyph edges are nudged to the same verticals. */
.rb-mark-final .rb-mark-bottom {
  left: 0 !important;
  width: 100% !important;
  right: auto !important;
  justify-content: space-between !important;
}
.rb-mark-final .rb-mark-bottom > span:first-child {
  transform: translateX(-.018em) !important;
}
.rb-mark-final .rb-mark-bottom > span:last-child {
  transform: translateX(.018em) !important;
}

@media (max-width: 560px) {
  .rb-mark-header-final .rb-mark-top {
    font-size: 2.72rem !important;
    -webkit-text-stroke: .12px rgba(248,246,243,.99) !important;
  }
  .rb-mark-hero-final .rb-mark-top {
    font-size: clamp(5.95rem, 20.1vw, 9.4rem) !important;
    -webkit-text-stroke: .21px rgba(242,239,236,.94) !important;
  }
}
@media (max-width: 410px) {
  .rb-mark-header-final .rb-mark-top {
    font-size: 2.42rem !important;
  }
}


/* v47: exact, unified and more readable RB COLLISION logo */
.rb-mark-final {
  --logo-width: 240px;
  --rb-size: 12.3rem;
  --collision-size: 2.28rem;
  --rb-stroke: .20px;
  width: var(--logo-width) !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.rb-mark-final .rb-mark-top {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  font-family: Impact, "Arial Narrow", sans-serif !important;
  font-size: var(--rb-size) !important;
  font-weight: 900 !important;
  line-height: .78 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
  -webkit-text-stroke: var(--rb-stroke) rgba(246,243,239,.96) !important;
  text-shadow: none !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
}
.rb-mark-final .rb-mark-top > span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
.rb-mark-final .rb-mark-bottom {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-top: 3px !important;
  padding: 0 !important;
  font-family: Impact, "Arial Narrow", sans-serif !important;
  font-size: var(--collision-size) !important;
  font-weight: 900 !important;
  line-height: .88 !important;
  letter-spacing: 0 !important;
  color: rgba(247,244,240,.98) !important;
  text-shadow: none !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
}
.rb-mark-final .rb-mark-bottom > span {
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Visual edge correction so COLLISION starts/ends exactly with the outer RB edges */
.rb-mark-final .rb-mark-bottom > span:first-child { transform: translateX(-.030em) !important; }
.rb-mark-final .rb-mark-bottom > span:last-child  { transform: translateX(.030em) !important; }

/* Header logo uses the exact same geometry, only smaller */
.rb-mark-header-final {
  --logo-width: 78px;
  --rb-size: 4.15rem;
  --collision-size: 1.00rem;
  --rb-stroke: .14px;
}
.brand-mark-wrap-final {
  display: grid !important;
  justify-items: start !important;
  gap: 1px !important;
}
.brand-mark-wrap-final .brand-domain {
  width: var(--logo-width) !important;
  margin-top: 1px !important;
  font-size: .46rem !important;
  line-height: 1 !important;
  text-align: left !important;
  letter-spacing: .06em !important;
  opacity: .76 !important;
}

/* Content logo */
.rb-mark-hero-final {
  --logo-width: 248px;
  --rb-size: 12.95rem;
  --collision-size: 2.48rem;
  --rb-stroke: .17px;
}
.hero-mark-final-wrap {
  width: var(--logo-width) !important;
  margin: 8px 0 2px !important;
}
.hero-side .side-domain {
  width: var(--logo-width) !important;
  margin: 2px 0 10px 0 !important;
  text-align: left !important;
}

@media (max-width: 560px) {
  .rb-mark-header-final {
    --logo-width: 66px;
    --rb-size: 3.3rem;
    --collision-size: .84rem;
  }
  .rb-mark-hero-final {
    --logo-width: 205px;
    --rb-size: 10.2rem;
    --collision-size: 1.98rem;
  }
  .brand-mark-wrap-final .brand-domain { font-size: .38rem !important; }
}
@media (max-width: 410px) {
  .rb-mark-header-final {
    --logo-width: 60px;
    --rb-size: 3rem;
    --collision-size: .76rem;
  }
  .rb-mark-hero-final {
    --logo-width: 188px;
    --rb-size: 9.25rem;
    --collision-size: 1.8rem;
  }
}


/* v48: clean unified SVG logo */
.brand-mark-wrap-svg {
  display: grid !important;
  justify-items: start !important;
  gap: 1px !important;
}
.brand-logo-svg {
  display: block;
  width: 74px;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.brand-mark-wrap-svg .brand-domain {
  width: 74px !important;
  margin-top: 1px !important;
  font-size: .43rem !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-align: left !important;
  opacity: .76 !important;
}
.hero-mark-svg-wrap {
  display: block;
  width: 250px;
  margin: 8px 0 4px !important;
}
.hero-logo-svg {
  display: block;
  width: 250px;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.hero-side .side-domain {
  width: 250px !important;
  margin: 2px 0 10px 0 !important;
  text-align: left !important;
}
@media (max-width: 560px) {
  .brand-logo-svg { width: 62px; }
  .brand-mark-wrap-svg .brand-domain { width: 62px !important; font-size: .37rem !important; }
  .hero-mark-svg-wrap, .hero-logo-svg { width: 206px; }
  .hero-side .side-domain { width: 206px !important; }
}
@media (max-width: 410px) {
  .brand-logo-svg { width: 56px; }
  .brand-mark-wrap-svg .brand-domain { width: 56px !important; }
  .hero-mark-svg-wrap, .hero-logo-svg { width: 188px; }
  .hero-side .side-domain { width: 188px !important; }
}


/* v50: AB-style compact logo, very thin outline */
.brand-logo-svg {
  width: 78px !important;
  height: auto !important;
}
.brand-mark-wrap-svg .brand-domain {
  width: 78px !important;
  margin-top: 2px !important;
  font-size: .43rem !important;
  letter-spacing: .055em !important;
}
.hero-mark-svg-wrap,
.hero-logo-svg {
  width: 258px !important;
}
.hero-side .side-domain {
  width: 258px !important;
  margin-top: 3px !important;
}
@media (max-width: 560px) {
  .brand-logo-svg { width: 66px !important; }
  .brand-mark-wrap-svg .brand-domain { width: 66px !important; font-size: .37rem !important; }
  .hero-mark-svg-wrap, .hero-logo-svg { width: 214px !important; }
  .hero-side .side-domain { width: 214px !important; }
}
@media (max-width: 410px) {
  .brand-logo-svg { width: 60px !important; }
  .brand-mark-wrap-svg .brand-domain { width: 60px !important; }
  .hero-mark-svg-wrap, .hero-logo-svg { width: 194px !important; }
  .hero-side .side-domain { width: 194px !important; }
}


/* v51: hero logo larger; domain clearly and directly underneath */
.hero-mark-svg-wrap {
  display: block !important;
  width: 310px !important;
  margin: 8px 0 0 !important;
}
.hero-logo-svg {
  display: block !important;
  width: 310px !important;
  height: auto !important;
}
.hero-side .side-domain {
  display: block !important;
  width: 310px !important;
  margin: 2px 0 12px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 1 !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
}

/* keep the top-left domain clearly below its logo too */
.brand-mark-wrap-svg {
  display: inline-grid !important;
  justify-items: start !important;
  align-content: start !important;
  gap: 0 !important;
}
.brand-mark-wrap-svg .brand-domain {
  display: block !important;
  position: static !important;
  margin: 2px 0 0 0 !important;
  line-height: 1 !important;
}

@media (max-width: 560px) {
  .hero-mark-svg-wrap,
  .hero-logo-svg { width: 250px !important; }
  .hero-side .side-domain { width: 250px !important; }
}
@media (max-width: 410px) {
  .hero-mark-svg-wrap,
  .hero-logo-svg { width: 222px !important; }
  .hero-side .side-domain { width: 222px !important; }
}


/* v52: domain and tagline live directly under the hero logo again */
.hero-side {
  display: block !important;
}
.hero-mark-svg-wrap {
  display: block !important;
  width: 310px !important;
  margin: 8px 0 0 !important;
}
.hero-logo-svg {
  display: block !important;
  width: 310px !important;
  height: auto !important;
}
.hero-side .side-domain {
  display: block !important;
  position: static !important;
  width: 310px !important;
  margin: 3px 0 8px 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  text-align: left !important;
  transform: none !important;
}
.hero-side .side-note {
  display: block !important;
  position: static !important;
  max-width: 310px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  transform: none !important;
}
@media (max-width: 560px) {
  .hero-mark-svg-wrap,
  .hero-logo-svg,
  .hero-side .side-domain { width: 250px !important; }
  .hero-side .side-note { max-width: 250px !important; }
}
@media (max-width: 410px) {
  .hero-mark-svg-wrap,
  .hero-logo-svg,
  .hero-side .side-domain { width: 222px !important; }
  .hero-side .side-note { max-width: 222px !important; }
}


/* v54: RB larger, outline about half as thick */
.hero-logo-svg {
  width: 340px !important;
}
.hero-mark-svg-wrap {
  width: 340px !important;
}
.hero-side .side-domain {
  width: 340px !important;
}

.brand-logo-svg {
  width: 82px !important;
}
.brand-mark-wrap-svg .brand-domain {
  width: 82px !important;
}

/* SVG logo outline thinning */
.rb-logo-outline,
.outline {
  stroke-width: 3 !important;
}

/* keep the logo hollow */
.rb-logo-outline,
.outline {
  fill: none !important;
}

@media (max-width: 560px) {
  .hero-logo-svg,
  .hero-mark-svg-wrap { width: 270px !important; }
  .hero-side .side-domain { width: 270px !important; }

  .brand-logo-svg { width: 68px !important; }
  .brand-mark-wrap-svg .brand-domain { width: 68px !important; }
}

@media (max-width: 410px) {
  .hero-logo-svg,
  .hero-mark-svg-wrap { width: 238px !important; }
  .hero-side .side-domain { width: 238px !important; }

  .brand-logo-svg { width: 62px !important; }
  .brand-mark-wrap-svg .brand-domain { width: 62px !important; }
}


/* v60: both RB COLLISION logos at 70% opacity */
.brand-logo-svg,
.hero-logo-svg {
  opacity: .70 !important;
}


/* v61: mobile background stays visually stable while scrolling; logo hairline is uniform */
.brand-logo-svg,
.hero-logo-svg {
  image-rendering: auto !important;
}

@media (max-width: 560px) {
  .page-background {
    inset: 0 0 auto 0;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    height: 100lvh;
    min-height: 100lvh;
    background-position: center calc(var(--header) + 42px);
    background-size: 118% auto;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

@media (max-width: 410px) {
  .page-background {
    background-position: center calc(var(--header) + 38px);
  }
}


/* v62: unified logo sizing across all devices + stable mobile background framing */
:root {
  --rbc-header-logo-width-final: clamp(62px, 7vw, 82px);
  --rbc-hero-logo-width-final: clamp(238px, 31vw, 340px);
}

/* keep both SVG logos visually identical on all end devices */
.brand-mark-wrap-svg {
  display: inline-grid !important;
  justify-items: start !important;
  align-content: start !important;
  gap: 0 !important;
}
.brand-logo-svg {
  display: block !important;
  width: var(--rbc-header-logo-width-final) !important;
  max-width: 100% !important;
  height: auto !important;
  flex: 0 0 auto !important;
  image-rendering: auto !important;
}
.brand-mark-wrap-svg .brand-domain {
  width: var(--rbc-header-logo-width-final) !important;
  margin-top: 2px !important;
  line-height: 1 !important;
}

.hero-side {
  display: block !important;
}
.hero-mark-svg-wrap,
.hero-logo-svg {
  display: block !important;
  width: var(--rbc-hero-logo-width-final) !important;
  max-width: 100% !important;
  height: auto !important;
  flex: 0 0 auto !important;
  image-rendering: auto !important;
}
.hero-mark-svg-wrap {
  margin: 8px 0 0 !important;
}
.hero-side .side-domain {
  display: block !important;
  width: var(--rbc-hero-logo-width-final) !important;
  max-width: 100% !important;
  margin: 3px 0 10px 0 !important;
  line-height: 1.05 !important;
  text-align: left !important;
}
.hero-side .side-note {
  max-width: var(--rbc-hero-logo-width-final) !important;
}

/* mobile: background image stays lower/more centered and does not jump upward while scrolling */
@media (max-width: 680px) {
  .page-background {
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    background-position: center calc(var(--header) + 56px) !important;
    background-size: 128% auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
}

@media (max-width: 410px) {
  .page-background {
    background-position: center calc(var(--header) + 52px) !important;
    background-size: 134% auto !important;
  }
}


/* v63: one simple single-line logo on all devices, no duplicates */
.brand-logo-svg,
.hero-logo-svg {
  opacity: 1 !important;
  filter: none !important;
  image-rendering: auto !important;
}
:root {
  --rbc-header-logo-width-clean: 72px;
  --rbc-hero-logo-width-clean: 300px;
}
.brand-mark-wrap-svg {
  display: inline-grid !important;
  justify-items: start !important;
  align-content: start !important;
  gap: 0 !important;
}
.brand-logo-svg {
  display: block !important;
  width: var(--rbc-header-logo-width-clean) !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.brand-mark-wrap-svg .brand-domain {
  width: var(--rbc-header-logo-width-clean) !important;
  margin: 2px 0 0 0 !important;
  font-size: .42rem !important;
  line-height: 1 !important;
  letter-spacing: .055em !important;
}
.hero-side { display: block !important; }
.hero-mark-svg-wrap {
  display: block !important;
  width: var(--rbc-hero-logo-width-clean) !important;
  max-width: 100% !important;
  margin: 8px 0 0 !important;
}
.hero-logo-svg {
  display: block !important;
  width: var(--rbc-hero-logo-width-clean) !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hero-side .side-domain {
  display: block !important;
  width: var(--rbc-hero-logo-width-clean) !important;
  max-width: 100% !important;
  margin: 4px 0 10px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 1.05 !important;
}
.hero-side .side-note { max-width: var(--rbc-hero-logo-width-clean) !important; }
.rb-mark-final,
.rb-mark-header-final,
.rb-mark-hero-final,
.hero-mark-final-wrap,
.hero-mark-stacked,
.hero-mark-main,
.hero-mark-sub,
.rb-mark-hero,
.brand-rbc-wrap,
.brand-mark-wrap-final { display: none !important; }
@media (max-width: 680px) {
  :root {
    --rbc-header-logo-width-clean: 64px;
    --rbc-hero-logo-width-clean: 250px;
  }
  .page-background {
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    background-position: center calc(var(--header) + 60px) !important;
    background-size: 130% auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
}
@media (max-width: 410px) {
  :root {
    --rbc-header-logo-width-clean: 58px;
    --rbc-hero-logo-width-clean: 226px;
  }
  .page-background {
    background-position: center calc(var(--header) + 56px) !important;
    background-size: 136% auto !important;
  }
}


/* v64: mobile width stays fixed, no horizontal zoom/overflow while scrolling */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}
main,
.site-header,
.site-footer,
.section-shell,
.hero,
.hero-copy,
.hero-side,
.hero-actions,
.ticker-wrap,
.ticker,
.brand,
.brand-lockup {
  min-width: 0;
  max-width: 100%;
}
.page-background,
.page-noise,
body::after {
  overflow: clip;
}

@media (max-width: 680px) {
  html,
  body {
    min-width: 100%;
  }
  body {
    position: relative;
  }
  .section-shell {
    width: min(calc(100% - 32px), var(--max)) !important;
    max-width: calc(100% - 32px) !important;
  }
  .site-header {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow-x: clip !important;
  }
  .hero,
  .hero-copy,
  .hero-side,
  .ticker-wrap,
  .tease,
  .retro-promise,
  .location-card,
  .about-card,
  .flyer-frame,
  .cta-panel {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }
  .hero-actions {
    width: 100% !important;
    gap: 12px !important;
  }
  .hero-actions .button,
  .button.button-large {
    width: 100% !important;
    max-width: 100% !important;
  }
  .ticker {
    width: max-content;
    min-width: 100%;
  }
}


/* v65: richer event ticker + final unified RB COLLISION lockups */
.ticker {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  animation-duration: 104s !important;
  will-change: transform;
}

/* Both visible RB COLLISION marks use the exact same source SVG and geometry. */
.brand-mark-wrap-svg,
.hero-mark-svg-wrap {
  line-height: 0 !important;
}
.brand-logo-svg,
.hero-logo-svg {
  display: block !important;
  height: auto !important;
  aspect-ratio: 260 / 190 !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
  filter: none !important;
  image-rendering: auto !important;
}
.brand-logo-svg {
  width: clamp(64px, 6.2vw, 76px) !important;
}
.brand-mark-wrap-svg .brand-domain {
  width: clamp(64px, 6.2vw, 76px) !important;
  margin-top: 4px !important;
  line-height: 1 !important;
}
.hero-mark-svg-wrap,
.hero-logo-svg,
.hero-side .side-domain {
  width: clamp(245px, 30vw, 320px) !important;
  max-width: 100% !important;
}
.hero-mark-svg-wrap {
  margin: 8px 0 0 !important;
}
.hero-side .side-domain {
  margin: 6px 0 12px !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  text-align: left !important;
}
.hero-side .side-note {
  max-width: clamp(245px, 30vw, 320px) !important;
}

/* Footer wordmark: RB red, COLLISION white, .COM white at 30% opacity. */
.site-footer .footer-domain {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
  width: fit-content !important;
  font-size: clamp(1.02rem, 1.35vw, 1.28rem) !important;
  line-height: 1 !important;
  letter-spacing: .11em !important;
  opacity: 1 !important;
}
.site-footer .footer-domain-rb {
  color: rgb(239,45,37) !important;
  opacity: 1 !important;
}
.site-footer .footer-domain-collision {
  color: rgb(244,240,235) !important;
  opacity: 1 !important;
}
.site-footer .footer-domain-dot {
  color: rgb(244,240,235) !important;
  opacity: .30 !important;
}

@media (max-width: 680px) {
  .brand-logo-svg {
    width: 64px !important;
  }
  .brand-mark-wrap-svg .brand-domain {
    width: 64px !important;
  }
  .hero-mark-svg-wrap,
  .hero-logo-svg,
  .hero-side .side-domain {
    width: min(250px, 76vw) !important;
  }
  .hero-side .side-note {
    max-width: min(250px, 76vw) !important;
  }
  .ticker {
    animation-duration: 104s !important;
  }
}

@media (max-width: 410px) {
  .brand-logo-svg {
    width: 58px !important;
  }
  .brand-mark-wrap-svg .brand-domain {
    width: 58px !important;
  }
  .hero-mark-svg-wrap,
  .hero-logo-svg,
  .hero-side .side-domain {
    width: min(226px, 74vw) !important;
  }
  .hero-side .side-note {
    max-width: min(226px, 74vw) !important;
  }
}


/* v75: Videos 40% Opacity, 1px roter Border; Eventbild ebenfalls 1px rot */
.collision-video-wrap,
.closing-video-wrap {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-width: 0;
}
.collision-video-wrap {
  margin-top: clamp(34px, 4.6vw, 58px);
}
.closing-video-wrap {
  margin-top: 0;
  margin-bottom: 30px;
}

/* Same visual language as .flyer-frame: dark panel, fine border, soft red ambience. */
.collision-video-frame,
.closing-video-frame {
  position: relative;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid rgba(197,31,31,.92);
  background: #0c0c0c;
  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 80px rgba(197,31,31,.16);
  max-width: calc(100% - 32px);
  isolation: isolate;
}
.collision-video-frame {
  width: min(320px, 34vw);
  transform: rotate(-2.2deg);
}
.closing-video-frame {
  width: min(250px, 27vw);
  transform: rotate(1.5deg);
}
.collision-video-light,
.closing-video-light {
  position: absolute;
  z-index: 0;
  inset: -34px;
  background: radial-gradient(circle, rgba(197,31,31,.12), transparent 62%);
  filter: blur(14px);
  pointer-events: none;
}
.collision-loop-video,
.closing-loop-video {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: .40;
  background: #080808;
  object-fit: contain;
}

@media (max-width: 700px) {
  /* Mobile visibility safeguard: content/logo must never stay hidden by reveal JS. */
  .reveal,
  .reveal[data-delay="1"],
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .collision-video-wrap,
  .closing-video-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px;
    padding-right: 8px;
    overflow: visible;
  }
  .collision-video-wrap {
    margin-top: 30px;
  }
  .closing-video-wrap {
    margin-bottom: 24px;
  }
  .collision-video-frame,
  .closing-video-frame {
    padding: 7px;
    max-width: calc(100vw - 64px) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.48), 0 0 48px rgba(197,31,31,.14);
  }
  .collision-video-frame {
    width: min(248px, 70vw) !important;
    transform: rotate(-1.2deg);
  }
  .closing-video-frame {
    width: min(196px, 54vw) !important;
    transform: rotate(1deg);
  }
  .collision-video-light,
  .closing-video-light {
    inset: -22px;
    filter: blur(12px);
  }
  .collision-loop-video,
  .closing-loop-video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    opacity: .40 !important;
  }
}

@media (max-width: 410px) {
  .collision-video-frame {
    width: min(224px, 66vw) !important;
    max-width: calc(100vw - 58px) !important;
  }
  .closing-video-frame {
    width: min(176px, 50vw) !important;
    max-width: calc(100vw - 58px) !important;
  }
}


/* v73: smooth eye-background -> normal-background handoff when music ends */
.page-background-eyes.is-audio-ending {
  animation: none !important;
  opacity: var(--rbc-eyes-end-opacity, 0) !important;
  transition: opacity 3.2s cubic-bezier(.22, .61, .36, 1) !important;
  will-change: opacity;
}
.page-background-eyes.is-audio-ending.is-fading-out {
  opacity: 0 !important;
}

/* v76: mobile fix for HINTER RB COLLISION / club section overflow */
@media (max-width: 560px) {
  .club-section,
  .club-section > div {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .club-section .eyebrow,
  .club-section h2,
  .club-section p:not(.eyebrow) {
    max-width: 100%;
    box-sizing: border-box;
  }

  .club-section h2.club-brand-heading {
    font-size: clamp(2.35rem, 11.5vw, 3.65rem) !important;
    line-height: .94;
    overflow-wrap: normal;
    word-break: normal;
  }

  .club-brand-heading .rb-club-inline {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
    white-space: normal !important;
    row-gap: 0;
    column-gap: .24em;
  }

  .club-brand-heading .rb-word,
  .club-brand-heading .rb-ev {
    white-space: nowrap;
  }

  .club-section p:not(.eyebrow) {
    width: 100%;
    overflow-wrap: break-word;
  }
}

@media (max-width: 360px) {
  .club-section h2.club-brand-heading {
    font-size: clamp(2.15rem, 10.8vw, 2.8rem) !important;
  }
}