#fw-section-custom-html-f4ce660f-3149-4baf-8941-8f2294041ea5 {

  /* ------- MOBILE HEADER OVERLAP FIX (no JS) ------- */
  :root { --hdr: 88px; } /* adjust if your header is taller/shorter */
  .vo-hero-text{margin-top:200px; }
  /* Make the hero taller and push it down on mobile */
  @media (max-width: 900px){
    .vo-hero { 
      margin-top: var(50px) !important;              /* start the section below the fixed header */
      border-radius: 0px;
    }
    .vo-hero::before{ 
      padding-top: 78% !important;
      margin-top: 200px;
      /* taller hero so text + players fit */
    }
    /* Start the content BELOW the header line, not at the very top of the hero */
    .vo-hero-content{
      position: absolute;
      left: 0; right: 0; bottom: 0; top: var(--hdr) !important;
      padding: 16px 20px 20px !important;
    }
    /* Type scales down a bit on small screens */
    .vo-name{ font-size: clamp(28px, 8vw, 34px) !important; }
    .vo-tagline{ font-size: clamp(14px, 4vw, 18px) !important; }
    .vo-blurb{ font-size: 15px !important; }
  }

  /* Tiny phones: bump the clearance slightly more */
  @media (max-width: 480px){
    :root { --hdr: 96px; }            /* if your header is chunky on tiny screens */
    .vo-hero::before{ padding-top: 84% !important; }
    .vo-hero-text{margin-top:800px; }
  }

  /* Anchor scrolling won’t hide the hero under the header */
  .vo-hero{ scroll-margin-top: calc(var(--hdr) + 12px); }
}
#fw-section-custom-html-e310a0ee-e80f-48ca-a47e-26118128d57a {
--color-primary: #FFFFFF;
--color-primary-rgb: 255, 255, 255;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #FFFFFF;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #FFFFFF;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);

}