/* =========================================================
       0) Visibility rules
    ========================================================= */
    @media (max-width: 991px){
      #vimeo-showcase{ display:none !important; }
    }

    /* =========================================================
       1) Section layout + breakout
    ========================================================= */
    #vimeo-showcase{
      --vs-accent: var(--accent-color, #7D9B00);

      position: relative;
      overflow: hidden;
      padding: 0;
      color: #fff;
      padding-bottom: clamp(1.5rem, 3vw, 3rem);
    }

    #vimeo-showcase .container{
      position: relative;
      z-index: 3;
      margin-top: clamp(1.25rem, 2.8vw, 2rem);
      margin-bottom: 0;
    }

   #vimeo-showcase .showcase-bleed{
  width: min(100vw, 1440px);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
  margin-top: .6rem;
}

    @media (min-width: 992px){
      #vimeo-showcase .showcase-bleed{
        padding-inline: clamp(1rem, 3vw, 2.25rem);
        box-sizing: border-box;
      }
    }

    /* =========================================================
       2) 16:9 stage sizing
    ========================================================= */
    #vimeo-showcase .stage{
      width: 100%;
      margin: 0;

      height: min(90vh, 56.25vw);
      min-height: 460px;
      max-height: 860px;

      position: relative;
      overflow: hidden;
      background: #000;
      isolation: isolate;
      border-radius: 18px;
    }

    /* =========================================================
       3) Media layers
    ========================================================= */
    #vimeo-showcase .stage-media{
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 0;
    }

    /* Base iframe style must NOT fight JS */
    #vimeo-showcase iframe.stage-embed{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      pointer-events: none;
      max-width: none;
      max-height: none;
      transform: none;
      margin: 0;
    }

    #vimeo-showcase .embed-poster{
      position: absolute;
      inset: 0;
      z-index: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 1;
      transition: opacity 360ms ease;
      pointer-events: none;
    }

    /* =========================================================
       4) Overlay
    ========================================================= */
    #vimeo-showcase .stage-overlay{
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        radial-gradient(1200px 700px at 30% 80%, rgba(0,0,0,.55), transparent 60%),
        linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.18) 55%, rgba(0,0,0,.10));
      pointer-events: none;
    }

    #vimeo-showcase .stage.is-playing .stage-overlay{
      background:
        radial-gradient(1200px 700px at 30% 80%, rgba(0,0,0,.38), transparent 60%),
        linear-gradient(to top, rgba(0,0,0,.50), rgba(0,0,0,.16) 55%, rgba(0,0,0,.08));
    }

    #vimeo-showcase .is-loading .stage-overlay{
      background:
        radial-gradient(1200px 700px at 30% 80%, rgba(0,0,0,.62), transparent 60%),
        linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.22) 55%, rgba(0,0,0,.10));
    }

    /* =========================================================
       5) Content layout
    ========================================================= */
    #vimeo-showcase .stage-content{
      position: relative;
      z-index: 3;
      padding: clamp(1.25rem, 3vw, 2.25rem);
      display: grid;
      gap: .9rem;
      align-content: end;
      height: 100%;
      pointer-events: auto;
    }

    #vimeo-showcase .kicker{
      display: inline-flex;
      gap: .5rem;
      align-items: center;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-size: .85rem;
      opacity: .92;
      margin: 0 0 .25rem 0;
    }

    #vimeo-showcase .title{
      font-family: "Gloock", Georgia, "Times New Roman", serif;
      font-size: clamp(1.65rem, 2.2vw + 1rem, 2.75rem);
      line-height: 1.08;
      margin: 0 0 .35rem 0;
      text-wrap: balance;
      color: #fff;
    }

    #vimeo-showcase .text{
      font-size: clamp(1.05rem, .75vw + .95rem, 1.35rem);
      line-height: 1.55;
      margin: 0;
      color: rgba(255,255,255,.94);
      max-width: 62ch;
    }

    /* =========================================================
       6) Glass copy panel (only around text)
    ========================================================= */
    #vimeo-showcase .copy-glass{
      display: inline-block;
      width: fit-content;
      max-width: min(72ch, calc(100% - 2rem));
      padding: clamp(0.9rem, 2vw, 1.25rem);
      border-radius: 16px;

      background: rgba(12, 18, 22, 0.42);
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow: 0 18px 50px rgba(0,0,0,0.28);

      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      transition: opacity 1200ms ease, transform 1200ms ease;
      will-change: opacity, transform;
    }

    #vimeo-showcase .copy-glass.is-faded{
      opacity: 0;
      transform: translateY(6px);
      pointer-events: none;
    }

    /* =========================================================
       7) Buttons
    ========================================================= */
    #vimeo-showcase .actions{
      display: flex;
      gap: .75rem;
      flex-wrap: wrap;
      margin-top: .35rem;
      align-items: center;
    }

    #vimeo-showcase .actions a,
    #vimeo-showcase .actions button{
      appearance: none;
      border: 1px solid rgba(255,255,255,.28);
      background: rgba(255,255,255,.10);
      color: #fff;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: .75rem 1.1rem;
      border-radius: 12px;
      font-weight: 900;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
      cursor: pointer;
    }

    #vimeo-showcase .actions a:hover,
    #vimeo-showcase .actions button:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.16);
      border-color: rgba(255,255,255,.40);
    }

    #vimeo-showcase #vimeoPlayBtn{
      background: #22c55e;
      border-color: rgba(34,197,94,.75);
      color: #fff !important;
    }
    #vimeo-showcase #vimeoPlayBtn:hover{
      background: #16a34a;
      border-color: rgba(22,163,74,.85);
    }
    #vimeo-showcase #vimeoPlayBtn:disabled{
      color: #fff !important;
      opacity: .95;
      filter: brightness(.95);
      cursor: default;
    }

    #vimeo-showcase #vimeoPauseBtn{
      background: #ef4444;
      border-color: rgba(239,68,68,.75);
      color: #fff;
    }
    #vimeo-showcase #vimeoPauseBtn:hover{
      background: #dc2626;
      border-color: rgba(220,38,38,.85);
    }

    #vimeo-showcase #vimeoPlayBtn:focus-visible,
    #vimeo-showcase #vimeoPauseBtn:focus-visible,
    #vimeo-showcase .actions a:focus-visible{
      outline: 3px solid rgba(255,255,255,.65);
      outline-offset: 3px;
    }