:root {
  /* Adjustables for the secondary banner */
  --banner-secondary-bg: #c01925;
  --banner-secondary-text: #ffffff;
  --banner-secondary-subtext: #f2f2f2;

  /* Typography */
  --body-font-family: "Smooch Sans", "Montserrat", "Segoe UI", sans-serif;

  /* Video reel colors */
  --reel-bg: #121113;
  --reel-text: #ffffff;
  --reel-accent: rgba(255, 255, 255, 0.72);

  /* Hero marquee text */
  --marquee-font-family: "Smooch Sans", "Montserrat", "Segoe UI", sans-serif;
  --marquee-font-size: 100px;
  --marquee-font-weight: 400;

  /* Secondary banner typography (sections 2 & 3) */
  --banner-title-font-size: clamp(32px, 4vw, 52px);
  --banner-title-font-weight: 600;
  --banner-title-font-size-mobile: clamp(34px, 11vw, 48px);
  --banner-subtext-font-size: clamp(16px, 2vw, 22px);
  --banner-subtext-font-weight: 500;
  --banner-subtext-font-size-mobile: clamp(16px, 4vw, 20px);

  /* Scrollbar */
  --scrollbar-thumb: rgba(128, 128, 128, 0.65);
  --scrollbar-thumb-hover: rgba(128, 128, 128, 0.85);
  --scrollbar-track: transparent;
  --scrollbar-width: 6px;
}

.marquee {
  /* Update these lines to change the running text appearance */
  font-family: var(--marquee-font-family);
  font-size: var(--marquee-font-size);
  font-weight: var(--marquee-font-weight);
}

.smooch-sans {
  font-family: "Smooch Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-30px); }
}